From 66ae65f5c14a28fbec4cc3639b4b1cd20a2a47a8 Mon Sep 17 00:00:00 2001 From: Edward Loveall Date: Wed, 1 Jan 2025 11:56:54 -0500 Subject: [PATCH] Convert internal stylesheets to use css vars This is in support of a future where we can easily set colors based on media queries, for example to support a dark mode. --- .../builds/administrate-internal/docs.css | 37 +++++++++----- .../builds/administrate-internal/docs.css.map | 2 +- .../administrate-internal/docs.scss | 48 ++++++++++--------- 3 files changed, 51 insertions(+), 36 deletions(-) diff --git a/app/assets/builds/administrate-internal/docs.css b/app/assets/builds/administrate-internal/docs.css index dcac4782d7..78ebef7bfb 100644 --- a/app/assets/builds/administrate-internal/docs.css +++ b/app/assets/builds/administrate-internal/docs.css @@ -1,3 +1,16 @@ +:root { + --blue: #53adc6; + --red: #cf726e; + --green: #5bc89e; + --white: #f0f0f0; + --code-black: #202020; + --code-white: #e0e0dc; + --code-green: #b0bf82; + --code-blue: #8fbdcc; + --code-yellow: #f8d29d; + --code-red: #b95c56; +} + html, body { font-family: "Lato", serif; @@ -18,7 +31,7 @@ h3 { } a { - color: #53adc6; + color: var(--blue); text-decoration: none; } @@ -43,8 +56,8 @@ a { } .flash-wrapper { - background-color: #cf726e; - color: #f0f0f0; + background-color: var(--red); + color: var(--white); padding: 1em; } .flash-wrapper .flash { @@ -59,31 +72,31 @@ code { padding: 0.4em 0.2em 0; } code.hljs { - background-color: #202020; - color: #e0e0dc; + background-color: var(--code-black); + color: var(--code-white); padding-left: 1rem; } code.hljs .hljs-string { - color: #b0bf82; + color: var(--code-green); } code.hljs .hljs-subst { - color: #e0e0dc; + color: var(--code-white); } code.hljs .hljs-constant { - color: #8fbdcc; + color: var(--code-blue); } code.hljs .hljs-symbol { - color: #b95c56; + color: var(--code-red); } code.hljs .hljs-keyword { - color: #f8d29d; + color: var(--code-yellow); } code.hljs .hljs-title, code.hljs .hljs-parent { - color: #8fbdcc; + color: var(--code-blue); } code.hljs .hljs-tag { - color: #f8d29d; + color: var(--code-yellow); } /*# sourceMappingURL=docs.css.map */ diff --git a/app/assets/builds/administrate-internal/docs.css.map b/app/assets/builds/administrate-internal/docs.css.map index f59a11fddc..2b5bd3aa7d 100644 --- a/app/assets/builds/administrate-internal/docs.css.map +++ b/app/assets/builds/administrate-internal/docs.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["../../stylesheets/administrate-internal/docs.scss"],"names":[],"mappings":"AAYA;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE,OAhCK;EAiCL;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;;;AAIJ;EACE,kBA3DI;EA4DJ,OA1DM;EA2DN;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE,kBAxES;EAyET,OAxES;EAyET;;AAEA;EAAe,OA1EN;;AA2ET;EAAc,OA5EL;;AA6ET;EAAiB,OA3ET;;AA4ER;EAAe,OA1ER;;AA2EP;EAAgB,OA5EN;;AA8EV;AAAA;EACe,OAhFP;;AAkFR;EAAY,OAjFF","file":"docs.css","sourcesContent":["$blue: #53adc6;\n$red: #cf726e;\n$green: #5bc89e;\n$white: #f0f0f0;\n\n$code-black: #202020;\n$code-white: #e0e0dc;\n$code-green: #b0bf82;\n$code-blue: #8fbdcc;\n$code-yellow: #f8d29d;\n$code-red: #b95c56;\n\nhtml,\nbody {\n font-family: 'Lato', serif;\n font-size: 18px;\n line-height: 1.62em;\n margin: 0;\n}\n\nimg {\n max-width: 100%;\n}\n\nh1,\nh2,\nh3 {\n font-family: 'Fjalla One', sans-serif;\n margin-top: 2em;\n}\n\na {\n color: $blue;\n text-decoration: none;\n}\n\n.content {\n margin-bottom: 2em;\n margin-left: auto;\n margin-right: auto;\n margin-top: 2em;\n width: 60em;\n\n .sidebar {\n float: left;\n width: 20em;\n\n &-links {\n list-style: none;\n padding-left: 0;\n }\n }\n\n .main {\n float: right;\n width: 40em;\n }\n}\n\n.flash-wrapper {\n background-color: $red;\n color: $white;\n padding: 1em;\n\n .flash {\n margin-left: auto;\n margin-right: auto;\n width: 40em;\n }\n}\n\ncode {\n font-family: \"Source Code Pro\";\n font-size: 0.8rem;\n padding: 0.4em 0.2em 0;\n\n &.hljs {\n background-color: $code-black;\n color: $code-white;\n padding-left: 1rem;\n\n .hljs-string { color: $code-green; }\n .hljs-subst { color: $code-white; }\n .hljs-constant { color: $code-blue; }\n .hljs-symbol { color: $code-red; }\n .hljs-keyword { color: $code-yellow; }\n\n .hljs-title,\n .hljs-parent { color: $code-blue; }\n\n .hljs-tag { color: $code-yellow; }\n }\n}\n"]} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../../stylesheets/administrate-internal/docs.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;EACA;EACA;;;AAGF;EACE;;;AAGF;AAAA;AAAA;EAGE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;;AAIJ;EACE;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAIJ;EACE;EACA;EACA;;AAEA;EACE;EACA;EACA;;AAEA;EAAe;;AACf;EAAc;;AACd;EAAiB;;AACjB;EAAe;;AACf;EAAgB;;AAEhB;AAAA;EACe;;AAEf;EAAY","file":"docs.css","sourcesContent":[":root {\n --blue: #53adc6;\n --red: #cf726e;\n --green: #5bc89e;\n --white: #f0f0f0;\n\n --code-black: #202020;\n --code-white: #e0e0dc;\n --code-green: #b0bf82;\n --code-blue: #8fbdcc;\n --code-yellow: #f8d29d;\n --code-red: #b95c56;\n}\n\nhtml,\nbody {\n font-family: 'Lato', serif;\n font-size: 18px;\n line-height: 1.62em;\n margin: 0;\n}\n\nimg {\n max-width: 100%;\n}\n\nh1,\nh2,\nh3 {\n font-family: 'Fjalla One', sans-serif;\n margin-top: 2em;\n}\n\na {\n color: var(--blue);\n text-decoration: none;\n}\n\n.content {\n margin-bottom: 2em;\n margin-left: auto;\n margin-right: auto;\n margin-top: 2em;\n width: 60em;\n\n .sidebar {\n float: left;\n width: 20em;\n\n &-links {\n list-style: none;\n padding-left: 0;\n }\n }\n\n .main {\n float: right;\n width: 40em;\n }\n}\n\n.flash-wrapper {\n background-color: var(--red);\n color: var(--white);\n padding: 1em;\n\n .flash {\n margin-left: auto;\n margin-right: auto;\n width: 40em;\n }\n}\n\ncode {\n font-family: \"Source Code Pro\";\n font-size: 0.8rem;\n padding: 0.4em 0.2em 0;\n\n &.hljs {\n background-color: var(--code-black);\n color: var(--code-white);\n padding-left: 1rem;\n\n .hljs-string { color: var(--code-green); }\n .hljs-subst { color: var(--code-white); }\n .hljs-constant { color: var(--code-blue); }\n .hljs-symbol { color: var(--code-red); }\n .hljs-keyword { color: var(--code-yellow); }\n\n .hljs-title,\n .hljs-parent { color: var(--code-blue); }\n\n .hljs-tag { color: var(--code-yellow); }\n }\n}\n"]} \ No newline at end of file diff --git a/app/assets/stylesheets/administrate-internal/docs.scss b/app/assets/stylesheets/administrate-internal/docs.scss index b2bb875c8d..2dda28aee2 100644 --- a/app/assets/stylesheets/administrate-internal/docs.scss +++ b/app/assets/stylesheets/administrate-internal/docs.scss @@ -1,14 +1,16 @@ -$blue: #53adc6; -$red: #cf726e; -$green: #5bc89e; -$white: #f0f0f0; - -$code-black: #202020; -$code-white: #e0e0dc; -$code-green: #b0bf82; -$code-blue: #8fbdcc; -$code-yellow: #f8d29d; -$code-red: #b95c56; +:root { + --blue: #53adc6; + --red: #cf726e; + --green: #5bc89e; + --white: #f0f0f0; + + --code-black: #202020; + --code-white: #e0e0dc; + --code-green: #b0bf82; + --code-blue: #8fbdcc; + --code-yellow: #f8d29d; + --code-red: #b95c56; +} html, body { @@ -30,7 +32,7 @@ h3 { } a { - color: $blue; + color: var(--blue); text-decoration: none; } @@ -58,8 +60,8 @@ a { } .flash-wrapper { - background-color: $red; - color: $white; + background-color: var(--red); + color: var(--white); padding: 1em; .flash { @@ -75,19 +77,19 @@ code { padding: 0.4em 0.2em 0; &.hljs { - background-color: $code-black; - color: $code-white; + background-color: var(--code-black); + color: var(--code-white); padding-left: 1rem; - .hljs-string { color: $code-green; } - .hljs-subst { color: $code-white; } - .hljs-constant { color: $code-blue; } - .hljs-symbol { color: $code-red; } - .hljs-keyword { color: $code-yellow; } + .hljs-string { color: var(--code-green); } + .hljs-subst { color: var(--code-white); } + .hljs-constant { color: var(--code-blue); } + .hljs-symbol { color: var(--code-red); } + .hljs-keyword { color: var(--code-yellow); } .hljs-title, - .hljs-parent { color: $code-blue; } + .hljs-parent { color: var(--code-blue); } - .hljs-tag { color: $code-yellow; } + .hljs-tag { color: var(--code-yellow); } } }