Change specificity for some rules after the theme overhaul was merged

README.md

@@ -7,7 +7,7 @@
 | Name | Version | Applies To | User CSS |
 |------|---------|------------|----------|
 | Tildes Compact | 1.0.4 | [tildes.net](https://tildes.net) | [Click](https://gitlab.com/Bauke/styles/raw/master/css/tildes-compact/tildes-compact.user.css) |
-| Tildes Dracula | 2.0.9 | [tildes.net](https://tildes.net) | [Click](https://gitlab.com/Bauke/styles/raw/master/css/tildes-dracula/tildes-dracula.user.css) |
+| Tildes Dracula | 2.1.0 | [tildes.net](https://tildes.net) | [Click](https://gitlab.com/Bauke/styles/raw/master/css/tildes-dracula/tildes-dracula.user.css) |
 
 ## Installing
 

css/tildes-dracula/tildes-dracula.css

@@ -523,6 +523,22 @@ body:not(.theme),body.theme-light,body.theme-dark,body.theme-black {
   background-color: #282a36;
 }
 
+body:not(.theme) a,body.theme-light a,body.theme-dark a,body.theme-black a {
+  color: #8be9fd;
+}
+
+body:not(.theme) a:hover,body:not(.theme) a:active,body:not(.theme) a:focus,body.theme-light a:hover,body.theme-light a:active,body.theme-light a:focus,body.theme-dark a:hover,body.theme-dark a:active,body.theme-dark a:focus,body.theme-black a:hover,body.theme-black a:active,body.theme-black a:focus {
+  color: #ff79c6;
+}
+
+body:not(.theme) a:visited,body.theme-light a:visited,body.theme-dark a:visited,body.theme-black a:visited {
+  color: #ff79c6;
+}
+
+body:not(.theme) hr,body.theme-light hr,body.theme-dark hr,body.theme-black hr {
+  border-color: #f8f8f2;
+}
+
 body:not(.theme) main,body:not(.theme) #sidebar,body.theme-light main,body.theme-light #sidebar,body.theme-dark main,body.theme-dark #sidebar,body.theme-black main,body.theme-black #sidebar {
   color: #f8f8f2;
   background-color: #44475a;
@@ -567,22 +583,6 @@ body:not(.theme) tbody tr:nth-of-type(n),body.theme-light tbody tr:nth-of-type(n
   background-color: #282a36;
 }
 
-a {
-  color: #8be9fd;
-}
-
-a:hover,a:active,a:focus {
-  color: #ff79c6;
-}
-
-a:visited {
-  color: #ff79c6;
-}
-
-hr {
-  border-color: #f8f8f2;
-}
-
 body:not(.theme) .listing-options button,body.theme-light .listing-options button,body.theme-black .listing-options button,body.theme-dark .listing-options button {
   border: none;
 }
@@ -612,6 +612,7 @@ body:not(.theme) .tab.tab-listing-order .tab-item:last-child,body.theme-light .t
 }
 
 body:not(.theme) .tab.tab-listing-order .tab-item a,body.theme-light .tab.tab-listing-order .tab-item a,body.theme-black .tab.tab-listing-order .tab-item a,body.theme-dark .tab.tab-listing-order .tab-item a {
+  color: #8be9fd;
   margin: 0;
   padding: 4px 8px;
 }
@@ -739,6 +740,10 @@ body:not(.theme) .is-comment-new .comment-text,body.theme-light .is-comment-new
   color: #f8f8f2;
 }
 
+body:not(.theme) .is-topic-official h1 a:visited,body.theme-light .is-topic-official h1 a:visited,body.theme-dark .is-topic-official h1 a:visited,body.theme-black .is-topic-official h1 a:visited {
+  color: #f55;
+}
+
 body:not(.theme) .label-topic-tag-spoiler,body.theme-light .label-topic-tag-spoiler,body.theme-dark .label-topic-tag-spoiler,body.theme-black .label-topic-tag-spoiler {
   background-color: #f1fa8c;
 }
@@ -755,53 +760,53 @@ body:not(.theme) .label-topic-tag-nsfw a,body.theme-light .label-topic-tag-nsfw
   color: #282a36;
 }
 
