Шаблон:Кобра/styles.css: различия между версиями

Материал из ultracity
Перейти к навигации Перейти к поиску
Нет описания правки
Метка: отменено
Нет описания правки
Метка: ручная отмена
 
Строка 1: Строка 1:
/* Компактные стили навигации с горизонтальными надписями */
.center { /* Minerva skin doesn't provide this */
.darkvector-subtitle {
text-align: center;
    text-align: center;
}
    font-size: 1em;
.cobra-banner-image {
    margin: 0.3em 0;
max-width: 100%;
    color: #202122;
height: 100%;
    font-weight: bold;
object-fit: contain;
margin-top: 1vh;
}
.cobra-subtitle {
text-align: center;
}
.cobra-header {
display: flex;
flex-direction:row;
flex-wrap: wrap;
text-align:center; /* noflex */
padding: 5px;
margin-bottom:1em;
}
}


.darkvector-header {
.cobra-header + .cobra-header {
    display: flex;
margin-top: -2em;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    margin: 0.3em auto;
    max-width: 100%;
    background: #f0f0f0;
    padding: 6px;
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
}


.darkvector-tab {
.cobra-header > .cobra-tab {
    flex: 0 0 auto;
display:inline-block; /* noflex */
    min-width: 60px;
flex:1 1 0;
    height: 32px;
align-self: flex-end;
    display: flex;
vertical-align:bottom; /* noflex */
    align-items: center;
text-align:center;
    justify-content: center;
font-size:larger;
    text-align: center;
margin: 5px;
    padding: 0 8px;
    margin: 0;
    background: #ffffff;
    color: #202122;
    border: 1px solid #d0d0d0;
    border-radius: 16px;
    font-size: 0.85em;
    font-weight: bold;
    line-height: 1;
    transition: all 150ms;
    text-decoration: none;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
}
}
 
.cobra-tab > .black-marker {
.darkvector-tab:hover {
visibility: hidden;
    background-color: #f5f5f5;
background-color: #808080;
    transform: translateY(-1px);
height: 0.6em;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
}
 
.cobra-tab.selected > .black-marker {
.darkvector-tab.selected {
visibility: visible;
    background-color: #36c;
    color: #ffffff;
    border-color: #36c;
    transform: translateY(-1px);
    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
}
}
 
@media (max-width:550px) {
.orange-marker {
.cobra-header {
    display: none;
flex-direction:column;
padding:0;
margin-top: 0!important; /* cancels out the sibling styling */
}
.cobra-header > .cobra-tab {
width: 100%;
margin:0;
}
/* At smaller sizes we make the hr the green marker */
.cobra-tab > .black-marker {
display:none;
}
.cobra-tab > p {
margin:0 2vw 0 2vw;
}
.cobra-tab.selected > hr {
background-color: #808080;
height: 5px;
}
}
}
 
@media (min-width:551px) {
/* Адаптация для мобильных */
.cobra-subtitle {
@media (max-width: 550px) {
font-size:155%;
    .darkvector-header {
}
        flex-direction: row;
        padding: 4px;
        gap: 3px;
    }
   
    .darkvector-tab {
        height: 28px;
        min-width: 50px;
        font-size: 0.8em;
        padding: 0 6px;
        border-radius: 14px;
    }
}
}

Текущая версия от 22:14, 24 октября 2025

.center { /* Minerva skin doesn't provide this */
	text-align: center;
}
.cobra-banner-image {
	max-width: 100%;
	height: 100%;
	object-fit: contain;
	margin-top: 1vh;
}
.cobra-subtitle {
	text-align: center;
}
.cobra-header {
	display: flex;
	flex-direction:row;
	flex-wrap: wrap;
	text-align:center; /* noflex */
	padding: 5px;
	margin-bottom:1em;
}

.cobra-header + .cobra-header {
	margin-top: -2em;
}

.cobra-header > .cobra-tab {
	display:inline-block; /* noflex */
	flex:1 1 0;
	align-self: flex-end;
	vertical-align:bottom; /* noflex */
	text-align:center;
	font-size:larger;
	margin: 5px;
}
.cobra-tab > .black-marker {
	visibility: hidden;
	background-color: #808080;
	height: 0.6em;
}
.cobra-tab.selected > .black-marker {
	visibility: visible;
}
@media (max-width:550px) {
	.cobra-header {
		flex-direction:column;
		padding:0;
		margin-top: 0!important; /* cancels out the sibling styling */
	}
	.cobra-header > .cobra-tab {
		width: 100%;
		margin:0;
	}
	/* At smaller sizes we make the hr the green marker */
	.cobra-tab > .black-marker {
		display:none;
	}
	.cobra-tab > p {
		margin:0 2vw 0 2vw;
	}
	.cobra-tab.selected > hr {
		background-color: #808080;
		height: 5px;
	}
}
@media (min-width:551px) {
	.cobra-subtitle {
		font-size:155%;
	}
}