/******************************************************************************\ | | | _colors.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _colored.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ .colored { background-color: var(--primary-color); border-width: 2px; border-style: solid; border-color: darkened(var(--primary-color), 10%); } /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _btns.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ :root { --btn-color: var(--btn-color); --btn-shadow: 2px 2px 5px color-mix(in srgb, black 15%, transparent); } .btn-primary { color: white; background-color: var(--primary-color); } /******************************************************************************\ | | | _radio-buttons.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ :root { --btn-color: #cfcfe1; --radio-button-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33); } input[type=radio] { appearance: none; width: 15px; height: 15px; border-radius: 50%; border-width: 2px; border-style: solid; border-color: #9090ba; background: #cfcfe1; } input[type=radio]:checked { background: var(--primary-color); } /******************************************************************************\ | | | _scrollbars.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ ::-webkit-scrollbar { -webkit-appearance: none; width: 12px; height: 12px; } ::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: 6px; border-width: 2px; border-style: solid; border-color: #eeeef5; background-clip: content-box; --border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background-color: color-mix(in srgb, black 10%, var(--primary-color)); } ::-webkit-scrollbar-track { background-color: #eeeef5; border-radius: 6px; border-width: 2px; border-style: solid; border-color: #eeeef5; } /******************************************************************************\ | | | _sliders.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ .input { display: flex; } .input .input-group { display: flex; } .input input:not([type=range]) { text-align: center; } .input input:not([type=range]):focus { outline: none; } .input.selectable input { border-top-right-radius: 0; border-bottom-right-radius: 0; } input[type=range] { -webkit-appearance: none; background: none; } input[type=range]:focus { outline: none; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; margin-top: -5px; border-radius: 50%; border-width: 1px; border-style: solid; } input[type=range]::-moz-range-thumb { -webkit-appearance: none; width: 15px; height: 15px; margin-top: -5px; border-radius: 50%; border-width: 1px; border-style: solid; } input[type=range]::-ms-thumb { -webkit-appearance: none; width: 14px; height: 14px; margin-top: -5px; border-radius: 50%; border-width: 1px; border-style: solid; } input[type=range]::-webkit-slider-runnable-track { height: 5px; border-radius: 5px; border-width: 0; border-style: solid; border-color: transparent; } input[type=range]::-moz-range-track { height: 5px; border-radius: 5px; border-width: 0; border-style: solid; border-color: transparent; } input[type=range]::-ms-track { height: 5px; border-radius: 5px; border-width: 0; background: transparent; border-color: transparent; color: transparent; } input[type=range]::-ms-fill-lower { background: grey; border-radius: 10px; } input[type=range]::-ms-fill-upper { background: grey; border-radius: 10px; } .round-sliders input[type=range]::-webkit-slider-thumb, .round.auto-corner-sliders input[type=range]::-webkit-slider-thumb { border-radius: 8px; } .round-sliders input[type=range]::-moz-range-thumb, .round.auto-corner-sliders input[type=range]::-moz-range-thumb { border-radius: 8px; } .round-sliders input[type=range]::-ms-thumb, .round.auto-corner-sliders input[type=range]::-ms-thumb { border-radius: 8px; } .round-sliders.selectable input, .round.auto-corner-sliders.selectable input { border-top-right-radius: 0; border-bottom-right-radius: 0; } .rounded-sliders input[type=range]::-webkit-slider-thumb, .rounded.auto-corner-sliders input[type=range]::-webkit-slider-thumb { border-radius: 5px; } .rounded-sliders input[type=range]::-moz-range-thumb, .rounded.auto-corner-sliders input[type=range]::-moz-range-thumb { border-radius: 5px; } .rounded-sliders input[type=range]::-ms-thumb, .rounded.auto-corner-sliders input[type=range]::-ms-thumb { border-radius: 5px; } .rounded-sliders.selectable input, .rounded.auto-corner-sliders.selectable input { border-top-right-radius: 0; border-bottom-right-radius: 0; } .square-sliders input[type=range]::-webkit-slider-thumb, .square.auto-corner-sliders input[type=range]::-webkit-slider-thumb { border-radius: 0; } .square-sliders input[type=range]::-moz-range-thumb, .square.auto-corner-sliders input[type=range]::-moz-range-thumb { border-radius: 0; } .square-sliders input[type=range]::-ms-thumb, .square.auto-corner-sliders input[type=range]::-ms-thumb { border-radius: 0; } .narrow-slider-handles input[type=range]::-webkit-slider-thumb { width: 10px; height: 15px; } .narrow-slider-handles input[type=range]::-moz-range-thumb { width: 10px; height: 15px; } .narrow-slider-handles input[type=range]::-ms-thumb { width: 10px; height: 15px; } .medium-slider-handles input[type=range]::-webkit-slider-thumb { width: 15px; height: 15px; } .medium-slider-handles input[type=range]::-moz-range-thumb { width: 15px; height: 15px; } .medium-slider-handles input[type=range]::-ms-thumb { width: 15px; height: 15px; } .wide-slider-handles input[type=range]::-webkit-slider-thumb { width: 30px; height: 15px; } .wide-slider-handles input[type=range]::-moz-range-thumb { width: 30px; height: 15px; } .wide-slider-handles input[type=range]::-ms-thumb { width: 30px; height: 15px; } /******************************************************************************\ | | | _tabs.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ :root { --tab-color: #cfcfe1; --tab-shadow: 5px 5px 10px faded(black, 15%); } ul.nav-tabs { list-style: none; display: flex; flex-wrap: wrap; margin-bottom: 10px; border-bottom: 2px solid var(--primary-color); padding-inline-start: 0; } ul.nav-tabs.centered { justify-content: center; } ul.nav-tabs li > a { display: block; padding: 3px 5px; text-align: center; background-color: #cfcfe1; border-width: 2px; border-bottom-width: 0 !important; border-style: solid; border-color: #cfcfe1; border-top-left-radius: 10px; border-top-right-radius: 10px; border-bottom: transparent; color: #30304e !important; width: 100%; cursor: default; } ul.nav-tabs li > a:hover { background-color: darkened(#cfcfe1, 10%); border-bottom-width: 0 !important; } ul.nav-tabs li.active > a { color: white !important; border-color: var(--primary-color); background-color: var(--primary-color); border-bottom-width: 0 !important; } /******************************************************************************\ | | | _flat.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .flat .shaded, .flat.flat.shaded { background: var(--primary-color); border-color: var(--primary-color); } .flat .shaded.round, .flat.flat.shaded.round { background: var(--primary-color); border-color: var(--primary-color); } .flat .shaded.rounded, .flat.flat.shaded.rounded { background: var(--primary-color); border-color: var(--primary-color); } .flat .shaded.textured, .flat.flat.shaded.textured { background: var(--primary-color); border-color: var(--primary-color); } .flat .shaded.textured.round, .flat.flat.shaded.textured.round { background: var(--primary-color); border-color: var(--primary-color); } .flat .shaded.textured.rounded, .flat.flat.shaded.textured.rounded { background: var(--primary-color); border-color: var(--primary-color); } } @supports not (color: color-mix(in srgb, white, black)) { .flat .shaded, .flat.flat.shaded { background: var(--primary-color); border-color: var(--primary-color); } .flat .shaded.round, .flat.flat.shaded.round { background: var(--primary-color); border-color: var(--primary-color); } .flat .shaded.rounded, .flat.flat.shaded.rounded { background: var(--primary-color); border-color: var(--primary-color); } .flat .shaded.textured, .flat.flat.shaded.textured { background: var(--primary-color); border-color: var(--primary-color); } .flat .shaded.textured.round, .flat.flat.shaded.textured.round { background: var(--primary-color); border-color: var(--primary-color); } .flat .shaded.textured.rounded, .flat.flat.shaded.textured.rounded { background: var(--primary-color); border-color: var(--primary-color); } } /******************************************************************************\ | | | _flat-btns.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _round-chalk.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _chalk-btns.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _round-plastic.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _plastic-btns.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _round-glass.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _glass-btns.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _round-metal.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _metal-btns.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _flat-radio-buttons.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _chalk-radio-buttons.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _plastic-radio-buttons.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _glass-radio-buttons.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _metal-radio-buttons.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _flat-scrollbars.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _long-round-chalk.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _chalk-scrollbars.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _long-round-plastic.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _plastic-scrollbars.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _long-round-glass.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _glass-scrollbars.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _long-round-metal.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _metal-scrollbars.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _flat-sliders.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _chalk-sliders.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _plastic-sliders.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _glass-sliders.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _metal-sliders.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | flat-tabs.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _rounded-chalk.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _chalk-tabs.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _rounded-plastic.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _plastic-tabs.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _rounded-glass.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _glass-tabs.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _rounded-metal.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _metal-tabs.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _flat-flat.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _round-flat.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _rounded-flat.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _long-round-flat.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _chalk.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _chalk.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .chalk .shaded, .chalk.chalk.shaded { background: linear-gradient(var(--light-direction), color-mix(in srgb, white 50%, var(--primary-color)) 0%, var(--primary-color) 5px) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk .shaded.round, .chalk.chalk.shaded.round { background: radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 25%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk .shaded.rounded, .chalk.chalk.shaded.rounded { background: linear-gradient(var(--light-direction), color-mix(in srgb, white 75%, transparent) 0%, transparent 25%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk .shaded.long.round, .chalk.chalk.shaded.long.round { background: linear-gradient(to right, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to left, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to bottom, color-mix(in srgb, white 25%, transparent) 0%, color-mix(in srgb, white 50%, transparent) calc(5% + 1px), color-mix(in srgb, white 50%, transparent) calc(15% + 1px), transparent calc(50% + 1px)) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk .shaded.long.round.vertical, .chalk.chalk.shaded.long.round.vertical { background: linear-gradient(to top, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to bottom, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to right, color-mix(in srgb, white 25%, transparent) 0%, color-mix(in srgb, white 50%, transparent) calc(5% + 1px), color-mix(in srgb, white 50%, transparent) calc(15% + 1px), transparent calc(50% + 1px)) no-repeat, linear-gradient(to right, color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk .shaded.textured, .chalk.chalk.shaded.textured { background: linear-gradient(var(--light-direction), color-mix(in srgb, white 50%, var(--primary-color)) 0%, var(--primary-color) 5px) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk .shaded.textured.round, .chalk.chalk.shaded.textured.round { background: linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; position: relative; overflow: hidden; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk .shaded.textured.round:after, .chalk.chalk.shaded.textured.round:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background: radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 25%, transparent 100%) no-repeat; } .chalk .shaded.textured.round:not(.long):after, .chalk.chalk.shaded.textured.round:not(.long):after { transform: scale(-1) rotate(var(--light-direction)); border-radius: 50%; } .chalk .shaded.textured.rounded, .chalk.chalk.shaded.textured.rounded { background: linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; position: relative; overflow: hidden; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk .shaded.textured.rounded:after, .chalk.chalk.shaded.textured.rounded:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background: linear-gradient(var(--light-direction), color-mix(in srgb, white 75%, transparent) 0%, transparent 25%) no-repeat; } .chalk .shaded.textured.long.round, .chalk.chalk.shaded.textured.long.round { background: linear-gradient(to right, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to left, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; position: relative; overflow: hidden; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk .shaded.textured.long.round:after, .chalk.chalk.shaded.textured.long.round:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; mix-blend-mode: screen; opacity: 50%; background: linear-gradient(to right, black 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to left, black 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to bottom, grey 0%, white calc(5% + 1px), white calc(15% + 1px), black calc(50% + 1px)) no-repeat; } .chalk .shaded.textured.long.round.vertical, .chalk.chalk.shaded.textured.long.round.vertical { background: linear-gradient(to right, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to left, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; position: relative; overflow: hidden; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk .shaded.textured.long.round.vertical:after, .chalk.chalk.shaded.textured.long.round.vertical:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; mix-blend-mode: screen; opacity: 50%; background: linear-gradient(to right, black 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to left, black 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to bottom, grey 0%, white calc(5% + 1px), white calc(15% + 1px), black calc(50% + 1px)) no-repeat; } } @supports not (color: color-mix(in srgb, white, black)) { .chalk .shaded, .chalk.chalk.shaded { background: var(--primary-color); border-color: var(--primary-color); } .chalk .shaded.round, .chalk.chalk.shaded.round { background: var(--primary-color); border-color: var(--primary-color); } .chalk .shaded.rounded, .chalk.chalk.shaded.rounded { background: var(--primary-color); border-color: var(--primary-color); } .chalk .shaded.textured, .chalk.chalk.shaded.textured { background: var(--primary-color); border-color: var(--primary-color); } .chalk .shaded.textured.round, .chalk.chalk.shaded.textured.round { background: var(--primary-color); border-color: var(--primary-color); } .chalk .shaded.textured.rounded, .chalk.chalk.shaded.textured.rounded { background: var(--primary-color); border-color: var(--primary-color); } } /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _flat-plastic.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _plastic.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .plastic .shaded, .plastic.plastic.shaded { background: linear-gradient(var(--light-direction), white 0%, transparent 5px) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 50%, transparent) 0%, transparent 10px) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 50%, var(--primary-color)) 0%, var(--primary-color) 5px) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic .shaded.round, .plastic.plastic.shaded.round { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic .shaded.rounded, .plastic.plastic.shaded.rounded { background: linear-gradient(var(--light-direction), white 0%, transparent 25%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic .shaded.long.round, .plastic.plastic.shaded.long.round { background: linear-gradient(to right, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to left, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to bottom, color-mix(in srgb, white 50%, transparent) 0%, white calc(7.5% + 1px), white calc(12.5% + 1px), transparent calc(33% + 1px)) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, black 10%, var(--primary-color)) 0, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic .shaded.long.round.vertical, .plastic.plastic.shaded.long.round.vertical { background: linear-gradient(to bottom, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to top, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to right, color-mix(in srgb, white 50%, transparent) 0%, white calc(7.5% + 1px), white calc(12.5% + 1px), transparent calc(33% + 1px)) no-repeat, linear-gradient(to right, color-mix(in srgb, black 10%, var(--primary-color)) 0, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic .shaded.textured, .plastic.plastic.shaded.textured { background: linear-gradient(var(--light-direction), color-mix(in srgb, white 20%, var(--primary-color)) 0%, var(--primary-color) 5px, var(--primary-color) 100%) no-repeat; position: relative; overflow: hidden; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic .shaded.textured:after, .plastic.plastic.shaded.textured:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background: linear-gradient(var(--light-direction), white 0%, transparent 10%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 50%, transparent) 0%, transparent 10px) no-repeat; } .plastic .shaded.textured.round, .plastic.plastic.shaded.textured.round { background: linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; position: relative; overflow: hidden; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic .shaded.textured.round:after, .plastic.plastic.shaded.textured.round:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat; } .plastic .shaded.textured.round:not(.long):after, .plastic.plastic.shaded.textured.round:not(.long):after { transform: scale(-1) rotate(var(--light-direction)); border-radius: 50%; } .plastic .shaded.textured.rounded, .plastic.plastic.shaded.textured.rounded { background: linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; position: relative; overflow: hidden; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic .shaded.textured.rounded:after, .plastic.plastic.shaded.textured.rounded:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background: linear-gradient(var(--light-direction), white 0%, transparent 25%) no-repeat; } .plastic .shaded.textured.long.round, .plastic.plastic.shaded.textured.long.round { background: linear-gradient(to right, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to left, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, black 10%, var(--primary-color)) 0, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; position: relative; overflow: hidden; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic .shaded.textured.long.round:after, .plastic.plastic.shaded.textured.long.round:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(to right, black 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to left, black 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to bottom, grey 0%, white calc(7.5% + 1px), white calc(12.5% + 1px), black calc(33% + 1px)) no-repeat; } .plastic .shaded.textured.long.round.vertical, .plastic.plastic.shaded.textured.long.round.vertical { background: linear-gradient(to bottom, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to top, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to right, color-mix(in srgb, black 10%, var(--primary-color)) 0, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; position: relative; overflow: hidden; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic .shaded.textured.long.round.vertical:after, .plastic.plastic.shaded.textured.long.round.vertical:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(to bottom, black 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to top, black 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to right, color-mix(in srgb, white 50%, transparent) 0%, white calc(7.5% + 1px), white calc(12.5% + 1px), transparent calc(33% + 1px)) no-repeat; } } @supports not (color: color-mix(in srgb, white, black)) { .plastic .shaded, .plastic.plastic.shaded { background: var(--primary-color); border-color: var(--primary-color); } .plastic .shaded.round, .plastic.plastic.shaded.round { background: var(--primary-color); border-color: var(--primary-color); } .plastic .shaded.rounded, .plastic.plastic.shaded.rounded { background: var(--primary-color); border-color: var(--primary-color); } .plastic .shaded.textured, .plastic.plastic.shaded.textured { background: var(--primary-color); border-color: var(--primary-color); } .plastic .shaded.textured.round, .plastic.plastic.shaded.textured.round { background: var(--primary-color); border-color: var(--primary-color); } .plastic .shaded.textured.rounded, .plastic.plastic.shaded.textured.rounded { background: var(--primary-color); border-color: var(--primary-color); } } /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _flat-glass.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _glass.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .glass .shaded, .glass.glass.shaded { background: linear-gradient(var(--light-direction), white 0%, transparent 10%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 50%, transparent) 0%, transparent 20%) no-repeat, linear-gradient(var(--light-direction), transparent 50%, color-mix(in srgb, white 10%, var(--primary-color)) 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, color-mix(in srgb, black 10%, var(--primary-color)) 100%, transparent) 0%, color-mix(in srgb, var(--primary-color) 100%, transparent) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .glass .shaded.round, .glass.glass.shaded.round { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, var(--primary-color)) 0%, var(--primary-color) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, var(--primary-color) 50%, transparent) 100%) no-repeat, color-mix(in srgb, black 30%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .glass .shaded.rounded, .glass.glass.shaded.rounded { background: linear-gradient(to right, color-mix(in srgb, color-mix(in srgb, black 20%, var(--primary-color)) 50%, transparent) 0%, transparent 10px) no-repeat, linear-gradient(to left, color-mix(in srgb, color-mix(in srgb, black 20%, var(--primary-color)) 50%, transparent) 0%, transparent 10px) no-repeat, linear-gradient(var(--light-direction), white 0%, transparent 30%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, var(--primary-color)) 0%, var(--primary-color) 50%, transparent 100%) no-repeat, color-mix(in srgb, black 30%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .glass .shaded.long.round, .glass.glass.shaded.long.round { background: linear-gradient(to right, color-mix(in srgb, black 25%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to left, color-mix(in srgb, black 25%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to bottom, color-mix(in srgb, white 50%, transparent) 0%, white calc(7.5% + 1px), white calc(12.5% + 1px), transparent calc(33% + 1px)) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, white 10%, var(--primary-color)) calc(70% + 1px), color-mix(in srgb, white 10%, var(--primary-color)) calc(80% + 1px), var(--primary-color) 100%) no-repeat, color-mix(in srgb, black 30%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .glass .shaded.long.round.vertical, .glass.glass.shaded.long.round.vertical { background: linear-gradient(to bottom, color-mix(in srgb, black 25%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to top, color-mix(in srgb, black 25%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to right, color-mix(in srgb, white 50%, transparent) 0%, white calc(7.5% + 1px), white calc(12.5% + 1px), transparent calc(33% + 1px)) no-repeat, linear-gradient(to right, transparent 33%, color-mix(in srgb, white 10%, var(--primary-color)) calc(70% + 1px), color-mix(in srgb, white 10%, var(--primary-color)) calc(80% + 1px), var(--primary-color) 100%) no-repeat, color-mix(in srgb, black 30%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .glass .shaded.textured, .glass.glass.shaded.textured { background: linear-gradient(var(--light-direction), transparent 50%, color-mix(in srgb, white 10%, var(--primary-color)) 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, color-mix(in srgb, black 10%, var(--primary-color)) 100%, transparent) 0%, color-mix(in srgb, var(--primary-color) 100%, transparent) 100%) no-repeat; position: relative; overflow: hidden; } .glass .shaded.textured:after, .glass.glass.shaded.textured:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background: linear-gradient(var(--light-direction), white 0%, transparent 10%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 50%, transparent) 0%, transparent 20%) no-repeat; } .glass .shaded.textured.round, .glass.glass.shaded.textured.round { background: linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, var(--primary-color) 50%, transparent) 100%) no-repeat, color-mix(in srgb, black 30%, var(--primary-color)); position: relative; overflow: hidden; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .glass .shaded.textured.round:after, .glass.glass.shaded.textured.round:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; mix-blend-mode: normal; background: radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, var(--primary-color)) 0%, var(--primary-color) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat; } .glass .shaded.textured.round:not(.long):after, .glass.glass.shaded.textured.round:not(.long):after { transform: scale(-1) rotate(var(--light-direction)); border-radius: 50%; } .glass .shaded.textured.rounded, .glass.glass.shaded.textured.rounded { background: linear-gradient(to right, color-mix(in srgb, color-mix(in srgb, black 20%, var(--primary-color)) 50%, transparent) 0%, transparent 10px) no-repeat, linear-gradient(to left, color-mix(in srgb, color-mix(in srgb, black 20%, var(--primary-color)) 50%, transparent) 0%, transparent 10px) no-repeat, color-mix(in srgb, black 30%, var(--primary-color)); position: relative; overflow: hidden; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .glass .shaded.textured.rounded:after, .glass.glass.shaded.textured.rounded:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; mix-blend-mode: normal; background: linear-gradient(var(--light-direction), white 0%, transparent 30%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, var(--primary-color)) 0%, var(--primary-color) 50%, transparent 100%) no-repeat; } .glass .shaded.textured.long.round, .glass.glass.shaded.textured.long.round { background: linear-gradient(to right, color-mix(in srgb, black 25%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to left, color-mix(in srgb, black 25%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, white 10%, var(--primary-color)) calc(70% + 1px), color-mix(in srgb, white 10%, var(--primary-color)) calc(80% + 1px), var(--primary-color) 100%) no-repeat, color-mix(in srgb, black 30%, var(--primary-color)); position: relative; overflow: hidden; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .glass .shaded.textured.long.round:after, .glass.glass.shaded.textured.long.round:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; mix-blend-mode: screen; border-radius: 0; background: linear-gradient(to right, black 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to left, black 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to bottom, grey 0%, white calc(7.5% + 1px), white calc(12.5% + 1px), black calc(33% + 1px)) no-repeat; } .glass .shaded.textured.long.round.vertical, .glass.glass.shaded.textured.long.round.vertical { background: linear-gradient(to bottom, color-mix(in srgb, black 25%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to top, color-mix(in srgb, black 25%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to right, transparent 33%, color-mix(in srgb, white 10%, var(--primary-color)) calc(70% + 1px), color-mix(in srgb, white 10%, var(--primary-color)) calc(80% + 1px), var(--primary-color) 100%) no-repeat, color-mix(in srgb, black 30%, var(--primary-color)); position: relative; overflow: hidden; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .glass .shaded.textured.long.round.vertical:after, .glass.glass.shaded.textured.long.round.vertical:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(to bottom, black 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to top, black 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to right, grey 0%, white calc(7.5% + 1px), white calc(12.5% + 1px), black calc(33% + 1px)) no-repeat; } } @supports not (color: color-mix(in srgb, white, black)) { .glass .shaded, .glass.glass.shaded { background: var(--primary-color); border-color: var(--primary-color); } .glass .shaded.round, .glass.glass.shaded.round { background: var(--primary-color); border-color: var(--primary-color); } .glass .shaded.rounded, .glass.glass.shaded.rounded { background: var(--primary-color); border-color: var(--primary-color); } .glass .shaded.textured, .glass.glass.shaded.textured { background: var(--primary-color); border-color: var(--primary-color); } .glass .shaded.textured.round, .glass.glass.shaded.textured.round { background: var(--primary-color); border-color: var(--primary-color); } .glass .shaded.textured.rounded, .glass.glass.shaded.textured.rounded { background: var(--primary-color); border-color: var(--primary-color); } } /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _flat-metal.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _metal.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .metal .shaded, .metal.metal.shaded { background: linear-gradient(var(--light-direction), color-mix(in srgb, white 30%, var(--primary-color)) 0%, transparent 10%) 100% no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 30%, var(--primary-color)) 0%, transparent 20%) 100% no-repeat, linear-gradient(var(--light-direction), transparent 0%, color-mix(in srgb, var(--primary-color) 50%, transparent) 66%, var(--primary-color)) 100% no-repeat, color-mix(in srgb, black 50%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .metal .shaded.round, .metal.metal.shaded.round { background: radial-gradient(ellipse 50% 50% at 50% 10%, white 0%, color-mix(in srgb, white 30%, var(--primary-color)) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 100% 50% at 50% 10%, var(--primary-color) 0%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 25%, color-mix(in srgb, var(--primary-color) 50%, transparent) 66%, color-mix(in srgb, white 30%, var(--primary-color)) 100%) no-repeat, color-mix(in srgb, black 50%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .metal .shaded.rounded, .metal.metal.shaded.rounded { background: linear-gradient(to right, color-mix(in srgb, black 15%, transparent) 0%, transparent 25%) no-repeat, linear-gradient(to left, color-mix(in srgb, black 15%, transparent) 0%, transparent 25%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 60%, var(--primary-color)) 0%, color-mix(in srgb, white 30%, var(--primary-color)) 25%, transparent 50%) no-repeat, linear-gradient(var(--light-direction), transparent 66%, color-mix(in srgb, white 10%, var(--primary-color)) 100%) no-repeat, color-mix(in srgb, black 30%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .metal .shaded.long.round, .metal.metal.shaded.long.round { background: linear-gradient(to right, color-mix(in srgb, black 40%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to left, color-mix(in srgb, black 40%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to bottom, color-mix(in srgb, white 25%, var(--primary-color)) 0%, color-mix(in srgb, white 75%, var(--primary-color)) calc(5% + 1px), color-mix(in srgb, white 75%, var(--primary-color)) calc(15% + 1px), transparent calc(50% + 1px)) no-repeat, linear-gradient(var(--light-direction), transparent 0%, var(--primary-color) 25%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 66%, color-mix(in srgb, white 10%, var(--primary-color)) 100%) no-repeat, color-mix(in srgb, black 50%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .metal .shaded.long.round.vertical, .metal.metal.shaded.long.round.vertical { background: linear-gradient(to bottom, color-mix(in srgb, black 40%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to top, color-mix(in srgb, black 40%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to right, color-mix(in srgb, white 25%, var(--primary-color)) 0%, color-mix(in srgb, white 75%, var(--primary-color)) calc(5% + 1px), color-mix(in srgb, white 75%, var(--primary-color)) calc(15% + 1px), transparent calc(50% + 1px)) no-repeat, linear-gradient(to right, transparent 0%, var(--primary-color) 25%, transparent 75%) no-repeat, linear-gradient(to right, transparent 66%, color-mix(in srgb, white 10%, var(--primary-color)) 100%) no-repeat, color-mix(in srgb, black 50%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .metal .shaded.textured, .metal.metal.shaded.textured { background: linear-gradient(var(--light-direction), transparent 0%, color-mix(in srgb, var(--primary-color) 50%, transparent) 66%, var(--primary-color) 100%) no-repeat, color-mix(in srgb, black 50%, var(--primary-color)); position: relative; overflow: hidden; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .metal .shaded.textured:after, .metal.metal.shaded.textured:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background: linear-gradient(var(--light-direction), color-mix(in srgb, white 30%, var(--primary-color)) 0%, transparent 10%) 100% no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 30%, var(--primary-color)) 0%, transparnt 20%) no-repeat; } .metal .shaded.textured.round, .metal.metal.shaded.textured.round { background: radial-gradient(ellipse 100% 50% at 50% 10%, var(--primary-color) 0%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 50%, color-mix(in srgb, var(--primary-color) 50%, transparent) 66%, color-mix(in srgb, white 30%, var(--primary-color)) 100%) no-repeat, color-mix(in srgb, black 50%, var(--primary-color)); position: relative; overflow: hidden; border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .metal .shaded.textured.round:after, .metal.metal.shaded.textured.round:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; mix-blend-mode: normal; background: radial-gradient(ellipse 50% 50% at 50% 10%, white 0%, color-mix(in srgb, white 10%, var(--primary-color)) 50%, transparent 100%) no-repeat; } .metal .shaded.textured.round:not(.long):after, .metal.metal.shaded.textured.round:not(.long):after { transform: scale(-1) rotate(var(--light-direction)); border-radius: 50%; } .metal .shaded.textured.rounded, .metal.metal.shaded.textured.rounded { background: radial-gradient(ellipse 100% 50% at 50% 10%, var(--primary-color) 0%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 0%, color-mix(in srgb, var(--primary-color) 50%, transparent) 66%, var(--primary-color) 100%) no-repeat, color-mix(in srgb, black 50%, var(--primary-color)); position: relative; overflow: hidden; border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .metal .shaded.textured.rounded:after, .metal.metal.shaded.textured.rounded:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; background: linear-gradient(to right, color-mix(in srgb, black 15%, transparent) 0%, transparent 25%) no-repeat, linear-gradient(to left, color-mix(in srgb, black 15%, transparent) 0%, transparent 25%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 90%, var(--primary-color)) 0%, color-mix(in srgb, white 30%, var(--primary-color)) 25%, transparent 50%) no-repeat; } .metal .shaded.textured.long.round, .metal.metal.shaded.textured.long.round { background: linear-gradient(to right, color-mix(in srgb, black 40%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to left, color-mix(in srgb, black 40%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to bottom, color-mix(in srgb, white 25%, var(--primary-color)) 0%, color-mix(in srgb, white 75%, var(--primary-color)) calc(5% + 1px), color-mix(in srgb, white 75%, var(--primary-color)) calc(15% + 1px), transparent calc(50% + 1px)) no-repeat, linear-gradient(to bottom, transparent 0%, var(--primary-color) 25%, transparent 75%) no-repeat, color-mix(in srgb, black 50%, var(--primary-color)); position: relative; overflow: hidden; border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .metal .shaded.textured.long.round:after, .metal.metal.shaded.textured.long.round:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; mix-blend-mode: screen; background: linear-gradient(to right, black 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to left, black 0%, transparent var(--border-radius)) no-repeat, linear-gradient(var(--light-direction), transparent 66%, color-mix(in srgb, white 10%, var(--primary-color)) 100%) no-repeat; } .metal .shaded.textured.long.round.vertical, .metal.metal.shaded.textured.long.round.vertical { background: linear-gradient(to bottom, color-mix(in srgb, black 40%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to top, color-mix(in srgb, black 40%, var(--primary-color)) 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to right, transparent 0%, var(--primary-color) 25%, transparent 75%) no-repeat, color-mix(in srgb, black 50%, var(--primary-color)); position: relative; overflow: hidden; border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .metal .shaded.textured.long.round.vertical:after, .metal.metal.shaded.textured.long.round.vertical:after { position: absolute; content: ""; width: 100%; height: 100%; top: 0; left: 0; pointer-events: none; mix-blend-mode: screen; background: linear-gradient(to bottom, black 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to top, black 0%, transparent var(--border-radius)) no-repeat, linear-gradient(to right, color-mix(in srgb, white 25%, var(--primary-color)) 0%, color-mix(in srgb, white 75%, var(--primary-color)) calc(5% + 1px), color-mix(in srgb, white 75%, var(--primary-color)) calc(15% + 1px), transparent calc(50% + 1px)) no-repeat, linear-gradient(to right, transparent 66%, color-mix(in srgb, white 10%, var(--primary-color)) 100%) no-repeat; } } @supports not (color: color-mix(in srgb, white, black)) { .metal .shaded, .metal.metal.shaded { background: var(--primary-color); border-color: var(--primary-color); } .metal .shaded.round, .metal.metal.shaded.round { background: var(--primary-color); border-color: var(--primary-color); } .metal .shaded.rounded, .metal.metal.shaded.rounded { background: var(--primary-color); border-color: var(--primary-color); } .metal .shaded.textured, .metal.metal.shaded.textured { background: var(--primary-color); border-color: var(--primary-color); } .metal .shaded.textured.round, .metal.metal.shaded.textured.round { background: var(--primary-color); border-color: var(--primary-color); } .metal .shaded.textured.rounded, .metal.metal.shaded.textured.rounded { background: var(--primary-color); border-color: var(--primary-color); } } /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ :root { --light-direction: to bottom; } /******************************************************************************\ | | | _textures.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ .textured { position: relative; } .textured::before { background-image: var(--texture); content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: inherit; mix-blend-mode: multiply; background-size: cover; background-position: center; opacity: var(--texture-opacity); } .textured > div { transform: translateZ(0); } :root { --texture-opacity: 1; --texture-blur: 5px; } .shaded.frosted .shaded::before, .shaded.frosted::before { filter: blur(var(--texture-blur)); } .shaded.frosted .shaded::after, .shaded.frosted::after { filter: blur(var(--texture-blur)); } /******************************************************************************\ | | | texture-maps.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ .textured.brick { --texture: url(images/brick.png); } .textured.brushed { --texture: url(images/brushed.png); } .textured.crumpled { --texture: url(images/crumpled.png); } .textured.dots { --texture: url(images/dots.png); } .textured.flag { --texture: url(images/flag.png); } .textured.hearts { --texture: url(images/hearts.png); } .textured.marble { --texture: url(images/marble.png); } .textured.panels { --texture: url(images/panels.png); } .textured.rough { --texture: url(images/rough.png); } .textured.stars { --texture: url(images/stars.png); } .textured.wood { --texture: url(images/wood.png); } /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _flat-btns.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ .flat .btn, .flat.btn.btn { background: #cfcfe1; border-color: #cfcfe1; box-shadow: none; } .flat .btn.round, .flat.btn.btn.round { background: #cfcfe1; border-color: #cfcfe1; } .flat .btn.rounded, .flat.btn.btn.rounded { background: #cfcfe1; border-color: #cfcfe1; } .flat .btn:hover, .flat.btn.btn:hover { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .flat .btn:hover.round, .flat.btn.btn:hover.round { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .flat .btn:hover.rounded, .flat.btn.btn:hover.rounded { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .flat .btn:active, .flat.btn.btn:active { background: color-mix(in srgb, black 20%, #cfcfe1); border-color: color-mix(in srgb, black 20%, #cfcfe1); } .flat .btn:active.round, .flat.btn.btn:active.round { background: color-mix(in srgb, black 20%, #cfcfe1); border-color: color-mix(in srgb, black 20%, #cfcfe1); } .flat .btn:active.rounded, .flat.btn.btn:active.rounded { background: color-mix(in srgb, black 20%, #cfcfe1); border-color: color-mix(in srgb, black 20%, #cfcfe1); } .flat .btn-primary, .flat.btn.btn-primary { background: var(--primary-color); border-color: var(--primary-color); box-shadow: none; } .flat .btn-primary.round, .flat.btn.btn-primary.round { background: var(--primary-color); border-color: var(--primary-color); } .flat .btn-primary.rounded, .flat.btn.btn-primary.rounded { background: var(--primary-color); border-color: var(--primary-color); } .flat .btn-primary:hover, .flat.btn.btn-primary:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .flat .btn-primary:hover.round, .flat.btn.btn-primary:hover.round { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .flat .btn-primary:hover.rounded, .flat.btn.btn-primary:hover.rounded { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .flat .btn-primary:active, .flat.btn.btn-primary:active { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .flat .btn-primary:active.round, .flat.btn.btn-primary:active.round { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .flat .btn-primary:active.rounded, .flat.btn.btn-primary:active.rounded { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } /******************************************************************************\ | | | _chalk-btns.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .chalk .btn, .chalk.btn.btn { background: radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 25%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, #cfcfe1) 0%, #cfcfe1 50%, color-mix(in srgb, black 10%, #cfcfe1) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, #cfcfe1); box-shadow: var(--btn-shadow); } .chalk .btn:hover, .chalk.btn.btn:hover { background: radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 25%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, #cfcfe1)) 0%, color-mix(in srgb, black 10%, #cfcfe1) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, #cfcfe1)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, #cfcfe1)); } .chalk .btn:active, .chalk.btn.btn:active { background: radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 25%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 20%, #cfcfe1)) 0%, color-mix(in srgb, black 20%, #cfcfe1) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, #cfcfe1)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, #cfcfe1)); } .chalk .btn-primary, .chalk.btn.btn-primary { background: radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 25%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); box-shadow: var(--btn-shadow); } .chalk .btn-primary:hover, .chalk.btn.btn-primary:hover { background: radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 25%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, color-mix(in srgb, black 10%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))); } .chalk .btn-primary:active, .chalk.btn.btn-primary:active { background: radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 25%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, color-mix(in srgb, black 20%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))); } } @supports not (color: color-mix(in srgb, white, black)) { .chalk .btn, .chalk.btn.btn { background: #cfcfe1; border-color: #cfcfe1; box-shadow: none; } .chalk .btn.round, .chalk.btn.btn.round { background: #cfcfe1; border-color: #cfcfe1; } .chalk .btn.rounded, .chalk.btn.btn.rounded { background: #cfcfe1; border-color: #cfcfe1; } .chalk .btn:hover, .chalk.btn.btn:hover { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .chalk .btn:hover.round, .chalk.btn.btn:hover.round { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .chalk .btn:hover.rounded, .chalk.btn.btn:hover.rounded { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .chalk .btn:active, .chalk.btn.btn:active { background: color-mix(in srgb, black 20%, #cfcfe1); border-color: color-mix(in srgb, black 20%, #cfcfe1); } .chalk .btn:active.round, .chalk.btn.btn:active.round { background: color-mix(in srgb, black 20%, #cfcfe1); border-color: color-mix(in srgb, black 20%, #cfcfe1); } .chalk .btn:active.rounded, .chalk.btn.btn:active.rounded { background: color-mix(in srgb, black 20%, #cfcfe1); border-color: color-mix(in srgb, black 20%, #cfcfe1); } .chalk .btn-primary, .chalk.btn.btn-primary { background: var(--primary-color); border-color: var(--primary-color); box-shadow: none; } .chalk .btn-primary.round, .chalk.btn.btn-primary.round { background: var(--primary-color); border-color: var(--primary-color); } .chalk .btn-primary.rounded, .chalk.btn.btn-primary.rounded { background: var(--primary-color); border-color: var(--primary-color); } .chalk .btn-primary:hover, .chalk.btn.btn-primary:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk .btn-primary:hover.round, .chalk.btn.btn-primary:hover.round { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk .btn-primary:hover.rounded, .chalk.btn.btn-primary:hover.rounded { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk .btn-primary:active, .chalk.btn.btn-primary:active { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .chalk .btn-primary:active.round, .chalk.btn.btn-primary:active.round { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .chalk .btn-primary:active.rounded, .chalk.btn.btn-primary:active.rounded { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } } /******************************************************************************\ | | | _plastic-btns.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .plastic .btn, .plastic.btn.btn { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, #cfcfe1) 0%, #cfcfe1 50%, color-mix(in srgb, black 10%, #cfcfe1) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, #cfcfe1); box-shadow: var(--btn-shadow); } .plastic .btn:hover, .plastic.btn.btn:hover { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, #cfcfe1)) 0%, color-mix(in srgb, black 10%, #cfcfe1) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, #cfcfe1)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, #cfcfe1)); } .plastic .btn:active, .plastic.btn.btn:active { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 20%, #cfcfe1)) 0%, color-mix(in srgb, black 20%, #cfcfe1) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, #cfcfe1)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, #cfcfe1)); } .plastic .btn-primary, .plastic.btn.btn-primary { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); box-shadow: var(--btn-shadow); } .plastic .btn-primary:hover, .plastic.btn.btn-primary:hover { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, color-mix(in srgb, black 10%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))); } .plastic .btn-primary:active, .plastic.btn.btn-primary:active { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, color-mix(in srgb, black 20%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))); } } @supports not (color: color-mix(in srgb, white, black)) { .plastic .btn, .plastic.btn.btn { background: #cfcfe1; border-color: #cfcfe1; box-shadow: none; } .plastic .btn.round, .plastic.btn.btn.round { background: #cfcfe1; border-color: #cfcfe1; } .plastic .btn.rounded, .plastic.btn.btn.rounded { background: #cfcfe1; border-color: #cfcfe1; } .plastic .btn:hover, .plastic.btn.btn:hover { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .plastic .btn:hover.round, .plastic.btn.btn:hover.round { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .plastic .btn:hover.rounded, .plastic.btn.btn:hover.rounded { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .plastic .btn:active, .plastic.btn.btn:active { background: color-mix(in srgb, black 20%, #cfcfe1); border-color: color-mix(in srgb, black 20%, #cfcfe1); } .plastic .btn:active.round, .plastic.btn.btn:active.round { background: color-mix(in srgb, black 20%, #cfcfe1); border-color: color-mix(in srgb, black 20%, #cfcfe1); } .plastic .btn:active.rounded, .plastic.btn.btn:active.rounded { background: color-mix(in srgb, black 20%, #cfcfe1); border-color: color-mix(in srgb, black 20%, #cfcfe1); } .plastic .btn-primary, .plastic.btn.btn-primary { background: var(--primary-color); border-color: var(--primary-color); box-shadow: none; } .plastic .btn-primary.round, .plastic.btn.btn-primary.round { background: var(--primary-color); border-color: var(--primary-color); } .plastic .btn-primary.rounded, .plastic.btn.btn-primary.rounded { background: var(--primary-color); border-color: var(--primary-color); } .plastic .btn-primary:hover, .plastic.btn.btn-primary:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic .btn-primary:hover.round, .plastic.btn.btn-primary:hover.round { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic .btn-primary:hover.rounded, .plastic.btn.btn-primary:hover.rounded { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic .btn-primary:active, .plastic.btn.btn-primary:active { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .plastic .btn-primary:active.round, .plastic.btn.btn-primary:active.round { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .plastic .btn-primary:active.rounded, .plastic.btn.btn-primary:active.rounded { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } } /******************************************************************************\ | | | _glass-btns.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .glass .btn, .glass.btn.btn { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, #cfcfe1) 0%, #cfcfe1 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, #cfcfe1 50%, transparent) 100%) no-repeat, color-mix(in srgb, black 30%, #cfcfe1); border-color: color-mix(in srgb, black 20%, #cfcfe1); box-shadow: var(--btn-shadow); } .glass .btn:hover, .glass.btn.btn:hover { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, color-mix(in srgb, black 10%, #cfcfe1)) 0%, color-mix(in srgb, black 10%, #cfcfe1) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, color-mix(in srgb, black 10%, #cfcfe1) 50%, transparent) 100%) no-repeat, color-mix(in srgb, black 30%, color-mix(in srgb, black 10%, #cfcfe1)); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 10%, #cfcfe1)); } .glass .btn:active, .glass.btn.btn:active { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, color-mix(in srgb, black 20%, #cfcfe1)) 0%, color-mix(in srgb, black 20%, #cfcfe1) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, color-mix(in srgb, black 20%, #cfcfe1) 50%, transparent) 100%) no-repeat, color-mix(in srgb, black 30%, color-mix(in srgb, black 20%, #cfcfe1)); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 20%, #cfcfe1)); } .glass .btn-primary, .glass.btn.btn-primary { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, var(--primary-color)) 0%, var(--primary-color) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, var(--primary-color) 50%, transparent) 100%) no-repeat, color-mix(in srgb, black 30%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); box-shadow: var(--btn-shadow); } .glass .btn-primary:hover, .glass.btn.btn-primary:hover { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, color-mix(in srgb, black 10%, var(--primary-color)) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, color-mix(in srgb, black 10%, var(--primary-color)) 50%, transparent) 100%) no-repeat, color-mix(in srgb, black 30%, color-mix(in srgb, black 10%, var(--primary-color))); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 10%, var(--primary-color))); } .glass .btn-primary:active, .glass.btn.btn-primary:active { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, color-mix(in srgb, black 20%, var(--primary-color)) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, color-mix(in srgb, black 20%, var(--primary-color)) 50%, transparent) 100%) no-repeat, color-mix(in srgb, black 30%, color-mix(in srgb, black 20%, var(--primary-color))); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 20%, var(--primary-color))); } } @supports not (color: color-mix(in srgb, white, black)) { .glass .btn, .glass.btn.btn { background: #cfcfe1; border-color: #cfcfe1; box-shadow: none; } .glass .btn.round, .glass.btn.btn.round { background: #cfcfe1; border-color: #cfcfe1; } .glass .btn.rounded, .glass.btn.btn.rounded { background: #cfcfe1; border-color: #cfcfe1; } .glass .btn:hover, .glass.btn.btn:hover { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .glass .btn:hover.round, .glass.btn.btn:hover.round { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .glass .btn:hover.rounded, .glass.btn.btn:hover.rounded { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .glass .btn:active, .glass.btn.btn:active { background: color-mix(in srgb, black 20%, #cfcfe1); border-color: color-mix(in srgb, black 20%, #cfcfe1); } .glass .btn:active.round, .glass.btn.btn:active.round { background: color-mix(in srgb, black 20%, #cfcfe1); border-color: color-mix(in srgb, black 20%, #cfcfe1); } .glass .btn:active.rounded, .glass.btn.btn:active.rounded { background: color-mix(in srgb, black 20%, #cfcfe1); border-color: color-mix(in srgb, black 20%, #cfcfe1); } .glass .btn-primary, .glass.btn.btn-primary { background: var(--primary-color); border-color: var(--primary-color); box-shadow: none; } .glass .btn-primary.round, .glass.btn.btn-primary.round { background: var(--primary-color); border-color: var(--primary-color); } .glass .btn-primary.rounded, .glass.btn.btn-primary.rounded { background: var(--primary-color); border-color: var(--primary-color); } .glass .btn-primary:hover, .glass.btn.btn-primary:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .glass .btn-primary:hover.round, .glass.btn.btn-primary:hover.round { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .glass .btn-primary:hover.rounded, .glass.btn.btn-primary:hover.rounded { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .glass .btn-primary:active, .glass.btn.btn-primary:active { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .glass .btn-primary:active.round, .glass.btn.btn-primary:active.round { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .glass .btn-primary:active.rounded, .glass.btn.btn-primary:active.rounded { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } } /******************************************************************************\ | | | _metal-btns.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .metal .btn, .metal.btn.btn { background: radial-gradient(ellipse 50% 50% at 50% 10%, white 0%, color-mix(in srgb, white 30%, #cfcfe1) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 100% 50% at 50% 10%, #cfcfe1 0%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 25%, color-mix(in srgb, #cfcfe1 50%, transparent) 66%, color-mix(in srgb, white 30%, #cfcfe1) 100%) no-repeat, color-mix(in srgb, black 50%, #cfcfe1); border-color: color-mix(in srgb, black 20%, #cfcfe1); box-shadow: var(--btn-shadow); } .metal .btn:hover, .metal.btn.btn:hover { background: radial-gradient(ellipse 50% 50% at 50% 10%, white 0%, color-mix(in srgb, white 30%, color-mix(in srgb, black 10%, #cfcfe1)) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 100% 50% at 50% 10%, color-mix(in srgb, black 10%, #cfcfe1) 0%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 25%, color-mix(in srgb, color-mix(in srgb, black 10%, #cfcfe1) 50%, transparent) 66%, color-mix(in srgb, white 30%, color-mix(in srgb, black 10%, #cfcfe1)) 100%) no-repeat, color-mix(in srgb, black 50%, color-mix(in srgb, black 10%, #cfcfe1)); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 10%, #cfcfe1)); } .metal .btn:active, .metal.btn.btn:active { background: radial-gradient(ellipse 50% 50% at 50% 10%, white 0%, color-mix(in srgb, white 30%, color-mix(in srgb, black 20%, #cfcfe1)) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 100% 50% at 50% 10%, color-mix(in srgb, black 20%, #cfcfe1) 0%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 25%, color-mix(in srgb, color-mix(in srgb, black 20%, #cfcfe1) 50%, transparent) 66%, color-mix(in srgb, white 30%, color-mix(in srgb, black 20%, #cfcfe1)) 100%) no-repeat, color-mix(in srgb, black 50%, color-mix(in srgb, black 20%, #cfcfe1)); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 20%, #cfcfe1)); } .metal .btn-primary, .metal.btn.btn-primary { background: radial-gradient(ellipse 50% 50% at 50% 10%, white 0%, color-mix(in srgb, white 30%, var(--primary-color)) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 100% 50% at 50% 10%, var(--primary-color) 0%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 25%, color-mix(in srgb, var(--primary-color) 50%, transparent) 66%, color-mix(in srgb, white 30%, var(--primary-color)) 100%) no-repeat, color-mix(in srgb, black 50%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); box-shadow: var(--btn-shadow); } .metal .btn-primary:hover, .metal.btn.btn-primary:hover { background: radial-gradient(ellipse 50% 50% at 50% 10%, white 0%, color-mix(in srgb, white 30%, color-mix(in srgb, black 10%, var(--primary-color))) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 100% 50% at 50% 10%, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 25%, color-mix(in srgb, color-mix(in srgb, black 10%, var(--primary-color)) 50%, transparent) 66%, color-mix(in srgb, white 30%, color-mix(in srgb, black 10%, var(--primary-color))) 100%) no-repeat, color-mix(in srgb, black 50%, color-mix(in srgb, black 10%, var(--primary-color))); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 10%, var(--primary-color))); } .metal .btn-primary:active, .metal.btn.btn-primary:active { background: radial-gradient(ellipse 50% 50% at 50% 10%, white 0%, color-mix(in srgb, white 30%, color-mix(in srgb, black 20%, var(--primary-color))) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 100% 50% at 50% 10%, color-mix(in srgb, black 20%, var(--primary-color)) 0%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 25%, color-mix(in srgb, color-mix(in srgb, black 20%, var(--primary-color)) 50%, transparent) 66%, color-mix(in srgb, white 30%, color-mix(in srgb, black 20%, var(--primary-color))) 100%) no-repeat, color-mix(in srgb, black 50%, color-mix(in srgb, black 20%, var(--primary-color))); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 20%, var(--primary-color))); } } @supports not (color: color-mix(in srgb, white, black)) { .metal .btn, .metal.btn.btn { background: #cfcfe1; border-color: #cfcfe1; box-shadow: none; } .metal .btn.round, .metal.btn.btn.round { background: #cfcfe1; border-color: #cfcfe1; } .metal .btn.rounded, .metal.btn.btn.rounded { background: #cfcfe1; border-color: #cfcfe1; } .metal .btn:hover, .metal.btn.btn:hover { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .metal .btn:hover.round, .metal.btn.btn:hover.round { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .metal .btn:hover.rounded, .metal.btn.btn:hover.rounded { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .metal .btn:active, .metal.btn.btn:active { background: color-mix(in srgb, black 20%, #cfcfe1); border-color: color-mix(in srgb, black 20%, #cfcfe1); } .metal .btn:active.round, .metal.btn.btn:active.round { background: color-mix(in srgb, black 20%, #cfcfe1); border-color: color-mix(in srgb, black 20%, #cfcfe1); } .metal .btn:active.rounded, .metal.btn.btn:active.rounded { background: color-mix(in srgb, black 20%, #cfcfe1); border-color: color-mix(in srgb, black 20%, #cfcfe1); } .metal .btn-primary, .metal.btn.btn-primary { background: var(--primary-color); border-color: var(--primary-color); box-shadow: none; } .metal .btn-primary.round, .metal.btn.btn-primary.round { background: var(--primary-color); border-color: var(--primary-color); } .metal .btn-primary.rounded, .metal.btn.btn-primary.rounded { background: var(--primary-color); border-color: var(--primary-color); } .metal .btn-primary:hover, .metal.btn.btn-primary:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .metal .btn-primary:hover.round, .metal.btn.btn-primary:hover.round { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .metal .btn-primary:hover.rounded, .metal.btn.btn-primary:hover.rounded { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .metal .btn-primary:active, .metal.btn.btn-primary:active { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .metal .btn-primary:active.round, .metal.btn.btn-primary:active.round { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .metal .btn-primary:active.rounded, .metal.btn.btn-primary:active.rounded { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } } /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _flat-radio-buttons.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ .flat input[type=radio], input[type=radio].flat.flat { box-shadow: none; } .flat input[type=radio]:checked, input[type=radio].flat.flat:checked { background: var(--primary-color); border-color: var(--primary-color); } .flat input[type=radio]:checked.round, input[type=radio].flat.flat:checked.round { background: var(--primary-color); border-color: var(--primary-color); } .flat input[type=radio]:checked.rounded, input[type=radio].flat.flat:checked.rounded { background: var(--primary-color); border-color: var(--primary-color); } /******************************************************************************\ | | | _chalk-radio-buttons.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .chalk input[type=radio], input[type=radio].chalk.chalk { box-shadow: var(--radio-button-shadow); } .chalk input[type=radio]:checked, input[type=radio].chalk.chalk:checked { background: radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 25%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); transform: scale(-1) rotate(var(--light-direction)); } } @supports not (color: color-mix(in srgb, white, black)) { .chalk input[type=radio], input[type=radio].chalk.chalk { box-shadow: none; } .chalk input[type=radio]:checked, input[type=radio].chalk.chalk:checked { background: var(--primary-color); border-color: var(--primary-color); } .chalk input[type=radio]:checked.round, input[type=radio].chalk.chalk:checked.round { background: var(--primary-color); border-color: var(--primary-color); } .chalk input[type=radio]:checked.rounded, input[type=radio].chalk.chalk:checked.rounded { background: var(--primary-color); border-color: var(--primary-color); } } /******************************************************************************\ | | | _plastic-radio-buttons.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .plastic input[type=radio], input[type=radio].plastic.plastic { box-shadow: var(--radio-button-shadow); } .plastic input[type=radio]:checked, input[type=radio].plastic.plastic:checked { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); transform: scale(-1) rotate(var(--light-direction)); } } @supports not (color: color-mix(in srgb, white, black)) { .plastic input[type=radio], input[type=radio].plastic.plastic { box-shadow: none; } .plastic input[type=radio]:checked, input[type=radio].plastic.plastic:checked { background: var(--primary-color); border-color: var(--primary-color); } .plastic input[type=radio]:checked.round, input[type=radio].plastic.plastic:checked.round { background: var(--primary-color); border-color: var(--primary-color); } .plastic input[type=radio]:checked.rounded, input[type=radio].plastic.plastic:checked.rounded { background: var(--primary-color); border-color: var(--primary-color); } } /******************************************************************************\ | | | _glass-radio-buttons.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .glass input[type=radio], input[type=radio].glass.glass { box-shadow: var(--radio-button-shadow); } .glass input[type=radio]:checked, input[type=radio].glass.glass:checked { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, var(--primary-color)) 0%, var(--primary-color) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, var(--primary-color) 50%, transparent) 100%) no-repeat, color-mix(in srgb, black 30%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); transform: scale(-1) rotate(var(--light-direction)); } } @supports not (color: color-mix(in srgb, white, black)) { .glass input[type=radio], input[type=radio].glass.glass { box-shadow: none; } .glass input[type=radio]:checked, input[type=radio].glass.glass:checked { background: var(--primary-color); border-color: var(--primary-color); } .glass input[type=radio]:checked.round, input[type=radio].glass.glass:checked.round { background: var(--primary-color); border-color: var(--primary-color); } .glass input[type=radio]:checked.rounded, input[type=radio].glass.glass:checked.rounded { background: var(--primary-color); border-color: var(--primary-color); } } /******************************************************************************\ | | | _metal-radio-buttons.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .metal input[type=radio], input[type=radio].metal.metal { box-shadow: var(--radio-button-shadow); } .metal input[type=radio]:checked, input[type=radio].metal.metal:checked { background: radial-gradient(ellipse 50% 50% at 50% 10%, white 0%, color-mix(in srgb, white 30%, var(--primary-color)) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 100% 50% at 50% 10%, var(--primary-color) 0%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 25%, color-mix(in srgb, var(--primary-color) 50%, transparent) 66%, color-mix(in srgb, white 30%, var(--primary-color)) 100%) no-repeat, color-mix(in srgb, black 50%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); transform: scale(-1) rotate(var(--light-direction)); } } @supports not (color: color-mix(in srgb, white, black)) { .metal input[type=radio], input[type=radio].metal.metal { box-shadow: none; } .metal input[type=radio]:checked, input[type=radio].metal.metal:checked { background: var(--primary-color); border-color: var(--primary-color); } .metal input[type=radio]:checked.round, input[type=radio].metal.metal:checked.round { background: var(--primary-color); border-color: var(--primary-color); } .metal input[type=radio]:checked.rounded, input[type=radio].metal.metal:checked.rounded { background: var(--primary-color); border-color: var(--primary-color); } } /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _flat-scrollbars.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ .flat ::-webkit-scrollbar-thumb:horizontal, .flat.flat::-webkit-scrollbar-thumb:horizontal { background: var(--primary-color); } .flat ::-webkit-scrollbar-thumb:horizontal:hover, .flat.flat::-webkit-scrollbar-thumb:horizontal:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); } .flat ::-webkit-scrollbar-thumb:horizontal:active, .flat.flat::-webkit-scrollbar-thumb:horizontal:active { background: color-mix(in srgb, black 20%, var(--primary-color)); } .flat ::-webkit-scrollbar-thumb:vertical, .flat.flat::-webkit-scrollbar-thumb:vertical { background: var(--primary-color); } .flat ::-webkit-scrollbar-thumb:vertical:hover, .flat.flat::-webkit-scrollbar-thumb:vertical:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); } .flat ::-webkit-scrollbar-thumb:vertical:active, .flat.flat::-webkit-scrollbar-thumb:vertical:active { background: color-mix(in srgb, black 20%, var(--primary-color)); } /******************************************************************************\ | | | _chalk-scrollbars.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .chalk ::-webkit-scrollbar-thumb:horizontal, .chalk.chalk::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(to right, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent 6px) no-repeat, linear-gradient(to left, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent 6px) no-repeat, linear-gradient(to bottom, color-mix(in srgb, white 25%, transparent) 0%, color-mix(in srgb, white 50%, transparent) calc(5% + 1px), color-mix(in srgb, white 50%, transparent) calc(15% + 1px), transparent calc(50% + 1px)) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; } .chalk ::-webkit-scrollbar-thumb:horizontal:hover, .chalk.chalk::-webkit-scrollbar-thumb:horizontal:hover { background: linear-gradient(to right, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to left, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to bottom, color-mix(in srgb, white 25%, transparent) 0%, color-mix(in srgb, white 50%, transparent) calc(5% + 1px), color-mix(in srgb, white 50%, transparent) calc(15% + 1px), transparent calc(50% + 1px)) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, color-mix(in srgb, black 10%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 100%) no-repeat; } .chalk ::-webkit-scrollbar-thumb:horizontal:active, .chalk.chalk::-webkit-scrollbar-thumb:horizontal:active { background: linear-gradient(to right, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to left, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to bottom, color-mix(in srgb, white 25%, transparent) 0%, color-mix(in srgb, white 50%, transparent) calc(5% + 1px), color-mix(in srgb, white 50%, transparent) calc(15% + 1px), transparent calc(50% + 1px)) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, color-mix(in srgb, black 20%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 100%) no-repeat; } .chalk ::-webkit-scrollbar-thumb:vertical, .chalk.chalk::-webkit-scrollbar-thumb:vertical { background: linear-gradient(to top, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent 6px) no-repeat, linear-gradient(to bottom, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent 6px) no-repeat, linear-gradient(to right, color-mix(in srgb, white 25%, transparent) 0%, color-mix(in srgb, white 50%, transparent) calc(5% + 1px), color-mix(in srgb, white 50%, transparent) calc(15% + 1px), transparent calc(50% + 1px)) no-repeat, linear-gradient(to right, color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; } .chalk ::-webkit-scrollbar-thumb:vertical:hover, .chalk.chalk::-webkit-scrollbar-thumb:vertical:hover { background: linear-gradient(to top, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to bottom, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to right, color-mix(in srgb, white 25%, transparent) 0%, color-mix(in srgb, white 50%, transparent) calc(5% + 1px), color-mix(in srgb, white 50%, transparent) calc(15% + 1px), transparent calc(50% + 1px)) no-repeat, linear-gradient(to right, color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, color-mix(in srgb, black 10%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 100%) no-repeat; } .chalk ::-webkit-scrollbar-thumb:vertical:active, .chalk.chalk::-webkit-scrollbar-thumb:vertical:active { background: linear-gradient(to top, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to bottom, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to right, color-mix(in srgb, white 25%, transparent) 0%, color-mix(in srgb, white 50%, transparent) calc(5% + 1px), color-mix(in srgb, white 50%, transparent) calc(15% + 1px), transparent calc(50% + 1px)) no-repeat, linear-gradient(to right, color-mix(in srgb, white 10%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, color-mix(in srgb, black 20%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 100%) no-repeat; } } @supports not (color: color-mix(in srgb, white, black)) { .chalk ::-webkit-scrollbar-thumb:horizontal, .chalk.chalk::-webkit-scrollbar-thumb:horizontal { background: var(--primary-color); } .chalk ::-webkit-scrollbar-thumb:horizontal:hover, .chalk.chalk::-webkit-scrollbar-thumb:horizontal:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk ::-webkit-scrollbar-thumb:horizontal:active, .chalk.chalk::-webkit-scrollbar-thumb:horizontal:active { background: color-mix(in srgb, black 20%, var(--primary-color)); } .chalk ::-webkit-scrollbar-thumb:vertical, .chalk.chalk::-webkit-scrollbar-thumb:vertical { background: var(--primary-color); } .chalk ::-webkit-scrollbar-thumb:vertical:hover, .chalk.chalk::-webkit-scrollbar-thumb:vertical:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk ::-webkit-scrollbar-thumb:vertical:active, .chalk.chalk::-webkit-scrollbar-thumb:vertical:active { background: color-mix(in srgb, black 20%, var(--primary-color)); } } /******************************************************************************\ | | | _plastic-scrollbars.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .plastic ::-webkit-scrollbar-thumb:horizontal, .plastic.plastic::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(to right, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent 6px) no-repeat, linear-gradient(to left, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent 6px) no-repeat, linear-gradient(to bottom, color-mix(in srgb, white 50%, transparent) 0%, white calc(7.5% + 1px), white calc(12.5% + 1px), transparent calc(33% + 1px)) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, black 10%, var(--primary-color)) 0, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; } .plastic ::-webkit-scrollbar-thumb:horizontal:hover, .plastic.plastic::-webkit-scrollbar-thumb:horizontal:hover { background: linear-gradient(to right, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to left, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to bottom, color-mix(in srgb, white 50%, transparent) 0%, white calc(7.5% + 1px), white calc(12.5% + 1px), transparent calc(33% + 1px)) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 0, color-mix(in srgb, black 10%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 100%) no-repeat; } .plastic ::-webkit-scrollbar-thumb:horizontal:active, .plastic.plastic::-webkit-scrollbar-thumb:horizontal:active { background: linear-gradient(to right, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to left, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to bottom, color-mix(in srgb, white 50%, transparent) 0%, white calc(7.5% + 1px), white calc(12.5% + 1px), transparent calc(33% + 1px)) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 0, color-mix(in srgb, black 20%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 100%) no-repeat; } .plastic ::-webkit-scrollbar-thumb:vertical, .plastic.plastic::-webkit-scrollbar-thumb:vertical { background: linear-gradient(to bottom, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent 6px) no-repeat, linear-gradient(to top, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent 6px) no-repeat, linear-gradient(to right, color-mix(in srgb, white 50%, transparent) 0%, white calc(7.5% + 1px), white calc(12.5% + 1px), transparent calc(33% + 1px)) no-repeat, linear-gradient(to right, color-mix(in srgb, black 10%, var(--primary-color)) 0, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; } .plastic ::-webkit-scrollbar-thumb:vertical:hover, .plastic.plastic::-webkit-scrollbar-thumb:vertical:hover { background: linear-gradient(to bottom, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to top, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to right, color-mix(in srgb, white 50%, transparent) 0%, white calc(7.5% + 1px), white calc(12.5% + 1px), transparent calc(33% + 1px)) no-repeat, linear-gradient(to right, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 0, color-mix(in srgb, black 10%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 100%) no-repeat; } .plastic ::-webkit-scrollbar-thumb:vertical:active, .plastic.plastic::-webkit-scrollbar-thumb:vertical:active { background: linear-gradient(to bottom, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to top, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to right, color-mix(in srgb, white 50%, transparent) 0%, white calc(7.5% + 1px), white calc(12.5% + 1px), transparent calc(33% + 1px)) no-repeat, linear-gradient(to right, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 0, color-mix(in srgb, black 20%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 100%) no-repeat; } } @supports not (color: color-mix(in srgb, white, black)) { .plastic ::-webkit-scrollbar-thumb:horizontal, .plastic.plastic::-webkit-scrollbar-thumb:horizontal { background: var(--primary-color); } .plastic ::-webkit-scrollbar-thumb:horizontal:hover, .plastic.plastic::-webkit-scrollbar-thumb:horizontal:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic ::-webkit-scrollbar-thumb:horizontal:active, .plastic.plastic::-webkit-scrollbar-thumb:horizontal:active { background: color-mix(in srgb, black 20%, var(--primary-color)); } .plastic ::-webkit-scrollbar-thumb:vertical, .plastic.plastic::-webkit-scrollbar-thumb:vertical { background: var(--primary-color); } .plastic ::-webkit-scrollbar-thumb:vertical:hover, .plastic.plastic::-webkit-scrollbar-thumb:vertical:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic ::-webkit-scrollbar-thumb:vertical:active, .plastic.plastic::-webkit-scrollbar-thumb:vertical:active { background: color-mix(in srgb, black 20%, var(--primary-color)); } } /******************************************************************************\ | | | _glass-scrollbars.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .glass ::-webkit-scrollbar-thumb:horizontal, .glass.glass::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(to right, color-mix(in srgb, black 25%, var(--primary-color)) 0%, transparent 6px) no-repeat, linear-gradient(to left, color-mix(in srgb, black 25%, var(--primary-color)) 0%, transparent 6px) no-repeat, linear-gradient(to bottom, color-mix(in srgb, white 50%, transparent) 0%, white calc(7.5% + 1px), white calc(12.5% + 1px), transparent calc(33% + 1px)) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, white 10%, var(--primary-color)) calc(70% + 1px), color-mix(in srgb, white 10%, var(--primary-color)) calc(80% + 1px), var(--primary-color) 100%) no-repeat, color-mix(in srgb, black 30%, var(--primary-color)); } .glass ::-webkit-scrollbar-thumb:horizontal:hover, .glass.glass::-webkit-scrollbar-thumb:horizontal:hover { background: linear-gradient(to right, color-mix(in srgb, black 25%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to left, color-mix(in srgb, black 25%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to bottom, color-mix(in srgb, white 50%, transparent) 0%, white calc(7.5% + 1px), white calc(12.5% + 1px), transparent calc(33% + 1px)) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, var(--primary-color))) calc(70% + 1px), color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, var(--primary-color))) calc(80% + 1px), color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat, color-mix(in srgb, black 30%, color-mix(in srgb, black 10%, var(--primary-color))); } .glass ::-webkit-scrollbar-thumb:horizontal:active, .glass.glass::-webkit-scrollbar-thumb:horizontal:active { background: linear-gradient(to right, color-mix(in srgb, black 25%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to left, color-mix(in srgb, black 25%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to bottom, color-mix(in srgb, white 50%, transparent) 0%, white calc(7.5% + 1px), white calc(12.5% + 1px), transparent calc(33% + 1px)) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, white 10%, color-mix(in srgb, black 20%, var(--primary-color))) calc(70% + 1px), color-mix(in srgb, white 10%, color-mix(in srgb, black 20%, var(--primary-color))) calc(80% + 1px), color-mix(in srgb, black 20%, var(--primary-color)) 100%) no-repeat, color-mix(in srgb, black 30%, color-mix(in srgb, black 20%, var(--primary-color))); } .glass ::-webkit-scrollbar-thumb:vertical, .glass.glass::-webkit-scrollbar-thumb:vertical { background: linear-gradient(to bottom, color-mix(in srgb, black 25%, var(--primary-color)) 0%, transparent 6px) no-repeat, linear-gradient(to top, color-mix(in srgb, black 25%, var(--primary-color)) 0%, transparent 6px) no-repeat, linear-gradient(to right, color-mix(in srgb, white 50%, transparent) 0%, white calc(7.5% + 1px), white calc(12.5% + 1px), transparent calc(33% + 1px)) no-repeat, linear-gradient(to right, transparent 33%, color-mix(in srgb, white 10%, var(--primary-color)) calc(70% + 1px), color-mix(in srgb, white 10%, var(--primary-color)) calc(80% + 1px), var(--primary-color) 100%) no-repeat, color-mix(in srgb, black 30%, var(--primary-color)); } .glass ::-webkit-scrollbar-thumb:vertical:hover, .glass.glass::-webkit-scrollbar-thumb:vertical:hover { background: linear-gradient(to bottom, color-mix(in srgb, black 25%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to top, color-mix(in srgb, black 25%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to right, color-mix(in srgb, white 50%, transparent) 0%, white calc(7.5% + 1px), white calc(12.5% + 1px), transparent calc(33% + 1px)) no-repeat, linear-gradient(to right, transparent 33%, color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, var(--primary-color))) calc(70% + 1px), color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, var(--primary-color))) calc(80% + 1px), color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat, color-mix(in srgb, black 30%, color-mix(in srgb, black 10%, var(--primary-color))); } .glass ::-webkit-scrollbar-thumb:vertical:active, .glass.glass::-webkit-scrollbar-thumb:vertical:active { background: linear-gradient(to bottom, color-mix(in srgb, black 25%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to top, color-mix(in srgb, black 25%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to right, color-mix(in srgb, white 50%, transparent) 0%, white calc(7.5% + 1px), white calc(12.5% + 1px), transparent calc(33% + 1px)) no-repeat, linear-gradient(to right, transparent 33%, color-mix(in srgb, white 10%, color-mix(in srgb, black 20%, var(--primary-color))) calc(70% + 1px), color-mix(in srgb, white 10%, color-mix(in srgb, black 20%, var(--primary-color))) calc(80% + 1px), color-mix(in srgb, black 20%, var(--primary-color)) 100%) no-repeat, color-mix(in srgb, black 30%, color-mix(in srgb, black 20%, var(--primary-color))); } } @supports not (color: color-mix(in srgb, white, black)) { .glass ::-webkit-scrollbar-thumb:horizontal, .glass.glass::-webkit-scrollbar-thumb:horizontal { background: var(--primary-color); } .glass ::-webkit-scrollbar-thumb:horizontal:hover, .glass.glass::-webkit-scrollbar-thumb:horizontal:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); } .glass ::-webkit-scrollbar-thumb:horizontal:active, .glass.glass::-webkit-scrollbar-thumb:horizontal:active { background: color-mix(in srgb, black 20%, var(--primary-color)); } .glass ::-webkit-scrollbar-thumb:vertical, .glass.glass::-webkit-scrollbar-thumb:vertical { background: var(--primary-color); } .glass ::-webkit-scrollbar-thumb:vertical:hover, .glass.glass::-webkit-scrollbar-thumb:vertical:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); } .glass ::-webkit-scrollbar-thumb:vertical:active, .glass.glass::-webkit-scrollbar-thumb:vertical:active { background: color-mix(in srgb, black 20%, var(--primary-color)); } } /******************************************************************************\ | | | _metal-scrollbars.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .metal ::-webkit-scrollbar-thumb:horizontal, .metal.metal::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(to right, color-mix(in srgb, black 40%, var(--primary-color)) 0%, transparent 6px) no-repeat, linear-gradient(to left, color-mix(in srgb, black 40%, var(--primary-color)) 0%, transparent 6px) no-repeat, linear-gradient(to bottom, color-mix(in srgb, white 25%, var(--primary-color)) 0%, color-mix(in srgb, white 75%, var(--primary-color)) calc(5% + 1px), color-mix(in srgb, white 75%, var(--primary-color)) calc(15% + 1px), transparent calc(50% + 1px)) no-repeat, linear-gradient(var(--light-direction), transparent 0%, var(--primary-color) 25%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 66%, color-mix(in srgb, white 10%, var(--primary-color)) 100%) no-repeat, color-mix(in srgb, black 50%, var(--primary-color)); } .metal ::-webkit-scrollbar-thumb:horizontal:hover, .metal.metal::-webkit-scrollbar-thumb:horizontal:hover { background: linear-gradient(to right, color-mix(in srgb, black 40%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to left, color-mix(in srgb, black 40%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to bottom, color-mix(in srgb, white 25%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, color-mix(in srgb, white 75%, color-mix(in srgb, black 10%, var(--primary-color))) calc(5% + 1px), color-mix(in srgb, white 75%, color-mix(in srgb, black 10%, var(--primary-color))) calc(15% + 1px), transparent calc(50% + 1px)) no-repeat, linear-gradient(var(--light-direction), transparent 0%, color-mix(in srgb, black 10%, var(--primary-color)) 25%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 66%, color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, var(--primary-color))) 100%) no-repeat, color-mix(in srgb, black 50%, color-mix(in srgb, black 10%, var(--primary-color))); } .metal ::-webkit-scrollbar-thumb:horizontal:active, .metal.metal::-webkit-scrollbar-thumb:horizontal:active { background: linear-gradient(to right, color-mix(in srgb, black 40%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to left, color-mix(in srgb, black 40%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to bottom, color-mix(in srgb, white 25%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, color-mix(in srgb, white 75%, color-mix(in srgb, black 20%, var(--primary-color))) calc(5% + 1px), color-mix(in srgb, white 75%, color-mix(in srgb, black 20%, var(--primary-color))) calc(15% + 1px), transparent calc(50% + 1px)) no-repeat, linear-gradient(var(--light-direction), transparent 0%, color-mix(in srgb, black 20%, var(--primary-color)) 25%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 66%, color-mix(in srgb, white 10%, color-mix(in srgb, black 20%, var(--primary-color))) 100%) no-repeat, color-mix(in srgb, black 50%, color-mix(in srgb, black 20%, var(--primary-color))); } .metal ::-webkit-scrollbar-thumb:vertical, .metal.metal::-webkit-scrollbar-thumb:vertical { background: linear-gradient(to bottom, color-mix(in srgb, black 40%, var(--primary-color)) 0%, transparent 6px) no-repeat, linear-gradient(to top, color-mix(in srgb, black 40%, var(--primary-color)) 0%, transparent 6px) no-repeat, linear-gradient(to right, color-mix(in srgb, white 25%, var(--primary-color)) 0%, color-mix(in srgb, white 75%, var(--primary-color)) calc(5% + 1px), color-mix(in srgb, white 75%, var(--primary-color)) calc(15% + 1px), transparent calc(50% + 1px)) no-repeat, linear-gradient(to right, transparent 0%, var(--primary-color) 25%, transparent 75%) no-repeat, linear-gradient(to right, transparent 66%, color-mix(in srgb, white 10%, var(--primary-color)) 100%) no-repeat, color-mix(in srgb, black 50%, var(--primary-color)); } .metal ::-webkit-scrollbar-thumb:vertical:hover, .metal.metal::-webkit-scrollbar-thumb:vertical:hover { background: linear-gradient(to bottom, color-mix(in srgb, black 40%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to top, color-mix(in srgb, black 40%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to right, color-mix(in srgb, white 25%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, color-mix(in srgb, white 75%, color-mix(in srgb, black 10%, var(--primary-color))) calc(5% + 1px), color-mix(in srgb, white 75%, color-mix(in srgb, black 10%, var(--primary-color))) calc(15% + 1px), transparent calc(50% + 1px)) no-repeat, linear-gradient(to right, transparent 0%, color-mix(in srgb, black 10%, var(--primary-color)) 25%, transparent 75%) no-repeat, linear-gradient(to right, transparent 66%, color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, var(--primary-color))) 100%) no-repeat, color-mix(in srgb, black 50%, color-mix(in srgb, black 10%, var(--primary-color))); } .metal ::-webkit-scrollbar-thumb:vertical:active, .metal.metal::-webkit-scrollbar-thumb:vertical:active { background: linear-gradient(to bottom, color-mix(in srgb, black 40%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to top, color-mix(in srgb, black 40%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, transparent 6px) no-repeat, linear-gradient(to right, color-mix(in srgb, white 25%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, color-mix(in srgb, white 75%, color-mix(in srgb, black 20%, var(--primary-color))) calc(5% + 1px), color-mix(in srgb, white 75%, color-mix(in srgb, black 20%, var(--primary-color))) calc(15% + 1px), transparent calc(50% + 1px)) no-repeat, linear-gradient(to right, transparent 0%, color-mix(in srgb, black 20%, var(--primary-color)) 25%, transparent 75%) no-repeat, linear-gradient(to right, transparent 66%, color-mix(in srgb, white 10%, color-mix(in srgb, black 20%, var(--primary-color))) 100%) no-repeat, color-mix(in srgb, black 50%, color-mix(in srgb, black 20%, var(--primary-color))); } } @supports not (color: color-mix(in srgb, white, black)) { .metal ::-webkit-scrollbar-thumb:horizontal, .metal.metal::-webkit-scrollbar-thumb:horizontal { background: var(--primary-color); } .metal ::-webkit-scrollbar-thumb:horizontal:hover, .metal.metal::-webkit-scrollbar-thumb:horizontal:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); } .metal ::-webkit-scrollbar-thumb:horizontal:active, .metal.metal::-webkit-scrollbar-thumb:horizontal:active { background: color-mix(in srgb, black 20%, var(--primary-color)); } .metal ::-webkit-scrollbar-thumb:vertical, .metal.metal::-webkit-scrollbar-thumb:vertical { background: var(--primary-color); } .metal ::-webkit-scrollbar-thumb:vertical:hover, .metal.metal::-webkit-scrollbar-thumb:vertical:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); } .metal ::-webkit-scrollbar-thumb:vertical:active, .metal.metal::-webkit-scrollbar-thumb:vertical:active { background: color-mix(in srgb, black 20%, var(--primary-color)); } } /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _flat-sliders.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ .flat input[type=range], input[type=range].flat.flat { -webkit-appearance: none; -webkit-appearance: none; } .flat input[type=range]::-webkit-slider-thumb, input[type=range].flat.flat::-webkit-slider-thumb { background: var(--primary-color); border-color: var(--primary-color); } .flat input[type=range]::-webkit-slider-thumb.round, input[type=range].flat.flat::-webkit-slider-thumb.round { background: var(--primary-color); border-color: var(--primary-color); } .flat input[type=range]::-webkit-slider-thumb.rounded, input[type=range].flat.flat::-webkit-slider-thumb.rounded { background: var(--primary-color); border-color: var(--primary-color); } .flat input[type=range]::-webkit-slider-thumb:hover, input[type=range].flat.flat::-webkit-slider-thumb:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .flat input[type=range]::-webkit-slider-thumb:hover.round, input[type=range].flat.flat::-webkit-slider-thumb:hover.round { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .flat input[type=range]::-webkit-slider-thumb:hover.rounded, input[type=range].flat.flat::-webkit-slider-thumb:hover.rounded { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .flat input[type=range]::-moz-range-thumb, input[type=range].flat.flat::-moz-range-thumb { background: var(--primary-color); border-color: var(--primary-color); } .flat input[type=range]::-moz-range-thumb.round, input[type=range].flat.flat::-moz-range-thumb.round { background: var(--primary-color); border-color: var(--primary-color); } .flat input[type=range]::-moz-range-thumb.rounded, input[type=range].flat.flat::-moz-range-thumb.rounded { background: var(--primary-color); border-color: var(--primary-color); } .flat input[type=range]::-moz-range-thumb:hover, input[type=range].flat.flat::-moz-range-thumb:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .flat input[type=range]::-moz-range-thumb:hover.round, input[type=range].flat.flat::-moz-range-thumb:hover.round { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .flat input[type=range]::-moz-range-thumb:hover.rounded, input[type=range].flat.flat::-moz-range-thumb:hover.rounded { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .flat input[type=range]::-ms-thumb, input[type=range].flat.flat::-ms-thumb { background: var(--primary-color); border-color: var(--primary-color); } .flat input[type=range]::-ms-thumb.round, input[type=range].flat.flat::-ms-thumb.round { background: var(--primary-color); border-color: var(--primary-color); } .flat input[type=range]::-ms-thumb.rounded, input[type=range].flat.flat::-ms-thumb.rounded { background: var(--primary-color); border-color: var(--primary-color); } .flat input[type=range]::-ms-thumb:hover, input[type=range].flat.flat::-ms-thumb:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .flat input[type=range]::-ms-thumb:hover.round, input[type=range].flat.flat::-ms-thumb:hover.round { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .flat input[type=range]::-ms-thumb:hover.rounded, input[type=range].flat.flat::-ms-thumb:hover.rounded { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .flat input[type=range]::-webkit-slider-thumb:active, input[type=range].flat.flat::-webkit-slider-thumb:active { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .flat input[type=range]::-webkit-slider-thumb:active.round, input[type=range].flat.flat::-webkit-slider-thumb:active.round { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .flat input[type=range]::-webkit-slider-thumb:active.rounded, input[type=range].flat.flat::-webkit-slider-thumb:active.rounded { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .flat input[type=range]::-moz-range-thumb:active, input[type=range].flat.flat::-moz-range-thumb:active { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .flat input[type=range]::-moz-range-thumb:active.round, input[type=range].flat.flat::-moz-range-thumb:active.round { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .flat input[type=range]::-moz-range-thumb:active.rounded, input[type=range].flat.flat::-moz-range-thumb:active.rounded { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .flat input[type=range]::-ms-thumb:active, input[type=range].flat.flat::-ms-thumb:active { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .flat input[type=range]::-ms-thumb:active.round, input[type=range].flat.flat::-ms-thumb:active.round { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .flat input[type=range]::-ms-thumb:active.rounded, input[type=range].flat.flat::-ms-thumb:active.rounded { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .flat input[type=range]::-webkit-slider-runnable-track, input[type=range].flat.flat::-webkit-slider-runnable-track { background: #cfcfe1; border-color: #cfcfe1; } .flat input[type=range]::-webkit-slider-runnable-track.round, input[type=range].flat.flat::-webkit-slider-runnable-track.round { background: #cfcfe1; border-color: #cfcfe1; } .flat input[type=range]::-webkit-slider-runnable-track.rounded, input[type=range].flat.flat::-webkit-slider-runnable-track.rounded { background: #cfcfe1; border-color: #cfcfe1; } .flat input[type=range]::-moz-range-track, input[type=range].flat.flat::-moz-range-track { background: #cfcfe1; border-color: #cfcfe1; } .flat input[type=range]::-moz-range-track.round, input[type=range].flat.flat::-moz-range-track.round { background: #cfcfe1; border-color: #cfcfe1; } .flat input[type=range]::-moz-range-track.rounded, input[type=range].flat.flat::-moz-range-track.rounded { background: #cfcfe1; border-color: #cfcfe1; } /******************************************************************************\ | | | _chalk-sliders.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .chalk input[type=range], input[type=range].chalk.chalk { -webkit-appearance: none; -webkit-appearance: none; -webkit-appearance: none; box-shadow: none; } .chalk input[type=range]::-webkit-slider-thumb, input[type=range].chalk.chalk::-webkit-slider-thumb { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33); } .chalk input[type=range]::-moz-range-thumb, input[type=range].chalk.chalk::-moz-range-thumb { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33); } .chalk input[type=range]::-ms-thumb, input[type=range].chalk.chalk::-ms-thumb { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33); } .chalk input[type=range]::-webkit-slider-thumb, input[type=range].chalk.chalk::-webkit-slider-thumb { background: radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 25%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); transform: scale(-1) rotate(var(--light-direction)); } .chalk input[type=range]::-webkit-slider-thumb:hover, input[type=range].chalk.chalk::-webkit-slider-thumb:hover { background: radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 25%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, color-mix(in srgb, black 10%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))); } .chalk input[type=range]::-moz-range-thumb, input[type=range].chalk.chalk::-moz-range-thumb { background: radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 25%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); transform: scale(-1) rotate(var(--light-direction)); } .chalk input[type=range]::-moz-range-thumb:hover, input[type=range].chalk.chalk::-moz-range-thumb:hover { background: radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 25%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, color-mix(in srgb, black 10%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))); } .chalk input[type=range]::-ms-thumb, input[type=range].chalk.chalk::-ms-thumb { background: radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 25%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); transform: scale(-1) rotate(var(--light-direction)); } .chalk input[type=range]::-ms-thumb:hover, input[type=range].chalk.chalk::-ms-thumb:hover { background: radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 25%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, color-mix(in srgb, black 10%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))); } .chalk input[type=range]::-webkit-slider-thumb:active, input[type=range].chalk.chalk::-webkit-slider-thumb:active { background: radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 25%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, color-mix(in srgb, black 20%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))); transform: scale(-1) rotate(var(--light-direction)); } .chalk input[type=range]::-moz-range-thumb:active, input[type=range].chalk.chalk::-moz-range-thumb:active { background: radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 25%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, color-mix(in srgb, black 20%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))); transform: scale(-1) rotate(var(--light-direction)); } .chalk input[type=range]::-ms-thumb:active, input[type=range].chalk.chalk::-ms-thumb:active { background: radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 25%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, color-mix(in srgb, black 20%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))); transform: scale(-1) rotate(var(--light-direction)); } .chalk input[type=range]::-webkit-slider-runnable-track, input[type=range].chalk.chalk::-webkit-slider-runnable-track { background: #cfcfe1; border-color: #cfcfe1; } .chalk input[type=range]::-webkit-slider-runnable-track.round, input[type=range].chalk.chalk::-webkit-slider-runnable-track.round { background: #cfcfe1; border-color: #cfcfe1; } .chalk input[type=range]::-webkit-slider-runnable-track.rounded, input[type=range].chalk.chalk::-webkit-slider-runnable-track.rounded { background: #cfcfe1; border-color: #cfcfe1; } .chalk input[type=range]::-moz-range-track, input[type=range].chalk.chalk::-moz-range-track { background: #cfcfe1; border-color: #cfcfe1; } .chalk input[type=range]::-moz-range-track.round, input[type=range].chalk.chalk::-moz-range-track.round { background: #cfcfe1; border-color: #cfcfe1; } .chalk input[type=range]::-moz-range-track.rounded, input[type=range].chalk.chalk::-moz-range-track.rounded { background: #cfcfe1; border-color: #cfcfe1; } } @supports not (color: color-mix(in srgb, white, black)) { .chalk input[type=range], input[type=range].chalk.chalk { -webkit-appearance: none; -webkit-appearance: none; } .chalk input[type=range]::-webkit-slider-thumb, input[type=range].chalk.chalk::-webkit-slider-thumb { background: var(--primary-color); border-color: var(--primary-color); } .chalk input[type=range]::-webkit-slider-thumb.round, input[type=range].chalk.chalk::-webkit-slider-thumb.round { background: var(--primary-color); border-color: var(--primary-color); } .chalk input[type=range]::-webkit-slider-thumb.rounded, input[type=range].chalk.chalk::-webkit-slider-thumb.rounded { background: var(--primary-color); border-color: var(--primary-color); } .chalk input[type=range]::-webkit-slider-thumb:hover, input[type=range].chalk.chalk::-webkit-slider-thumb:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk input[type=range]::-webkit-slider-thumb:hover.round, input[type=range].chalk.chalk::-webkit-slider-thumb:hover.round { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk input[type=range]::-webkit-slider-thumb:hover.rounded, input[type=range].chalk.chalk::-webkit-slider-thumb:hover.rounded { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk input[type=range]::-moz-range-thumb, input[type=range].chalk.chalk::-moz-range-thumb { background: var(--primary-color); border-color: var(--primary-color); } .chalk input[type=range]::-moz-range-thumb.round, input[type=range].chalk.chalk::-moz-range-thumb.round { background: var(--primary-color); border-color: var(--primary-color); } .chalk input[type=range]::-moz-range-thumb.rounded, input[type=range].chalk.chalk::-moz-range-thumb.rounded { background: var(--primary-color); border-color: var(--primary-color); } .chalk input[type=range]::-moz-range-thumb:hover, input[type=range].chalk.chalk::-moz-range-thumb:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk input[type=range]::-moz-range-thumb:hover.round, input[type=range].chalk.chalk::-moz-range-thumb:hover.round { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk input[type=range]::-moz-range-thumb:hover.rounded, input[type=range].chalk.chalk::-moz-range-thumb:hover.rounded { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk input[type=range]::-ms-thumb, input[type=range].chalk.chalk::-ms-thumb { background: var(--primary-color); border-color: var(--primary-color); } .chalk input[type=range]::-ms-thumb.round, input[type=range].chalk.chalk::-ms-thumb.round { background: var(--primary-color); border-color: var(--primary-color); } .chalk input[type=range]::-ms-thumb.rounded, input[type=range].chalk.chalk::-ms-thumb.rounded { background: var(--primary-color); border-color: var(--primary-color); } .chalk input[type=range]::-ms-thumb:hover, input[type=range].chalk.chalk::-ms-thumb:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk input[type=range]::-ms-thumb:hover.round, input[type=range].chalk.chalk::-ms-thumb:hover.round { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk input[type=range]::-ms-thumb:hover.rounded, input[type=range].chalk.chalk::-ms-thumb:hover.rounded { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .chalk input[type=range]::-webkit-slider-thumb:active, input[type=range].chalk.chalk::-webkit-slider-thumb:active { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .chalk input[type=range]::-webkit-slider-thumb:active.round, input[type=range].chalk.chalk::-webkit-slider-thumb:active.round { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .chalk input[type=range]::-webkit-slider-thumb:active.rounded, input[type=range].chalk.chalk::-webkit-slider-thumb:active.rounded { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .chalk input[type=range]::-moz-range-thumb:active, input[type=range].chalk.chalk::-moz-range-thumb:active { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .chalk input[type=range]::-moz-range-thumb:active.round, input[type=range].chalk.chalk::-moz-range-thumb:active.round { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .chalk input[type=range]::-moz-range-thumb:active.rounded, input[type=range].chalk.chalk::-moz-range-thumb:active.rounded { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .chalk input[type=range]::-ms-thumb:active, input[type=range].chalk.chalk::-ms-thumb:active { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .chalk input[type=range]::-ms-thumb:active.round, input[type=range].chalk.chalk::-ms-thumb:active.round { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .chalk input[type=range]::-ms-thumb:active.rounded, input[type=range].chalk.chalk::-ms-thumb:active.rounded { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .chalk input[type=range]::-webkit-slider-runnable-track, input[type=range].chalk.chalk::-webkit-slider-runnable-track { background: #cfcfe1; border-color: #cfcfe1; } .chalk input[type=range]::-webkit-slider-runnable-track.round, input[type=range].chalk.chalk::-webkit-slider-runnable-track.round { background: #cfcfe1; border-color: #cfcfe1; } .chalk input[type=range]::-webkit-slider-runnable-track.rounded, input[type=range].chalk.chalk::-webkit-slider-runnable-track.rounded { background: #cfcfe1; border-color: #cfcfe1; } .chalk input[type=range]::-moz-range-track, input[type=range].chalk.chalk::-moz-range-track { background: #cfcfe1; border-color: #cfcfe1; } .chalk input[type=range]::-moz-range-track.round, input[type=range].chalk.chalk::-moz-range-track.round { background: #cfcfe1; border-color: #cfcfe1; } .chalk input[type=range]::-moz-range-track.rounded, input[type=range].chalk.chalk::-moz-range-track.rounded { background: #cfcfe1; border-color: #cfcfe1; } } /******************************************************************************\ | | | _plastic-sliders.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .plastic input[type=range], input[type=range].plastic.plastic { -webkit-appearance: none; -webkit-appearance: none; -webkit-appearance: none; box-shadow: none; } .plastic input[type=range]::-webkit-slider-thumb, input[type=range].plastic.plastic::-webkit-slider-thumb { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33); } .plastic input[type=range]::-moz-range-thumb, input[type=range].plastic.plastic::-moz-range-thumb { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33); } .plastic input[type=range]::-ms-thumb, input[type=range].plastic.plastic::-ms-thumb { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33); } .plastic input[type=range]::-webkit-slider-thumb, input[type=range].plastic.plastic::-webkit-slider-thumb { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); transform: scale(-1) rotate(var(--light-direction)); } .plastic input[type=range]::-webkit-slider-thumb:hover, input[type=range].plastic.plastic::-webkit-slider-thumb:hover { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, color-mix(in srgb, black 10%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))); } .plastic input[type=range]::-moz-range-thumb, input[type=range].plastic.plastic::-moz-range-thumb { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); transform: scale(-1) rotate(var(--light-direction)); } .plastic input[type=range]::-moz-range-thumb:hover, input[type=range].plastic.plastic::-moz-range-thumb:hover { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, color-mix(in srgb, black 10%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))); } .plastic input[type=range]::-ms-thumb, input[type=range].plastic.plastic::-ms-thumb { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); transform: scale(-1) rotate(var(--light-direction)); } .plastic input[type=range]::-ms-thumb:hover, input[type=range].plastic.plastic::-ms-thumb:hover { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, color-mix(in srgb, black 10%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, var(--primary-color))); } .plastic input[type=range]::-webkit-slider-thumb:active, input[type=range].plastic.plastic::-webkit-slider-thumb:active { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, color-mix(in srgb, black 20%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))); } .plastic input[type=range]::-moz-range-thumb:active, input[type=range].plastic.plastic::-moz-range-thumb:active { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, color-mix(in srgb, black 20%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))); } .plastic input[type=range]::-ms-thumb:active, input[type=range].plastic.plastic::-ms-thumb:active { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 0%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, color-mix(in srgb, black 20%, var(--primary-color)) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 20%, var(--primary-color))); } .plastic input[type=range]::-webkit-slider-runnable-track, input[type=range].plastic.plastic::-webkit-slider-runnable-track { background: #cfcfe1; border-color: #cfcfe1; } .plastic input[type=range]::-webkit-slider-runnable-track.round, input[type=range].plastic.plastic::-webkit-slider-runnable-track.round { background: #cfcfe1; border-color: #cfcfe1; } .plastic input[type=range]::-webkit-slider-runnable-track.rounded, input[type=range].plastic.plastic::-webkit-slider-runnable-track.rounded { background: #cfcfe1; border-color: #cfcfe1; } .plastic input[type=range]::-moz-range-track, input[type=range].plastic.plastic::-moz-range-track { background: #cfcfe1; border-color: #cfcfe1; } .plastic input[type=range]::-moz-range-track.round, input[type=range].plastic.plastic::-moz-range-track.round { background: #cfcfe1; border-color: #cfcfe1; } .plastic input[type=range]::-moz-range-track.rounded, input[type=range].plastic.plastic::-moz-range-track.rounded { background: #cfcfe1; border-color: #cfcfe1; } } @supports not (color: color-mix(in srgb, white, black)) { .plastic input[type=range], input[type=range].plastic.plastic { -webkit-appearance: none; -webkit-appearance: none; } .plastic input[type=range]::-webkit-slider-thumb, input[type=range].plastic.plastic::-webkit-slider-thumb { background: var(--primary-color); border-color: var(--primary-color); } .plastic input[type=range]::-webkit-slider-thumb.round, input[type=range].plastic.plastic::-webkit-slider-thumb.round { background: var(--primary-color); border-color: var(--primary-color); } .plastic input[type=range]::-webkit-slider-thumb.rounded, input[type=range].plastic.plastic::-webkit-slider-thumb.rounded { background: var(--primary-color); border-color: var(--primary-color); } .plastic input[type=range]::-webkit-slider-thumb:hover, input[type=range].plastic.plastic::-webkit-slider-thumb:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic input[type=range]::-webkit-slider-thumb:hover.round, input[type=range].plastic.plastic::-webkit-slider-thumb:hover.round { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic input[type=range]::-webkit-slider-thumb:hover.rounded, input[type=range].plastic.plastic::-webkit-slider-thumb:hover.rounded { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic input[type=range]::-moz-range-thumb, input[type=range].plastic.plastic::-moz-range-thumb { background: var(--primary-color); border-color: var(--primary-color); } .plastic input[type=range]::-moz-range-thumb.round, input[type=range].plastic.plastic::-moz-range-thumb.round { background: var(--primary-color); border-color: var(--primary-color); } .plastic input[type=range]::-moz-range-thumb.rounded, input[type=range].plastic.plastic::-moz-range-thumb.rounded { background: var(--primary-color); border-color: var(--primary-color); } .plastic input[type=range]::-moz-range-thumb:hover, input[type=range].plastic.plastic::-moz-range-thumb:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic input[type=range]::-moz-range-thumb:hover.round, input[type=range].plastic.plastic::-moz-range-thumb:hover.round { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic input[type=range]::-moz-range-thumb:hover.rounded, input[type=range].plastic.plastic::-moz-range-thumb:hover.rounded { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic input[type=range]::-ms-thumb, input[type=range].plastic.plastic::-ms-thumb { background: var(--primary-color); border-color: var(--primary-color); } .plastic input[type=range]::-ms-thumb.round, input[type=range].plastic.plastic::-ms-thumb.round { background: var(--primary-color); border-color: var(--primary-color); } .plastic input[type=range]::-ms-thumb.rounded, input[type=range].plastic.plastic::-ms-thumb.rounded { background: var(--primary-color); border-color: var(--primary-color); } .plastic input[type=range]::-ms-thumb:hover, input[type=range].plastic.plastic::-ms-thumb:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic input[type=range]::-ms-thumb:hover.round, input[type=range].plastic.plastic::-ms-thumb:hover.round { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic input[type=range]::-ms-thumb:hover.rounded, input[type=range].plastic.plastic::-ms-thumb:hover.rounded { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .plastic input[type=range]::-webkit-slider-thumb:active, input[type=range].plastic.plastic::-webkit-slider-thumb:active { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .plastic input[type=range]::-webkit-slider-thumb:active.round, input[type=range].plastic.plastic::-webkit-slider-thumb:active.round { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .plastic input[type=range]::-webkit-slider-thumb:active.rounded, input[type=range].plastic.plastic::-webkit-slider-thumb:active.rounded { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .plastic input[type=range]::-moz-range-thumb:active, input[type=range].plastic.plastic::-moz-range-thumb:active { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .plastic input[type=range]::-moz-range-thumb:active.round, input[type=range].plastic.plastic::-moz-range-thumb:active.round { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .plastic input[type=range]::-moz-range-thumb:active.rounded, input[type=range].plastic.plastic::-moz-range-thumb:active.rounded { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .plastic input[type=range]::-ms-thumb:active, input[type=range].plastic.plastic::-ms-thumb:active { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .plastic input[type=range]::-ms-thumb:active.round, input[type=range].plastic.plastic::-ms-thumb:active.round { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .plastic input[type=range]::-ms-thumb:active.rounded, input[type=range].plastic.plastic::-ms-thumb:active.rounded { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .plastic input[type=range]::-webkit-slider-runnable-track, input[type=range].plastic.plastic::-webkit-slider-runnable-track { background: #cfcfe1; border-color: #cfcfe1; } .plastic input[type=range]::-webkit-slider-runnable-track.round, input[type=range].plastic.plastic::-webkit-slider-runnable-track.round { background: #cfcfe1; border-color: #cfcfe1; } .plastic input[type=range]::-webkit-slider-runnable-track.rounded, input[type=range].plastic.plastic::-webkit-slider-runnable-track.rounded { background: #cfcfe1; border-color: #cfcfe1; } .plastic input[type=range]::-moz-range-track, input[type=range].plastic.plastic::-moz-range-track { background: #cfcfe1; border-color: #cfcfe1; } .plastic input[type=range]::-moz-range-track.round, input[type=range].plastic.plastic::-moz-range-track.round { background: #cfcfe1; border-color: #cfcfe1; } .plastic input[type=range]::-moz-range-track.rounded, input[type=range].plastic.plastic::-moz-range-track.rounded { background: #cfcfe1; border-color: #cfcfe1; } } /******************************************************************************\ | | | _glass-sliders.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .glass input[type=range], input[type=range].glass.glass { -webkit-appearance: none; -webkit-appearance: none; -webkit-appearance: none; box-shadow: none; } .glass input[type=range]::-webkit-slider-thumb, input[type=range].glass.glass::-webkit-slider-thumb { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33); } .glass input[type=range]::-moz-range-thumb, input[type=range].glass.glass::-moz-range-thumb { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33); } .glass input[type=range]::-ms-thumb, input[type=range].glass.glass::-ms-thumb { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33); } .glass input[type=range]::-webkit-slider-thumb, input[type=range].glass.glass::-webkit-slider-thumb { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, var(--primary-color)) 0%, var(--primary-color) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, var(--primary-color) 50%, transparent) 100%) no-repeat, color-mix(in srgb, black 30%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); transform: scale(-1) rotate(var(--light-direction)); } .glass input[type=range]::-webkit-slider-thumb:hover, input[type=range].glass.glass::-webkit-slider-thumb:hover { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, color-mix(in srgb, black 10%, var(--primary-color)) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, color-mix(in srgb, black 10%, var(--primary-color)) 50%, transparent) 100%) no-repeat, color-mix(in srgb, black 30%, color-mix(in srgb, black 10%, var(--primary-color))); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 10%, var(--primary-color))); } .glass input[type=range]::-moz-range-thumb, input[type=range].glass.glass::-moz-range-thumb { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, var(--primary-color)) 0%, var(--primary-color) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, var(--primary-color) 50%, transparent) 100%) no-repeat, color-mix(in srgb, black 30%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); transform: scale(-1) rotate(var(--light-direction)); } .glass input[type=range]::-moz-range-thumb:hover, input[type=range].glass.glass::-moz-range-thumb:hover { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, color-mix(in srgb, black 10%, var(--primary-color)) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, color-mix(in srgb, black 10%, var(--primary-color)) 50%, transparent) 100%) no-repeat, color-mix(in srgb, black 30%, color-mix(in srgb, black 10%, var(--primary-color))); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 10%, var(--primary-color))); } .glass input[type=range]::-ms-thumb, input[type=range].glass.glass::-ms-thumb { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, var(--primary-color)) 0%, var(--primary-color) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, var(--primary-color) 50%, transparent) 100%) no-repeat, color-mix(in srgb, black 30%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); transform: scale(-1) rotate(var(--light-direction)); } .glass input[type=range]::-ms-thumb:hover, input[type=range].glass.glass::-ms-thumb:hover { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, color-mix(in srgb, black 10%, var(--primary-color))) 0%, color-mix(in srgb, black 10%, var(--primary-color)) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, color-mix(in srgb, black 10%, var(--primary-color)) 50%, transparent) 100%) no-repeat, color-mix(in srgb, black 30%, color-mix(in srgb, black 10%, var(--primary-color))); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 10%, var(--primary-color))); } .glass input[type=range]::-webkit-slider-thumb:active, input[type=range].glass.glass::-webkit-slider-thumb:active { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, color-mix(in srgb, black 20%, var(--primary-color)) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, color-mix(in srgb, black 20%, var(--primary-color)) 50%, transparent) 100%) no-repeat, color-mix(in srgb, black 30%, color-mix(in srgb, black 20%, var(--primary-color))); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 20%, var(--primary-color))); transform: scale(-1) rotate(var(--light-direction)); } .glass input[type=range]::-moz-range-thumb:active, input[type=range].glass.glass::-moz-range-thumb:active { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, color-mix(in srgb, black 20%, var(--primary-color)) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, color-mix(in srgb, black 20%, var(--primary-color)) 50%, transparent) 100%) no-repeat, color-mix(in srgb, black 30%, color-mix(in srgb, black 20%, var(--primary-color))); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 20%, var(--primary-color))); transform: scale(-1) rotate(var(--light-direction)); } .glass input[type=range]::-ms-thumb:active, input[type=range].glass.glass::-ms-thumb:active { background: radial-gradient(ellipse 25% 12% at 50% 10%, white 25%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 25% at 50% 10%, color-mix(in srgb, white 50%, transparent) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, color-mix(in srgb, black 20%, var(--primary-color))) 0%, color-mix(in srgb, black 20%, var(--primary-color)) 50%, transparent 100%) no-repeat, linear-gradient(var(--light-direction), transparent 33%, color-mix(in srgb, color-mix(in srgb, black 20%, var(--primary-color)) 50%, transparent) 100%) no-repeat, color-mix(in srgb, black 30%, color-mix(in srgb, black 20%, var(--primary-color))); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 20%, var(--primary-color))); transform: scale(-1) rotate(var(--light-direction)); } .glass input[type=range]::-webkit-slider-runnable-track, input[type=range].glass.glass::-webkit-slider-runnable-track { background: #cfcfe1; border-color: #cfcfe1; } .glass input[type=range]::-webkit-slider-runnable-track.round, input[type=range].glass.glass::-webkit-slider-runnable-track.round { background: #cfcfe1; border-color: #cfcfe1; } .glass input[type=range]::-webkit-slider-runnable-track.rounded, input[type=range].glass.glass::-webkit-slider-runnable-track.rounded { background: #cfcfe1; border-color: #cfcfe1; } .glass input[type=range]::-moz-range-track, input[type=range].glass.glass::-moz-range-track { background: #cfcfe1; border-color: #cfcfe1; } .glass input[type=range]::-moz-range-track.round, input[type=range].glass.glass::-moz-range-track.round { background: #cfcfe1; border-color: #cfcfe1; } .glass input[type=range]::-moz-range-track.rounded, input[type=range].glass.glass::-moz-range-track.rounded { background: #cfcfe1; border-color: #cfcfe1; } } @supports not (color: color-mix(in srgb, white, black)) { .glass input[type=range], input[type=range].glass.glass { -webkit-appearance: none; -webkit-appearance: none; } .glass input[type=range]::-webkit-slider-thumb, input[type=range].glass.glass::-webkit-slider-thumb { background: var(--primary-color); border-color: var(--primary-color); } .glass input[type=range]::-webkit-slider-thumb.round, input[type=range].glass.glass::-webkit-slider-thumb.round { background: var(--primary-color); border-color: var(--primary-color); } .glass input[type=range]::-webkit-slider-thumb.rounded, input[type=range].glass.glass::-webkit-slider-thumb.rounded { background: var(--primary-color); border-color: var(--primary-color); } .glass input[type=range]::-webkit-slider-thumb:hover, input[type=range].glass.glass::-webkit-slider-thumb:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .glass input[type=range]::-webkit-slider-thumb:hover.round, input[type=range].glass.glass::-webkit-slider-thumb:hover.round { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .glass input[type=range]::-webkit-slider-thumb:hover.rounded, input[type=range].glass.glass::-webkit-slider-thumb:hover.rounded { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .glass input[type=range]::-moz-range-thumb, input[type=range].glass.glass::-moz-range-thumb { background: var(--primary-color); border-color: var(--primary-color); } .glass input[type=range]::-moz-range-thumb.round, input[type=range].glass.glass::-moz-range-thumb.round { background: var(--primary-color); border-color: var(--primary-color); } .glass input[type=range]::-moz-range-thumb.rounded, input[type=range].glass.glass::-moz-range-thumb.rounded { background: var(--primary-color); border-color: var(--primary-color); } .glass input[type=range]::-moz-range-thumb:hover, input[type=range].glass.glass::-moz-range-thumb:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .glass input[type=range]::-moz-range-thumb:hover.round, input[type=range].glass.glass::-moz-range-thumb:hover.round { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .glass input[type=range]::-moz-range-thumb:hover.rounded, input[type=range].glass.glass::-moz-range-thumb:hover.rounded { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .glass input[type=range]::-ms-thumb, input[type=range].glass.glass::-ms-thumb { background: var(--primary-color); border-color: var(--primary-color); } .glass input[type=range]::-ms-thumb.round, input[type=range].glass.glass::-ms-thumb.round { background: var(--primary-color); border-color: var(--primary-color); } .glass input[type=range]::-ms-thumb.rounded, input[type=range].glass.glass::-ms-thumb.rounded { background: var(--primary-color); border-color: var(--primary-color); } .glass input[type=range]::-ms-thumb:hover, input[type=range].glass.glass::-ms-thumb:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .glass input[type=range]::-ms-thumb:hover.round, input[type=range].glass.glass::-ms-thumb:hover.round { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .glass input[type=range]::-ms-thumb:hover.rounded, input[type=range].glass.glass::-ms-thumb:hover.rounded { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .glass input[type=range]::-webkit-slider-thumb:active, input[type=range].glass.glass::-webkit-slider-thumb:active { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .glass input[type=range]::-webkit-slider-thumb:active.round, input[type=range].glass.glass::-webkit-slider-thumb:active.round { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .glass input[type=range]::-webkit-slider-thumb:active.rounded, input[type=range].glass.glass::-webkit-slider-thumb:active.rounded { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .glass input[type=range]::-moz-range-thumb:active, input[type=range].glass.glass::-moz-range-thumb:active { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .glass input[type=range]::-moz-range-thumb:active.round, input[type=range].glass.glass::-moz-range-thumb:active.round { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .glass input[type=range]::-moz-range-thumb:active.rounded, input[type=range].glass.glass::-moz-range-thumb:active.rounded { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .glass input[type=range]::-ms-thumb:active, input[type=range].glass.glass::-ms-thumb:active { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .glass input[type=range]::-ms-thumb:active.round, input[type=range].glass.glass::-ms-thumb:active.round { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .glass input[type=range]::-ms-thumb:active.rounded, input[type=range].glass.glass::-ms-thumb:active.rounded { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .glass input[type=range]::-webkit-slider-runnable-track, input[type=range].glass.glass::-webkit-slider-runnable-track { background: #cfcfe1; border-color: #cfcfe1; } .glass input[type=range]::-webkit-slider-runnable-track.round, input[type=range].glass.glass::-webkit-slider-runnable-track.round { background: #cfcfe1; border-color: #cfcfe1; } .glass input[type=range]::-webkit-slider-runnable-track.rounded, input[type=range].glass.glass::-webkit-slider-runnable-track.rounded { background: #cfcfe1; border-color: #cfcfe1; } .glass input[type=range]::-moz-range-track, input[type=range].glass.glass::-moz-range-track { background: #cfcfe1; border-color: #cfcfe1; } .glass input[type=range]::-moz-range-track.round, input[type=range].glass.glass::-moz-range-track.round { background: #cfcfe1; border-color: #cfcfe1; } .glass input[type=range]::-moz-range-track.rounded, input[type=range].glass.glass::-moz-range-track.rounded { background: #cfcfe1; border-color: #cfcfe1; } } /******************************************************************************\ | | | _metal-sliders.scss | | | |******************************************************************************| | | | This defines the dom and svg visual styles for this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .metal input[type=range], input[type=range].metal.metal { -webkit-appearance: none; -webkit-appearance: none; -webkit-appearance: none; box-shadow: none; } .metal input[type=range]::-webkit-slider-thumb, input[type=range].metal.metal::-webkit-slider-thumb { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33); } .metal input[type=range]::-moz-range-thumb, input[type=range].metal.metal::-moz-range-thumb { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33); } .metal input[type=range]::-ms-thumb, input[type=range].metal.metal::-ms-thumb { box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.33); } .metal input[type=range]::-webkit-slider-thumb, input[type=range].metal.metal::-webkit-slider-thumb { background: radial-gradient(ellipse 50% 50% at 50% 10%, white 0%, color-mix(in srgb, white 30%, var(--primary-color)) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 100% 50% at 50% 10%, var(--primary-color) 0%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 25%, color-mix(in srgb, var(--primary-color) 50%, transparent) 66%, color-mix(in srgb, white 30%, var(--primary-color)) 100%) no-repeat, color-mix(in srgb, black 50%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); transform: scale(-1) rotate(var(--light-direction)); } .metal input[type=range]::-webkit-slider-thumb:hover, input[type=range].metal.metal::-webkit-slider-thumb:hover { background: radial-gradient(ellipse 50% 50% at 50% 10%, white 0%, color-mix(in srgb, white 30%, color-mix(in srgb, black 10%, var(--primary-color))) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 100% 50% at 50% 10%, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 25%, color-mix(in srgb, color-mix(in srgb, black 10%, var(--primary-color)) 50%, transparent) 66%, color-mix(in srgb, white 30%, color-mix(in srgb, black 10%, var(--primary-color))) 100%) no-repeat, color-mix(in srgb, black 50%, color-mix(in srgb, black 10%, var(--primary-color))); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 10%, var(--primary-color))); } .metal input[type=range]::-moz-range-thumb, input[type=range].metal.metal::-moz-range-thumb { background: radial-gradient(ellipse 50% 50% at 50% 10%, white 0%, color-mix(in srgb, white 30%, var(--primary-color)) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 100% 50% at 50% 10%, var(--primary-color) 0%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 25%, color-mix(in srgb, var(--primary-color) 50%, transparent) 66%, color-mix(in srgb, white 30%, var(--primary-color)) 100%) no-repeat, color-mix(in srgb, black 50%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); transform: scale(-1) rotate(var(--light-direction)); } .metal input[type=range]::-moz-range-thumb:hover, input[type=range].metal.metal::-moz-range-thumb:hover { background: radial-gradient(ellipse 50% 50% at 50% 10%, white 0%, color-mix(in srgb, white 30%, color-mix(in srgb, black 10%, var(--primary-color))) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 100% 50% at 50% 10%, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 25%, color-mix(in srgb, color-mix(in srgb, black 10%, var(--primary-color)) 50%, transparent) 66%, color-mix(in srgb, white 30%, color-mix(in srgb, black 10%, var(--primary-color))) 100%) no-repeat, color-mix(in srgb, black 50%, color-mix(in srgb, black 10%, var(--primary-color))); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 10%, var(--primary-color))); } .metal input[type=range]::-ms-thumb, input[type=range].metal.metal::-ms-thumb { background: radial-gradient(ellipse 50% 50% at 50% 10%, white 0%, color-mix(in srgb, white 30%, var(--primary-color)) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 100% 50% at 50% 10%, var(--primary-color) 0%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 25%, color-mix(in srgb, var(--primary-color) 50%, transparent) 66%, color-mix(in srgb, white 30%, var(--primary-color)) 100%) no-repeat, color-mix(in srgb, black 50%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); transform: scale(-1) rotate(var(--light-direction)); } .metal input[type=range]::-ms-thumb:hover, input[type=range].metal.metal::-ms-thumb:hover { background: radial-gradient(ellipse 50% 50% at 50% 10%, white 0%, color-mix(in srgb, white 30%, color-mix(in srgb, black 10%, var(--primary-color))) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 100% 50% at 50% 10%, color-mix(in srgb, black 10%, var(--primary-color)) 0%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 25%, color-mix(in srgb, color-mix(in srgb, black 10%, var(--primary-color)) 50%, transparent) 66%, color-mix(in srgb, white 30%, color-mix(in srgb, black 10%, var(--primary-color))) 100%) no-repeat, color-mix(in srgb, black 50%, color-mix(in srgb, black 10%, var(--primary-color))); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 10%, var(--primary-color))); } .metal input[type=range]::-webkit-slider-thumb:active, input[type=range].metal.metal::-webkit-slider-thumb:active { background: radial-gradient(ellipse 50% 50% at 50% 10%, white 0%, color-mix(in srgb, white 30%, color-mix(in srgb, black 20%, var(--primary-color))) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 100% 50% at 50% 10%, color-mix(in srgb, black 20%, var(--primary-color)) 0%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 25%, color-mix(in srgb, color-mix(in srgb, black 20%, var(--primary-color)) 50%, transparent) 66%, color-mix(in srgb, white 30%, color-mix(in srgb, black 20%, var(--primary-color))) 100%) no-repeat, color-mix(in srgb, black 50%, color-mix(in srgb, black 20%, var(--primary-color))); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 20%, var(--primary-color))); transform: scale(-1) rotate(var(--light-direction)); } .metal input[type=range]::-moz-range-thumb:active, input[type=range].metal.metal::-moz-range-thumb:active { background: radial-gradient(ellipse 50% 50% at 50% 10%, white 0%, color-mix(in srgb, white 30%, color-mix(in srgb, black 20%, var(--primary-color))) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 100% 50% at 50% 10%, color-mix(in srgb, black 20%, var(--primary-color)) 0%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 25%, color-mix(in srgb, color-mix(in srgb, black 20%, var(--primary-color)) 50%, transparent) 66%, color-mix(in srgb, white 30%, color-mix(in srgb, black 20%, var(--primary-color))) 100%) no-repeat, color-mix(in srgb, black 50%, color-mix(in srgb, black 20%, var(--primary-color))); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 20%, var(--primary-color))); transform: scale(-1) rotate(var(--light-direction)); } .metal input[type=range]::-ms-thumb:active, input[type=range].metal.metal::-ms-thumb:active { background: radial-gradient(ellipse 50% 50% at 50% 10%, white 0%, color-mix(in srgb, white 30%, color-mix(in srgb, black 20%, var(--primary-color))) 50%, transparent 100%) no-repeat, radial-gradient(ellipse 100% 50% at 50% 10%, color-mix(in srgb, black 20%, var(--primary-color)) 0%, transparent 75%) no-repeat, linear-gradient(var(--light-direction), transparent 25%, color-mix(in srgb, color-mix(in srgb, black 20%, var(--primary-color)) 50%, transparent) 66%, color-mix(in srgb, white 30%, color-mix(in srgb, black 20%, var(--primary-color))) 100%) no-repeat, color-mix(in srgb, black 50%, color-mix(in srgb, black 20%, var(--primary-color))); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 20%, var(--primary-color))); transform: scale(-1) rotate(var(--light-direction)); } .metal input[type=range]::-webkit-slider-runnable-track, input[type=range].metal.metal::-webkit-slider-runnable-track { background: #cfcfe1; border-color: #cfcfe1; } .metal input[type=range]::-webkit-slider-runnable-track.round, input[type=range].metal.metal::-webkit-slider-runnable-track.round { background: #cfcfe1; border-color: #cfcfe1; } .metal input[type=range]::-webkit-slider-runnable-track.rounded, input[type=range].metal.metal::-webkit-slider-runnable-track.rounded { background: #cfcfe1; border-color: #cfcfe1; } .metal input[type=range]::-moz-range-track, input[type=range].metal.metal::-moz-range-track { background: #cfcfe1; border-color: #cfcfe1; } .metal input[type=range]::-moz-range-track.round, input[type=range].metal.metal::-moz-range-track.round { background: #cfcfe1; border-color: #cfcfe1; } .metal input[type=range]::-moz-range-track.rounded, input[type=range].metal.metal::-moz-range-track.rounded { background: #cfcfe1; border-color: #cfcfe1; } } @supports not (color: color-mix(in srgb, white, black)) { .metal input[type=range], input[type=range].metal.metal { -webkit-appearance: none; -webkit-appearance: none; } .metal input[type=range]::-webkit-slider-thumb, input[type=range].metal.metal::-webkit-slider-thumb { background: var(--primary-color); border-color: var(--primary-color); } .metal input[type=range]::-webkit-slider-thumb.round, input[type=range].metal.metal::-webkit-slider-thumb.round { background: var(--primary-color); border-color: var(--primary-color); } .metal input[type=range]::-webkit-slider-thumb.rounded, input[type=range].metal.metal::-webkit-slider-thumb.rounded { background: var(--primary-color); border-color: var(--primary-color); } .metal input[type=range]::-webkit-slider-thumb:hover, input[type=range].metal.metal::-webkit-slider-thumb:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .metal input[type=range]::-webkit-slider-thumb:hover.round, input[type=range].metal.metal::-webkit-slider-thumb:hover.round { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .metal input[type=range]::-webkit-slider-thumb:hover.rounded, input[type=range].metal.metal::-webkit-slider-thumb:hover.rounded { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .metal input[type=range]::-moz-range-thumb, input[type=range].metal.metal::-moz-range-thumb { background: var(--primary-color); border-color: var(--primary-color); } .metal input[type=range]::-moz-range-thumb.round, input[type=range].metal.metal::-moz-range-thumb.round { background: var(--primary-color); border-color: var(--primary-color); } .metal input[type=range]::-moz-range-thumb.rounded, input[type=range].metal.metal::-moz-range-thumb.rounded { background: var(--primary-color); border-color: var(--primary-color); } .metal input[type=range]::-moz-range-thumb:hover, input[type=range].metal.metal::-moz-range-thumb:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .metal input[type=range]::-moz-range-thumb:hover.round, input[type=range].metal.metal::-moz-range-thumb:hover.round { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .metal input[type=range]::-moz-range-thumb:hover.rounded, input[type=range].metal.metal::-moz-range-thumb:hover.rounded { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .metal input[type=range]::-ms-thumb, input[type=range].metal.metal::-ms-thumb { background: var(--primary-color); border-color: var(--primary-color); } .metal input[type=range]::-ms-thumb.round, input[type=range].metal.metal::-ms-thumb.round { background: var(--primary-color); border-color: var(--primary-color); } .metal input[type=range]::-ms-thumb.rounded, input[type=range].metal.metal::-ms-thumb.rounded { background: var(--primary-color); border-color: var(--primary-color); } .metal input[type=range]::-ms-thumb:hover, input[type=range].metal.metal::-ms-thumb:hover { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .metal input[type=range]::-ms-thumb:hover.round, input[type=range].metal.metal::-ms-thumb:hover.round { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .metal input[type=range]::-ms-thumb:hover.rounded, input[type=range].metal.metal::-ms-thumb:hover.rounded { background: color-mix(in srgb, black 10%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } .metal input[type=range]::-webkit-slider-thumb:active, input[type=range].metal.metal::-webkit-slider-thumb:active { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .metal input[type=range]::-webkit-slider-thumb:active.round, input[type=range].metal.metal::-webkit-slider-thumb:active.round { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .metal input[type=range]::-webkit-slider-thumb:active.rounded, input[type=range].metal.metal::-webkit-slider-thumb:active.rounded { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .metal input[type=range]::-moz-range-thumb:active, input[type=range].metal.metal::-moz-range-thumb:active { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .metal input[type=range]::-moz-range-thumb:active.round, input[type=range].metal.metal::-moz-range-thumb:active.round { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .metal input[type=range]::-moz-range-thumb:active.rounded, input[type=range].metal.metal::-moz-range-thumb:active.rounded { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .metal input[type=range]::-ms-thumb:active, input[type=range].metal.metal::-ms-thumb:active { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .metal input[type=range]::-ms-thumb:active.round, input[type=range].metal.metal::-ms-thumb:active.round { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .metal input[type=range]::-ms-thumb:active.rounded, input[type=range].metal.metal::-ms-thumb:active.rounded { background: color-mix(in srgb, black 20%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } .metal input[type=range]::-webkit-slider-runnable-track, input[type=range].metal.metal::-webkit-slider-runnable-track { background: #cfcfe1; border-color: #cfcfe1; } .metal input[type=range]::-webkit-slider-runnable-track.round, input[type=range].metal.metal::-webkit-slider-runnable-track.round { background: #cfcfe1; border-color: #cfcfe1; } .metal input[type=range]::-webkit-slider-runnable-track.rounded, input[type=range].metal.metal::-webkit-slider-runnable-track.rounded { background: #cfcfe1; border-color: #cfcfe1; } .metal input[type=range]::-moz-range-track, input[type=range].metal.metal::-moz-range-track { background: #cfcfe1; border-color: #cfcfe1; } .metal input[type=range]::-moz-range-track.round, input[type=range].metal.metal::-moz-range-track.round { background: #cfcfe1; border-color: #cfcfe1; } .metal input[type=range]::-moz-range-track.rounded, input[type=range].metal.metal::-moz-range-track.rounded { background: #cfcfe1; border-color: #cfcfe1; } } /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _flat-tabs.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ .flat .nav-tabs > li > a, .nav-tabs > li.flat.flat > a { background: #cfcfe1; border-color: #cfcfe1; box-shadow: var(--tab-shadow); } .flat .nav-tabs > li > a.round, .nav-tabs > li.flat.flat > a.round { background: #cfcfe1; border-color: #cfcfe1; } .flat .nav-tabs > li > a.rounded, .nav-tabs > li.flat.flat > a.rounded { background: #cfcfe1; border-color: #cfcfe1; } .flat .nav-tabs > li > a:hover, .nav-tabs > li.flat.flat > a:hover { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .flat .nav-tabs > li > a:hover.round, .nav-tabs > li.flat.flat > a:hover.round { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .flat .nav-tabs > li > a:hover.rounded, .nav-tabs > li.flat.flat > a:hover.rounded { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .flat .nav-tabs > li.active > a, .nav-tabs > li.flat.flat.active > a { background: var(--primary-color); border-color: var(--primary-color); } .flat .nav-tabs > li.active > a.round, .nav-tabs > li.flat.flat.active > a.round { background: var(--primary-color); border-color: var(--primary-color); } .flat .nav-tabs > li.active > a.rounded, .nav-tabs > li.flat.flat.active > a.rounded { background: var(--primary-color); border-color: var(--primary-color); } /******************************************************************************\ | | | _chalk-tabs.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .chalk .nav-tabs > li > a, .nav-tabs > li.chalk.chalk > a { background: linear-gradient(var(--light-direction), color-mix(in srgb, white 75%, transparent) 0%, transparent 25%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, #cfcfe1) 0%, #cfcfe1 50%, color-mix(in srgb, black 10%, #cfcfe1) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, #cfcfe1); box-shadow: var(--tab-shadow); } .chalk .nav-tabs > li > a:hover, .nav-tabs > li.chalk.chalk > a:hover { background: linear-gradient(var(--light-direction), color-mix(in srgb, white 75%, transparent) 0%, transparent 25%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, #cfcfe1)) 0%, color-mix(in srgb, black 10%, #cfcfe1) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, #cfcfe1)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, #cfcfe1)); } .chalk .nav-tabs > li.active > a, .nav-tabs > li.chalk.chalk.active > a { background: linear-gradient(var(--light-direction), color-mix(in srgb, white 75%, transparent) 0%, transparent 25%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0%, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } } @supports not (color: color-mix(in srgb, white, black)) { .chalk .nav-tabs > li > a, .nav-tabs > li.chalk.chalk > a { background: #cfcfe1; border-color: #cfcfe1; box-shadow: var(--tab-shadow); } .chalk .nav-tabs > li > a.round, .nav-tabs > li.chalk.chalk > a.round { background: #cfcfe1; border-color: #cfcfe1; } .chalk .nav-tabs > li > a.rounded, .nav-tabs > li.chalk.chalk > a.rounded { background: #cfcfe1; border-color: #cfcfe1; } .chalk .nav-tabs > li > a:hover, .nav-tabs > li.chalk.chalk > a:hover { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .chalk .nav-tabs > li > a:hover.round, .nav-tabs > li.chalk.chalk > a:hover.round { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .chalk .nav-tabs > li > a:hover.rounded, .nav-tabs > li.chalk.chalk > a:hover.rounded { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .chalk .nav-tabs > li.active > a, .nav-tabs > li.chalk.chalk.active > a { background: var(--primary-color); border-color: var(--primary-color); } .chalk .nav-tabs > li.active > a.round, .nav-tabs > li.chalk.chalk.active > a.round { background: var(--primary-color); border-color: var(--primary-color); } .chalk .nav-tabs > li.active > a.rounded, .nav-tabs > li.chalk.chalk.active > a.rounded { background: var(--primary-color); border-color: var(--primary-color); } } /******************************************************************************\ | | | _plastic-tabs.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .plastic .nav-tabs > li > a, .nav-tabs > li.plastic.plastic > a { background: linear-gradient(var(--light-direction), white 0%, transparent 25%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, #cfcfe1) 0, #cfcfe1 50%, color-mix(in srgb, black 10%, #cfcfe1) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, #cfcfe1); box-shadow: var(--tab-shadow); } .plastic .nav-tabs > li > a:hover, .nav-tabs > li.plastic.plastic > a:hover { background: linear-gradient(var(--light-direction), white 0%, transparent 25%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, #cfcfe1)) 0, color-mix(in srgb, black 10%, #cfcfe1) 50%, color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, #cfcfe1)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, #cfcfe1)); } .plastic .nav-tabs > li.active > a, .nav-tabs > li.plastic.plastic.active > a { background: linear-gradient(var(--light-direction), white 0%, transparent 25%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 10%, var(--primary-color)) 0, var(--primary-color) 50%, color-mix(in srgb, black 10%, var(--primary-color)) 100%) no-repeat; border-color: color-mix(in srgb, black 10%, var(--primary-color)); } } @supports not (color: color-mix(in srgb, white, black)) { .plastic .nav-tabs > li > a, .nav-tabs > li.plastic.plastic > a { background: #cfcfe1; border-color: #cfcfe1; box-shadow: var(--tab-shadow); } .plastic .nav-tabs > li > a.round, .nav-tabs > li.plastic.plastic > a.round { background: #cfcfe1; border-color: #cfcfe1; } .plastic .nav-tabs > li > a.rounded, .nav-tabs > li.plastic.plastic > a.rounded { background: #cfcfe1; border-color: #cfcfe1; } .plastic .nav-tabs > li > a:hover, .nav-tabs > li.plastic.plastic > a:hover { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .plastic .nav-tabs > li > a:hover.round, .nav-tabs > li.plastic.plastic > a:hover.round { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .plastic .nav-tabs > li > a:hover.rounded, .nav-tabs > li.plastic.plastic > a:hover.rounded { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .plastic .nav-tabs > li.active > a, .nav-tabs > li.plastic.plastic.active > a { background: var(--primary-color); border-color: var(--primary-color); } .plastic .nav-tabs > li.active > a.round, .nav-tabs > li.plastic.plastic.active > a.round { background: var(--primary-color); border-color: var(--primary-color); } .plastic .nav-tabs > li.active > a.rounded, .nav-tabs > li.plastic.plastic.active > a.rounded { background: var(--primary-color); border-color: var(--primary-color); } } /******************************************************************************\ | | | _glass-tabs.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .glass .nav-tabs > li > a, .nav-tabs > li.glass > a { background: linear-gradient(to right, color-mix(in srgb, color-mix(in srgb, black 20%, #cfcfe1) 50%, transparent) 0%, transparent 10px) no-repeat, linear-gradient(to left, color-mix(in srgb, color-mix(in srgb, black 20%, #cfcfe1) 50%, transparent) 0%, transparent 10px) no-repeat, linear-gradient(var(--light-direction), white 0%, transparent 30%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, #cfcfe1) 0%, #cfcfe1 50%, transparent 100%) no-repeat, color-mix(in srgb, black 30%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); box-shadow: var(--tab-shadow); } .glass .nav-tabs > li > a:hover, .nav-tabs > li.glass > a:hover { background: linear-gradient(to right, color-mix(in srgb, color-mix(in srgb, black 20%, color-mix(in srgb, black 10%, #cfcfe1)) 50%, transparent) 0%, transparent 10px) no-repeat, linear-gradient(to left, color-mix(in srgb, color-mix(in srgb, black 20%, color-mix(in srgb, black 10%, #cfcfe1)) 50%, transparent) 0%, transparent 10px) no-repeat, linear-gradient(var(--light-direction), white 0%, transparent 30%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, color-mix(in srgb, black 10%, #cfcfe1)) 0%, color-mix(in srgb, black 10%, #cfcfe1) 50%, transparent 100%) no-repeat, color-mix(in srgb, black 30%, color-mix(in srgb, black 10%, #cfcfe1)); border-color: color-mix(in srgb, black 10%, color-mix(in srgb, black 10%, #cfcfe1)); } .glass .nav-tabs > li.active > a, .nav-tabs > li.glass.active > a { background: linear-gradient(to right, color-mix(in srgb, color-mix(in srgb, black 20%, var(--primary-color)) 50%, transparent) 0%, transparent 10px) no-repeat, linear-gradient(to left, color-mix(in srgb, color-mix(in srgb, black 20%, var(--primary-color)) 50%, transparent) 0%, transparent 10px) no-repeat, linear-gradient(var(--light-direction), white 0%, transparent 30%) no-repeat, radial-gradient(ellipse 50% 50% at 50% 85%, color-mix(in srgb, white 50%, var(--primary-color)) 0%, var(--primary-color) 50%, transparent 100%) no-repeat, color-mix(in srgb, black 30%, var(--primary-color)); border-color: color-mix(in srgb, black 10%, var(--primary-color)); } } @supports not (color: color-mix(in srgb, white, black)) { .glass .nav-tabs > li > a, .nav-tabs > li.glass.glass > a { background: #cfcfe1; border-color: #cfcfe1; box-shadow: var(--tab-shadow); } .glass .nav-tabs > li > a.round, .nav-tabs > li.glass.glass > a.round { background: #cfcfe1; border-color: #cfcfe1; } .glass .nav-tabs > li > a.rounded, .nav-tabs > li.glass.glass > a.rounded { background: #cfcfe1; border-color: #cfcfe1; } .glass .nav-tabs > li > a:hover, .nav-tabs > li.glass.glass > a:hover { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .glass .nav-tabs > li > a:hover.round, .nav-tabs > li.glass.glass > a:hover.round { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .glass .nav-tabs > li > a:hover.rounded, .nav-tabs > li.glass.glass > a:hover.rounded { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .glass .nav-tabs > li.active > a, .nav-tabs > li.glass.glass.active > a { background: var(--primary-color); border-color: var(--primary-color); } .glass .nav-tabs > li.active > a.round, .nav-tabs > li.glass.glass.active > a.round { background: var(--primary-color); border-color: var(--primary-color); } .glass .nav-tabs > li.active > a.rounded, .nav-tabs > li.glass.glass.active > a.rounded { background: var(--primary-color); border-color: var(--primary-color); } } /******************************************************************************\ | | | _metal-tabs.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ @supports (color: color-mix(in srgb, white, black)) { .metal .nav-tabs > li > a, .nav-tabs > li.metal > a { background: linear-gradient(to right, color-mix(in srgb, black 15%, transparent) 0%, transparent 25%) no-repeat, linear-gradient(to left, color-mix(in srgb, black 15%, transparent) 0%, transparent 25%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 60%, #cfcfe1) 0%, color-mix(in srgb, white 30%, #cfcfe1) 25%, transparent 50%) no-repeat, linear-gradient(var(--light-direction), transparent 66%, color-mix(in srgb, white 10%, #cfcfe1) 100%) no-repeat, color-mix(in srgb, black 30%, #cfcfe1); border-color: color-mix(in srgb, black 20%, #cfcfe1); box-shadow: var(--tab-shadow); } .metal .nav-tabs > li > a:hover, .nav-tabs > li.metal > a:hover { background: linear-gradient(to right, color-mix(in srgb, black 15%, transparent) 0%, transparent 25%) no-repeat, linear-gradient(to left, color-mix(in srgb, black 15%, transparent) 0%, transparent 25%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 60%, color-mix(in srgb, black 10%, #cfcfe1)) 0%, color-mix(in srgb, white 30%, color-mix(in srgb, black 10%, #cfcfe1)) 25%, transparent 50%) no-repeat, linear-gradient(var(--light-direction), transparent 66%, color-mix(in srgb, white 10%, color-mix(in srgb, black 10%, #cfcfe1)) 100%) no-repeat, color-mix(in srgb, black 30%, color-mix(in srgb, black 10%, #cfcfe1)); border-color: color-mix(in srgb, black 20%, color-mix(in srgb, black 10%, #cfcfe1)); } .metal .nav-tabs > li.active > a, .nav-tabs > li.metal.active > a { background: linear-gradient(to right, color-mix(in srgb, black 15%, transparent) 0%, transparent 25%) no-repeat, linear-gradient(to left, color-mix(in srgb, black 15%, transparent) 0%, transparent 25%) no-repeat, linear-gradient(var(--light-direction), color-mix(in srgb, white 60%, var(--primary-color)) 0%, color-mix(in srgb, white 30%, var(--primary-color)) 25%, transparent 50%) no-repeat, linear-gradient(var(--light-direction), transparent 66%, color-mix(in srgb, white 10%, var(--primary-color)) 100%) no-repeat, color-mix(in srgb, black 30%, var(--primary-color)); border-color: color-mix(in srgb, black 20%, var(--primary-color)); } } @supports not (color: color-mix(in srgb, white, black)) { .metal .nav-tabs > li > a, .nav-tabs > li.metal.metal > a { background: #cfcfe1; border-color: #cfcfe1; box-shadow: var(--tab-shadow); } .metal .nav-tabs > li > a.round, .nav-tabs > li.metal.metal > a.round { background: #cfcfe1; border-color: #cfcfe1; } .metal .nav-tabs > li > a.rounded, .nav-tabs > li.metal.metal > a.rounded { background: #cfcfe1; border-color: #cfcfe1; } .metal .nav-tabs > li > a:hover, .nav-tabs > li.metal.metal > a:hover { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .metal .nav-tabs > li > a:hover.round, .nav-tabs > li.metal.metal > a:hover.round { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .metal .nav-tabs > li > a:hover.rounded, .nav-tabs > li.metal.metal > a:hover.rounded { background: color-mix(in srgb, black 10%, #cfcfe1); border-color: color-mix(in srgb, black 10%, #cfcfe1); } .metal .nav-tabs > li.active > a, .nav-tabs > li.metal.metal.active > a { background: var(--primary-color); border-color: var(--primary-color); } .metal .nav-tabs > li.active > a.round, .nav-tabs > li.metal.metal.active > a.round { background: var(--primary-color); border-color: var(--primary-color); } .metal .nav-tabs > li.active > a.rounded, .nav-tabs > li.metal.metal.active > a.rounded { background: var(--primary-color); border-color: var(--primary-color); } } /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | _index.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ /******************************************************************************\ | | | specular.scss | | | |******************************************************************************| | | | This defines various CSS styles used in this application. | | | | Author(s): Abe Megahed | | | | This file is subject to the terms and conditions defined in | | 'LICENSE.txt', which is part of this source code distribution. | | | |******************************************************************************| | Copyright (C) 2023, Specular CSS, http://www.specularcss.org | \******************************************************************************/ body { --primary-color: grey; } /*# sourceMappingURL=specular.css.map */