From 54180a1a177b9a11d8348c14a3446529b08daea7 Mon Sep 17 00:00:00 2001 From: David Luevano Alvarado Date: Sat, 27 Feb 2021 01:14:41 -0700 Subject: Tweak css and add switch for dark and light mode --- static/css/dark.css | 101 ++++++++++++++++++++++++ static/css/general_style.css | 150 +++++++++++++++++++++++++++++++++++ static/css/light.css | 101 ++++++++++++++++++++++++ static/css/nordtheme.css | 183 +++++++++++++++++++++++++++++++++++++++++++ static/css/style.css | 155 ------------------------------------ static/scripts/gb.js | 2 +- static/scripts/theme.js | 53 +++++++++++++ 7 files changed, 589 insertions(+), 156 deletions(-) create mode 100644 static/css/dark.css create mode 100644 static/css/general_style.css create mode 100644 static/css/light.css create mode 100644 static/css/nordtheme.css delete mode 100644 static/css/style.css create mode 100644 static/scripts/theme.js (limited to 'static') diff --git a/static/css/dark.css b/static/css/dark.css new file mode 100644 index 0000000..29af64b --- /dev/null +++ b/static/css/dark.css @@ -0,0 +1,101 @@ +@import './nordtheme.css'; + +:root { + --bg: var(--color3); + --body-bg: var(--color0); + --navitem-bg: var(--color1); + --navitem-bg-hl: var(--color2); + + --fg: var(--color4); + --fg-hl: var(--color5); + + --link: var(--color15); + --link-hl: var(--color10); + --navitem-link: var(--color8); + --navitem-link-hl: var(--color7); + + --fg-acc1: var(--color11); + --fg-acc2: var(--color12); + --fg-acc3: var(--color13); + --fg-acc4: var(--color14); + --fg-acc5: var(--color15); + + --switch-bg: var(--color1); + --switch-slider: var(--color4); + --switch-toggled-bg: var(--color10); + --switch-ol: var(--color4); +} + +html { + background: var(--bg); +} + +body { + background: var(--body-bg); + color: var(--fg); + border: 4px outset var(--fg); +} + +a { + color: var(--link); +} + +a:hover { + color: var(--link-hl); +} + +h1 { + color: var(--fg-acc1); +} + +h2 { + color: var(--fg-acc2); +} + +h3 { + color: var(--fg-acc3); +} + +/* switch */ +.slider { + background-color: var(--switch-bg); +} + +.slider:before { + background-color: var(--switch-slider); +} + +.switch input:checked + .slider { + background-color: var(--switch-toggled-bg); +} + +.switch input:focus + .slider { + box-shadow: 0 0 0.1em var(--switch-ol); +} + +/* menu bar (header) */ +.menubar li { + background: var(--navitem-bg); +} + +.menubar a { + color: var(--navitem-link); +} + +.menubar li:hover { + background: var(--navitem-bg-hl); + color: var(--fg-hl); +} + +.menubar li:hover > a { + color: var(--navitem-link-hl); +} + +/* image gallery (not really being used rn) */ +div.gallery { + border: 1px solid var(--fg-hl); +} + +div.gallery:hover { + border: var(--fg-acc5); +} diff --git a/static/css/general_style.css b/static/css/general_style.css new file mode 100644 index 0000000..e49edb7 --- /dev/null +++ b/static/css/general_style.css @@ -0,0 +1,150 @@ +:root { + font-family: Verdana, Geneva, sans-serif; + font-size: larger; +} + +body { + max-width: 50em; + margin-top: 1em; + margin-bottom: 1em; + margin-left: auto; + margin-right: auto; + padding: 0.5em; + text-align: center; +} + +a{ + text-decoration: none; +} + +/* switch */ +/* slider container */ +.switch { + position: relative; + display: inline-block; + width: 2rem; + height: 1rem; +} + +.switch input { + opacity: 0; + width: 0; + height: 0; +} + +/* slider dimentions */ +.slider { + position: absolute; + cursor: pointer; + top: 0; + bottom: 0; + left: 0; + right: 0; + -webkit-transition: 0.4s; + transition: 0.4s; +} + +.slider:before { + position:absolute; + content: ""; + height: 0.8em; + width: 0.8em; + left: 0.1em; + bottom: 0.1em; + -webkit-transition: 0.4s; + transition: 0.4s; +} + +/* slider movement on click */ +.switch input:checked + .slider:before { + -webkit-transform: translateX(0.9em); + -ms-transform: translateX(0.9em); + transform: translateX(0.9em); +} + +/* slider container */ +.slider.round { + border-radius: 1em; +} + +/* slider */ +.slider.round:before { + border-radius: 1em; +} + +/* menu bar (header) */ +header { + margin-top: 1em; + margin-left: auto; + margin-right: auto; + text-align: center; +} + +.menubar { + display: inline-block; + margin: 0; + padding: 0; +} + +.menubar li { + display: block; + float: left; + min-width: 2em; + max-width: 10em; + padding-top: 0.2em; + padding-bottom: 0.2em; + padding-left: 0.4em; + padding-right: 0.4em; + margin-left: 0.2em; + margin-right: 0.2em; +} + +.menubar ul { + visibility: hidden; + position: absolute; + padding-top: 0.2em; + padding-bottom: 0.2em; + margin-left: -2.6em; + min-width: 2em; + max-width: 10em; +} + +.menubar li:hover ul { + visibility: visible; +} + +/* keep subitmes as list */ +.menubar li ul li{ + float: none; + margin-top: 0.4em; +} + +/* separation from icon */ +.menubar span { + padding-left: 0.4em; +} + +/* footer */ +footer { + margin-left: auto; + margin-right: auto; + text-align: center; +} + +/* image gallery (not really being used rn) */ +div.gallery { + margin: 5px; + border: 1px solid; + float: left; + width: 180px; +} + +div.gallery img { + width: 100%; + height: auto; +} + +div.desc { + padding: 15px; + text-align: center; +} diff --git a/static/css/light.css b/static/css/light.css new file mode 100644 index 0000000..cee7f22 --- /dev/null +++ b/static/css/light.css @@ -0,0 +1,101 @@ +@import './nordtheme.css'; + +:root { + --bg: var(--color5); + --body-bg: var(--color4); + --navitem-bg: var(--color9); + --navitem-bg-hl: var(--color10); + + --fg: var(--color3); + --fg-hl: var(--color0); + + --link: var(--color15); + --link-hl: var(--color7); + --navitem-link: var(--color8); + --navitem-link-hl: var(--color7); + + --fg-acc1: var(--color11); + --fg-acc2: var(--color12); + --fg-acc3: var(--color13); + --fg-acc4: var(--color14); + --fg-acc5: var(--color15); + + --switch-bg: var(--color1); + --switch-slider: var(--color4); + --switch-toggled-bg: var(--color10); + --switch-ol: var(--color4); +} + +html { + background: var(--bg); +} + +body { + background: var(--body-bg); + color: var(--fg); + border: 4px outset var(--fg); +} + +a{ + color: var(--link); +} + +a:hover { + color: var(--link-hl); +} + +h1 { + color: var(--fg-acc1); +} + +h2 { + color: var(--fg-acc2); +} + +h3 { + color: var(--fg-acc3); +} + +/* switch */ +.slider { + background-color: var(--switch-bg); +} + +.slider:before { + background-color: var(--switch-slider); +} + +.switch input:checked + .slider { + background-color: var(--switch-toggled-bg); +} + +.switch input:focus + .slider { + box-shadow: 0 0 0.1em var(--switch-ol); +} + +/* menu bar (header) */ +.menubar li { + background: var(--navitem-bg); +} + +.menubar a { + color: var(--navitem-link); +} + +.menubar li:hover { + background: var(--navitem-bg-hl); + color: var(--fg-hl); +} + +.menubar li:hover > a { + color: var(--navitem-link-hl); +} + +/* image gallery (not really being used rn) */ +div.gallery { + border: 1px solid var(--fg-hl); +} + +div.gallery:hover { + border: var(--fg-acc5); +} diff --git a/static/css/nordtheme.css b/static/css/nordtheme.css new file mode 100644 index 0000000..00d524b --- /dev/null +++ b/static/css/nordtheme.css @@ -0,0 +1,183 @@ +/* + * Copyright (c) 2016-present Arctic Ice Studio + * Copyright (c) 2016-present Sven Greb + * + * Project: Nord + * Version: 0.2.0 + * Repository: https://github.com/arcticicestudio/color + * License: MIT + * References: + * https://www.w3.org/TR/css-variables + * https://www.w3.org/TR/selectors/#root-pseudo + * https://drafts.csswg.org/css-variables + * https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_variables + * http://warpspire.com/kss + * https://github.com/kss-node/kss-node + */ + +/* +An arctic, north-bluish color palette. +Created for the clean- and minimal flat design pattern to achieve a optimal focus and readability for code syntax +highlighting and UI. +It consists of a total of sixteen, carefully selected, dimmed pastel colors for a eye-comfortable, but yet colorful +ambiance. +Styleguide Nord + */ + +:root { + /* + Base component color of "Polar Night". + Used for texts, backgrounds, carets and structuring characters like curly- and square brackets. + Markup: +
+ Styleguide Nord - Polar Night + */ +--color0: #2e3440; + +/* +Lighter shade color of the base component color. +Used as a lighter background color for UI elements like status bars. +Markup: +
+Styleguide Nord - Polar Night + */ +--color1: #3b4252; + +/* +Lighter shade color of the base component color. +Used as line highlighting in the editor. +In the UI scope it may be used as selection- and highlight color. +Markup: +
+Styleguide Nord - Polar Night + */ +--color2: #434c5e; + +/* +Lighter shade color of the base component color. +Used for comments, invisibles, indent- and wrap guide marker. +In the UI scope used as pseudoclass color for disabled elements. +Markup: +
+Styleguide Nord - Polar Night + */ +--color3: #4c566a; + +/* +Base component color of "Snow Storm". +Main color for text, variables, constants and attributes. +In the UI scope used as semi-light background depending on the theme shading design. +Markup: +
+Styleguide Nord - Snow Storm + */ +--color4: #d8dee9; + +/* +Lighter shade color of the base component color. +Used as a lighter background color for UI elements like status bars. +Used as semi-light background depending on the theme shading design. +Markup: +
+Styleguide Nord - Snow Storm + */ +--color5: #e5e9f0; + +/* +Lighter shade color of the base component color. +Used for punctuations, carets and structuring characters like curly- and square brackets. +In the UI scope used as background, selection- and highlight color depending on the theme shading design. +Markup: +
+Styleguide Nord - Snow Storm + */ +--color6: #eceff4; + +/* +Bluish core color. +Used for classes, types and documentation tags. +Markup: +
+Styleguide Nord - Frost + */ +--color7: #8fbcbb; + +/* +Bluish core accent color. +Represents the accent color of the color palette. +Main color for primary UI elements and methods/functions. +Can be used for +- Markup quotes +- Markup link URLs +Markup: +
+Styleguide Nord - Frost + */ +--color8: #88c0d0; + +/* +Bluish core color. +Used for language-specific syntactic/reserved support characters and keywords, operators, tags, units and +punctuations like (semi)colons,commas and braces. +Markup: +
+Styleguide Nord - Frost + */ +--color9: #81a1c1; + +/* +Bluish core color. +Used for markup doctypes, import/include/require statements, pre-processor statements and at-rules (`@`). +Markup: +
+Styleguide Nord - Frost + */ +--color10: #5e81ac; + +/* +Colorful component color. +Used for errors, git/diff deletion and linter marker. +Markup: +
+Styleguide Nord - Aurora + */ +--color11: #bf616a; + +/* +Colorful component color. +Used for annotations. +Markup: +
+Styleguide Nord - Aurora + */ +--color12: #d08770; + +/* +Colorful component color. +Used for escape characters, regular expressions and markup entities. +In the UI scope used for warnings and git/diff renamings. +Markup: +
+Styleguide Nord - Aurora + */ +--color13: #ebcb8b; + +/* +Colorful component color. +Main color for strings and attribute values. +In the UI scope used for git/diff additions and success visualizations. +Markup: +
+Styleguide Nord - Aurora + */ +--color14: #a3be8c; + +/* +Colorful component color. +Used for numbers. +Markup: +
+Styleguide Nord - Aurora + */ +--color15: #b48ead; +} diff --git a/static/css/style.css b/static/css/style.css deleted file mode 100644 index eff9d70..0000000 --- a/static/css/style.css +++ /dev/null @@ -1,155 +0,0 @@ -:root { - /*Polar night*/ - --nord0: #2e3440; - --nord1: #3b4252; - --nord2: #434c5e; - --nord3: #4c566a; - /*Snow storm*/ - --nord4: #d8dee9; - --nord5: #e5e9f0; - --nord6: #eceff4; - /*Frost*/ - --nord7: #8fbcbb; - --nord8: #88c0d0; - --nord9: #81a1c1; - --nord10: #5e81ac; - /*Aurora*/ - --nord11: #bf616a; - --nord12: #d08770; - --nord13: #ebcb8b; - --nord14: #a3be8c; - --nord15: #b48ead; - font-family: Verdana, Geneva, sans-serif; - font-size: larger; -} - -html { - background: var(--nord3); -} - -body { - background: var(--nord0); - color: var(--nord4); - max-width: 50em; - margin-top: 1em; - margin-bottom: 1em; - margin-left: auto; - margin-right: auto; - padding: 0.5em; - border: 4px outset var(--nord4); - text-align: center; -} - -a{ - text-decoration: none; - color: var(--nord15); -} - -a:hover { - color: var(--nord10); -} - -h1 { - color: var(--nord11); -} - -h2 { - color: var(--nord12); -} - -h3 { - color: var(--nord13); -} - -/* menu bar (header) */ -header { - margin-top: 1em; - margin-left: auto; - margin-right: auto; - text-align: center; -} - -.menubar { - display: inline-block; - margin: 0; - padding: 0; -} - -.menubar li { - display: block; - float: left; - min-width: 2em; - max-width: 10em; - background: var(--nord1); - padding-top: 0.2em; - padding-bottom: 0.2em; - padding-left: 0.4em; - padding-right: 0.4em; - margin-left: 0.2em; - margin-right: 0.2em; -} - -.menubar ul { - visibility: hidden; - position: absolute; - padding-top: 0.2em; - padding-bottom: 0.2em; - margin-left: -2.6em; - min-width: 2em; - max-width: 10em; -} - -.menubar li:hover { - background: var(--nord2); - color: var(--nord5); -} - -.menubar li:hover ul { - visibility: visible; -} - -/* keep subitmes as list */ -.menubar li ul li{ - float: none; - margin-top: 0.4em; -} - -/* separation from icon */ -.menubar span { - padding-left: 0.4em; -} - -/* footer */ -footer { - margin-left: auto; - margin-right: auto; - text-align: center; -} - -.footer img { - width: 1em; - height: 1em; - filter: invert(67%) sepia(17%) saturate(1088%) hue-rotate(327deg) brightness(86%) contrast(87%); -} - -/* image gallery */ -div.gallery { - margin: 5px; - border: 1px solid var(--nord6); - float: left; - width: 180px; -} - -div.gallery:hover { - border: 1px solid var(--nord15); -} - -div.gallery img { - width: 100%; - height: auto; -} - -div.desc { - padding: 15px; - text-align: center; -} diff --git a/static/scripts/gb.js b/static/scripts/gb.js index 4051d7f..67afe20 100644 --- a/static/scripts/gb.js +++ b/static/scripts/gb.js @@ -41,7 +41,7 @@ $(document).ready(function (){ $('#btn_down').click(function (){ input(3); }); - + $('#btn_a').click(function (){ input(4); }); diff --git a/static/scripts/theme.js b/static/scripts/theme.js new file mode 100644 index 0000000..2ffe621 --- /dev/null +++ b/static/scripts/theme.js @@ -0,0 +1,53 @@ +var local_storage = window.localStorage; + +window.onload = () => { + let theme = local_storage.getItem('theme'); + let switch_theme = document.getElementById('theme-switch'); + + if(theme == null){ + local_storage.setItem('theme', 'dark'); + } + + if(theme == 'dark'){ + switch_theme.checked = true; + } + else{ + switch_theme.checked = false; + + let theme = document.getElementById('theme-css'); + let href = theme.getAttribute('href'); + + href = href.replace('dark.css', 'light.css'); + theme.setAttribute('href', href); + } +} + +function setTheme(){ + let switch_theme = document.getElementById('theme-switch'); + + if(switch_theme.checked == true){ + local_storage.setItem('theme', 'dark'); + } + else{ + local_storage.setItem('theme', 'light'); + } +} + +// toggles between both themes, and then calls set theme to actually set it persistently. +function toggleTheme(){ + let theme = document.getElementById('theme-css'); + let href = theme.getAttribute('href'); + + if(href.endsWith('dark.css')){ + href = href.replace('dark.css', 'light.css'); + } + else if (href.endsWith('light.css')){ + href = href.replace('light.css', 'dark.css'); + } + else{ + console.log('Wrong replacement.'); + } + + theme.setAttribute('href', href); + setTheme(); +} -- cgit v1.2.3-70-g09d2