From c8d4dd812cd105d6c3501cc7be8666c6bb9b23c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=8E=8B=E9=82=88?= Date: Wed, 26 Feb 2020 02:09:02 +0800 Subject: [PATCH] WIP: Add dark support --- static/css/_bootstrap-mod.scss | 76 +++++++++++++++++++++++++++- static/css/_structure.scss | 16 ++++++ static/css/_syntax-highlighting.scss | 71 ++++++++++++++++++++++++++ static/css/style.scss | 55 ++++++++++++++++++-- 4 files changed, 214 insertions(+), 4 deletions(-) diff --git a/static/css/_bootstrap-mod.scss b/static/css/_bootstrap-mod.scss index 1bbbcb0..3876abd 100644 --- a/static/css/_bootstrap-mod.scss +++ b/static/css/_bootstrap-mod.scss @@ -6,15 +6,44 @@ BOOTSTRAP MODIFICATIONS & TWEAKS margin-bottom: 0px; } +.nav > li > a:hover, .nav > li > a:focus{ + @include dark{ + background-color: #111; + } +} + +pre{ + @include dark{ + color: #ccc; + background-color: #272822; + } +} + +code{ + @include dark{ + background-color: #060d0b; + } +} + .navbar-default { + @include dark{ + background-color: $color_bg_dark; + } background-color: white; border-color: transparent; .navbar-nav > li.active > a { color: $color_thu_purple; border-bottom: 2px solid $color_thu_purple; + @include dark{ + color: $color_thu_purple_dark; + border-bottom-color: $color_thu_purple_dark; + } } .navbar-nav > li > a { + @include dark{ + color: $color_secondary_dark; + } color: $color_secondary; background: transparent !important; font-weight: 700; @@ -23,6 +52,9 @@ BOOTSTRAP MODIFICATIONS & TWEAKS &:hover, &:focus { color: $color_primary !important; background: transparent !important; + @include dark{ + color: $color_primary_dark !important; + } } } } @@ -39,14 +71,23 @@ BOOTSTRAP MODIFICATIONS & TWEAKS .navbar-header .navbar-brand { color: $color_secondary; + @include dark{ + color: $color_secondary_dark; + } } .dropdown-menu { + @include dark{ + background: $color_secondary_dark; + } background: $color_secondary ; } .dropdown-menu > li > a { color: white; + @include dark{ + color: $color_bg_dark; + } font-weight: 700; font-size: 12px; } @@ -72,4 +113,37 @@ BOOTSTRAP MODIFICATIONS & TWEAKS border-bottom: 1px solid #ffffff; margin-bottom: 25px; } - +@include dark{ + .popover{ + background-color: #282828; + border-color: rgba(255, 255, 255, 0.2); + } + .popover.title{ + background-color: #f7f7f7; + border-bottom-color: #ebebeb; + } + .popover.top > .arrow { + border-top-color: rgba(255, 255, 255, .25); + } + .popover.top > .arrow:after { + border-top-color: #282828; + } + .popover.right > .arrow { + border-right-color: rgba(255, 255, 255, .25); + } + .popover.right > .arrow:after { + border-right-color: #282828; + } + .popover.bottom > .arrow { + border-bottom-color: rgba(255, 255, 255, .25); + } + .popover.bottom > .arrow:after { + border-bottom-color: #282828; + } + .popover.left > .arrow { + border-left-color: rgba(255, 255, 255, .25); + } + .popover.left > .arrow:after { + border-left-color: #282828; + } +} diff --git a/static/css/_structure.scss b/static/css/_structure.scss index 6db7caf..3121610 100644 --- a/static/css/_structure.scss +++ b/static/css/_structure.scss @@ -11,6 +11,9 @@ body { margin: 0; /* height: 100%; */ color: $color_secondary; + @include dark{ + color: $color_secondary_dark; + } font-weight: 400; } html.wf-inactive body { @@ -35,6 +38,9 @@ p { font-size: 14px; line-height: 24px; color: $color_secondary ; + @include dark{ + color: $color_secondary_dark; + } margin-top: 10px; } @@ -45,6 +51,9 @@ img { a { color:$color_link; + @include dark{ + color: $color_link_dark; + } padding: 0; margin: 0; text-decoration: none; @@ -64,11 +73,18 @@ a:hover, a:focus { color: #fff; text-shadow:none; background:$color_secondary; + @include dark{ + background: $color_secondary_dark; + } } ::selection { color: #fff; text-shadow:none; background:$color_secondary; + @include dark{ + background: white; + color: $color_secondary; + } } .centered { diff --git a/static/css/_syntax-highlighting.scss b/static/css/_syntax-highlighting.scss index a6d05d0..95049e1 100644 --- a/static/css/_syntax-highlighting.scss +++ b/static/css/_syntax-highlighting.scss @@ -61,4 +61,75 @@ .vg { color: #008080 } // Name.Variable.Global .vi { color: #008080 } // Name.Variable.Instance .il { color: #099 } // Literal.Number.Integer.Long + + +@include dark{ +.hll { background-color: #272822; } +.c { color: #75715e } /* Comment */ +.err { color: #960050; background-color: #1e0010 } /* Error */ +.k { color: #66d9ef } /* Keyword */ +.l { color: #ae81ff } /* Literal */ +.n { color: #f8f8f2 } /* Name */ +.o { color: #f92672 } /* Operator */ +.p { color: #f8f8f2 } /* Punctuation */ +.cm { color: #75715e } /* Comment.Multiline */ +.cp { color: #75715e } /* Comment.Preproc */ +.c1 { color: #75715e } /* Comment.Single */ +.cs { color: #75715e } /* Comment.Special */ +.ge { font-style: italic } /* Generic.Emph */ +.gs { font-weight: bold } /* Generic.Strong */ +.kc { color: #66d9ef } /* Keyword.Constant */ +.kd { color: #66d9ef } /* Keyword.Declaration */ +.kn { color: #f92672 } /* Keyword.Namespace */ +.kp { color: #66d9ef } /* Keyword.Pseudo */ +.kr { color: #66d9ef } /* Keyword.Reserved */ +.kt { color: #66d9ef } /* Keyword.Type */ +.ld { color: #e6db74 } /* Literal.Date */ +.m { color: #ae81ff } /* Literal.Number */ +.s { color: #e6db74 } /* Literal.String */ +.na { color: #a6e22e } /* Name.Attribute */ +.nb { color: #f8f8f2 } /* Name.Builtin */ +.nc { color: #a6e22e } /* Name.Class */ +.no { color: #66d9ef } /* Name.Constant */ +.nd { color: #a6e22e } /* Name.Decorator */ +.ni { color: #f8f8f2 } /* Name.Entity */ +.ne { color: #a6e22e } /* Name.Exception */ +.nf { color: #a6e22e } /* Name.Function */ +.nl { color: #f8f8f2 } /* Name.Label */ +.nn { color: #f8f8f2 } /* Name.Namespace */ +.nx { color: #a6e22e } /* Name.Other */ +.py { color: #f8f8f2 } /* Name.Property */ +.nt { color: #f92672 } /* Name.Tag */ +.nv { color: #f8f8f2 } /* Name.Variable */ +.ow { color: #f92672 } /* Operator.Word */ +.w { color: #f8f8f2 } /* Text.Whitespace */ +.mf { color: #ae81ff } /* Literal.Number.Float */ +.mh { color: #ae81ff } /* Literal.Number.Hex */ +.mi { color: #ae81ff } /* Literal.Number.Integer */ +.mo { color: #ae81ff } /* Literal.Number.Oct */ +.sb { color: #e6db74 } /* Literal.String.Backtick */ +.sc { color: #e6db74 } /* Literal.String.Char */ +.sd { color: #e6db74 } /* Literal.String.Doc */ +.s2 { color: #e6db74 } /* Literal.String.Double */ +.se { color: #ae81ff } /* Literal.String.Escape */ +.sh { color: #e6db74 } /* Literal.String.Heredoc */ +.si { color: #e6db74 } /* Literal.String.Interpol */ +.sx { color: #e6db74 } /* Literal.String.Other */ +.sr { color: #e6db74 } /* Literal.String.Regex */ +.s1 { color: #e6db74 } /* Literal.String.Single */ +.ss { color: #e6db74 } /* Literal.String.Symbol */ +.bp { color: #f8f8f2 } /* Name.Builtin.Pseudo */ +.vc { color: #f8f8f2 } /* Name.Variable.Class */ +.vg { color: #f8f8f2 } /* Name.Variable.Global */ +.vi { color: #f8f8f2 } /* Name.Variable.Instance */ +.il { color: #ae81ff } /* Literal.Number.Integer.Long */ + +.gh { } /* Generic Heading & Diff Header */ +.gu { color: #75715e; } /* Generic.Subheading & Diff Unified/Comment? */ +.gd { color: #f92672; background-color: inherit;} /* Generic.Deleted & Diff Deleted */ +.gi { color: #a6e22e; background-color: inherit;} /* Generic.Inserted & Diff Inserted */ +.gd .x {background-color: inherit;} +.gi .x {background-color: inherit;} +} + } diff --git a/static/css/style.scss b/static/css/style.scss index 4c83d85..c8a5f1f 100644 --- a/static/css/style.scss +++ b/static/css/style.scss @@ -11,20 +11,34 @@ URL: http://alvarez.is ################################################################# */ +$color_bg_dark: #222; $color_thu_purple: #82318E; +$color_thu_purple_dark: #C353D3; $color_light_grey: #888; $color_grey: #555; +$color_grey_dark: #aaa; $color_primary: $color_thu_purple; +$color_primary_dark: $color_thu_purple_dark; $color_primary_light: #d8aff6; $color_primary_rgb: 92,48,125; $color_secondary: #384452; +$color_secondary_dark: #ffffff; $color_link: #088acb; +$color_link_dark: #65A9CB; $color_link_hover: #62bbe7; $color_footer_heading: #ffffff; $color_footer_content: #bfc9d3; $color_navbar_bg: #d3d3d3; $font_local: 'Hiragino Sans GB', 'Source Han Sans SC', 'Noto Sans CJK SC', 'WenQuanYi Zen Hei', 'WenQuanYi Micro Hei', '微软雅黑', sans-serif; $font_default: 'Lato', #{$font_local}; +$color_row_hover: #e0f3fc; +$color_row_hover_dark: #116D99; + +@mixin dark { + @media (prefers-color-scheme: dark) { + @content + } +} @import "Lato", @@ -32,6 +46,10 @@ $font_default: 'Lato', #{$font_local}; "bootstrap-mod", "syntax-highlighting"; +:root { +color-scheme: light dark; +} + #thu-alert { padding-left: 50px; position: relative; @@ -51,6 +69,9 @@ html { body { position: relative; min-height: 100%; + @include dark{ + background: $color_bg_dark; + } } #headerwrap { @@ -73,15 +94,24 @@ body { .status-fail, .status-failed, .status-paused { background-color: #fff4e3; + @include dark{ + background-color: #7F581A; + } } .status-syncing { background-color: #e3fffd; + @include dark{ + background-color: #0F3A4C; + } } #mirrors { tbody { tr:hover { - background-color: #e0f3fc; + background-color: $color_row_hover; + @include dark{ + background-color: $color_row_hover_dark; + } } td { padding: 4px 8px; @@ -100,11 +130,17 @@ body { } .fa-question-circle { color: #234961; + @include dark{ + color: #5CC0FF; + } } } #news { li > a { color: $color_secondary; + @include dark{ + color: $color_secondary_dark; + } } } #download-link { @@ -123,8 +159,11 @@ body { } #mirror-list { :hover { - background-color: #e0f3fc; - } + background-color: $color_row_hover; + @include dark{ + background-color: $color_row_hover_dark; + } + } } } @@ -137,6 +176,9 @@ body { article { .meta { color: $color_grey; + @include dark{ + color: $color_grey_dark; + } } } .fa-user { @@ -264,3 +306,10 @@ body { #mirror-title { float: left; } + +#upgrade-mask{ + color: black; + p { + color: inherit; + } +}