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

Следующая правка →

@@ Строка 1: / Строка 1: @@
-.center { /* Minerva skin doesn't provide this */
+/* Компактные стили навигации с горизонтальными надписями */
-	text-align: center;
+.darkvector-subtitle {
+    text-align: center;
+    font-size: 1em;
+    margin: 0.3em 0;
+    color: #202122;
+    font-weight: bold;
 }
-.cobra-banner-image {
-	max-width: 100%;
+.darkvector-header {
-	height: 100%;
+    display: flex;
-	object-fit: contain;
+    flex-wrap: wrap;
-	margin-top: 1vh;
+    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);
 }
-.cobra-subtitle {
-	text-align: center;
+.darkvector-tab {
+    flex: 0 0 auto;
+    min-width: 60px;
+    height: 32px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    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-header {
-	display: flex;
+.darkvector-tab:hover {
-	flex-direction:row;
+    background-color: #f5f5f5;
-	flex-wrap: wrap;
+    transform: translateY(-1px);
-	text-align:center; /* noflex */
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-	padding: 5px;
-	margin-bottom:1em;
 }
-.cobra-header + .cobra-header {
+.darkvector-tab.selected {
-	margin-top: -2em;
+    background-color: #36c;
+    color: #ffffff;
+    border-color: #36c;
+    transform: translateY(-1px);
+    box-shadow: 0 2px 5px rgba(0,0,0,0.15);
 }
-.cobra-header > .cobra-tab {
+.orange-marker {
-	display:inline-block; /* noflex */
+    display: none;
-	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;
+@media (max-width: 550px) {
-	height: 0.6em;
+    .darkvector-header {
-}
+        flex-direction: row;
-.cobra-tab.selected > .black-marker {
+        padding: 4px;
-	visibility: visible;
+        gap: 3px;
-}
+    }
-@media (max-width:550px) {
-	.cobra-header {
+    .darkvector-tab {
-		flex-direction:column;
+        height: 28px;
-		padding:0;
+        min-width: 50px;
-		margin-top: 0!important; /* cancels out the sibling styling */
+        font-size: 0.8em;
-	}
+        padding: 0 6px;
-	.cobra-header > .cobra-tab {
+        border-radius: 14px;
-		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%;
-	}
 }