From 3a7d887531b95ef66a0b854c03f9d5dcb7b0fb8c Mon Sep 17 00:00:00 2001 From: Spanky <2788886+SpankyWorks@users.noreply.github.com> Date: Tue, 10 Apr 2018 22:02:28 -0500 Subject: [PATCH] Added 'Ozark' dark blue color theme (#62) * added Ozark theme, based off of a personal color scheme I use elsewhere. * fixed incorrect main color value --- routes/_static/themes.js | 4 ++++ scss/themes/_offline.scss | 3 ++- scss/themes/ozark.scss | 45 +++++++++++++++++++++++++++++++++++++++ templates/2xx.html | 3 ++- 4 files changed, 53 insertions(+), 2 deletions(-) create mode 100644 scss/themes/ozark.scss diff --git a/routes/_static/themes.js b/routes/_static/themes.js index baa9c29f..7c41b787 100644 --- a/routes/_static/themes.js +++ b/routes/_static/themes.js @@ -26,6 +26,10 @@ const themes = [ { name: 'gecko', label: 'Gecko' + }, + { + name: 'ozark', + label: 'Ozark' } ] diff --git a/scss/themes/_offline.scss b/scss/themes/_offline.scss index cd95351a..5b010684 100644 --- a/scss/themes/_offline.scss +++ b/scss/themes/_offline.scss @@ -18,6 +18,7 @@ body.theme-majesty.offline, body.theme-oaken.offline, body.theme-scarlet.offline, body.theme-seafoam.offline, -body.theme-gecko.offline { +body.theme-gecko.offline, +body.theme-ozark.offline { @include baseTheme(); } diff --git a/scss/themes/ozark.scss b/scss/themes/ozark.scss new file mode 100644 index 00000000..a2d862e7 --- /dev/null +++ b/scss/themes/ozark.scss @@ -0,0 +1,45 @@ +$main-theme-color: #5263af; +$body-bg-color: #0f1427; +$main-bg-color: #212433; +$anchor-color: lighten($main-theme-color, 20%); +$main-text-color: #fafaff; +$border-color: lighten($main-bg-color, 16%); +$secondary-text-color: #f6f6ff; +$toast-border: $main-theme-color; +$toast-bg: lighten($body-bg-color, 4%); +$focus-outline: darken($main-theme-color, 10%); +$compose-background: darken($main-theme-color, 12%); + +@import "_base.scss"; + +body.theme-ozark { + @include baseTheme(); + + $deemphasized-color: lighten($main-bg-color, 45%); + + --action-button-deemphasized-fill-color: $deemphasized-color; + --action-button-deemphasized-fill-color-hover: lighten($deemphasized-color, 22%); + --action-button-deemphasized-fill-color-active: lighten($deemphasized-color, 5%); + --action-button-deemphasized-fill-color-pressed: darken($deemphasized-color, 7%); + --action-button-deemphasized-fill-color-pressed-hover: darken($deemphasized-color, 2%); + --action-button-deemphasized-fill-color-pressed-active: darken($deemphasized-color, 15%); + + --loading-bg: #ededed; + + --deemphasized-text-color:$deemphasized-color; + + --very-deemphasized-link-color: rgba($anchor-color, 0.6); + --very-deemphasized-text-color: lighten($main-bg-color, 12%); + + --status-direct-background: darken($body-bg-color, 5%); + --main-theme-color: $main-theme-color; + --warning-color: #c7423d; + --alt-input-bg: rgba($main-bg-color, 0.7); + + --muted-modal-bg: transparent; + --muted-modal-focus: #999; + --muted-modal-hover: rgba(255, 255, 255, 0.2); + + --compose-button-halo: rgba(255, 255, 255, 0.1); + +} \ No newline at end of file diff --git a/templates/2xx.html b/templates/2xx.html index ab4e3f6d..be081618 100644 --- a/templates/2xx.html +++ b/templates/2xx.html @@ -18,7 +18,7 @@ /* auto-generated w/ build-sass.js */ body{--button-primary-bg:#6081e6;--button-primary-text:#fff;--button-primary-border:#132c76;--button-primary-bg-active:#456ce2;--button-primary-bg-hover:#6988e7;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#4169e1;--main-bg:#fff;--body-bg:#e8edfb;--body-text-color:#333;--main-border:#dadada;--svg-fill:#4169e1;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#4169e1;--nav-border:#214cce;--nav-a-border:#4169e1;--nav-a-selected-border:#fff;--nav-a-selected-bg:#6d8ce8;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#839deb;--nav-a-bg-hover:#577ae4;--nav-a-border-hover:#4169e1;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#90a8ee;--action-button-fill-color-hover:#a2b6f0;--action-button-fill-color-active:#577ae4;--action-button-fill-color-pressed:#2351dc;--action-button-fill-color-pressed-hover:#3862e0;--action-button-fill-color-pressed-active:#1d44b8;--action-button-deemphasized-fill-color:#666;--action-button-deemphasized-fill-color-hover:#9e9e9e;--action-button-deemphasized-fill-color-active:#737373;--action-button-deemphasized-fill-color-pressed:#545454;--action-button-deemphasized-fill-color-pressed-hover:#616161;--action-button-deemphasized-fill-color-pressed-active:#404040;--settings-list-item-bg:#fff;--settings-list-item-text:#4169e1;--settings-list-item-text-hover:#4169e1;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#c5d1f6;--very-deemphasized-link-color:rgba(65,105,225,0.6);--very-deemphasized-text-color:rgba(102,102,102,0.6);--status-direct-background:#d2dcf8;--main-theme-color:#4169e1;--warning-color:#e01f19;--alt-input-bg:rgba(255,255,255,0.7);--muted-modal-bg:transparent;--muted-modal-focus:#999;--muted-modal-hover:rgba(255,255,255,0.2);--compose-autosuggest-item-hover:#ced8f7;--compose-autosuggest-item-active:#b8c7f4;--compose-autosuggest-outline:#dbe3f9;--compose-button-halo:rgba(255,255,255,0.1)} body{margin:0;font-family:system-ui, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;font-size:14px;line-height:1.4;color:var(--body-text-color);background:var(--body-bg)}.container{overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;will-change:transform;position:absolute;top:42px;left:0;right:0;bottom:0}@media (max-width: 991px){.container{top:52px}}@media (max-width: 767px){.container{top:62px}}main{position:relative;width:602px;max-width:100vw;padding:0;box-sizing:border-box;margin:30px auto 15px;background:var(--main-bg);border:1px solid var(--main-border);border-radius:1px;min-height:70vh}@media (max-width: 767px){main{margin:5px auto 15px}}footer{width:602px;max-width:100vw;box-sizing:border-box;margin:15px auto;border-radius:1px;background:var(--main-bg);font-size:0.9em;padding:20px;border:1px solid var(--main-border)}h1,h2,h3,h4,h5,h6{margin:0 0 0.5em 0;font-weight:400;line-height:1.2}h1{font-size:2em}a{color:var(--anchor-text);text-decoration:none}a:visited{color:var(--anchor-text)}a:hover{text-decoration:underline}input{border:1px solid var(--input-border);padding:5px;box-sizing:border-box}button,.button{font-size:1.2em;background:var(--button-bg);border-radius:2px;padding:10px 15px;border:1px solid var(--button-border);cursor:pointer;color:var(--button-text)}button:hover,.button:hover{background:var(--button-bg-hover);text-decoration:none}button:active,.button:active{background:var(--button-bg-active)}button[disabled],.button[disabled]{opacity:0.35;pointer-events:none;cursor:not-allowed}button.primary,.button.primary{border:1px solid var(--button-primary-border);background:var(--button-primary-bg);color:var(--button-primary-text)}button.primary:hover,.button.primary:hover{background:var(--button-primary-bg-hover)}button.primary:active,.button.primary:active{background:var(--button-primary-bg-active)}p,label,input{font-size:1.3em}ul,li,p{padding:0;margin:0}.hidden{opacity:0}*:focus{outline:2px solid var(--focus-outline)}button::-moz-focus-inner{border:0}input:required,input:invalid{box-shadow:none}textarea{font-family:inherit;font-size:inherit;box-sizing:border-box}@keyframes spin{0%{transform:rotate(0deg)}25%{transform:rotate(90deg)}50%{transform:rotate(180deg)}75%{transform:rotate(270deg)}100%{transform:rotate(360deg)}}.spin{animation:spin 1.5s infinite linear}.ellipsis::after{content:"\2026"} -body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-oaken.offline,body.theme-scarlet.offline,body.theme-seafoam.offline,body.theme-gecko.offline{--button-primary-bg:#ababab;--button-primary-text:#fff;--button-primary-border:#4d4d4d;--button-primary-bg-active:#9c9c9c;--button-primary-bg-hover:#b0b0b0;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#999;--main-bg:#fff;--body-bg:#fafafa;--body-text-color:#333;--main-border:#dadada;--svg-fill:#999;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#999;--nav-border:gray;--nav-a-border:#999;--nav-a-selected-border:#fff;--nav-a-selected-bg:#b3b3b3;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#bfbfbf;--nav-a-bg-hover:#a6a6a6;--nav-a-border-hover:#999;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#c7c7c7;--action-button-fill-color-hover:#d1d1d1;--action-button-fill-color-active:#a6a6a6;--action-button-fill-color-pressed:#878787;--action-button-fill-color-pressed-hover:#949494;--action-button-fill-color-pressed-active:#737373;--action-button-deemphasized-fill-color:#666;--action-button-deemphasized-fill-color-hover:#9e9e9e;--action-button-deemphasized-fill-color-active:#737373;--action-button-deemphasized-fill-color-pressed:#545454;--action-button-deemphasized-fill-color-pressed-hover:#616161;--action-button-deemphasized-fill-color-pressed-active:#404040;--settings-list-item-bg:#fff;--settings-list-item-text:#999;--settings-list-item-text-hover:#999;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#bfbfbf;--very-deemphasized-link-color:rgba(153,153,153,0.6);--very-deemphasized-text-color:rgba(102,102,102,0.6);--status-direct-background:#ededed;--main-theme-color:#999;--warning-color:#e01f19;--alt-input-bg:rgba(255,255,255,0.7);--muted-modal-bg:transparent;--muted-modal-focus:#999;--muted-modal-hover:rgba(255,255,255,0.2);--compose-autosuggest-item-hover:#c4c4c4;--compose-autosuggest-item-active:#b8b8b8;--compose-autosuggest-outline:#ccc;--compose-button-halo:rgba(255,255,255,0.1)} +body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-oaken.offline,body.theme-scarlet.offline,body.theme-seafoam.offline,body.theme-gecko.offline,body.theme-ozark.offline{--button-primary-bg:#ababab;--button-primary-text:#fff;--button-primary-border:#4d4d4d;--button-primary-bg-active:#9c9c9c;--button-primary-bg-hover:#b0b0b0;--button-bg:#e6e6e6;--button-text:#333;--button-border:#a7a7a7;--button-bg-active:#bfbfbf;--button-bg-hover:#f2f2f2;--input-border:#dadada;--anchor-text:#999;--main-bg:#fff;--body-bg:#fafafa;--body-text-color:#333;--main-border:#dadada;--svg-fill:#999;--form-bg:#f7f7f7;--form-border:#c1c1c1;--nav-bg:#999;--nav-border:gray;--nav-a-border:#999;--nav-a-selected-border:#fff;--nav-a-selected-bg:#b3b3b3;--nav-svg-fill:#fff;--nav-text-color:#fff;--nav-a-selected-border-hover:#fff;--nav-a-selected-bg-hover:#bfbfbf;--nav-a-bg-hover:#a6a6a6;--nav-a-border-hover:#999;--nav-svg-fill-hover:#fff;--nav-text-color-hover:#fff;--action-button-fill-color:#c7c7c7;--action-button-fill-color-hover:#d1d1d1;--action-button-fill-color-active:#a6a6a6;--action-button-fill-color-pressed:#878787;--action-button-fill-color-pressed-hover:#949494;--action-button-fill-color-pressed-active:#737373;--action-button-deemphasized-fill-color:#666;--action-button-deemphasized-fill-color-hover:#9e9e9e;--action-button-deemphasized-fill-color-active:#737373;--action-button-deemphasized-fill-color-pressed:#545454;--action-button-deemphasized-fill-color-pressed-hover:#616161;--action-button-deemphasized-fill-color-pressed-active:#404040;--settings-list-item-bg:#fff;--settings-list-item-text:#999;--settings-list-item-text-hover:#999;--settings-list-item-border:#dadada;--settings-list-item-bg-active:#e6e6e6;--settings-list-item-bg-hover:#fafafa;--toast-bg:#333;--toast-border:#fafafa;--toast-text:#fff;--mask-bg:#333;--mask-svg-fill:#fff;--mask-opaque-bg:rgba(51,51,51,0.8);--loading-bg:#ededed;--deemphasized-text-color:#666;--focus-outline:#bfbfbf;--very-deemphasized-link-color:rgba(153,153,153,0.6);--very-deemphasized-text-color:rgba(102,102,102,0.6);--status-direct-background:#ededed;--main-theme-color:#999;--warning-color:#e01f19;--alt-input-bg:rgba(255,255,255,0.7);--muted-modal-bg:transparent;--muted-modal-focus:#999;--muted-modal-hover:rgba(255,255,255,0.2);--compose-autosuggest-item-hover:#c4c4c4;--compose-autosuggest-item-active:#b8b8b8;--compose-autosuggest-outline:#ccc;--compose-button-halo:rgba(255,255,255,0.1)} @@ -50,6 +50,7 @@ body.offline,body.theme-hotpants.offline,body.theme-majesty.offline,body.theme-o oaken: "saddlebrown", majesty: "blueviolet", gecko: "#4ab92f", + ozark: "#5263af", offline: "#999999" } if (localStorage.store_currentInstance && localStorage.store_instanceThemes) {