Template:Documentation/styles.css: Difference between revisions

Browse history interactively

← Older edit

@@ Line 1: / Line 1: @@
-/*Documentation*/
 .template-documentation {
      overflow: hidden;
@@ Line 8: / Line 7: @@
 .doctable th.doc-header {
      padding: 1em;
-     background-color: var(--theme-color-2);
+     background-color: var(--background-color-2);
-	border: 1px solid var(--theme-border-color-subtle);
+	border: 1px solid var(--border-color-subtle);
 	border-radius: 10px;
 }
@@ Line 19: / Line 18: @@
 .template-documentation .template-documentation-langs {
-	background-color: #F6F6F6;
+	background-color: var(--background-color-2);
-	background-color: rgba(var(--theme-border-color--rgb, 246,246,246), 0.15);
 	display: flex;
 	flex-wrap: wrap;
@@ Line 51: / Line 49: @@
      border: none;
      border-spacing: 5px;
-}
-.doctable th.doc-header {
-    padding: 15px;
-    background-color: var(--theme-color-1);
 }
@@ Line 64: / Line 57: @@
 .doctable tr.links td a,
 .doctable tr.links td .mw-selflink  {
-     padding: 5px;
+     padding: 0.25em;
      display: block;
      font-size: 1rem;
@@ Line 71: / Line 64: @@
      transition: 0.1s;
      border-radius: 10px;
-     margin-top: 5px
+     margin-top: 0.25em;
-}
+     background-color: var(--background-color-2);
+     color: var(--color-base);
-.doctable tr.links td a {
-     background-color: var(--theme-color-2);
-     color: var(--theme-page-background-color);
      font-weight: 700;
-	background-image: none; /*Hide external link icon */
+    /* hide external link icon */
+    background-image: none;
 }
 .doctable tr.links td a:hover,
 .doctable tr.links td .mw-selflink {
-     background-color: var(--theme-accent-color);
+     background-color: var(--color-accent);
-     color: var(--page-text-color);
+     color: var(--color-accent-text);
-     transition: 0.1s;
+}
+/* Buttons */
+.template-documentation-header #doc_editlinks {
+     color: transparent;
 }
-.skin-theme-clientpref-night .doctable tr.links td a:hover,
+.template-documentation-header #doc_editlinks a {
-.skin-theme-clientpref-night .doctable tr.links td .mw-selflink,
+    color: var(--color-base);
-.skin-theme-clientpref-os .doctable tr.links td a:hover,
+     background-color: var(--background-color-4) !important;
-.skin-theme-clientpref-os .doctable tr.links td .mw-selflink {
+    padding: 2px 8px !important;
-     color: var(--page-background-color);
+    border-radius: 10px !important;
 }
-/* Edits appearence of buttons on Header 8 */
+.template-documentation-header #doc_editlinks a:hover {
-.template-documentation-header #doc_editlinks {
+    text-decoration: none;
-    color: transparent;
+    background-color: var(--background-color-5) !important;
-    /* hide text including [ and ] */
+}
-    a {
-        color: inherit;
-        /* restore link color */
-        color: var(--page-text-color);
-        /* or your normal link color */
-        background-color: var(--theme-color-4) !important;
-        padding: 2px 8px !important;
-        border-radius: 10px !important;
-        transition: ease .15s;
-    }
-    a:hover {
-		text-decoration: none;
-        background-color: var(--theme-color-7) !important;
-        transition: ease .15s;
-		.skin-theme-clientpref-day & {
-			background-color: var(--theme-color-6) !important;
-		}
-    }
-    a:not(:last-child) {
-        margin-right: -5px;
-    }
-    a::before,
+.template-documentation-header #doc_editlinks a:not(:last-child) {
-     a::after {
+     margin-right: -5px;
-        content: '';
-        /* no [ ] before or after */
-    }
 }