-.topic-voting.btn {
+body:not(.theme) .topic-voting.btn,body.theme-light .topic-voting.btn,body.theme-dark .topic-voting.btn,body.theme-black .topic-voting.btn {
   border-style: solid;
 }
 
-.btn,.btn.btn-link {
+body:not(.theme) .btn,body:not(.theme) .btn.btn-link,body.theme-light .btn,body.theme-light .btn.btn-link,body.theme-dark .btn,body.theme-dark .btn.btn-link,body.theme-black .btn,body.theme-black .btn.btn-link {
   color: #8be9fd;
   border-color: #8be9fd;
   background: transparent;
 }
 
-.btn:hover,.btn:active,.btn:focus,.btn.btn-link:hover,.btn.btn-link:active,.btn.btn-link:focus {
+body:not(.theme) .btn:hover,body:not(.theme) .btn:active,body:not(.theme) .btn:focus,body:not(.theme) .btn.btn-link:hover,body:not(.theme) .btn.btn-link:active,body:not(.theme) .btn.btn-link:focus,body.theme-light .btn:hover,body.theme-light .btn:active,body.theme-light .btn:focus,body.theme-light .btn.btn-link:hover,body.theme-light .btn.btn-link:active,body.theme-light .btn.btn-link:focus,body.theme-dark .btn:hover,body.theme-dark .btn:active,body.theme-dark .btn:focus,body.theme-dark .btn.btn-link:hover,body.theme-dark .btn.btn-link:active,body.theme-dark .btn.btn-link:focus,body.theme-black .btn:hover,body.theme-black .btn:active,body.theme-black .btn:focus,body.theme-black .btn.btn-link:hover,body.theme-black .btn.btn-link:active,body.theme-black .btn.btn-link:focus {
   color: #282a36;
   border-color: #ff79c6;
   background: #ff79c6;
 }
 
-.btn:visited,.btn.btn-link:visited {
+body:not(.theme) .btn:visited,body:not(.theme) .btn.btn-link:visited,body.theme-light .btn:visited,body.theme-light .btn.btn-link:visited,body.theme-dark .btn:visited,body.theme-dark .btn.btn-link:visited,body.theme-black .btn:visited,body.theme-black .btn.btn-link:visited {
   color: #8be9fd;
   border-color: #8be9fd;
   background: transparent;
 }
 
-.btn:visited:hover,.btn:visited:active,.btn:visited:focus,.btn.btn-link:visited:hover,.btn.btn-link:visited:active,.btn.btn-link:visited:focus {
+body:not(.theme) .btn:visited:hover,body:not(.theme) .btn:visited:active,body:not(.theme) .btn:visited:focus,body:not(.theme) .btn.btn-link:visited:hover,body:not(.theme) .btn.btn-link:visited:active,body:not(.theme) .btn.btn-link:visited:focus,body.theme-light .btn:visited:hover,body.theme-light .btn:visited:active,body.theme-light .btn:visited:focus,body.theme-light .btn.btn-link:visited:hover,body.theme-light .btn.btn-link:visited:active,body.theme-light .btn.btn-link:visited:focus,body.theme-dark .btn:visited:hover,body.theme-dark .btn:visited:active,body.theme-dark .btn:visited:focus,body.theme-dark .btn.btn-link:visited:hover,body.theme-dark .btn.btn-link:visited:active,body.theme-dark .btn.btn-link:visited:focus,body.theme-black .btn:visited:hover,body.theme-black .btn:visited:active,body.theme-black .btn:visited:focus,body.theme-black .btn.btn-link:visited:hover,body.theme-black .btn.btn-link:visited:active,body.theme-black .btn.btn-link:visited:focus {
   color: #282a36;
   border-color: #ff79c6;
   background: #ff79c6;
 }
 
-.btn-used,.topic-voting.btn-used {
+body:not(.theme) .btn-used,body:not(.theme) .topic-voting.btn-used,body.theme-light .btn-used,body.theme-light .topic-voting.btn-used,body.theme-dark .btn-used,body.theme-dark .topic-voting.btn-used,body.theme-black .btn-used,body.theme-black .topic-voting.btn-used {
   color: #282a36;
   border-color: #ff79c6;
   background: #ff79c6;
 }
 
-.btn-used:hover,.btn-used:active,.btn-used:focus,.topic-voting.btn-used:hover,.topic-voting.btn-used:active,.topic-voting.btn-used:focus {
+body:not(.theme) .btn-used:hover,body:not(.theme) .btn-used:active,body:not(.theme) .btn-used:focus,body:not(.theme) .topic-voting.btn-used:hover,body:not(.theme) .topic-voting.btn-used:active,body:not(.theme) .topic-voting.btn-used:focus,body.theme-light .btn-used:hover,body.theme-light .btn-used:active,body.theme-light .btn-used:focus,body.theme-light .topic-voting.btn-used:hover,body.theme-light .topic-voting.btn-used:active,body.theme-light .topic-voting.btn-used:focus,body.theme-dark .btn-used:hover,body.theme-dark .btn-used:active,body.theme-dark .btn-used:focus,body.theme-dark .topic-voting.btn-used:hover,body.theme-dark .topic-voting.btn-used:active,body.theme-dark .topic-voting.btn-used:focus,body.theme-black .btn-used:hover,body.theme-black .btn-used:active,body.theme-black .btn-used:focus,body.theme-black .topic-voting.btn-used:hover,body.theme-black .topic-voting.btn-used:active,body.theme-black .topic-voting.btn-used:focus {
   color: #282a36;
   border-color: #ff79c6;
   background: #ff79c6;
 }
 
-.btn.btn-primary {
+body:not(.theme) .btn.btn-primary,body.theme-light .btn.btn-primary,body.theme-dark .btn.btn-primary,body.theme-black .btn.btn-primary {
   color: #282a36;
   background: #8be9fd;
   border-color: #8be9fd;
 }
 
-.btn.btn-primary:hover,.btn.btn-primary:active,.btn.btn-primary:focus {
+body:not(.theme) .btn.btn-primary:hover,body:not(.theme) .btn.btn-primary:active,body:not(.theme) .btn.btn-primary:focus,body.theme-light .btn.btn-primary:hover,body.theme-light .btn.btn-primary:active,body.theme-light .btn.btn-primary:focus,body.theme-dark .btn.btn-primary:hover,body.theme-dark .btn.btn-primary:active,body.theme-dark .btn.btn-primary:focus,body.theme-black .btn.btn-primary:hover,body.theme-black .btn.btn-primary:active,body.theme-black .btn.btn-primary:focus {
   color: #282a36;
   border-color: #ff79c6;
   background: #ff79c6;
@@ -827,10 +832,6 @@ body:not(.theme) .label-topic-tag-nsfw a,body.theme-light .label-topic-tag-nsfw
   color: #f8f8f2;
 }
 
-.is-topic-official h1 a:visited {
-  color: #f55;
-}
-
 .is-topic-mine h1 a:visited {
   color: #bd93f9;
 }

css/tildes-dracula/tildes-dracula.user.css

@@ -1,7 +1,7 @@
 /* ==UserStyle==
 @name        Tildes Dracula
 @namespace   tildes.net
-@version     2.0.9
+@version     2.1.0
 @author      Bauke
 @description Dracula theme for Tildes.net
 @homepageURL https://gitlab.com/Bauke/styles
@@ -534,6 +534,22 @@ body:not(.theme),body.theme-light,body.theme-dark,body.theme-black {
   background-color: #282a36;
 }
 
+body:not(.theme) a,body.theme-light a,body.theme-dark a,body.theme-black a {
+  color: #8be9fd;
+}
+
+body:not(.theme) a:hover,body:not(.theme) a:active,body:not(.theme) a:focus,body.theme-light a:hover,body.theme-light a:active,body.theme-light a:focus,body.theme-dark a:hover,body.theme-dark a:active,body.theme-dark a:focus,body.theme-black a:hover,body.theme-black a:active,body.theme-black a:focus {
+  color: #ff79c6;
+}
+
+body:not(.theme) a:visited,body.theme-light a:visited,body.theme-dark a:visited,body.theme-black a:visited {
+  color: #ff79c6;
+}
+
+body:not(.theme) hr,body.theme-light hr,body.theme-dark hr,body.theme-black hr {
+  border-color: #f8f8f2;
+}
+
 body:not(.theme) main,body:not(.theme) #sidebar,body.theme-light main,body.theme-light #sidebar,body.theme-dark main,body.theme-dark #sidebar,body.theme-black main,body.theme-black #sidebar {
   color: #f8f8f2;
   background-color: #44475a;
@@ -578,22 +594,6 @@ body:not(.theme) tbody tr:nth-of-type(n),body.theme-light tbody tr:nth-of-type(n
   background-color: #282a36;
 }
 
-a {
-  color: #8be9fd;
-}
-
-a:hover,a:active,a:focus {
-  color: #ff79c6;
-}
-
-a:visited {
-  color: #ff79c6;
-}
-
-hr {
-  border-color: #f8f8f2;
-}
-
 body:not(.theme) .listing-options button,body.theme-light .listing-options button,body.theme-black .listing-options button,body.theme-dark .listing-options button {
   border: none;
 }
@@ -623,6 +623,7 @@ body:not(.theme) .tab.tab-listing-order .tab-item:last-child,body.theme-light .t
 }
 
 body:not(.theme) .tab.tab-listing-order .tab-item a,body.theme-light .tab.tab-listing-order .tab-item a,body.theme-black .tab.tab-listing-order .tab-item a,body.theme-dark .tab.tab-listing-order .tab-item a {
+  color: #8be9fd;
   margin: 0;
   padding: 4px 8px;
 }
@@ -750,6 +751,10 @@ body:not(.theme) .is-comment-new .comment-text,body.theme-light .is-comment-new
   color: #f8f8f2;
 }
 
+body:not(.theme) .is-topic-official h1 a:visited,body.theme-light .is-topic-official h1 a:visited,body.theme-dark .is-topic-official h1 a:visited,body.theme-black .is-topic-official h1 a:visited {
+  color: #f55;
+}
+
 body:not(.theme) .label-topic-tag-spoiler,body.theme-light .label-topic-tag-spoiler,body.theme-dark .label-topic-tag-spoiler,body.theme-black .label-topic-tag-spoiler {
   background-color: #f1fa8c;
 }
@@ -766,53 +771,53 @@ body:not(.theme) .label-topic-tag-nsfw a,body.theme-light .label-topic-tag-nsfw
   color: #282a36;
 }
 
-.topic-voting.btn {
+body:not(.theme) .topic-voting.btn,body.theme-light .topic-voting.btn,body.theme-dark .topic-voting.btn,body.theme-black .topic-voting.btn {
   border-style: solid;
 }
 
-.btn,.btn.btn-link {
+body:not(.theme) .btn,body:not(.theme) .btn.btn-link,body.theme-light .btn,body.theme-light .btn.btn-link,body.theme-dark .btn,body.theme-dark .btn.btn-link,body.theme-black .btn,body.theme-black .btn.btn-link {
   color: #8be9fd;
   border-color: #8be9fd;
   background: transparent;
 }
 
-.btn:hover,.btn:active,.btn:focus,.btn.btn-link:hover,.btn.btn-link:active,.btn.btn-link:focus {
+body:not(.theme) .btn:hover,body:not(.theme) .btn:active,body:not(.theme) .btn:focus,body:not(.theme) .btn.btn-link:hover,body:not(.theme) .btn.btn-link:active,body:not(.theme) .btn.btn-link:focus,body.theme-light .btn:hover,body.theme-light .btn:active,body.theme-light .btn:focus,body.theme-light .btn.btn-link:hover,body.theme-light .btn.btn-link:active,body.theme-light .btn.btn-link:focus,body.theme-dark .btn:hover,body.theme-dark .btn:active,body.theme-dark .btn:focus,body.theme-dark .btn.btn-link:hover,body.theme-dark .btn.btn-link:active,body.theme-dark .btn.btn-link:focus,body.theme-black .btn:hover,body.theme-black .btn:active,body.theme-black .btn:focus,body.theme-black .btn.btn-link:hover,body.theme-black .btn.btn-link:active,body.theme-black .btn.btn-link:focus {
   color: #282a36;
   border-color: #ff79c6;
   background: #ff79c6;
 }
 
-.btn:visited,.btn.btn-link:visited {
+body:not(.theme) .btn:visited,body:not(.theme) .btn.btn-link:visited,body.theme-light .btn:visited,body.theme-light .btn.btn-link:visited,body.theme-dark .btn:visited,body.theme-dark .btn.btn-link:visited,body.theme-black .btn:visited,body.theme-black .btn.btn-link:visited {
   color: #8be9fd;
   border-color: #8be9fd;
   background: transparent;
 }
 
-.btn:visited:hover,.btn:visited:active,.btn:visited:focus,.btn.btn-link:visited:hover,.btn.btn-link:visited:active,.btn.btn-link:visited:focus {
+body:not(.theme) .btn:visited:hover,body:not(.theme) .btn:visited:active,body:not(.theme) .btn:visited:focus,body:not(.theme) .btn.btn-link:visited:hover,body:not(.theme) .btn.btn-link:visited:active,body:not(.theme) .btn.btn-link:visited:focus,body.theme-light .btn:visited:hover,body.theme-light .btn:visited:active,body.theme-light .btn:visited:focus,body.theme-light .btn.btn-link:visited:hover,body.theme-light .btn.btn-link:visited:active,body.theme-light .btn.btn-link:visited:focus,body.theme-dark .btn:visited:hover,body.theme-dark .btn:visited:active,body.theme-dark .btn:visited:focus,body.theme-dark .btn.btn-link:visited:hover,body.theme-dark .btn.btn-link:visited:active,body.theme-dark .btn.btn-link:visited:focus,body.theme-black .btn:visited:hover,body.theme-black .btn:visited:active,body.theme-black .btn:visited:focus,body.theme-black .btn.btn-link:visited:hover,body.theme-black .btn.btn-link:visited:active,body.theme-black .btn.btn-link:visited:focus {
   color: #282a36;
   border-color: #ff79c6;
   background: #ff79c6;
 }
 
-.btn-used,.topic-voting.btn-used {
+body:not(.theme) .btn-used,body:not(.theme) .topic-voting.btn-used,body.theme-light .btn-used,body.theme-light .topic-voting.btn-used,body.theme-dark .btn-used,body.theme-dark .topic-voting.btn-used,body.theme-black .btn-used,body.theme-black .topic-voting.btn-used {
   color: #282a36;
   border-color: #ff79c6;
   background: #ff79c6;
 }
 
-.btn-used:hover,.btn-used:active,.btn-used:focus,.topic-voting.btn-used:hover,.topic-voting.btn-used:active,.topic-voting.btn-used:focus {
+body:not(.theme) .btn-used:hover,body:not(.theme) .btn-used:active,body:not(.theme) .btn-used:focus,body:not(.theme) .topic-voting.btn-used:hover,body:not(.theme) .topic-voting.btn-used:active,body:not(.theme) .topic-voting.btn-used:focus,body.theme-light .btn-used:hover,body.theme-light .btn-used:active,body.theme-light .btn-used:focus,body.theme-light .topic-voting.btn-used:hover,body.theme-light .topic-voting.btn-used:active,body.theme-light .topic-voting.btn-used:focus,body.theme-dark .btn-used:hover,body.theme-dark .btn-used:active,body.theme-dark .btn-used:focus,body.theme-dark .topic-voting.btn-used:hover,body.theme-dark .topic-voting.btn-used:active,body.theme-dark .topic-voting.btn-used:focus,body.theme-black .btn-used:hover,body.theme-black .btn-used:active,body.theme-black .btn-used:focus,body.theme-black .topic-voting.btn-used:hover,body.theme-black .topic-voting.btn-used:active,body.theme-black .topic-voting.btn-used:focus {
   color: #282a36;
   border-color: #ff79c6;
   background: #ff79c6;
 }
 
-.btn.btn-primary {
+body:not(.theme) .btn.btn-primary,body.theme-light .btn.btn-primary,body.theme-dark .btn.btn-primary,body.theme-black .btn.btn-primary {
   color: #282a36;
   background: #8be9fd;
   border-color: #8be9fd;
 }
 
-.btn.btn-primary:hover,.btn.btn-primary:active,.btn.btn-primary:focus {
+body:not(.theme) .btn.btn-primary:hover,body:not(.theme) .btn.btn-primary:active,body:not(.theme) .btn.btn-primary:focus,body.theme-light .btn.btn-primary:hover,body.theme-light .btn.btn-primary:active,body.theme-light .btn.btn-primary:focus,body.theme-dark .btn.btn-primary:hover,body.theme-dark .btn.btn-primary:active,body.theme-dark .btn.btn-primary:focus,body.theme-black .btn.btn-primary:hover,body.theme-black .btn.btn-primary:active,body.theme-black .btn.btn-primary:focus {
   color: #282a36;
   border-color: #ff79c6;
   background: #ff79c6;
@@ -838,10 +843,6 @@ body:not(.theme) .label-topic-tag-nsfw a,body.theme-light .label-topic-tag-nsfw
   color: #f8f8f2;
 }
 
-.is-topic-official h1 a:visited {
-  color: #f55;
-}
-
 .is-topic-mine h1 a:visited {
   color: #bd93f9;
 }

sass/tildes-dracula/_html-tags.sass

@@ -7,6 +7,20 @@ body.theme-black
   color: $foreground
   background-color: $background
 
+  a
+    color: $cyan
+
+    &:hover,
+    &:active,
+    &:focus
+      color: $pink
+
+    &:visited
+      color: $pink
+
+  hr
+    border-color: $foreground
+
   main,
   #sidebar
     color: $foreground
@@ -47,17 +61,3 @@ body.theme-black
 
   tbody tr:nth-of-type(n)
     background-color: $background
-
-a
-  color: $cyan
-
-  &:hover,
-  &:active,
-  &:focus
-    color: $pink
-
-  &:visited
-    color: $pink
-
-hr
-  border-color: $foreground

sass/tildes-dracula/_listing-options.sass

@@ -30,6 +30,7 @@ body.theme-dark
         margin-right: 0
 
       a
+        color: $cyan
         margin: 0
         padding: 4px 8px
 

sass/tildes-dracula/_misc.sass

@@ -69,6 +69,9 @@ body.theme-black
   .is-comment-new .comment-text
     color: $foreground
 
+  .is-topic-official h1 a:visited
+    color: $red
+
   .label-topic-tag-spoiler
     background-color: $yellow
 
@@ -81,23 +84,11 @@ body.theme-black
     a
       color: $background
 
-.topic-voting.btn
+  .topic-voting.btn
-  border-style: solid
+    border-style: solid
 
-.btn,
+  .btn,
-.btn.btn-link
+  .btn.btn-link
-  color: $cyan
-  border-color: $cyan
-  background: transparent
-
-  &:hover,
-  &:active,
-  &:focus
-    color: $background
-    border-color: $pink
-    background: $pink
-
-  &:visited
     color: $cyan
     border-color: $cyan
     background: transparent
@@ -109,30 +100,42 @@ body.theme-black
       border-color: $pink
       background: $pink
 
-.btn-used,
+    &:visited
-.topic-voting.btn-used
+      color: $cyan
-  color: $background
+      border-color: $cyan
-  border-color: $pink
+      background: transparent
-  background: $pink
 
-  &:hover,
+      &:hover,
-  &:active,
+      &:active,
-  &:focus
+      &:focus
+        color: $background
+        border-color: $pink
+        background: $pink
+
+  .btn-used,
+  .topic-voting.btn-used
     color: $background
     border-color: $pink
     background: $pink
 
-.btn.btn-primary
+    &:hover,
-  color: $background
+    &:active,
-  background: $cyan
+    &:focus
-  border-color: $cyan
+      color: $background
+      border-color: $pink
+      background: $pink
 
-  &:hover,
+  .btn.btn-primary
-  &:active,
-  &:focus
     color: $background
-    border-color: $pink
+    background: $cyan
-    background: $pink
+    border-color: $cyan
+
+    &:hover,
+    &:active,
+    &:focus
+      color: $background
+      border-color: $pink
+      background: $pink
 
 .is-topic-official
   border-left-color: $red !important
@@ -149,9 +152,6 @@ body.theme-black
   .topic-voting
     color: $foreground
 
-.is-topic-official h1 a:visited
-  color: $red
-
 .is-topic-mine h1 a:visited
   color: $purple
 

sass/tildes-dracula/tildes-dracula.json

@@ -4,7 +4,7 @@
   "options": {
     "name": "Tildes Dracula",
     "namespace": "tildes.net",
-    "version": "2.0.9",
+    "version": "2.1.0",
     "author": "Bauke",
     "description": "Dracula theme for Tildes.net",
     "homepageURL": "https://gitlab.com/Bauke/styles",