diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss index 1893a01f..7c62fa23 100644 --- a/src/styles/color-themes.scss +++ b/src/styles/color-themes.scss @@ -1721,3 +1721,83 @@ html[data-theme='cherry-blossom'] { } } } + +html[data-theme="tama"] { + // Main colors + --primary: #ffffffe6; + --background: #0b1021; + --background-darker: #181c3a; + --background-darker-transparent: #181c3ad4; + --background-grey-transparent: #6b6c73c6; + + // Typography + --font-headings: 'Segoe UI', 'Ariel', 'sans-serif'; + --font-body: 'Segoe UI', 'Ariel', 'sans-serif'; + + // Items + --item-background: var(--background-darker-transparent); + --item-background-hover: var(--background-grey-transparent); + --item-shadow: 1px 1px 2px #130f23; + --item-hover-shadow: 2px 2px 4px #130f23; + + // Sections + --item-group-heading-text-color: var(--white); + --item-group-heading-text-color-hover: var(--primary); + --item-group-shadow: none; + --item-group-background: none; + --item-group-outer-background: none; + + // Remove background from certain components + div.home, div.options-outer, div.options-container, section.filter-container, + section.settings-outer, div.show-hide-container.hide-btn, div.show-hide-container.show-btn { + background: none; + } + + // Style overides + label.lbl-toggle h3 { font-size: 1.3rem; font-weight: bold; } + .content-inner { border-top: 1px dashed var(--primary); } + .item.size-large .tile-title p.description { height: 3rem; } + .is-collapsed { + background: var(--item-background); + box-shadow: var(--item-shadow); + &:hover { + background: var(--item-background-hover); + box-shadow: var(--item-hover-shadow); + } + } + + // Background Image + body { + //update the query terms after the '?', to customize for images you want + background: url('https://source.unsplash.com/random/1920x1080/?dark,calm,nature,background'); + background-color: var(--background-darker); + background-size: cover; + } + header, footer, form.normal { background-color: var(--background-darker-transparent); } + + // large tile spacing adjustment + .there-are-items:has(.item-wrapper.wrap-size-large) { padding-top: .25rem; } + .item-wrapper.wrap-size-large { margin: 0rem .5rem .5rem 0rem; } + .item.size-large .tile-title { padding: 0rem 0rem 0rem .7rem; } + + // Hide open method icon + .opening-method-icon { opacity: 0; } + + // Widget tile style + .widget-base { + background-color: var(--background-darker-transparent); + margin: .5rem .5rem 1rem .5rem; + padding: 0; + border: 1px solid var(--outline-color); + border-radius: var(--curve-factor); + box-shadow: var(--item-shadow); + } + .widget-base button.action-btn { margin-top: .3rem; margin-right: .5rem; } + .widget-wrap { padding: 1.4rem .8rem .8rem .8rem; } + + // Grow effect for tile-icon & on hover over Item tiles + .item:hover .item-icon img, .item:hover .item-icon i{ + transition: all .35s ease-in-out; + transform: scale(1.22); + } +} diff --git a/src/utils/defaults.js b/src/utils/defaults.js index 681be1fe..1e763088 100644 --- a/src/utils/defaults.js +++ b/src/utils/defaults.js @@ -84,6 +84,7 @@ module.exports = { 'high-contrast-light', 'adventure-basic', 'basic', + 'tama', ], /* Default color options for the theme configurator swatches */ swatches: [