From 1239ea501fdf1c74cd781a604cc9d0fe2c4d2390 Mon Sep 17 00:00:00 2001 From: Bauke Date: Mon, 1 Oct 2018 16:12:57 +0200 Subject: [PATCH] Dracula Update: Added comment label colors Added exemplary reason style --- README.md | 2 +- css/tildes-dracula/tildes-dracula.css | 98 ++++++++++++++++++++ css/tildes-dracula/tildes-dracula.user.css | 100 ++++++++++++++++++++- sass/tildes-dracula/_comments.sass | 74 +++++++++++++++ sass/tildes-dracula/_misc.sass | 3 + sass/tildes-dracula/tildes-dracula.json | 2 +- 6 files changed, 276 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index c43ff72..f655076 100755 --- a/README.md +++ b/README.md @@ -8,7 +8,7 @@ |------|---------|------------|----------| | Notabug Dracula | 1.0.5 | [notabug.io](https://notabug.io) | [Click](https://gitlab.com/Bauke/styles/raw/master/css/notabug-dracula/notabug-dracula.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.8 | [tildes.net](https://tildes.net) | [Click](https://gitlab.com/Bauke/styles/raw/master/css/tildes-dracula/tildes-dracula.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 Monokai | 1.1.4 | [tildes.net](https://tildes.net) | [Click](https://gitlab.com/Bauke/styles/raw/master/css/tildes-monokai/tildes-monokai.user.css) | ## Installing diff --git a/css/tildes-dracula/tildes-dracula.css b/css/tildes-dracula/tildes-dracula.css index 28766d7..c270a23 100644 --- a/css/tildes-dracula/tildes-dracula.css +++ b/css/tildes-dracula/tildes-dracula.css @@ -320,6 +320,20 @@ body:not(.theme) .comment .time-responsive-full,body.theme-light .comment .time- color: #f8f8f2; } +body:not(.theme) .comment-exemplary-reasons,body.theme-light .comment-exemplary-reasons,body.theme-dark .comment-exemplary-reasons,body.theme-black .comment-exemplary-reasons { + background-color: #282a36; + padding: 5px; +} + +body:not(.theme) .comment-exemplary-reasons[open],body.theme-light .comment-exemplary-reasons[open],body.theme-dark .comment-exemplary-reasons[open],body.theme-black .comment-exemplary-reasons[open] { + border-bottom: 1px solid #8be9fd; +} + +body:not(.theme) .comment-exemplary-reasons ul,body.theme-light .comment-exemplary-reasons ul,body.theme-dark .comment-exemplary-reasons ul,body.theme-black .comment-exemplary-reasons ul { + margin-left: 1.3rem; + margin-bottom: 0; +} + body:not(.theme) .comment[data-comment-depth='0'],body.theme-light .comment[data-comment-depth='0'],body.theme-dark .comment[data-comment-depth='0'],body.theme-black .comment[data-comment-depth='0'] { border-color: #282a36; } @@ -328,6 +342,12 @@ body:not(.theme) .is-comment-collapsed header .link-user,body.theme-light .is-co color: #50fa7b; } +body:not(.theme) .label-comment-exemplary,body.theme-light .label-comment-exemplary,body.theme-dark .label-comment-exemplary,body.theme-black .label-comment-exemplary { + color: #282a36; + border-color: #8be9fd; + background-color: #8be9fd; +} + body:not(.theme) .post-buttons,body.theme-light .post-buttons,body.theme-dark .post-buttons,body.theme-black .post-buttons { padding: 0; } @@ -354,6 +374,80 @@ body:not(.theme) .post-button-used:hover,body:not(.theme) .post-button-used:acti text-decoration: underline; } +.btn-comment-label-exemplary { + color: #8be9fd; + border-color: #8be9fd; +} + +.btn-comment-label-exemplary:hover { + color: #8be9fd; +} + +.btn-comment-label-exemplary.btn-used:hover { + color: #282a36; + background-color: #8be9fd; +} + +.btn-comment-label-offtopic { + color: #50fa7b; + border-color: #50fa7b; +} + +.btn-comment-label-offtopic:hover { + color: #50fa7b; +} + +.btn-comment-label-offtopic.btn-used:hover { + color: #282a36; + background-color: #50fa7b; +} + +.btn-comment-label-joke { + color: #f1fa8c; + border-color: #f1fa8c; +} + +.btn-comment-label-joke:hover { + color: #f1fa8c; +} + +.btn-comment-label-joke.btn-used:hover { + color: #282a36; + background-color: #f1fa8c; +} + +.btn-comment-label-noise { + color: #ffb86c; + border-color: #ffb86c; +} + +.btn-comment-label-noise:hover { + color: #ffb86c; +} + +.btn-comment-label-noise.btn-used:hover { + color: #282a36; + background-color: #ffb86c; +} + +.btn-comment-label-malice { + color: #f55; + border-color: #f55; +} + +.btn-comment-label-malice:hover { + color: #f55; +} + +.btn-comment-label-malice.btn-used:hover { + color: #282a36; + background-color: #f55; +} + +.btn-comment-label.btn-used { + border: none; +} + body:not(.theme) #page-list,body.theme-light #page-list,body.theme-dark #page-list,body.theme-black #page-list { background-color: #44475a; } @@ -753,6 +847,10 @@ body:not(.theme) .label-topic-tag-nsfw a,body.theme-light .label-topic-tag-nsfw border-color: #bd93f9 !important; } +.is-comment-exemplary>.comment-itself { + border-color: #8be9fd !important; +} + .is-comment-new>.comment-itself { border-color: #ffb86c !important; } diff --git a/css/tildes-dracula/tildes-dracula.user.css b/css/tildes-dracula/tildes-dracula.user.css index 6d4c413..68c6523 100755 --- a/css/tildes-dracula/tildes-dracula.user.css +++ b/css/tildes-dracula/tildes-dracula.user.css @@ -1,7 +1,7 @@ /* ==UserStyle== @name Tildes Dracula @namespace tildes.net -@version 2.0.8 +@version 2.0.9 @author Bauke @description Dracula theme for Tildes.net @homepageURL https://gitlab.com/Bauke/styles @@ -331,6 +331,20 @@ body:not(.theme) .comment .time-responsive-full,body.theme-light .comment .time- color: #f8f8f2; } +body:not(.theme) .comment-exemplary-reasons,body.theme-light .comment-exemplary-reasons,body.theme-dark .comment-exemplary-reasons,body.theme-black .comment-exemplary-reasons { + background-color: #282a36; + padding: 5px; +} + +body:not(.theme) .comment-exemplary-reasons[open],body.theme-light .comment-exemplary-reasons[open],body.theme-dark .comment-exemplary-reasons[open],body.theme-black .comment-exemplary-reasons[open] { + border-bottom: 1px solid #8be9fd; +} + +body:not(.theme) .comment-exemplary-reasons ul,body.theme-light .comment-exemplary-reasons ul,body.theme-dark .comment-exemplary-reasons ul,body.theme-black .comment-exemplary-reasons ul { + margin-left: 1.3rem; + margin-bottom: 0; +} + body:not(.theme) .comment[data-comment-depth='0'],body.theme-light .comment[data-comment-depth='0'],body.theme-dark .comment[data-comment-depth='0'],body.theme-black .comment[data-comment-depth='0'] { border-color: #282a36; } @@ -339,6 +353,12 @@ body:not(.theme) .is-comment-collapsed header .link-user,body.theme-light .is-co color: #50fa7b; } +body:not(.theme) .label-comment-exemplary,body.theme-light .label-comment-exemplary,body.theme-dark .label-comment-exemplary,body.theme-black .label-comment-exemplary { + color: #282a36; + border-color: #8be9fd; + background-color: #8be9fd; +} + body:not(.theme) .post-buttons,body.theme-light .post-buttons,body.theme-dark .post-buttons,body.theme-black .post-buttons { padding: 0; } @@ -365,6 +385,80 @@ body:not(.theme) .post-button-used:hover,body:not(.theme) .post-button-used:acti text-decoration: underline; } +.btn-comment-label-exemplary { + color: #8be9fd; + border-color: #8be9fd; +} + +.btn-comment-label-exemplary:hover { + color: #8be9fd; +} + +.btn-comment-label-exemplary.btn-used:hover { + color: #282a36; + background-color: #8be9fd; +} + +.btn-comment-label-offtopic { + color: #50fa7b; + border-color: #50fa7b; +} + +.btn-comment-label-offtopic:hover { + color: #50fa7b; +} + +.btn-comment-label-offtopic.btn-used:hover { + color: #282a36; + background-color: #50fa7b; +} + +.btn-comment-label-joke { + color: #f1fa8c; + border-color: #f1fa8c; +} + +.btn-comment-label-joke:hover { + color: #f1fa8c; +} + +.btn-comment-label-joke.btn-used:hover { + color: #282a36; + background-color: #f1fa8c; +} + +.btn-comment-label-noise { + color: #ffb86c; + border-color: #ffb86c; +} + +.btn-comment-label-noise:hover { + color: #ffb86c; +} + +.btn-comment-label-noise.btn-used:hover { + color: #282a36; + background-color: #ffb86c; +} + +.btn-comment-label-malice { + color: #f55; + border-color: #f55; +} + +.btn-comment-label-malice:hover { + color: #f55; +} + +.btn-comment-label-malice.btn-used:hover { + color: #282a36; + background-color: #f55; +} + +.btn-comment-label.btn-used { + border: none; +} + body:not(.theme) #page-list,body.theme-light #page-list,body.theme-dark #page-list,body.theme-black #page-list { background-color: #44475a; } @@ -764,6 +858,10 @@ body:not(.theme) .label-topic-tag-nsfw a,body.theme-light .label-topic-tag-nsfw border-color: #bd93f9 !important; } +.is-comment-exemplary>.comment-itself { + border-color: #8be9fd !important; +} + .is-comment-new>.comment-itself { border-color: #ffb86c !important; } diff --git a/sass/tildes-dracula/_comments.sass b/sass/tildes-dracula/_comments.sass index 5d1d4a5..09ad46d 100644 --- a/sass/tildes-dracula/_comments.sass +++ b/sass/tildes-dracula/_comments.sass @@ -48,12 +48,28 @@ body.theme-black .time-responsive-full color: $foreground + .comment-exemplary-reasons + background-color: $background + padding: 5px + + &[open] + border-bottom: 1px solid $cyan + + ul + margin-left: 1.3rem + margin-bottom: 0 + .comment[data-comment-depth='0'] border-color: $background .is-comment-collapsed header .link-user color: $green + .label-comment-exemplary + color: $background + border-color: $cyan + background-color: $cyan + .post-buttons padding: 0 @@ -78,3 +94,61 @@ body.theme-black &:focus color: $cyan text-decoration: underline + +.btn-comment-label-exemplary + color: $cyan + border-color: $cyan + + &:hover + color: $cyan + + &.btn-used:hover + color: $background + background-color: $cyan + +.btn-comment-label-offtopic + color: $green + border-color: $green + + &:hover + color: $green + + &.btn-used:hover + color: $background + background-color: $green + +.btn-comment-label-joke + color: $yellow + border-color: $yellow + + &:hover + color: $yellow + + &.btn-used:hover + color: $background + background-color: $yellow + +.btn-comment-label-noise + color: $orange + border-color: $orange + + &:hover + color: $orange + + &.btn-used:hover + color: $background + background-color: $orange + +.btn-comment-label-malice + color: $red + border-color: $red + + &:hover + color: $red + + &.btn-used:hover + color: $background + background-color: $red + +.btn-comment-label.btn-used + border: none diff --git a/sass/tildes-dracula/_misc.sass b/sass/tildes-dracula/_misc.sass index 48fdcaf..1eb9f9f 100644 --- a/sass/tildes-dracula/_misc.sass +++ b/sass/tildes-dracula/_misc.sass @@ -164,6 +164,9 @@ body.theme-black .is-comment-mine>.comment-itself border-color: $purple !important +.is-comment-exemplary>.comment-itself + border-color: $cyan !important + .is-comment-new>.comment-itself border-color: $orange !important diff --git a/sass/tildes-dracula/tildes-dracula.json b/sass/tildes-dracula/tildes-dracula.json index 83f70ad..04a9e8d 100644 --- a/sass/tildes-dracula/tildes-dracula.json +++ b/sass/tildes-dracula/tildes-dracula.json @@ -4,7 +4,7 @@ "options": { "name": "Tildes Dracula", "namespace": "tildes.net", - "version": "2.0.8", + "version": "2.0.9", "author": "Bauke", "description": "Dracula theme for Tildes.net", "homepageURL": "https://gitlab.com/Bauke/styles",