diff --git a/package-lock.json b/package-lock.json index 7ba634bc..887ad424 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "nighttab", - "version": "4.7.0", + "version": "4.8.0", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index fafdc9b6..3e4cadca 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "nighttab", - "version": "4.7.0", + "version": "4.8.0", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", "main": "index.js", "scripts": { diff --git a/src/css/fonts.css b/src/css/fonts.css index d6e8472f..f5555a85 100755 --- a/src/css/fonts.css +++ b/src/css/fonts.css @@ -65,7 +65,7 @@ /* fjalla one */ @font-face { - font-family: "Fjalla One Regular"; + font-family: "Fjalla One"; src: url("../fonts/fjalla-one/fjalla-one-regular.woff2") format("woff2"), url("../fonts/fjalla-one/fjalla-one-regular.woff") format("woff"), url("../fonts/fjalla-one/fjalla-one-regular.ttf") format("truetype"); font-weight: normal; font-style: normal; diff --git a/src/css/theme.css b/src/css/theme.css index 9e2bd6cf..8da21dc7 100644 --- a/src/css/theme.css +++ b/src/css/theme.css @@ -1,25 +1,73 @@ -.theme-preset-button { +.theme-preset-item, +.theme-custom-item { + width: var(--theme-preset-preview-size); + height: var(--theme-preset-preview-size); + border-radius: var(--theme-radius); padding: 0; - flex-direction: column; - justify-content: center; + margin: 0.5em; + position: relative; overflow: hidden; - max-width: var(--theme-preset-preview-size); } -.theme-preset-button .button-text { - margin-top: 0.75em; - margin-bottom: 0.75em; - margin-left: 0; +.theme-preset-button, +.theme-custom-button { + padding: 0; + border-radius: 0; + width: var(--theme-preset-preview-size); + height: var(--theme-preset-preview-size); + line-height: 1.6; + position: absolute; + top: 0; + left: 0; + display: block; + overflow: hidden; + z-index: 2; + transition: height var(--layout-timing-extra-fast), box-shadow var(--layout-timing-extra-fast); } -.theme-preset-button:after { +.theme-preset-button:after, +.theme-custom-button::after { content: none; } -.theme-preset-preview { +.theme-custom-control { + width: var(--theme-preset-preview-size); + height: 0; + position: absolute; + bottom: 0; + display: flex; + justify-content: flex-start; + align-items: stretch; + z-index: 1; + transition: height var(--layout-timing-extra-fast); +} + +.theme-custom-control-item { + padding: 0; + border-radius: 0; + flex: 1 1 auto; +} + +.theme-custom-control-item:after { + border-radius: 0; +} + +.is-theme-custom-edit .theme-custom-button { + height: calc(var(--theme-preset-preview-size) - var(--theme-custom-edit-height)); + box-shadow: var(--layout-shadow-medium); +} + +.is-theme-custom-edit .theme-custom-control { + height: var(--theme-custom-edit-height); +} + +.theme-preset-preview, +.theme-custom-preview { width: var(--theme-preset-preview-size); height: var(--theme-preset-preview-size); - position: relative; + position: absolute; + top: 0; + left: 0; } .theme-preset-background-01, @@ -27,7 +75,11 @@ .theme-preset-background-03, .theme-preset-background-04, .theme-preset-accent, -.theme-preset-font { +.theme-custom-background-01, +.theme-custom-background-02, +.theme-custom-background-03, +.theme-custom-background-04, +.theme-custom-accent { width: 100%; height: 100%; position: absolute; @@ -37,564 +89,93 @@ transition: clip-path var(--layout-timing-extra-fast); } -.theme-preset-background-01 { +.theme-preset-background-01, +.theme-custom-background-01 { z-index: 1; } -.theme-preset-background-02 { +.theme-preset-background-02, +.theme-custom-background-02 { z-index: 2; clip-path: polygon(70% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 70%); - transition-delay: 0s; -} - -.theme-preset-background-03 { - z-index: 3; - clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%); - transition-delay: 0s; -} - -.theme-preset-background-04 { - z-index: 4; - clip-path: polygon(100% 30%, 100% 100%, 30% 100%); - transition-delay: 0s; -} - -.theme-preset-accent { - clip-path: circle(30% at 100% 100%); - z-index: 5; -} - -.theme-preset-font { - padding: 0.5em; - line-height: 1.2; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - transform: scale(1); - white-space: initial; - transition: transform var(--layout-timing-extra-fast); - z-index: 6; -} - -.theme-preset-font-display { - font-weight: 400; - font-style: normal; - font-size: 1em; - margin-bottom: 0.25em; -} - -.theme-preset-font-ui { - font-weight: 400; - font-style: normal; - font-size: 0.8em; -} - -.theme-preset-button:focus .theme-preset-background-02, -.theme-preset-button:hover .theme-preset-background-02 { - clip-path: polygon(60% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 60%); - transition-delay: var(--layout-duration-01); -} - -.theme-preset-button:focus .theme-preset-background-03, -.theme-preset-button:hover .theme-preset-background-03 { - clip-path: polygon(90% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 90%); - transition-delay: var(--layout-duration-02); -} - -.theme-preset-button:focus .theme-preset-background-04, -.theme-preset-button:hover .theme-preset-background-04 { - clip-path: polygon(100% 20%, 100% 100%, 20% 100%); - transition-delay: var(--layout-duration-03); -} - -.theme-preset-button:focus .theme-preset-accent, -.theme-preset-button:hover .theme-preset-accent { - clip-path: circle(40% at 100% 100%); transition-delay: var(--layout-duration-04); } -.theme-preset-button:hover .theme-preset-font, -.theme-preset-button:focus .theme-preset-font { - transform: scale(1.1); -} - -.theme-preset-background-nighttab-01 { - background-color: rgb(var(--theme-preset-background-nighttab-01)); -} - -.theme-preset-background-nighttab-02 { - background-color: rgb(var(--theme-preset-background-nighttab-02)); -} - -.theme-preset-background-nighttab-03 { - background-color: rgb(var(--theme-preset-background-nighttab-03)); -} - -.theme-preset-background-nighttab-04 { - background-color: rgb(var(--theme-preset-background-nighttab-04)); -} - -.theme-preset-accent-nighttab { - background-color: rgb(var(--theme-preset-accent-nighttab)); -} - -.theme-preset-font-display-nighttab { - font-family: var(--theme-preset-font-display-nighttab); - color: rgb(var(--theme-preset-font-color-nighttab)); -} - -.theme-preset-font-ui-nighttab { - font-family: var(--theme-preset-font-ui-nighttab); - color: rgb(var(--theme-preset-font-color-nighttab)); -} - -.theme-preset-background-midnight-01 { - background-color: rgb(var(--theme-preset-background-midnight-01)); -} - -.theme-preset-background-midnight-02 { - background-color: rgb(var(--theme-preset-background-midnight-02)); -} - -.theme-preset-background-midnight-03 { - background-color: rgb(var(--theme-preset-background-midnight-03)); -} - -.theme-preset-background-midnight-04 { - background-color: rgb(var(--theme-preset-background-midnight-04)); -} - -.theme-preset-accent-midnight { - background-color: rgb(var(--theme-preset-accent-midnight)); -} - -.theme-preset-font-display-midnight { - font-family: var(--theme-preset-font-display-midnight); - color: rgb(var(--theme-preset-font-color-midnight)); -} - -.theme-preset-font-ui-midnight { - font-family: var(--theme-preset-font-ui-midnight); - color: rgb(var(--theme-preset-font-color-midnight)); -} - -.theme-preset-background-pym-01 { - background-color: rgb(var(--theme-preset-background-pym-01)); -} - -.theme-preset-background-pym-02 { - background-color: rgb(var(--theme-preset-background-pym-02)); -} - -.theme-preset-background-pym-03 { - background-color: rgb(var(--theme-preset-background-pym-03)); -} - -.theme-preset-background-pym-04 { - background-color: rgb(var(--theme-preset-background-pym-04)); -} - -.theme-preset-accent-pym { - background-color: rgb(var(--theme-preset-accent-pym)); -} - -.theme-preset-font-display-pym { - font-family: var(--theme-preset-font-display-pym); - color: rgb(var(--theme-preset-font-color-pym)); -} - -.theme-preset-font-ui-pym { - font-family: var(--theme-preset-font-ui-pym); - color: rgb(var(--theme-preset-font-color-pym)); -} - -.theme-preset-background-cruiser-01 { - background-color: rgb(var(--theme-preset-background-cruiser-01)); -} - -.theme-preset-background-cruiser-02 { - background-color: rgb(var(--theme-preset-background-cruiser-02)); -} - -.theme-preset-background-cruiser-03 { - background-color: rgb(var(--theme-preset-background-cruiser-03)); -} - -.theme-preset-background-cruiser-04 { - background-color: rgb(var(--theme-preset-background-cruiser-04)); -} - -.theme-preset-accent-cruiser { - background-color: rgb(var(--theme-preset-accent-cruiser)); -} - -.theme-preset-font-display-cruiser { - font-family: var(--theme-preset-font-display-cruiser); - color: rgb(var(--theme-preset-font-color-cruiser)); -} - -.theme-preset-font-ui-cruiser { - font-family: var(--theme-preset-font-ui-cruiser); - color: rgb(var(--theme-preset-font-color-cruiser)); -} - -.theme-preset-background-sharpmint-01 { - background-color: rgb(var(--theme-preset-background-sharpmint-01)); -} - -.theme-preset-background-sharpmint-02 { - background-color: rgb(var(--theme-preset-background-sharpmint-02)); -} - -.theme-preset-background-sharpmint-03 { - background-color: rgb(var(--theme-preset-background-sharpmint-03)); -} - -.theme-preset-background-sharpmint-04 { - background-color: rgb(var(--theme-preset-background-sharpmint-04)); -} - -.theme-preset-accent-sharpmint { - background-color: rgb(var(--theme-preset-accent-sharpmint)); -} - -.theme-preset-font-display-sharpmint { - font-family: var(--theme-preset-font-display-sharpmint); - color: rgb(var(--theme-preset-font-color-sharpmint)); -} - -.theme-preset-font-ui-sharpmint { - font-family: var(--theme-preset-font-ui-sharpmint); - color: rgb(var(--theme-preset-font-color-sharpmint)); -} - -.theme-preset-background-snowglow-01 { - background-color: rgb(var(--theme-preset-background-snowglow-01)); -} - -.theme-preset-background-snowglow-02 { - background-color: rgb(var(--theme-preset-background-snowglow-02)); -} - -.theme-preset-background-snowglow-03 { - background-color: rgb(var(--theme-preset-background-snowglow-03)); -} - -.theme-preset-background-snowglow-04 { - background-color: rgb(var(--theme-preset-background-snowglow-04)); -} - -.theme-preset-accent-snowglow { - background-color: rgb(var(--theme-preset-accent-snowglow)); -} - -.theme-preset-font-display-snowglow { - font-family: var(--theme-preset-font-display-snowglow); - color: rgb(var(--theme-preset-font-color-snowglow)); -} - -.theme-preset-font-ui-snowglow { - font-family: var(--theme-preset-font-ui-snowglow); - color: rgb(var(--theme-preset-font-color-snowglow)); -} - -.theme-preset-background-rumble-01 { - background-color: rgb(var(--theme-preset-background-rumble-01)); -} - -.theme-preset-background-rumble-02 { - background-color: rgb(var(--theme-preset-background-rumble-02)); -} - -.theme-preset-background-rumble-03 { - background-color: rgb(var(--theme-preset-background-rumble-03)); -} - -.theme-preset-background-rumble-04 { - background-color: rgb(var(--theme-preset-background-rumble-04)); -} - -.theme-preset-accent-rumble { - background-color: rgb(var(--theme-preset-accent-rumble)); -} - -.theme-preset-font-display-rumble { - font-family: var(--theme-preset-font-display-rumble); - color: rgb(var(--theme-preset-font-color-rumble)); -} - -.theme-preset-font-ui-rumble { - font-family: var(--theme-preset-font-ui-rumble); - color: rgb(var(--theme-preset-font-color-rumble)); -} - -.theme-preset-background-sollight-01 { - background-color: rgb(var(--theme-preset-background-sollight-01)); -} - -.theme-preset-background-sollight-02 { - background-color: rgb(var(--theme-preset-background-sollight-02)); -} - -.theme-preset-background-sollight-03 { - background-color: rgb(var(--theme-preset-background-sollight-03)); -} - -.theme-preset-background-sollight-04 { - background-color: rgb(var(--theme-preset-background-sollight-04)); -} - -.theme-preset-accent-sollight { - background-color: rgb(var(--theme-preset-accent-sollight)); -} - -.theme-preset-font-display-sollight { - font-family: var(--theme-preset-font-display-sollight); - color: rgb(var(--theme-preset-font-color-sollight)); -} - -.theme-preset-font-ui-sollight { - font-family: var(--theme-preset-font-ui-sollight); - color: rgb(var(--theme-preset-font-color-sollight)); -} - -.theme-preset-background-artdeco-01 { - background-color: rgb(var(--theme-preset-background-artdeco-01)); -} - -.theme-preset-background-artdeco-02 { - background-color: rgb(var(--theme-preset-background-artdeco-02)); -} - -.theme-preset-background-artdeco-03 { - background-color: rgb(var(--theme-preset-background-artdeco-03)); -} - -.theme-preset-background-artdeco-04 { - background-color: rgb(var(--theme-preset-background-artdeco-04)); -} - -.theme-preset-accent-artdeco { - background-color: rgb(var(--theme-preset-accent-artdeco)); -} - -.theme-preset-font-display-artdeco { - font-family: var(--theme-preset-font-display-artdeco); - color: rgb(var(--theme-preset-font-color-artdeco)); -} - -.theme-preset-font-ui-artdeco { - font-family: var(--theme-preset-font-ui-artdeco); - color: rgb(var(--theme-preset-font-color-artdeco)); -} - -.theme-preset-background-macaroon-01 { - background-color: rgb(var(--theme-preset-background-macaroon-01)); -} - -.theme-preset-background-macaroon-02 { - background-color: rgb(var(--theme-preset-background-macaroon-02)); -} - -.theme-preset-background-macaroon-03 { - background-color: rgb(var(--theme-preset-background-macaroon-03)); -} - -.theme-preset-background-macaroon-04 { - background-color: rgb(var(--theme-preset-background-macaroon-04)); -} - -.theme-preset-accent-macaroon { - background-color: rgb(var(--theme-preset-accent-macaroon)); -} - -.theme-preset-font-display-macaroon { - font-family: var(--theme-preset-font-display-macaroon); - color: rgb(var(--theme-preset-font-color-macaroon)); -} - -.theme-preset-font-ui-macaroon { - font-family: var(--theme-preset-font-ui-macaroon); - color: rgb(var(--theme-preset-font-color-macaroon)); -} - -.theme-preset-background-hotpepper-01 { - background-color: rgb(var(--theme-preset-background-hotpepper-01)); -} - -.theme-preset-background-hotpepper-02 { - background-color: rgb(var(--theme-preset-background-hotpepper-02)); -} - -.theme-preset-background-hotpepper-03 { - background-color: rgb(var(--theme-preset-background-hotpepper-03)); -} - -.theme-preset-background-hotpepper-04 { - background-color: rgb(var(--theme-preset-background-hotpepper-04)); -} - -.theme-preset-accent-hotpepper { - background-color: rgb(var(--theme-preset-accent-hotpepper)); -} - -.theme-preset-font-display-hotpepper { - font-family: var(--theme-preset-font-display-hotpepper); - color: rgb(var(--theme-preset-font-color-hotpepper)); -} - -.theme-preset-font-ui-hotpepper { - font-family: var(--theme-preset-font-ui-hotpepper); - color: rgb(var(--theme-preset-font-color-hotpepper)); -} - -.theme-preset-background-steel-01 { - background-color: rgb(var(--theme-preset-background-steel-01)); -} - -.theme-preset-background-steel-02 { - background-color: rgb(var(--theme-preset-background-steel-02)); -} - -.theme-preset-background-steel-03 { - background-color: rgb(var(--theme-preset-background-steel-03)); -} - -.theme-preset-background-steel-04 { - background-color: rgb(var(--theme-preset-background-steel-04)); -} - -.theme-preset-accent-steel { - background-color: rgb(var(--theme-preset-accent-steel)); -} - -.theme-preset-font-display-steel { - font-family: var(--theme-preset-font-display-steel); - color: rgb(var(--theme-preset-font-color-steel)); -} - -.theme-preset-font-ui-steel { - font-family: var(--theme-preset-font-ui-steel); - color: rgb(var(--theme-preset-font-color-steel)); -} - -.theme-preset-background-outrun-01 { - background-color: rgb(var(--theme-preset-background-outrun-01)); -} - -.theme-preset-background-outrun-02 { - background-color: rgb(var(--theme-preset-background-outrun-02)); -} - -.theme-preset-background-outrun-03 { - background-color: rgb(var(--theme-preset-background-outrun-03)); -} - -.theme-preset-background-outrun-04 { - background-color: rgb(var(--theme-preset-background-outrun-04)); -} - -.theme-preset-accent-outrun { - background-color: rgb(var(--theme-preset-accent-outrun)); -} - -.theme-preset-font-display-outrun { - font-family: var(--theme-preset-font-display-outrun); - color: rgb(var(--theme-preset-font-color-outrun)); -} - -.theme-preset-font-ui-outrun { - font-family: var(--theme-preset-font-ui-outrun); - color: rgb(var(--theme-preset-font-color-outrun)); -} - -.theme-preset-background-pumpkin-01 { - background-color: rgb(var(--theme-preset-background-pumpkin-01)); -} - -.theme-preset-background-pumpkin-02 { - background-color: rgb(var(--theme-preset-background-pumpkin-02)); -} - -.theme-preset-background-pumpkin-03 { - background-color: rgb(var(--theme-preset-background-pumpkin-03)); -} - -.theme-preset-background-pumpkin-04 { - background-color: rgb(var(--theme-preset-background-pumpkin-04)); -} - -.theme-preset-accent-pumpkin { - background-color: rgb(var(--theme-preset-accent-pumpkin)); -} - -.theme-preset-font-display-pumpkin { - font-family: var(--theme-preset-font-display-pumpkin); - color: rgb(var(--theme-preset-font-color-pumpkin)); -} - -.theme-preset-font-ui-pumpkin { - font-family: var(--theme-preset-font-ui-pumpkin); - color: rgb(var(--theme-preset-font-color-pumpkin)); -} - -.theme-preset-background-bubblegum-01 { - background-color: rgb(var(--theme-preset-background-bubblegum-01)); -} - -.theme-preset-background-bubblegum-02 { - background-color: rgb(var(--theme-preset-background-bubblegum-02)); -} - -.theme-preset-background-bubblegum-03 { - background-color: rgb(var(--theme-preset-background-bubblegum-03)); -} - -.theme-preset-background-bubblegum-04 { - background-color: rgb(var(--theme-preset-background-bubblegum-04)); -} - -.theme-preset-accent-bubblegum { - background-color: rgb(var(--theme-preset-accent-bubblegum)); -} - -.theme-preset-font-display-bubblegum { - font-family: var(--theme-preset-font-display-bubblegum); - color: rgb(var(--theme-preset-font-color-bubblegum)); -} - -.theme-preset-font-ui-bubblegum { - font-family: var(--theme-preset-font-ui-bubblegum); - color: rgb(var(--theme-preset-font-color-bubblegum)); -} - -.theme-preset-background-elderbean-01 { - background-color: rgb(var(--theme-preset-background-elderbean-01)); -} - -.theme-preset-background-elderbean-02 { - background-color: rgb(var(--theme-preset-background-elderbean-02)); -} - -.theme-preset-background-elderbean-03 { - background-color: rgb(var(--theme-preset-background-elderbean-03)); -} - -.theme-preset-background-elderbean-04 { - background-color: rgb(var(--theme-preset-background-elderbean-04)); -} - -.theme-preset-accent-elderbean { - background-color: rgb(var(--theme-preset-accent-elderbean)); -} - -.theme-preset-font-display-elderbean { - font-family: var(--theme-preset-font-display-elderbean); - color: rgb(var(--theme-preset-font-color-elderbean)); -} - -.theme-preset-font-ui-elderbean { - font-family: var(--theme-preset-font-ui-elderbean); - color: rgb(var(--theme-preset-font-color-elderbean)); +.theme-preset-background-03, +.theme-custom-background-03 { + z-index: 3; + clip-path: polygon(100% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 100%); + transition-delay: var(--layout-duration-03); +} + +.theme-preset-background-04, +.theme-custom-background-04 { + z-index: 4; + clip-path: polygon(100% 30%, 100% 100%, 30% 100%); + transition-delay: var(--layout-duration-02); +} + +.theme-preset-accent, +.theme-custom-accent { + z-index: 5; + clip-path: circle(30% at 100% 100%); + transition-delay: var(--layout-duration-01); +} + +.is-theme-custom-edit .theme-custom-accent { + clip-path: circle(30% at 100% 60%); +} + +.theme-preset-name, +.theme-custom-name { + color: rgb(var(--theme-style-text)); + font-weight: 700; + font-style: normal; + font-size: 0.8em; + text-align: left; + display: block; + max-width: calc(100% - 2em); + max-height: calc(100% - 2em); + position: absolute; + top: 1em; + left: 1em; + z-index: 6; + overflow: hidden; + text-overflow: ellipsis; + white-space: initial; + transform: scale(1); + transition: transform var(--layout-timing-extra-fast); +} + +.theme-preset-button:focus .theme-preset-background-02, +.theme-preset-button:hover .theme-preset-background-02, +.theme-custom-button:focus .theme-custom-background-02, +.theme-custom-button:hover .theme-custom-background-02 { + clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 50%); +} + +.theme-preset-button:focus .theme-preset-background-03, +.theme-preset-button:hover .theme-preset-background-03, +.theme-custom-button:focus .theme-custom-background-03, +.theme-custom-button:hover .theme-custom-background-03 { + clip-path: polygon(80% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 80%); +} + +.theme-preset-button:focus .theme-preset-background-04, +.theme-preset-button:hover .theme-preset-background-04, +.theme-custom-button:focus .theme-custom-background-04, +.theme-custom-button:hover .theme-custom-background-04 { + clip-path: polygon(100% 10%, 100% 100%, 10% 100%); +} + +.theme-preset-button:focus .theme-preset-accent, +.theme-preset-button:hover .theme-preset-accent, +.theme-custom-button:focus .theme-custom-accent, +.theme-custom-button:hover .theme-custom-accent { + clip-path: circle(40% at 100% 100%); +} + +.is-theme-custom-edit .theme-custom-button:focus .theme-custom-accent, +.is-theme-custom-edit .theme-custom-button:hover .theme-custom-accent { + clip-path: circle(40% at 100% 60%); } diff --git a/src/css/variables.css b/src/css/variables.css index 3706de22..99c563b6 100644 --- a/src/css/variables.css +++ b/src/css/variables.css @@ -3,7 +3,7 @@ --theme-root-font-size: 14px; --theme-accent: 250, 130, 0; --theme-radius: 0.2rem; - --theme-font-display-name: "Fjalla One Regular", sans-serif; + --theme-font-display-name: "Fjalla One", sans-serif; --theme-font-display-weight: 400; --theme-font-display-style: "normal"; --theme-font-ui-name: "Open Sans", sans-serif; @@ -32,105 +32,8 @@ --theme-shade-pos-08: 25, 25, 25; --theme-shade-pos-09: 25, 25, 25; --theme-shade-pos-10: 25, 25, 25; - --theme-preset-background-nighttab-01: 25, 25, 25; - --theme-preset-background-nighttab-02: 25, 25, 25; - --theme-preset-background-nighttab-03: 25, 25, 25; - --theme-preset-background-nighttab-04: 25, 25, 25; - --theme-preset-accent-nighttab: 25, 25, 25; - --theme-preset-font-display-nighttab: sans-serif; - --theme-preset-font-ui-nighttab: sans-serif; - --theme-preset-background-midnight-01: 25, 25, 25; - --theme-preset-background-midnight-02: 25, 25, 25; - --theme-preset-background-midnight-03: 25, 25, 25; - --theme-preset-background-midnight-04: 25, 25, 25; - --theme-preset-accent-midnight: 25, 25, 25; - --theme-preset-font-display-midnight: sans-serif; - --theme-preset-font-ui-midnight: sans-serif; - --theme-preset-background-cruiser-01: 25, 25, 25; - --theme-preset-background-cruiser-02: 25, 25, 25; - --theme-preset-background-cruiser-03: 25, 25, 25; - --theme-preset-background-cruiser-04: 25, 25, 25; - --theme-preset-accent-cruiser: 25, 25, 25; - --theme-preset-font-display-cruiser: sans-serif; - --theme-preset-font-ui-cruiser: sans-serif; - --theme-preset-background-sharpmint-01: 25, 25, 25; - --theme-preset-background-sharpmint-02: 25, 25, 25; - --theme-preset-background-sharpmint-03: 25, 25, 25; - --theme-preset-background-sharpmint-04: 25, 25, 25; - --theme-preset-accent-sharpmint: 25, 25, 25; - --theme-preset-font-display-sharpmint: sans-serif; - --theme-preset-font-ui-sharpmint: sans-serif; - --theme-preset-background-snowglow-01: 25, 25, 25; - --theme-preset-background-snowglow-02: 25, 25, 25; - --theme-preset-background-snowglow-03: 25, 25, 25; - --theme-preset-background-snowglow-04: 25, 25, 25; - --theme-preset-accent-snowglow: 25, 25, 25; - --theme-preset-font-display-snowglow: sans-serif; - --theme-preset-font-ui-snowglow: sans-serif; - --theme-preset-background-rumble-01: 25, 25, 25; - --theme-preset-background-rumble-02: 25, 25, 25; - --theme-preset-background-rumble-03: 25, 25, 25; - --theme-preset-background-rumble-04: 25, 25, 25; - --theme-preset-accent-rumble: 25, 25, 25; - --theme-preset-font-display-rumble: sans-serif; - --theme-preset-font-ui-rumble: sans-serif; - --theme-preset-background-sollight-01: 25, 25, 25; - --theme-preset-background-sollight-02: 25, 25, 25; - --theme-preset-background-sollight-03: 25, 25, 25; - --theme-preset-background-sollight-04: 25, 25, 25; - --theme-preset-accent-sollight: 25, 25, 25; - --theme-preset-font-display-sollight: sans-serif; - --theme-preset-font-ui-sollight: sans-serif; - --theme-preset-background-artdeco-01: 25, 25, 25; - --theme-preset-background-artdeco-02: 25, 25, 25; - --theme-preset-background-artdeco-03: 25, 25, 25; - --theme-preset-background-artdeco-04: 25, 25, 25; - --theme-preset-accent-artdeco: 25, 25, 25; - --theme-preset-font-display-artdeco: sans-serif; - --theme-preset-font-ui-artdeco: sans-serif; - --theme-preset-background-macaroon-01: 25, 25, 25; - --theme-preset-background-macaroon-02: 25, 25, 25; - --theme-preset-background-macaroon-03: 25, 25, 25; - --theme-preset-background-macaroon-04: 25, 25, 25; - --theme-preset-accent-macaroon: 25, 25, 25; - --theme-preset-font-display-macaroon: sans-serif; - --theme-preset-font-ui-macaroon: sans-serif; - --theme-preset-background-hotpepper-01: 25, 25, 25; - --theme-preset-background-hotpepper-02: 25, 25, 25; - --theme-preset-background-hotpepper-03: 25, 25, 25; - --theme-preset-background-hotpepper-04: 25, 25, 25; - --theme-preset-accent-hotpepper: 25, 25, 25; - --theme-preset-font-display-hotpepper: sans-serif; - --theme-preset-font-ui-hotpepper: sans-serif; - --theme-preset-background-steel-01: 25, 25, 25; - --theme-preset-background-steel-02: 25, 25, 25; - --theme-preset-background-steel-03: 25, 25, 25; - --theme-preset-background-steel-04: 25, 25, 25; - --theme-preset-accent-steel: 25, 25, 25; - --theme-preset-font-display-steel: sans-serif; - --theme-preset-font-ui-steel: sans-serif; - --theme-preset-background-outrun-01: 25, 25, 25; - --theme-preset-background-outrun-02: 25, 25, 25; - --theme-preset-background-outrun-03: 25, 25, 25; - --theme-preset-background-outrun-04: 25, 25, 25; - --theme-preset-accent-outrun: 25, 25, 25; - --theme-preset-font-display-outrun: sans-serif; - --theme-preset-font-ui-outrun: sans-serif; - --theme-preset-background-pumpkin-01: 25, 25, 25; - --theme-preset-background-pumpkin-02: 25, 25, 25; - --theme-preset-background-pumpkin-03: 25, 25, 25; - --theme-preset-background-pumpkin-04: 25, 25, 25; - --theme-preset-accent-pumpkin: 25, 25, 25; - --theme-preset-font-display-pumpkin: sans-serif; - --theme-preset-font-ui-pumpkin: sans-serif; - --theme-preset-background-bubblegum-01: 25, 25, 25; - --theme-preset-background-bubblegum-02: 25, 25, 25; - --theme-preset-background-bubblegum-03: 25, 25, 25; - --theme-preset-background-bubblegum-04: 25, 25, 25; - --theme-preset-accent-bubblegum: 25, 25, 25; - --theme-preset-font-display-bubblegum: sans-serif; - --theme-preset-font-ui-bubblegum: sans-serif; --theme-preset-preview-size: 6em; + --theme-custom-edit-height: 2.5em; /* header */ --header-area-width: 100%; --header-shade-color: var(--theme-color-01); diff --git a/src/index.html b/src/index.html index 5eaa7b5f..7b3c1ac7 100644 --- a/src/index.html +++ b/src/index.html @@ -38,7 +38,6 @@ - @@ -1139,7 +1138,7 @@
- +
@@ -1150,7 +1149,7 @@
- +
@@ -1167,7 +1166,7 @@
- +
@@ -1278,13 +1277,13 @@
- +
- +
- +
@@ -1312,248 +1311,25 @@

