From c221c77112279b42c4c23f7b9383ec44b9268016 Mon Sep 17 00:00:00 2001 From: Bauke Date: Mon, 22 Oct 2018 23:17:39 +0200 Subject: [PATCH] Change specificity for some rules after the theme overhaul was merged --- README.md | 2 +- css/tildes-dracula/tildes-dracula.css | 59 +++++++++--------- css/tildes-dracula/tildes-dracula.user.css | 61 +++++++++--------- sass/tildes-dracula/_html-tags.sass | 28 ++++----- sass/tildes-dracula/_listing-options.sass | 1 + sass/tildes-dracula/_misc.sass | 72 +++++++++++----------- sass/tildes-dracula/tildes-dracula.json | 2 +- 7 files changed, 114 insertions(+), 111 deletions(-) diff --git a/README.md b/README.md index bbaf529..8d6ad00 100755 --- a/README.md +++ b/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 diff --git a/css/tildes-dracula/tildes-dracula.css b/css/tildes-dracula/tildes-dracula.css index c270a23..6fc55a4 100644 --- a/css/tildes-dracula/tildes-dracula.css +++ b/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; } diff --git a/css/tildes-dracula/tildes-dracula.user.css b/css/tildes-dracula/tildes-dracula.user.css index 68c6523..5761ae9 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.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; } diff --git a/sass/tildes-dracula/_html-tags.sass b/sass/tildes-dracula/_html-tags.sass index 6e2cdea..6963003 100644 --- a/sass/tildes-dracula/_html-tags.sass +++ b/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 diff --git a/sass/tildes-dracula/_listing-options.sass b/sass/tildes-dracula/_listing-options.sass index 786f361..cdaf5c3 100644 --- a/sass/tildes-dracula/_listing-options.sass +++ b/sass/tildes-dracula/_listing-options.sass @@ -30,6 +30,7 @@ body.theme-dark margin-right: 0 a + color: $cyan margin: 0 padding: 4px 8px diff --git a/sass/tildes-dracula/_misc.sass b/sass/tildes-dracula/_misc.sass index 1eb9f9f..e2476b4 100644 --- a/sass/tildes-dracula/_misc.sass +++ b/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 - border-style: solid + .topic-voting.btn + border-style: solid -.btn, -.btn.btn-link - color: $cyan - border-color: $cyan - background: transparent - - &:hover, - &:active, - &:focus - color: $background - border-color: $pink - background: $pink - - &:visited + .btn, + .btn.btn-link color: $cyan border-color: $cyan background: transparent @@ -109,30 +100,42 @@ body.theme-black border-color: $pink background: $pink -.btn-used, -.topic-voting.btn-used - color: $background - border-color: $pink - background: $pink + &:visited + color: $cyan + border-color: $cyan + background: transparent - &:hover, - &:active, - &:focus + &:hover, + &:active, + &:focus + color: $background + border-color: $pink + background: $pink + + .btn-used, + .topic-voting.btn-used color: $background border-color: $pink background: $pink -.btn.btn-primary - color: $background - background: $cyan - border-color: $cyan + &:hover, + &:active, + &:focus + color: $background + border-color: $pink + background: $pink - &:hover, - &:active, - &:focus + .btn.btn-primary color: $background - border-color: $pink - background: $pink + background: $cyan + 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 diff --git a/sass/tildes-dracula/tildes-dracula.json b/sass/tildes-dracula/tildes-dracula.json index 04a9e8d..93f7042 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.9", + "version": "2.1.0", "author": "Bauke", "description": "Dracula theme for Tildes.net", "homepageURL": "https://gitlab.com/Bauke/styles",