Presets

+
+

Applying a Preset will replace the current Colour, Accent, Font, Style and Radius.

+
+ +
+
+

Saved themes

+
+
+
- +
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- -
-
- +
+

Saving a Theme will record the current Colour, Accent, Font, Style and Radius.

diff --git a/src/js/control.js b/src/js/control.js index 694c9cd0..546d0423 100644 --- a/src/js/control.js +++ b/src/js/control.js @@ -2531,327 +2531,17 @@ var control = (function() { link.groupAndItems(); } }, { - element: helper.e(".control-theme-preset-nighttab"), + element: helper.e(".control-theme-custom-add"), type: "button", func: function() { - mod.setValue("theme.accent.current", helper.getObject({ - object: state.get.default(), - path: "theme.accent.current" - })); - mod.setValue("theme.color", helper.getObject({ - object: state.get.default(), - path: "theme.color" - })); - mod.setValue("theme.font", helper.getObject({ - object: state.get.default(), - path: "theme.font" - })); - mod.setValue("theme.style", helper.getObject({ - object: state.get.default(), - path: "theme.style" - })); - mod.setValue("theme.radius", helper.getObject({ - object: state.get.default(), - path: "theme.radius" - })); - render.update(); - render.class(); - theme.render.font.display.name(); - theme.render.font.display.weight(); - theme.render.font.display.style(); - theme.render.font.ui.name(); - theme.render.font.ui.weight(); - theme.render.font.ui.style(); - theme.style.check(); - theme.render.color.shade(); - theme.render.accent.color(); - theme.render.radius(); - link.groupAndItems(); + menu.close(); + theme.custom.add(); } }, { - element: helper.e(".control-theme-preset-midnight"), + element: helper.e(".control-theme-custom-edit"), type: "button", func: function() { - theme.preset("midnight"); - theme.render.font.display.name(); - theme.render.font.display.weight(); - theme.render.font.display.style(); - theme.render.font.ui.name(); - theme.render.font.ui.weight(); - theme.render.font.ui.style(); - theme.style.check(); - theme.render.color.shade(); - theme.render.accent.color(); - theme.render.radius(); - link.groupAndItems(); - render.update(); - render.class(); - } - }, { - element: helper.e(".control-theme-preset-pym"), - type: "button", - func: function() { - theme.preset("pym"); - theme.render.font.display.name(); - theme.render.font.display.weight(); - theme.render.font.display.style(); - theme.render.font.ui.name(); - theme.render.font.ui.weight(); - theme.render.font.ui.style(); - theme.style.check(); - theme.render.color.shade(); - theme.render.accent.color(); - theme.render.radius(); - link.groupAndItems(); - render.update(); - render.class(); - } - }, { - element: helper.e(".control-theme-preset-cruiser"), - type: "button", - func: function() { - theme.preset("cruiser"); - theme.render.font.display.name(); - theme.render.font.display.weight(); - theme.render.font.display.style(); - theme.render.font.ui.name(); - theme.render.font.ui.weight(); - theme.render.font.ui.style(); - theme.style.check(); - theme.render.color.shade(); - theme.render.accent.color(); - theme.render.radius(); - link.groupAndItems(); - render.update(); - render.class(); - } - }, { - element: helper.e(".control-theme-preset-sharpmint"), - type: "button", - func: function() { - theme.preset("sharpmint"); - theme.render.font.display.name(); - theme.render.font.display.weight(); - theme.render.font.display.style(); - theme.render.font.ui.name(); - theme.render.font.ui.weight(); - theme.render.font.ui.style(); - theme.style.check(); - theme.render.color.shade(); - theme.render.accent.color(); - theme.render.radius(); - link.groupAndItems(); - render.update(); - render.class(); - } - }, { - element: helper.e(".control-theme-preset-snowglow"), - type: "button", - func: function() { - theme.preset("snowglow"); - theme.render.font.display.name(); - theme.render.font.display.weight(); - theme.render.font.display.style(); - theme.render.font.ui.name(); - theme.render.font.ui.weight(); - theme.render.font.ui.style(); - theme.style.check(); - theme.render.color.shade(); - theme.render.accent.color(); - theme.render.radius(); - link.groupAndItems(); - render.update(); - render.class(); - } - }, { - element: helper.e(".control-theme-preset-rumble"), - type: "button", - func: function() { - theme.preset("rumble"); - theme.render.font.display.name(); - theme.render.font.display.weight(); - theme.render.font.display.style(); - theme.render.font.ui.name(); - theme.render.font.ui.weight(); - theme.render.font.ui.style(); - theme.style.check(); - theme.render.color.shade(); - theme.render.accent.color(); - theme.render.radius(); - link.groupAndItems(); - render.update(); - render.class(); - } - }, { - element: helper.e(".control-theme-preset-sollight"), - type: "button", - func: function() { - theme.preset("sollight"); - theme.render.font.display.name(); - theme.render.font.display.weight(); - theme.render.font.display.style(); - theme.render.font.ui.name(); - theme.render.font.ui.weight(); - theme.render.font.ui.style(); - theme.style.check(); - theme.render.color.shade(); - theme.render.accent.color(); - theme.render.radius(); - link.groupAndItems(); - render.update(); - render.class(); - } - }, { - element: helper.e(".control-theme-preset-artdeco"), - type: "button", - func: function() { - theme.preset("artdeco"); - theme.render.font.display.name(); - theme.render.font.display.weight(); - theme.render.font.display.style(); - theme.render.font.ui.name(); - theme.render.font.ui.weight(); - theme.render.font.ui.style(); - theme.style.check(); - theme.render.color.shade(); - theme.render.accent.color(); - theme.render.radius(); - link.groupAndItems(); - render.update(); - render.class(); - } - }, { - element: helper.e(".control-theme-preset-macaroon"), - type: "button", - func: function() { - theme.preset("macaroon"); - theme.render.font.display.name(); - theme.render.font.display.weight(); - theme.render.font.display.style(); - theme.render.font.ui.name(); - theme.render.font.ui.weight(); - theme.render.font.ui.style(); - theme.style.check(); - theme.render.color.shade(); - theme.render.accent.color(); - theme.render.radius(); - link.groupAndItems(); - render.update(); - render.class(); - } - }, { - element: helper.e(".control-theme-preset-hotpepper"), - type: "button", - func: function() { - theme.preset("hotpepper"); - theme.render.font.display.name(); - theme.render.font.display.weight(); - theme.render.font.display.style(); - theme.render.font.ui.name(); - theme.render.font.ui.weight(); - theme.render.font.ui.style(); - theme.style.check(); - theme.render.color.shade(); - theme.render.accent.color(); - theme.render.radius(); - link.groupAndItems(); - render.update(); - render.class(); - } - }, { - element: helper.e(".control-theme-preset-steel"), - type: "button", - func: function() { - theme.preset("steel"); - theme.render.font.display.name(); - theme.render.font.display.weight(); - theme.render.font.display.style(); - theme.render.font.ui.name(); - theme.render.font.ui.weight(); - theme.render.font.ui.style(); - theme.style.check(); - theme.render.color.shade(); - theme.render.accent.color(); - theme.render.radius(); - link.groupAndItems(); - render.update(); - render.class(); - } - }, { - element: helper.e(".control-theme-preset-outrun"), - type: "button", - func: function() { - theme.preset("outrun"); - theme.render.font.display.name(); - theme.render.font.display.weight(); - theme.render.font.display.style(); - theme.render.font.ui.name(); - theme.render.font.ui.weight(); - theme.render.font.ui.style(); - theme.style.check(); - theme.render.color.shade(); - theme.render.accent.color(); - theme.render.radius(); - link.groupAndItems(); - render.update(); - render.class(); - } - }, { - element: helper.e(".control-theme-preset-pumpkin"), - type: "button", - func: function() { - theme.preset("pumpkin"); - theme.render.font.display.name(); - theme.render.font.display.weight(); - theme.render.font.display.style(); - theme.render.font.ui.name(); - theme.render.font.ui.weight(); - theme.render.font.ui.style(); - theme.style.check(); - theme.render.color.shade(); - theme.render.accent.color(); - theme.render.radius(); - link.groupAndItems(); - render.update(); - render.class(); - } - }, { - element: helper.e(".control-theme-preset-bubblegum"), - type: "button", - func: function() { - theme.preset("bubblegum"); - theme.render.font.display.name(); - theme.render.font.display.weight(); - theme.render.font.display.style(); - theme.render.font.ui.name(); - theme.render.font.ui.weight(); - theme.render.font.ui.style(); - theme.style.check(); - theme.render.color.shade(); - theme.render.accent.color(); - theme.render.radius(); - link.groupAndItems(); - render.update(); - render.class(); - } - }, { - element: helper.e(".control-theme-preset-elderbean"), - type: "button", - func: function() { - theme.preset("elderbean"); - theme.render.font.display.name(); - theme.render.font.display.weight(); - theme.render.font.display.style(); - theme.render.font.ui.name(); - theme.render.font.ui.weight(); - theme.render.font.ui.style(); - theme.style.check(); - theme.render.color.shade(); - theme.render.accent.color(); - theme.render.radius(); - link.groupAndItems(); - render.update(); - render.class(); + theme.custom.edit(); } }, { element: helper.e(".control-theme-style-dark"), diff --git a/src/js/menu.js b/src/js/menu.js index b6d5fad9..db006377 100644 --- a/src/js/menu.js +++ b/src/js/menu.js @@ -47,12 +47,16 @@ var menu = (function() { if (state.get.current().menu) { menu.tabIndex = 1; menu.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) { - arrayItem.tabIndex = 1; + if (arrayItem.tabIndex == -1) { + arrayItem.tabIndex = 1; + }; }); } else { menu.tabIndex = -1; menu.querySelectorAll("[tabindex]").forEach(function(arrayItem, index) { - arrayItem.tabIndex = -1; + if (arrayItem.tabIndex == 1) { + arrayItem.tabIndex = -1; + }; }); }; } diff --git a/src/js/state.js b/src/js/state.js index 9fef4a84..a6f145d9 100644 --- a/src/js/state.js +++ b/src/js/state.js @@ -256,7 +256,8 @@ var state = (function() { } }, style: "dark", - radius: 0.25 + radius: 0.25, + custom: [] }, background: { color: { diff --git a/src/js/theme.js b/src/js/theme.js index 6ad46596..25a2f9ba 100644 --- a/src/js/theme.js +++ b/src/js/theme.js @@ -2,6 +2,33 @@ var theme = (function() { var _timerFontDisplay = null; var _timerFontUi = null; + var _customThemeEdit = false; + + var stagedThemeCustom = { + position: { + index: null + }, + theme: { + name: null, + style: null, + font: null, + color: null, + accent: null, + radius: null, + timestamp: null + } + }; + + stagedThemeCustom.reset = function() { + stagedThemeCustom.position.index = null; + stagedThemeCustom.theme.name = null; + stagedThemeCustom.theme.style = null; + stagedThemeCustom.theme.font = null; + stagedThemeCustom.theme.color = null; + stagedThemeCustom.theme.accent = null; + stagedThemeCustom.theme.radius = null; + stagedThemeCustom.theme.timestamp = null; + }; var mod = {}; @@ -108,566 +135,603 @@ var theme = (function() { }; mod.preset = { - set: function(name) { - var selectedPreset = mod.preset.get(name); + set: function(themePreset) { helper.setObject({ object: state.get.current(), path: "theme.style", - newValue: selectedPreset.style + newValue: themePreset.style }); helper.setObject({ object: state.get.current(), path: "theme.font", - newValue: selectedPreset.font + newValue: themePreset.font }); helper.setObject({ object: state.get.current(), path: "theme.color", - newValue: selectedPreset.color + newValue: themePreset.color }); helper.setObject({ object: state.get.current(), path: "theme.accent.current", - newValue: selectedPreset.accent + newValue: themePreset.accent }); helper.setObject({ object: state.get.current(), path: "theme.radius", - newValue: selectedPreset.radius + newValue: themePreset.radius }); }, - get: function(name) { - return JSON.parse(JSON.stringify(mod.preset.all[name])); + get: function(index) { + return JSON.parse(JSON.stringify(mod.preset.all[index])); }, - all: { - nighttab: { - font: { - display: { - name: "Fjalla One Regular", - weight: 400, - style: "normal" - }, - ui: { - name: "Open Sans", - weight: 400, - style: "normal" - }, + all: [{ + name: "nightTab (default)", + font: { + display: { + name: "", + weight: 400, + style: "normal" }, - color: { - hsl: { - h: 222, - s: 14, - l: 56 - }, - rgb: { - r: 129, - g: 138, - b: 160 - } + ui: { + name: "", + weight: 400, + style: "normal" }, - accent: { - r: 0, - g: 80, - b: 255 - }, - radius: 0.25, - style: "dark" }, - midnight: { - font: { - display: { - name: "Gugi", - weight: 400, - style: "normal" - }, - ui: { - name: "Lato", - weight: 400, - style: "normal" - }, + color: { + hsl: { + h: 222, + s: 14, + l: 56 }, - color: { - hsl: { - h: 222, - s: 42, - l: 46 - }, - rgb: { - r: 68, - g: 98, - b: 168 - } - }, - accent: { - r: 37, - g: 55, - b: 134 - }, - radius: 0.5, - style: "dark" + rgb: { + r: 129, + g: 138, + b: 160 + } }, - pym: { - font: { - display: { - name: "Autour One", - weight: 400, - style: "normal" - }, - ui: { - name: "Solway", - weight: 400, - style: "normal" - }, - }, - color: { - hsl: { - h: 278, - s: 73, - l: 50 - }, - rgb: { - r: 153, - g: 34, - b: 221 - } - }, - accent: { - r: 0, - g: 255, - b: 170 - }, - radius: 0.1, - style: "dark" + accent: { + r: 0, + g: 80, + b: 255 }, - cruiser: { - font: { - display: { - name: "Alatsi", - weight: 400, - style: "normal" - }, - ui: { - name: "Source Sans Pro", - weight: 400, - style: "normal" - }, + radius: 0.25, + style: "dark" + }, { + name: "Midnight", + font: { + display: { + name: "Gugi", + weight: 400, + style: "normal" }, - color: { - hsl: { - h: 217, - s: 46, - l: 60 - }, - rgb: { - r: 106, - g: 142, - b: 199 - } + ui: { + name: "Lato", + weight: 400, + style: "normal" }, - accent: { - r: 255, - g: 251, - b: 0 - }, - radius: 0.2, - style: "dark" }, - sharpmint: { - font: { - display: { - name: "Unica One", - weight: 400, - style: "normal" - }, - ui: { - name: "Montserrat", - weight: 400, - style: "normal" - }, + color: { + hsl: { + h: 222, + s: 42, + l: 46 }, - color: { - hsl: { - h: 157, - s: 50, - l: 49 - }, - rgb: { - r: 63, - g: 191, - b: 143 - } - }, - accent: { - r: 94, - g: 255, - b: 226 - }, - radius: 0.8, - style: "dark" + rgb: { + r: 68, + g: 98, + b: 168 + } }, - snowglow: { - font: { - display: { - name: "Righteous", - weight: 400, - style: "normal" - }, - ui: { - name: "Raleway", - weight: 400, - style: "normal" - }, - }, - color: { - hsl: { - h: 217, - s: 46, - l: 58 - }, - rgb: { - r: 98, - g: 136, - b: 197 - } - }, - accent: { - r: 59, - g: 207, - b: 214 - }, - radius: 0, - style: "light" + accent: { + r: 37, + g: 55, + b: 134 }, - rumble: { - font: { - display: { - name: "Odibee Sans", - weight: 400, - style: "normal" - }, - ui: { - name: "Roboto Condensed", - weight: 400, - style: "normal" - }, + radius: 0.5, + style: "dark" + }, { + name: "Pym", + font: { + display: { + name: "Autour One", + weight: 400, + style: "normal" }, - color: { - hsl: { - h: 25, - s: 29, - l: 48 - }, - rgb: { - r: 159, - g: 118, - b: 87 - } + ui: { + name: "Solway", + weight: 400, + style: "normal" }, - accent: { - r: 196, - g: 0, - b: 66 - }, - radius: 0.75, - style: "dark" }, - sollight: { - font: { - display: { - name: "Fredoka One", - weight: 400, - style: "normal" - }, - ui: { - name: "Muli", - weight: 400, - style: "normal" - }, + color: { + hsl: { + h: 278, + s: 73, + l: 50 }, - color: { - hsl: { - h: 54, - s: 78, - l: 47 - }, - rgb: { - r: 213, - g: 194, - b: 26 - } - }, - accent: { - r: 255, - g: 220, - b: 22 - }, - radius: 0.5, - style: "light" + rgb: { + r: 153, + g: 34, + b: 221 + } }, - artdeco: { - font: { - display: { - name: "Poiret One", - weight: 400, - style: "normal" - }, - ui: { - name: "Lato", - weight: 400, - style: "normal" - }, - }, - color: { - hsl: { - h: 184, - s: 38, - l: 61 - }, - rgb: { - r: 119, - g: 188, - b: 194 - } - }, - accent: { - r: 255, - g: 161, - b: 161 - }, - radius: 2, - style: "dark" + accent: { + r: 0, + g: 255, + b: 170 }, - macaroon: { - font: { - display: { - name: "Calistoga", - weight: 400, - style: "normal" - }, - ui: { - name: "Source Sans Pro", - weight: 400, - style: "normal" - }, + radius: 0.1, + style: "dark" + }, { + name: "Cruiser", + font: { + display: { + name: "Alatsi", + weight: 400, + style: "normal" }, - color: { - hsl: { - h: 301, - s: 28, - l: 56 - }, - rgb: { - r: 175, - g: 112, - b: 173 - } + ui: { + name: "Source Sans Pro", + weight: 400, + style: "normal" }, - accent: { - r: 110, - g: 109, - b: 208 - }, - radius: 0.40, - style: "light" }, - hotpepper: { - font: { - display: { - name: "Big Shoulders Display", - weight: 400, - style: "normal" - }, - ui: { - name: "Montserrat", - weight: 400, - style: "normal" - }, + color: { + hsl: { + h: 217, + s: 46, + l: 60 }, - color: { - hsl: { - h: 0, - s: 69, - l: 62 - }, - rgb: { - r: 224, - g: 91, - b: 91 - } - }, - accent: { - r: 255, - g: 221, - b: 0 - }, - radius: 0.6, - style: "dark" + rgb: { + r: 106, + g: 142, + b: 199 + } }, - steel: { - font: { - display: { - name: "Abel", - weight: 400, - style: "normal" - }, - ui: { - name: "Raleway", - weight: 400, - style: "normal" - }, - }, - color: { - hsl: { - h: 214, - s: 25, - l: 44 - }, - rgb: { - r: 85, - g: 110, - b: 143 - } - }, - accent: { - r: 59, - g: 95, - b: 118 - }, - radius: 0.3, - style: "light" + accent: { + r: 255, + g: 251, + b: 0 }, - outrun: { - font: { - display: { - name: "Major Mono Display", - weight: 400, - style: "normal" - }, - ui: { - name: "Roboto Condensed", - weight: 400, - style: "normal" - }, + radius: 0.2, + style: "dark" + }, { + name: "Sharp Mint", + font: { + display: { + name: "Unica One", + weight: 400, + style: "normal" }, - color: { - hsl: { - h: 227, - s: 52, - l: 55 - }, - rgb: { - r: 80, - g: 106, - b: 199 - } + ui: { + name: "Montserrat", + weight: 400, + style: "normal" }, - accent: { - r: 255, - g: 0, - b: 187 - }, - radius: 0, - style: "dark" }, - pumpkin: { - font: { - display: { - name: "Girassol", - weight: 400, - style: "normal" - }, - ui: { - name: "Muli", - weight: 400, - style: "normal" - }, + color: { + hsl: { + h: 157, + s: 50, + l: 49 }, - color: { - hsl: { - h: 198, - s: 0, - l: 46 - }, - rgb: { - r: 117, - g: 117, - b: 117 - } - }, - accent: { - r: 238, - g: 119, - b: 34 - }, - radius: 0.2, - style: "dark" + rgb: { + r: 63, + g: 191, + b: 143 + } }, - bubblegum: { - font: { - display: { - name: "Monoton", - weight: 400, - style: "normal" - }, - ui: { - name: "Lato", - weight: 400, - style: "normal" - }, - }, - color: { - hsl: { - h: 307, - s: 100, - l: 59 - }, - rgb: { - r: 254, - g: 45, - b: 230 - } - }, - accent: { - r: 238, - g: 238, - b: 34 - }, - radius: 1.2, - style: "dark" + accent: { + r: 94, + g: 255, + b: 226 }, - elderbean: { - font: { - display: { - name: "Life Savers", - weight: 400, - style: "normal" - }, - ui: { - name: "Quicksand", - weight: 400, - style: "normal" - }, + radius: 0.8, + style: "dark" + }, { + name: "Snow Glow", + font: { + display: { + name: "Righteous", + weight: 400, + style: "normal" }, - color: { - hsl: { - h: 193, - s: 47, - l: 43 - }, - rgb: { - r: 58, - g: 140, - b: 163 - } + ui: { + name: "Raleway", + weight: 400, + style: "normal" }, - accent: { - r: 255, - g: 160, - b: 0 + }, + color: { + hsl: { + h: 217, + s: 46, + l: 58 }, - radius: 0.5, - style: "dark" - } + rgb: { + r: 98, + g: 136, + b: 197 + } + }, + accent: { + r: 59, + g: 207, + b: 214 + }, + radius: 0, + style: "light" + }, { + name: "Rumble", + font: { + display: { + name: "Odibee Sans", + weight: 400, + style: "normal" + }, + ui: { + name: "Roboto Condensed", + weight: 400, + style: "normal" + }, + }, + color: { + hsl: { + h: 25, + s: 29, + l: 48 + }, + rgb: { + r: 159, + g: 118, + b: 87 + } + }, + accent: { + r: 196, + g: 0, + b: 66 + }, + radius: 0.75, + style: "dark" + }, { + name: "Sol Light", + font: { + display: { + name: "Fredoka One", + weight: 400, + style: "normal" + }, + ui: { + name: "Muli", + weight: 400, + style: "normal" + }, + }, + color: { + hsl: { + h: 54, + s: 78, + l: 47 + }, + rgb: { + r: 213, + g: 194, + b: 26 + } + }, + accent: { + r: 255, + g: 220, + b: 22 + }, + radius: 0.5, + style: "light" + }, { + name: "Art Deco", + font: { + display: { + name: "Poiret One", + weight: 400, + style: "normal" + }, + ui: { + name: "Lato", + weight: 400, + style: "normal" + }, + }, + color: { + hsl: { + h: 184, + s: 38, + l: 61 + }, + rgb: { + r: 119, + g: 188, + b: 194 + } + }, + accent: { + r: 255, + g: 161, + b: 161 + }, + radius: 2, + style: "dark" + }, { + name: "Macaroon", + font: { + display: { + name: "Calistoga", + weight: 400, + style: "normal" + }, + ui: { + name: "Source Sans Pro", + weight: 400, + style: "normal" + }, + }, + color: { + hsl: { + h: 301, + s: 28, + l: 56 + }, + rgb: { + r: 175, + g: 112, + b: 173 + } + }, + accent: { + r: 110, + g: 109, + b: 208 + }, + radius: 0.40, + style: "light" + }, { + name: "Hot Pepper", + font: { + display: { + name: "Big Shoulders Display", + weight: 400, + style: "normal" + }, + ui: { + name: "Montserrat", + weight: 400, + style: "normal" + }, + }, + color: { + hsl: { + h: 0, + s: 69, + l: 62 + }, + rgb: { + r: 224, + g: 91, + b: 91 + } + }, + accent: { + r: 255, + g: 221, + b: 0 + }, + radius: 0.6, + style: "dark" + }, { + name: "Steel", + font: { + display: { + name: "Abel", + weight: 400, + style: "normal" + }, + ui: { + name: "Raleway", + weight: 400, + style: "normal" + }, + }, + color: { + hsl: { + h: 214, + s: 25, + l: 44 + }, + rgb: { + r: 85, + g: 110, + b: 143 + } + }, + accent: { + r: 59, + g: 95, + b: 118 + }, + radius: 0.3, + style: "light" + }, { + name: "Outrun", + font: { + display: { + name: "Major Mono Display", + weight: 400, + style: "normal" + }, + ui: { + name: "Roboto Condensed", + weight: 400, + style: "normal" + }, + }, + color: { + hsl: { + h: 227, + s: 52, + l: 55 + }, + rgb: { + r: 80, + g: 106, + b: 199 + } + }, + accent: { + r: 255, + g: 0, + b: 187 + }, + radius: 0, + style: "dark" + }, { + name: "Pumpkin", + font: { + display: { + name: "Girassol", + weight: 400, + style: "normal" + }, + ui: { + name: "Muli", + weight: 400, + style: "normal" + }, + }, + color: { + hsl: { + h: 198, + s: 0, + l: 46 + }, + rgb: { + r: 117, + g: 117, + b: 117 + } + }, + accent: { + r: 238, + g: 119, + b: 34 + }, + radius: 0.2, + style: "dark" + }, { + name: "Bubble Gum", + font: { + display: { + name: "Monoton", + weight: 400, + style: "normal" + }, + ui: { + name: "Lato", + weight: 400, + style: "normal" + }, + }, + color: { + hsl: { + h: 307, + s: 100, + l: 59 + }, + rgb: { + r: 254, + g: 45, + b: 230 + } + }, + accent: { + r: 238, + g: 238, + b: 34 + }, + radius: 1.2, + style: "dark" + }, { + name: "Elder Bean", + font: { + display: { + name: "Life Savers", + weight: 400, + style: "normal" + }, + ui: { + name: "Quicksand", + weight: 400, + style: "normal" + }, + }, + color: { + hsl: { + h: 193, + s: 47, + l: 43 + }, + rgb: { + r: 58, + g: 140, + b: 163 + } + }, + accent: { + r: 255, + g: 160, + b: 0 + }, + radius: 0.5, + style: "dark" + }] + }; + + mod.custom = { + set: function(themeCustom) { + helper.setObject({ + object: state.get.current(), + path: "theme.style", + newValue: themeCustom.style + }); + helper.setObject({ + object: state.get.current(), + path: "theme.font", + newValue: themeCustom.font + }); + helper.setObject({ + object: state.get.current(), + path: "theme.color", + newValue: themeCustom.color + }); + helper.setObject({ + object: state.get.current(), + path: "theme.accent.current", + newValue: themeCustom.accent + }); + helper.setObject({ + object: state.get.current(), + path: "theme.radius", + newValue: themeCustom.radius + }); + }, + get: function(index) { + return JSON.parse(JSON.stringify(state.get.current().theme.custom[index])); + }, + add: function() { + state.get.current().theme.custom.push(stagedThemeCustom.theme); + }, + remove: function(copyStagedThemeCustom) { + state.get.current().theme.custom.splice(stagedThemeCustom.position.index, 1); } }; @@ -818,7 +882,7 @@ var theme = (function() { }] }); head.appendChild(link); - html.style.setProperty("--theme-font-display-name", "\"" + state.get.current().theme.font.display.name.trim().replace(/\s\s+/g, " ") + "\"" + ", \"Fjalla One Regular\", sans-serif"); + html.style.setProperty("--theme-font-display-name", "\"" + state.get.current().theme.font.display.name.trim().replace(/\s\s+/g, " ") + "\"" + ", \"Fjalla One\", sans-serif"); }; }, weight: function() { @@ -874,38 +938,27 @@ var theme = (function() { }; render.preset = function() { - var html = helper.e("html"); - for (var key in mod.preset.all) { - var preset = mod.preset.all[key]; + var themePreset = helper.e(".theme-preset"); + var formInline = helper.node("div|class:form-inline"); + var allThemePreset = JSON.parse(JSON.stringify(mod.preset.all)); + allThemePreset.forEach(function(arrayItem, index) { + var themePresetItem = helper.node("div|class:theme-preset-item"); + var themePresetTile = helper.node("div|class:theme-preset-tile"); + var themePresetButton = helper.node("button|class:theme-preset-button button mb-0,tabindex:-1"); + var themePresetPreview = helper.node("span|class:theme-preset-preview"); var shadeSteps = 4; var lightShift = 12; - var renderPreview = function(name, index, rgb) { - for (var key in rgb) { - if (rgb[key] < 0) { - rgb[key] = 0; - } else if (rgb[key] > 255) { - rgb[key] = 255; - }; - rgb[key] = parseInt(rgb[key], 10); - }; - if (index < 10) { - index = "0" + index; - } else { - index = index; - }; - html.style.setProperty(name + index, rgb.r + ", " + rgb.g + ", " + rgb.b); - }; - var rgb = preset.color.rgb; + var rgb = arrayItem.color.rgb; var hsl = helper.convertColor.rgb.hsl(rgb); for (var i = 1; i <= shadeSteps; i++) { if (i > 1) { - if (preset.style == "dark") { + if (arrayItem.style == "dark") { rgb = helper.convertColor.hsl.rgb({ h: hsl.h, s: hsl.s, l: hsl.l - (lightShift * (i - 1)) }); - } else if (preset.style == "light") { + } else if (arrayItem.style == "light") { rgb = helper.convertColor.hsl.rgb({ h: hsl.h, s: hsl.s, @@ -913,21 +966,277 @@ var theme = (function() { }); }; }; - renderPreview("--theme-preset-background-" + key + "-", i, rgb); + for (var colorKey in rgb) { + if (rgb[colorKey] < 0) { + rgb[colorKey] = 0; + } else if (rgb[colorKey] > 255) { + rgb[colorKey] = 255; + }; + rgb[colorKey] = parseInt(rgb[colorKey], 10); + }; + var themePresetBackground = helper.node("span|class:theme-preset-background-0" + i); + themePresetBackground.style.setProperty("background-color", "rgb(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ")"); + themePresetPreview.appendChild(themePresetBackground); }; - html.style.setProperty("--theme-preset-accent-" + key, preset.accent.r + ", " + preset.accent.g + ", " + preset.accent.b); - if (preset.font.display != "") { - html.style.setProperty("--theme-preset-font-display-" + key, "\"" + preset.font.display.name + "\", sans-serif"); + var themePresetAccent = helper.node("span|class:theme-preset-accent"); + themePresetAccent.style.setProperty("background-color", "rgb(" + arrayItem.accent.r + ", " + arrayItem.accent.g + ", " + arrayItem.accent.b + ")"); + themePresetPreview.appendChild(themePresetAccent); + if (arrayItem.name != null && arrayItem.name != "") { + var themePresetName = helper.node("span:" + arrayItem.name + "|class:theme-preset-name"); + themePresetPreview.appendChild(themePresetName); }; - if (preset.font.ui != "") { - html.style.setProperty("--theme-preset-font-ui-" + key, "\"" + preset.font.ui.name + "\", sans-serif"); + + themePresetButton.appendChild(themePresetPreview); + themePresetTile.appendChild(themePresetButton); + themePresetItem.appendChild(themePresetTile); + formInline.appendChild(themePresetItem); + + themePresetButton.addEventListener("click", function() { + mod.preset.set(mod.preset.get(index)); + data.save(); + render.font.display.name(); + render.font.display.weight(); + render.font.display.style(); + render.font.ui.name(); + render.font.ui.weight(); + render.font.ui.style(); + render.color.shade(); + render.accent.color(); + render.radius(); + style.check(); + link.groupAndItems(); + control.render.update(); + control.render.class(); + }, false); + }); + themePreset.appendChild(formInline); + }; + + render.custom = { + all: function() { + var themeCustomSaved = helper.e(".theme-custom"); + var formInline = helper.node("div|class:form-inline"); + var allThemeCuston = JSON.parse(JSON.stringify(state.get.current().theme.custom)); + if (allThemeCuston.length > 0) { + allThemeCuston.forEach(function(arrayItem, index) { + var themeCustomItem = helper.node("div|class:theme-custom-item"); + var themeCustomTile = helper.node("div|class:theme-custom-tile"); + var themeCustomButton = helper.node("button|class:theme-custom-button button mb-0,tabindex:-1"); + var themeCustomPreview = helper.node("span|class:theme-custom-preview"); + var themeCustomControl = helper.node("div|class:theme-custom-control"); + var themeCustomRemove = helper.node("button|class:theme-custom-control-item theme-custom-control-item-remove button mb-0,tabindex:-2"); + var themeCustomRemoveIcon = helper.node("spa|class:button-icon icon-close"); + var shadeSteps = 4; + var lightShift = 12; + var rgb = arrayItem.color.rgb; + var hsl = helper.convertColor.rgb.hsl(rgb); + for (var i = 1; i <= shadeSteps; i++) { + if (i > 1) { + if (arrayItem.style == "dark") { + rgb = helper.convertColor.hsl.rgb({ + h: hsl.h, + s: hsl.s, + l: hsl.l - (lightShift * (i - 1)) + }); + } else if (arrayItem.style == "light") { + rgb = helper.convertColor.hsl.rgb({ + h: hsl.h, + s: hsl.s, + l: hsl.l + (lightShift * (i - 1)) + }); + }; + }; + for (var colorKey in rgb) { + if (rgb[colorKey] < 0) { + rgb[colorKey] = 0; + } else if (rgb[colorKey] > 255) { + rgb[colorKey] = 255; + }; + rgb[colorKey] = parseInt(rgb[colorKey], 10); + }; + var themeCustomBackground = helper.node("span|class:theme-custom-background-0" + i); + themeCustomBackground.style.setProperty("background-color", "rgb(" + rgb.r + ", " + rgb.g + ", " + rgb.b + ")"); + themeCustomPreview.appendChild(themeCustomBackground); + }; + var themeCustomAccent = helper.node("span|class:theme-custom-accent"); + themeCustomAccent.style.setProperty("background-color", "rgb(" + arrayItem.accent.r + ", " + arrayItem.accent.g + ", " + arrayItem.accent.b + ")"); + themeCustomPreview.appendChild(themeCustomAccent); + if (arrayItem.name != null && arrayItem.name != "") { + var themeCustomName = helper.node("span:" + arrayItem.name + "|class:theme-custom-name"); + themeCustomPreview.appendChild(themeCustomName); + }; + + themeCustomButton.appendChild(themeCustomPreview); + themeCustomRemove.appendChild(themeCustomRemoveIcon); + themeCustomControl.appendChild(themeCustomRemove); + themeCustomTile.appendChild(themeCustomButton); + themeCustomTile.appendChild(themeCustomControl); + themeCustomItem.appendChild(themeCustomTile); + formInline.appendChild(themeCustomItem); + + stagedThemeCustom.position.index = index; + stagedThemeCustom.theme = arrayItem; + var copyStagedThemeCustom = JSON.parse(JSON.stringify(stagedThemeCustom)); + + themeCustomButton.addEventListener("click", function() { + mod.custom.set(mod.custom.get(index)); + data.save(); + render.font.display.name(); + render.font.display.weight(); + render.font.display.style(); + render.font.ui.name(); + render.font.ui.weight(); + render.font.ui.style(); + render.color.shade(); + render.accent.color(); + render.radius(); + style.check(); + link.groupAndItems(); + control.render.update(); + control.render.class(); + }, false); + + themeCustomRemove.addEventListener("click", function() { + menu.close(); + render.custom.remove(copyStagedThemeCustom); + }, false); + + stagedThemeCustom.reset(); + }); + themeCustomSaved.appendChild(formInline); + themeCustomSaved.appendChild(helper.node("hr")); }; - if (preset.style == "dark") { - html.style.setProperty("--theme-preset-font-color-" + key, "var(--theme-white)"); - } else if (preset.style == "light") { - html.style.setProperty("--theme-preset-font-color-" + key, "var(--theme-black)"); + }, + add: function() { + var form = function() { + var form = helper.node("form|class:group-form"); + var fieldset = helper.node("fieldset"); + var inputWrap = helper.node("div|class:input-wrap"); + var label = helper.node("label:Name|for:theme-name"); + var input = helper.node("input|id:theme-name,class:theme-name mb-0,type:text,tabindex:1,placeholder:Example theme,autocomplete:off,autocorrect:off,autocapitalize:off,spellcheck:false"); + inputWrap.appendChild(label); + inputWrap.appendChild(input); + fieldset.appendChild(inputWrap); + form.appendChild(fieldset); + input.addEventListener("input", function() { + stagedThemeCustom.theme.name = this.value; + }, false); + form.addEventListener("keydown", function(event) { + if (event.keyCode == 13) { + event.preventDefault(); + return false; + }; + }, false); + return form; }; - }; + var successAction = function() { + stagedThemeCustom.theme.style = state.get.current().theme.style; + stagedThemeCustom.theme.font = state.get.current().theme.font; + stagedThemeCustom.theme.color = state.get.current().theme.color; + stagedThemeCustom.theme.accent = state.get.current().theme.accent.current; + stagedThemeCustom.theme.radius = state.get.current().theme.radius; + stagedThemeCustom.theme.timestamp = new Date().getTime(); + mod.custom.add(); + data.save(); + render.custom.clear(); + render.custom.all(); + shade.close(); + pagelock.unlock(); + stagedThemeCustom.reset(); + }; + var cancelAction = function() { + shade.close(); + pagelock.unlock(); + stagedThemeCustom.reset(); + }; + modal.open({ + heading: "Save current Theme", + successAction: successAction, + cancelAction: cancelAction, + actionText: "Save", + size: "small", + content: form() + }); + shade.open({ + action: function() { + modal.close(); + pagelock.unlock(); + stagedThemeCustom.reset(); + } + }); + pagelock.lock(); + }, + remove: function(copyStagedThemeCustom) { + stagedThemeCustom.position.index = JSON.parse(JSON.stringify(copyStagedThemeCustom.position.index)); + stagedThemeCustom.theme = JSON.parse(JSON.stringify(copyStagedThemeCustom.theme)); + var heading; + if (stagedThemeCustom.theme.name != null && stagedThemeCustom.theme.name != "") { + heading = "Remove " + stagedThemeCustom.theme.name; + } else { + heading = "Remove unnamed theme"; + }; + var successAction = function() { + mod.custom.remove(); + data.save(); + render.custom.clear(); + render.custom.all(); + shade.close(); + pagelock.unlock(); + stagedThemeCustom.reset(); + }; + var cancelAction = function() { + shade.close(); + pagelock.unlock(); + stagedThemeCustom.reset(); + }; + modal.open({ + heading: heading, + content: "Are you sure you want to remove this Theme? This can not be undone.", + successAction: successAction, + cancelAction: cancelAction, + actionText: "Remove", + size: "small" + }); + shade.open({ + action: function() { + modal.close(); + pagelock.unlock(); + stagedThemeCustom.reset(); + } + }); + pagelock.lock(); + }, + edit: function() { + var html = helper.e("html"); + if (_customThemeEdit) { + _customThemeEdit = false; + helper.removeClass(html, "is-theme-custom-edit"); + } else { + _customThemeEdit = true; + helper.addClass(html, "is-theme-custom-edit"); + }; + }, + clear: function() { + var themeCustom = helper.e(".theme-custom"); + while (themeCustom.lastChild) { + themeCustom.removeChild(themeCustom.lastChild); + }; + }, + tabIndex: function() { + if (_customThemeEdit) { + helper.eA(".theme-custom-control-item").forEach(function(arrayItem, index) { + if (arrayItem.tabIndex == -2) { + arrayItem.tabIndex = 1; + }; + }); + } else { + helper.eA(".theme-custom-control-item").forEach(function(arrayItem, index) { + if (arrayItem.tabIndex == 1) { + arrayItem.tabIndex = -2; + }; + }); + }; + } }; var accent = { @@ -966,6 +1275,16 @@ var theme = (function() { mod.preset.set(name); }; + var custom = { + add: function() { + render.custom.add(); + }, + edit: function() { + render.custom.edit(); + render.custom.tabIndex(); + } + }; + var init = function() { style.check(); accent.random(); @@ -980,6 +1299,7 @@ var theme = (function() { render.accent.color(); render.radius(); render.preset(); + render.custom.all(); }; // exposed methods @@ -989,7 +1309,8 @@ var theme = (function() { render: render, style: style, accent: accent, - preset: preset + preset: preset, + custom: custom }; })(); diff --git a/src/js/update.js b/src/js/update.js index 9e5d621b..9f494aaa 100644 --- a/src/js/update.js +++ b/src/js/update.js @@ -742,6 +742,10 @@ var update = (function() { style: "normal" }; return data; + }, + "4.8.0": function(data) { + data.state.theme.custom = []; + return data; } }; diff --git a/src/js/version.js b/src/js/version.js index 13486169..81560bb6 100644 --- a/src/js/version.js +++ b/src/js/version.js @@ -1,6 +1,6 @@ var version = (function() { - var current = "4.7.0"; + var current = "4.8.0"; var name = "Naughty Goose"; diff --git a/src/manifest.json b/src/manifest.json index 069ccb8e..dbfd9ec1 100644 --- a/src/manifest.json +++ b/src/manifest.json @@ -2,7 +2,7 @@ "name": "nightTab", "short_name": "nightTab", "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.", - "version": "4.7.0", + "version": "4.8.0", "manifest_version": 2, "chrome_url_overrides": { "newtab": "index.html"