Last active
September 20, 2017 18:32
-
-
Save sandor/e7c2bc3ab4e1dc8ad9de78ee0c057d1d to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* | |
| * @info | |
| * Theme implementing macOS Human Interface Guidelines. | |
| * @doc | |
| * https://developer.apple.com/library/content/documentation/UserExperience/Conceptual/OSXHIGuidelines/ | |
| * @license | |
| * You are allowed to link and use the Xel macOS theme ONLY in apps that are distributed as macOS app bundles. | |
| * Usage of this theme on non-Apple platforms (including web apps) is PROHIBITED. | |
| * Xel authors do not claim any legal rights to the MacOS design language, also known as Human Interface | |
| * Guidelines, which is owned and controlled by Apple Inc., and is protected by copyright, patent and trademark | |
| * laws, and various other intellectual property rights. | |
| */ | |
| html { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| } | |
| body { | |
| width: 100%; | |
| height: 100%; | |
| margin: 0; | |
| color: var(--text-color); | |
| background: #ECECEC; | |
| font-family: BlinkMacSystemFont, "Roboto", "Helvetica Neue", "Lucida Grande", "Arial", sans-serif; | |
| font-size: 15px; | |
| line-height: 1.6; | |
| --accent-color-h: 211; | |
| --accent-color-s: 97%; | |
| --accent-color-l: 53%; | |
| --text-color: rgba(0, 0, 0, 0.8); | |
| --selection-background: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 35%)); | |
| } | |
| h2 { | |
| margin: 35px 0 15px 0; | |
| box-sizing: border-box; | |
| font-size: 50px; | |
| font-weight: 200; | |
| line-height: 1.1; | |
| } | |
| h3 { | |
| margin: 27px 0 18px 0; | |
| box-sizing: border-box; | |
| font-size: 36px; | |
| font-weight: 200; | |
| line-height: 1.2; | |
| } | |
| h4 { | |
| margin: 34px 0 18px 0; | |
| box-sizing: border-box; | |
| font-size: 24px; | |
| font-weight: 300; | |
| line-height: 1.1; | |
| } | |
| h5 { | |
| margin: 10px 0 8px 0; | |
| box-sizing: border-box; | |
| font-size: 14px; | |
| font-weight: 600; | |
| line-height: 1.1; | |
| } | |
| p:last-child { | |
| margin-bottom: 0; | |
| } | |
| em { | |
| font-weight: 500; | |
| } | |
| pre, | |
| code, | |
| var { | |
| font-size: 14px; | |
| font-family: "Menlo", "Andale Mono", monospace; | |
| font-style: normal; | |
| padding: 0 4px; | |
| background: #fbfbfb; | |
| outline: 1px solid #d0d0d0; | |
| } | |
| hr { | |
| width: 100%; | |
| height: 1px; | |
| min-height: 1px; | |
| box-sizing: border-box; | |
| margin: 2px 0px 2px 0; | |
| background: rgba(0, 0, 0, 0.12); | |
| border: none; | |
| } | |
| a { | |
| color: inherit; | |
| text-decoration: none; | |
| } | |
| p a, | |
| li a, | |
| dl a, | |
| x-label a { | |
| color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 10%)); | |
| text-decoration: underline; | |
| } | |
| p a:hover, | |
| li a:hover | |
| dl a:hover, | |
| x-label a:hover { | |
| text-decoration: none; | |
| } | |
| ::selection { | |
| background: var(--selection-background); | |
| } | |
| :host([invalid]) ::selection { | |
| color: white; | |
| background: #d50000; | |
| } | |
| ::-webkit-scrollbar { | |
| max-width: 6px; | |
| max-height: 6px; | |
| background: none; | |
| } | |
| ::-webkit-scrollbar-track { | |
| border-radius: 25px; | |
| } | |
| ::-webkit-scrollbar-thumb { | |
| background-color: rgba(0, 0, 0, 0.2); | |
| border-radius: 25px; | |
| } | |
| ::-webkit-scrollbar-thumb:hover { | |
| background:rgba(0,0,0,0.6); | |
| } | |
| ::-webkit-scrollbar-corner { | |
| display: none | |
| } | |
| *:not(:defined) { | |
| display: none; | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Card | |
| */ | |
| x-card { | |
| background: #e8e8e8; | |
| border: 1px solid #cdcdcd; | |
| border-radius: 4px; | |
| } | |
| x-card > main { | |
| padding: 16px 20px; | |
| } | |
| x-card h3:first-child { | |
| margin-top: 0; | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Accordion | |
| */ | |
| x-accordion { | |
| margin: 8px 0; | |
| --arrow-color: rgba(0, 0, 0, 0.48); | |
| --focused-arrow-background: rgba(0, 0, 0, 0.08); | |
| --arrow-align: flex-start; | |
| --arrow-d: path("M 91.623 50.002 L 8.377 98.065 L 8.377 1.936 L 91.623 50.002 Z"); | |
| --arrow-width: 10px; | |
| --arrow-height: 10px; | |
| } | |
| x-accordion[expanded] { | |
| --arrow-transform: rotate(90deg); | |
| } | |
| x-accordion > header { | |
| display: flex; | |
| align-items: center; | |
| box-sizing: border-box; | |
| width: 100%; | |
| padding: 7px 0 7px 16px; | |
| } | |
| x-accordion > header > x-label { | |
| font-weight: 500; | |
| color: rgba(0, 0, 0, 0.87); | |
| } | |
| x-accordion > header > x-label:first-child { | |
| flex: 1; | |
| } | |
| x-accordion > header > *:not(:last-child) { | |
| margin-right: 20px; | |
| } | |
| x-accordion > main { | |
| padding: 4px 0 8px 0; | |
| } | |
| x-accordion:not([expanded]):not([animating]) > main { | |
| display: none; | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Icon | |
| */ | |
| x-icon { | |
| width: 17px; | |
| height: 17px; | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Label | |
| */ | |
| x-label { | |
| font-size: 13px; | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Stepper | |
| */ | |
| x-stepper { | |
| flex-flow: column-reverse; | |
| border-radius: 7px; | |
| overflow: hidden; | |
| box-sizing: border-box; | |
| width: 12px; | |
| height: 22px; | |
| box-shadow: 0 0 0 1px #BFBFBF; | |
| background: white; | |
| color: rgba(0, 0, 0, 0.8); | |
| --pressed-button-background: hsl(var(--accent-color-h), var(--accent-color-s), var(--accent-color-l)); | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Swatch | |
| */ | |
| x-swatch { | |
| border: 1px solid rgba(0, 0, 0, 0.3); | |
| border-radius: 2px; | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Buttons | |
| */ | |
| x-button { | |
| min-height: 24px; | |
| padding: 2px 14px; | |
| color: var(--text-color); | |
| background: #ffffff; | |
| border: 1px solid var(--x-normal-border-color); | |
| border-radius: 4px; | |
| --x-normal-border-color: #ACACAC; | |
| --x-toggled-border-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 8%)); | |
| --x-pressed-border-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 12%)); | |
| } | |
| x-button:focus { | |
| box-shadow: 0 0 0px 3px hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 20%)); | |
| z-index: 1; | |
| } | |
| x-button[disabled] { | |
| opacity: 0.4; | |
| } | |
| x-button[mixed] { | |
| opacity: 0.7; | |
| } | |
| x-button[expanded] { | |
| background: rgba(0, 0, 0, 0.05); | |
| } | |
| x-button[toggled] { | |
| color: white; | |
| border-color: var(--x-toggled-border-color); | |
| background: linear-gradient(to bottom, | |
| hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 15%)), | |
| hsl(var(--accent-color-h), var(--accent-color-s), var(--accent-color-l)) | |
| ); | |
| } | |
| x-button[pressed] { | |
| color: white; | |
| border-color: var(--x-pressed-border-color); | |
| background: linear-gradient(to bottom, | |
| hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 5%)), | |
| hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 7%)) | |
| ); | |
| } | |
| x-button > x-label, | |
| x-button > x-box > x-label { | |
| flex: 1; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| max-width: 100%; | |
| text-align: center; | |
| } | |
| x-button > x-box { | |
| overflow: hidden; | |
| align-items: center; | |
| } | |
| x-button > x-box[vertical] > * { | |
| margin: 0 0 2px 0; | |
| } | |
| x-button > x-box:not([vertical]) > * { | |
| margin: 0 6px 0 0; | |
| } | |
| x-button > x-box[vertical] > *:last-child { | |
| margin: 0; | |
| } | |
| x-button > x-box:not([vertical]) > *:last-child { | |
| margin: 0; | |
| } | |
| x-buttons > x-button:not(:first-of-type) { | |
| border-top-left-radius: 0; | |
| border-bottom-left-radius: 0; | |
| } | |
| x-buttons > x-button:not(:last-of-type) { | |
| border-right: none; | |
| border-top-right-radius: 0; | |
| border-bottom-right-radius: 0; | |
| } | |
| x-buttons > x-button[toggled] + x-button { | |
| border-left-color: var(--x-toggled-border-color); | |
| } | |
| x-buttons > x-button[pressed] + x-button { | |
| border-left-color: var(--x-pressed-border-color); | |
| } | |
| x-buttons > x-box[vertical] { | |
| width: 100%; | |
| } | |
| x-buttons > x-box[vertical] > x-button { | |
| width: 100%; | |
| justify-content: flex-start; | |
| } | |
| x-buttons > x-box[vertical] > x-button:not(:first-of-type) { | |
| border-top-left-radius: 0; | |
| border-top-right-radius: 0; | |
| } | |
| x-buttons > x-box[vertical] > x-button:not(:last-of-type) { | |
| border-bottom: none; | |
| border-bottom-left-radius: 0; | |
| border-bottom-right-radius: 0; | |
| } | |
| x-buttons > x-box[vertical] > x-button[toggled] + x-button { | |
| border-top-color: var(--x-toggled-border-color); | |
| } | |
| x-buttons > x-box[vertical] > x-button[pressed] + x-button { | |
| border-top-color: var(--x-pressed-border-color); | |
| } | |
| /* @skin "condensed" */ | |
| x-button[skin="condensed"] { | |
| padding: 2px 7px; | |
| } | |
| /* @skin "textured", "textured-condensed" */ | |
| x-button[skin^="textured"] { | |
| color: #737373; | |
| background-image: linear-gradient(to bottom, #FCFCFC, #F1F1F1); | |
| --x-normal-border-color: rgba(0, 0, 0, 0.25); | |
| --x-toggled-border-color: #5E5D5E; | |
| --x-pressed-border-color: rgba(0, 0, 0, 0.3); | |
| } | |
| x-button[skin^="textured-condensed"] { | |
| padding: 2px 7px; | |
| } | |
| x-button[skin^="textured"][pressed], | |
| x-button[skin^="textured"][expanded] { | |
| background: linear-gradient(to bottom, #E5E5E5, #D6D4D6); | |
| } | |
| x-button[skin^="textured"][toggled] { | |
| color: rgba(255, 255, 255, 0.94); | |
| background-image: linear-gradient(to bottom, #696869, #717071); | |
| } | |
| x-button[skin^="textured"][toggled][pressed], | |
| x-button[skin^="textured"][toggled][expanded] { | |
| background: linear-gradient(to bottom, #5A595A, #535253); | |
| } | |
| /* @skin "plain", "plain-condensed" */ | |
| x-button[skin^="plain"] { | |
| min-height: 16px; | |
| color: rgba(0, 0, 0, 0.7); | |
| background: none; | |
| border-radius: 5px; | |
| --x-normal-border-color: #ACACAC; | |
| --x-toggled-border-color: #787878; | |
| --x-pressed-border-color: #787878; | |
| } | |
| x-button[skin^="plain-condensed"] { | |
| padding: 2px 7px; | |
| } | |
| x-button[skin^="plain"][pressed], | |
| x-button[skin^="plain"][expanded] { | |
| background: rgba(0, 0, 0, 0.07); | |
| } | |
| x-button[skin^="plain"][toggled] { | |
| color: rgba(255, 255, 255, 0.95); | |
| background: #959595; | |
| } | |
| x-button[skin^="plain"][toggled][pressed], | |
| x-button[skin^="plain"][toggled][expanded] { | |
| background: #787878; | |
| } | |
| /* @skin "iconic", "iconic-condensed" */ | |
| x-button[skin^="iconic"] { | |
| padding: 2px 6px 4px 6px; | |
| color: #737373; | |
| background: none; | |
| border: none; | |
| border-radius: 4px 4px 0 0; | |
| } | |
| x-button[skin^="iconic"][toggled] { | |
| background: linear-gradient(to bottom, #D7D7D7, #C9C9C9); | |
| } | |
| x-button[skin^="iconic"][toggled][pressed] { | |
| color: #737373; | |
| } | |
| x-button[skin="iconic"] > x-icon, | |
| x-button[skin="iconic"] > x-box > x-icon { | |
| width: 32px; | |
| height: 32px; | |
| } | |
| x-button[skin="iconic-condensed"] > x-icon, | |
| x-button[skin="iconic-condensed"] > x-box > x-icon { | |
| width: 24px; | |
| height: 24px; | |
| } | |
| x-button[skin^="iconic"][pressed] > x-icon, | |
| x-button[skin^="iconic"][pressed] > x-box > x-icon { | |
| filter: brightness(0.3); | |
| } | |
| x-button[skin="iconic"] x-label { | |
| font-size: 12px; | |
| } | |
| x-button[skin^="iconic"] > x-box[vertical] > x-icon + x-label { | |
| margin-top: 3px; | |
| } | |
| x-buttons > x-box[vertical] > x-button[skin^="iconic"] { | |
| justify-content: center; | |
| } | |
| /* @skin "flat", "flat-condensed" */ | |
| x-button[skin^="flat"] { | |
| padding: 0; | |
| background: none; | |
| border: none; | |
| opacity: 1; | |
| color: rgba(0, 0, 0, 0.65); | |
| --arrow-margin: 0 0 0 2px; | |
| } | |
| x-button[skin="flat"] { | |
| --arrow-width: 10px; | |
| --arrow-height: 10px; | |
| } | |
| x-button[skin^="flat"][toggled], | |
| x-button[skin^="flat"][expanded] { | |
| color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 5%)); | |
| background: none; | |
| } | |
| x-button[skin^="flat"][pressed] { | |
| color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 14%)); | |
| } | |
| x-button[skin^="flat"][mixed] { | |
| opacity: 0.7; | |
| } | |
| x-button[skin^="flat"][disabled] { | |
| opacity: 0.5; | |
| } | |
| x-button[skin="flat"] > x-icon { | |
| width: 26px; | |
| height: 26px; | |
| } | |
| x-button[skin="flat-condensed"] > x-icon { | |
| width: 16px; | |
| height: 16px; | |
| } | |
| x-buttons > x-button[skin="flat"]:not(:first-of-type) { | |
| margin-left: 10px; | |
| } | |
| x-buttons > x-button[skin="flat-condensed"]:not(:first-of-type) { | |
| margin-left: 5px; | |
| } | |
| x-buttons > x-box[vertical] > x-button[skin="flat"]:not(:first-of-type) { | |
| margin-top: 10px; | |
| } | |
| x-buttons > x-box[vertical] > x-button[skin="flat-condensed"]:not(:first-of-type) { | |
| margin-top: 5px; | |
| } | |
| /* @skin "mini" */ | |
| x-button[skin="mini"] { | |
| padding: 0px 6px; | |
| min-height: 19px; | |
| color: rgba(0, 0, 0, 0.5); | |
| background: none; | |
| border: none; | |
| border-radius: 0; | |
| --arrow-margin: 0 0 0 2px; | |
| } | |
| x-button[skin="mini"][expanded] { | |
| color: var(--text-color); | |
| } | |
| x-button[skin="mini"][toggled] { | |
| background: linear-gradient(to bottom, #D7D7D7, #C9C9C9); | |
| } | |
| x-button[skin="mini"][pressed], | |
| x-button[skin="mini"][pressed][toggled], | |
| x-button[skin="mini"][expanded][toggled] { | |
| color: var(--primary-color); | |
| background: linear-gradient(to bottom, #C1C1C1, #B4B4B4); | |
| } | |
| x-buttons > x-box[vertical] > x-button[skin="mini"] { | |
| padding: 3px 6px; | |
| } | |
| /* @skin "mini-bordered" */ | |
| x-button[skin="mini-bordered"] { | |
| padding: 2px 4px; | |
| min-height: 19px; | |
| color: var(--primary-color); | |
| background: linear-gradient(to bottom,#FAFAFA, #F5F5F5); | |
| border: 1px solid #B4B4B4; | |
| border-radius: 2px; | |
| } | |
| x-button[skin="mini-bordered"][expanded] { | |
| background: rgba(0, 0, 0, 0.05); | |
| } | |
| x-button[skin="bordered-mini"][toggled] { | |
| background: linear-gradient(to bottom, #D7D7D7, #C9C9C9); | |
| } | |
| x-button[skin="mini-bordered"][pressed], | |
| x-button[skin="mini-bordered"][pressed][toggled], | |
| x-button[skin="mini-bordered"][expanded][toggled] { | |
| color: var(--primary-color); | |
| background: linear-gradient(to bottom, #C1C1C1, #B4B4B4); | |
| border-color: #B4B4B4; | |
| } | |
| /* @skin "recessed" */ | |
| x-button[skin="recessed"] { | |
| min-height: 18px; | |
| padding: 2px 8px; | |
| color: var(--primary-color); | |
| background: none; | |
| border: none; | |
| border-radius: 4px; | |
| } | |
| x-button[skin="recessed"][disabled] { | |
| opacity: 0.3; | |
| } | |
| x-button[skin="recessed"]:hover { | |
| background: rgba(0, 0, 0, 0.07); | |
| } | |
| x-button[skin="recessed"][toggled] { | |
| color: rgba(255, 255, 255, 0.95); | |
| background: #959595; | |
| } | |
| x-button[skin="recessed"][pressed] { | |
| color: rgba(255, 255, 255, 0.95); | |
| background: #787878; | |
| } | |
| x-button[skin="recessed"] x-label { | |
| font-size: 12px; | |
| font-weight: 700; | |
| text-align: center; | |
| } | |
| x-buttons > x-button[skin="recessed"] { | |
| border-radius: 4px !important; | |
| } | |
| x-buttons > x-button + x-button[skin="recessed"] { | |
| margin-left: 4px; | |
| } | |
| x-buttons > x-box[vertical] > x-button + x-button[skin="recessed"] { | |
| margin-top: 4px; | |
| } | |
| /* @skin "nav" */ | |
| x-button[skin="nav"] { | |
| padding: 8px 15px; | |
| color: #4a4a4a; | |
| background: none; | |
| border: none; | |
| border-radius: 0; | |
| cursor: default; | |
| } | |
| x-button[skin="nav"][toggled] { | |
| background: rgba(0, 0, 0, 0.14); | |
| } | |
| x-button[skin="nav"][pressed] { | |
| background: rgba(0, 0, 0, 0.14); | |
| color: #4a4a4a; | |
| } | |
| x-button[skin="nav"][toggled][pressed] { | |
| background: rgba(0, 0, 0, 0.2); | |
| } | |
| x-button[skin="nav"] x-icon { | |
| width: 24px; | |
| height: 24px; | |
| opacity: 0.9; | |
| margin-right: 12px; | |
| } | |
| x-button[skin="nav"] x-label { | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| font-weight: 500; | |
| font-size: 13px; | |
| text-align: start; | |
| } | |
| /* @skin "dock" */ | |
| x-button[skin="dock"] { | |
| width: 38px; | |
| height: 38px; | |
| min-height: 38px; | |
| padding: 0; | |
| border-radius: 0; | |
| border: 1px solid rgb(173, 173, 173); | |
| } | |
| x-button[skin="dock"][toggled] { | |
| border-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 20%)); | |
| background: hsl(var(--accent-color-h), var(--accent-color-s), var(--accent-color-l)); | |
| } | |
| x-button[skin="dock"][pressed] { | |
| border-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 30%)); | |
| background: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 7%)); | |
| } | |
| x-buttons > x-box[vertical] > x-button[skin="dock"] { | |
| width: 38px; | |
| justify-content: center; | |
| } | |
| x-buttons > x-box[vertical] > x-button[skin="dock"][toggled] + x-button { | |
| border-top-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 20%)); | |
| } | |
| x-buttons > x-box[vertical] > x-button[skin="dock"][pressed] + x-button { | |
| border-top-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 30%)); | |
| } | |
| x-buttons > x-button[skin="dock"][toggled] + x-button { | |
| border-left-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 20%)); | |
| } | |
| x-buttons > x-button[skin="dock"][pressed] + x-button { | |
| border-left-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 30%)); | |
| } | |
| /* @skin "help" */ | |
| x-button[skin="help"] { | |
| width: 22px; | |
| height: 22px; | |
| min-height: 22px; | |
| padding: 0; | |
| color: hsl(var(--accent-color-h), var(--accent-color-s), var(--accent-color-l)); | |
| background: white; | |
| border-color: rgba(0, 0, 0, 0.25); | |
| border-radius: 999px; | |
| } | |
| x-button[skin="help"][pressed], | |
| x-button[skin="help"][expanded] { | |
| background: #F7F7F7; | |
| } | |
| x-button[skin="help"] > x-icon { | |
| width: 13px; | |
| height: 13px; | |
| } | |
| /* @skin "disclosure" */ | |
| x-button[skin="disclosure"] { | |
| padding: 0px 4px; | |
| color: rgba(0, 0, 0, 0.9); | |
| background: none; | |
| border: none; | |
| } | |
| x-button[skin="disclosure"][disabled] { | |
| opacity: 0.3; | |
| } | |
| x-button[skin="disclosure"][toggled] { | |
| color: rgba(0, 0, 0, 0.9); | |
| background: none; | |
| } | |
| x-button[skin="disclosure"] x-icon { | |
| width: 11px; | |
| height: 11px; | |
| margin-right: 4px; | |
| color: #8C8C8C; | |
| transform: rotate(-90deg); | |
| transition: transform 0.1s linear; | |
| } | |
| x-button[skin="disclosure"][toggled] x-icon { | |
| color: #8C8C8C; | |
| transform: rotate(0deg); | |
| } | |
| x-button[skin="disclosure"][pressed] x-icon { | |
| color: rgba(0, 0, 0, 0.5); | |
| } | |
| x-button[skin="disclosure"] x-label { | |
| font-size: 12px; | |
| } | |
| /* @skin "disclosure-bordered" */ | |
| x-button[skin="disclosure-bordered"] { | |
| padding: 0; | |
| width: 21px; | |
| height: 21px; | |
| min-height: 21px; | |
| } | |
| x-button[skin="disclosure-bordered"][toggled] { | |
| color: var(--primary-color); | |
| background: #ffffff; | |
| border-color: #ACACAC; | |
| } | |
| x-button[skin="disclosure-bordered"][pressed] { | |
| color: var(--primary-color); | |
| background: #F0F0F0; | |
| border-color: #ACACAC; | |
| } | |
| x-button[skin="disclosure-bordered"] > x-icon { | |
| width: 9px; | |
| height: 8px; | |
| transition: transform 0.15s ease-in-out; | |
| } | |
| x-button[skin="disclosure-bordered"][toggled] > x-icon { | |
| transform: rotate(-180deg); | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Tabs | |
| */ | |
| x-tabs { | |
| width: fit-content; | |
| max-width: 100%; | |
| color: #262626; | |
| } | |
| x-tab { | |
| padding: 2px 12px; | |
| min-height: 23px; | |
| box-sizing: border-box; | |
| border: 1px solid #ACACAC; | |
| border-radius: 4px; | |
| background: #ffffff; | |
| font-size: 14px; | |
| --selection-indicator-height: 0; | |
| } | |
| x-tab:focus { | |
| box-shadow: 0 0 0px 3px hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 20%)); | |
| z-index: 1; | |
| } | |
| x-tab:not(:first-of-type) { | |
| border-top-left-radius: 0; | |
| border-bottom-left-radius: 0; | |
| } | |
| x-tab:not(:last-of-type) { | |
| border-right: none; | |
| border-top-right-radius: 0; | |
| border-bottom-right-radius: 0; | |
| } | |
| x-tab[expanded] { | |
| background: #F0F0F0; | |
| } | |
| x-tab[selected] { | |
| color: rgba(255, 255, 255, 0.9); | |
| border-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 8%)); | |
| background: linear-gradient(to bottom, | |
| hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 15%)), | |
| hsl(var(--accent-color-h), var(--accent-color-s), var(--accent-color-l)) | |
| ); | |
| } | |
| x-tab[selected] + x-tab { | |
| border-left-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 8%)); | |
| } | |
| x-tab[pressed] { | |
| background: #F0F0F0; | |
| } | |
| x-tab[selected][pressed] { | |
| border-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 12%)); | |
| background: linear-gradient(to bottom, | |
| hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 5%)), | |
| hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 7%)) | |
| ); | |
| } | |
| x-tab[selected][pressed] + x-tab { | |
| border-left-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 12%)); | |
| } | |
| x-tab > x-icon, | |
| x-tab > x-box > x-icon { | |
| color: inherit; | |
| width: 15px; | |
| height: 15px; | |
| min-width: 15px; | |
| } | |
| x-tab > x-label, | |
| x-tab > x-box > x-label { | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| line-height: 1.2; | |
| cursor: inherit; | |
| flex: 1; | |
| } | |
| x-tab > x-box[vertical] { | |
| align-items: center; | |
| } | |
| x-tab > x-box > * { | |
| margin: 0 6px 0 0; | |
| } | |
| x-tab > x-box > *:last-child { | |
| margin: 0; | |
| } | |
| x-tab > x-box[vertical] > * { | |
| margin: 0 0 2px 0; | |
| } | |
| x-tab > x-box[vertical] > *:last-child { | |
| margin: 0; | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Document tabs | |
| */ | |
| x-doctabs { | |
| background-image: linear-gradient(to bottom, #C4C2C4, #BFBEBF); | |
| background-repeat: no-repeat; | |
| background-position: center center; | |
| height: 25px; | |
| outline: 1px solid #9C9C9C; | |
| --open-button-width: 18px; | |
| --open-button-height: 18px; | |
| --open-button-margin: 0 4px; | |
| } | |
| x-doctab { | |
| outline: 1px solid #9C9C9C; | |
| background: #c1bfc1; | |
| border-bottom: none; | |
| max-width: 220px; | |
| padding: 0 18px; | |
| justify-content: center; | |
| align-items: center; | |
| --ripple-type: none; | |
| --selection-indicator-height: 0; | |
| --close-button-position: absolute; | |
| --close-button-width: 16px; | |
| --close-button-height: 16px; | |
| --close-button-left: 0px; | |
| --close-button-margin: 0 0 0 3px; | |
| --close-button-opacity: 0; | |
| } | |
| x-doctab[edited] { | |
| --close-button-opacity: 0.7; | |
| } | |
| x-doctab:hover { | |
| background: #B6B4B6; | |
| --close-button-opacity: 0.7; | |
| } | |
| x-doctab:focus { | |
| box-shadow: 0 0 0px 3px hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 20%)); | |
| z-index: 100; | |
| } | |
| x-doctab[selected] { | |
| background-image: linear-gradient(to bottom, #DCDADC, #D6D5D6); | |
| } | |
| x-doctab img, | |
| x-doctab x-icon { | |
| margin: 0 5px 0 0; | |
| width: 15px; | |
| height: 15px; | |
| min-width: 15px; | |
| } | |
| x-doctab x-label { | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| font-size: 12px; | |
| font-weight: 400; | |
| text-align: center; | |
| } | |
| x-doctab[selected] x-label, | |
| x-doctab:focus x-label { | |
| font-weight: 600; | |
| } | |
| x-doctab > * { | |
| opacity: 0.75; | |
| } | |
| x-doctab[selected] > *, | |
| x-doctab:focus > * { | |
| opacity: 1; | |
| } | |
| x-doctab[disabled] > * { | |
| opacity: 0.5; | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Menu | |
| */ | |
| x-menu { | |
| padding: 4px 0; | |
| border-radius: 4px; | |
| background: #F0F0F0; | |
| box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 22px; | |
| border: 1px solid rgba(0, 0, 0, 0.25); | |
| color: var(--text-color); | |
| --open-transition: none; | |
| } | |
| x-menu hr { | |
| border-color: rgba(0, 0, 0, 0.12); | |
| width: 100%; | |
| height: 1px; | |
| margin: 4px 0px; | |
| box-sizing: border-box; | |
| } | |
| x-menu hr + hr, | |
| x-menu hr:last-child { | |
| display: none; | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Menu item | |
| */ | |
| x-menuitem { | |
| padding: 4px 12px 4px 23px; | |
| min-height: 24px; | |
| color: #3E3E3E; | |
| --trigger-effect: blink; | |
| --checkmark-width: 18px; | |
| --checkmark-height: 18px; | |
| --checkmark-margin: 0 2px 0 -20px; | |
| --checkmark-d: path("M 44 61.2 L 29 47 L 21 55 L 45.53 79.613 L 79.031 26.397 L 70.063 20.387 L 44.052 61.152 Z"); | |
| } | |
| x-menuitem:focus, | |
| x-menuitem[expanded] { | |
| background: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 7%)); | |
| color: white; | |
| } | |
| x-menuitem img { | |
| width: 16px; | |
| height: 16px; | |
| } | |
| x-menuitem x-icon { | |
| width: 16px; | |
| height: 16px; | |
| } | |
| x-menuitem x-icon:not([name]) { | |
| display: none; | |
| } | |
| x-menuitem x-label { | |
| flex: 1; | |
| overflow: hidden; | |
| white-space: nowrap; | |
| text-overflow: ellipsis; | |
| font-size: 14px; | |
| } | |
| x-menuitem x-shortcut { | |
| margin-left: auto; | |
| } | |
| x-menuitem:focus > x-swatch, | |
| x-menuitem[expanded] > x-swatch { | |
| border-color: rgba(255, 255, 255, 0.65); | |
| } | |
| x-menuitem img + x-label, | |
| x-menuitem x-swatch + x-label, | |
| x-menuitem x-icon[name] + x-label, | |
| x-menuitem x-label + x-shortcut { | |
| margin-left: 8px; | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Menubar | |
| */ | |
| x-menubar { | |
| height: 28px; | |
| padding: 0 6px; | |
| background: linear-gradient(to bottom, #FAFAFA, #F0F0F0); | |
| border: 1px solid #B8B8B8; | |
| } | |
| x-menubar > x-menuitem { | |
| padding: 0 11px; | |
| height: 100%; | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Dialog | |
| */ | |
| x-dialog { | |
| background: #EFEFEF; | |
| box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 22px; | |
| --backdrop-color: rgba(0, 0, 0, 0); | |
| --origin: top; | |
| } | |
| x-dialog main { | |
| padding: 20px 24px 0px; | |
| font-size: 13px; | |
| line-height: 1.6; | |
| } | |
| x-dialog > footer { | |
| padding: 12px; | |
| display: flex; | |
| flex-flow: row; | |
| justify-content: flex-end; | |
| margin-top: auto; | |
| } | |
| x-dialog > footer x-button { | |
| margin-left: 8px; | |
| } | |
| x-dialog h3 { | |
| font-size: 15px; | |
| font-weight: 700; | |
| color: rgba(0, 0, 0, 0.95); | |
| margin-top: 0; | |
| margin-bottom: 10px; | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Drawer | |
| */ | |
| x-drawer { | |
| background: #EFEFEF; | |
| box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 22px; | |
| outline: 1px solid rgba(0, 0, 0, 0.14); | |
| --backdrop-color: rgba(0, 0, 0, 0); | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Popover | |
| */ | |
| x-popover { | |
| color: var(--text-color); | |
| background: #F0F0F0; | |
| border: 1px solid rgba(0, 0, 0, 0.25); | |
| border-radius: 4px; | |
| box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 22px; | |
| --open-transition: none; | |
| } | |
| x-popover > main { | |
| width: 100%; | |
| padding: 10px; | |
| overflow: auto; | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Checkbox | |
| */ | |
| x-checkbox { | |
| width: 15px; | |
| height: 15px; | |
| margin: 0 6px 0 0; | |
| color: rgba(0, 0, 0, 0.5); | |
| background: white; | |
| border: 1px solid #A5A5A5; | |
| border-radius: 2px; | |
| transition: color 0.1s cubic-bezier(0.4, 0, 0.2, 1); | |
| } | |
| x-checkbox:active { | |
| background: rgba(0, 0, 0, 0.03); | |
| } | |
| x-checkbox:focus { | |
| box-shadow: 0 0 0px 3px hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 20%)); | |
| } | |
| x-checkbox[toggled] { | |
| color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 3%)); | |
| border: 2px solid currentColor; | |
| } | |
| x-checkbox[toggled]:active { | |
| color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 5%)); | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Radio | |
| */ | |
| x-radio { | |
| width: 16px; | |
| height: 16px; | |
| background: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 3%)); | |
| border: 1px solid rgb(184, 184, 184); | |
| --dot-transform: scale(1); | |
| --dot-color: white; | |
| --dot-box-shadow: none; | |
| } | |
| x-radio:active { | |
| --dot-color: #f3f3f3; | |
| } | |
| x-radio:focus { | |
| box-shadow: 0 0 0px 3px hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 20%)); | |
| } | |
| x-radio[toggled] { | |
| background: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 3%)); | |
| border-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 3%)); | |
| --dot-transform: scale(0.4); | |
| --dot-box-shadow: rgba(0, 0, 0, 0.4) 1px 3px 7px; | |
| } | |
| x-radio[toggled]:active { | |
| background: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 5%)); | |
| --dot-color: white; | |
| } | |
| x-radio + x-label { | |
| margin-left: 4px; | |
| padding: 5px 0; | |
| font-size: 13px; | |
| font-weight: 500; | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Switch | |
| */ | |
| x-switch { | |
| width: 34px; | |
| height: 15px; | |
| box-shadow: 0 0 0px 2px #b3b3b3; | |
| border-radius: 999px; | |
| --focus-ring-width: 3px; | |
| --focus-ring-opacity: 1; | |
| --focus-ring-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 20%)); | |
| --focus-ring-transition-duration: 0; | |
| --thumb-color: white; | |
| --thumb-size: 15px; | |
| --track-height: 100%; | |
| --track-opacity: 1; | |
| --track-color: #b3b3b3; | |
| } | |
| x-switch[toggled] { | |
| box-shadow: 0 0 0px 2px hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 3%)); | |
| --track-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 7%)); | |
| } | |
| /* @skin "big" */ | |
| x-switch[skin="big"] { | |
| width: 42px; | |
| height: 24px; | |
| --thumb-size: 20px; | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Select | |
| */ | |
| x-select { | |
| background: #ffffff; | |
| border: 1px solid #ACACAC; | |
| border-radius: 4px; | |
| color: #262626; | |
| padding: 0 0 0 9px; | |
| height: 24px; | |
| position: relative; | |
| font-size: 14px; | |
| --arrow-color: white; | |
| } | |
| x-select[disabled] { | |
| opacity: 0.4; | |
| } | |
| x-select:focus { | |
| box-shadow: 0 0 0px 3px hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 20%)); | |
| } | |
| x-select::before { | |
| content: ""; | |
| display: block; | |
| width: 20px; | |
| height: calc(100% + 2px); | |
| position: absolute; | |
| top: -1px; | |
| right: -1px; | |
| background: linear-gradient(to bottom, | |
| hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 15%)), | |
| hsl(var(--accent-color-h), var(--accent-color-s), var(--accent-color-l)) | |
| ); | |
| border: 1px solid hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 8%)); | |
| border-radius: 0 4px 4px 0; | |
| box-sizing: border-box; | |
| } | |
| x-select x-swatch { | |
| width: 18px; | |
| height: 18px; | |
| } | |
| /* Textured skin */ | |
| x-select[skin="textured"] { | |
| color: #737373; | |
| background-image: linear-gradient(to bottom, #FCFCFC, #F1F1F1); | |
| border-color: rgba(0, 0, 0, 0.25); | |
| --arrow-color: currentColor; | |
| --arrow-margin: 0 5px 0 7px; | |
| } | |
| x-select[skin="textured"]::before { | |
| display: none; | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Input | |
| */ | |
| x-input { | |
| border: 1px solid #BFBFBF; | |
| font-size: 12px; | |
| --inner-padding: 0 5px; | |
| --selection-background: inherit; | |
| } | |
| x-input:focus { | |
| outline: 3px solid hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 20%)); | |
| border-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 3%)); | |
| } | |
| x-input[invalid] { | |
| border-color: #d50000; | |
| outline: 3px solid rgba(255, 0, 0, 0.49); | |
| } | |
| x-input + x-input { | |
| margin-top: 20px; | |
| } | |
| /* Icon */ | |
| x-input > x-icon { | |
| width: 15px; | |
| height: 15px; | |
| min-width: 15px; | |
| margin: 0 0 0 5px; | |
| color: #565656; | |
| } | |
| x-input > x-icon:hover { | |
| cursor: default; | |
| } | |
| /* Placehodler */ | |
| x-input > x-label { | |
| display: none; | |
| position: absolute; | |
| top: 50%; | |
| max-width: 100%; | |
| padding: 0 5px 0 5px; | |
| transform: translateY(-50%); | |
| color: rgba(0, 0, 0, 0.4); | |
| font-family: inherit; | |
| font-size: inherit; | |
| line-height: inherit; | |
| white-space: nowrap; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| pointer-events: none; | |
| } | |
| x-input[empty] > x-label { | |
| display: block; | |
| } | |
| x-input > x-icon + x-label { | |
| padding: 0 5px 0 25px; | |
| } | |
| /* @skin "textured" */ | |
| x-input[skin="textured"] { | |
| height: 24px; | |
| color: #737373; | |
| background-image: linear-gradient(to bottom, #FCFCFC, #F1F1F1); | |
| border-color: rgba(0, 0, 0, 0.25); | |
| border-radius: 4px; | |
| } | |
| x-input[skin="textured"]:focus { | |
| border-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 3%)); | |
| box-shadow: 0 0 0px 3px hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 20%)); | |
| outline: none; | |
| } | |
| x-input[skin="textured"][invalid] { | |
| border-color: #d50000; | |
| box-shadow: 0 0 0px 3px rgba(255, 0, 0, 0.49); | |
| outline: none; | |
| } | |
| x-input[skin="textured"] > x-icon { | |
| color: #767676; | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Number input | |
| */ | |
| x-numberinput { | |
| background: white; | |
| border: 1px solid #BFBFBF; | |
| font-size: 12px; | |
| --inner-padding: 0 5px; | |
| --selection-background: inherit; | |
| } | |
| x-numberinput:focus { | |
| outline: 3px solid hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 20%)); | |
| border-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 3%)); | |
| z-index: 10; | |
| } | |
| x-numberinput[invalid] { | |
| border-color: #d50000; | |
| outline: 3px solid rgba(255, 0, 0, 0.49); | |
| } | |
| x-numberinput > x-stepper { | |
| margin-right: -20px; | |
| margin-left: 5px; | |
| } | |
| x-numberinput > x-label { | |
| display: none; | |
| position: absolute; | |
| width: 100%; | |
| height: 20px; | |
| bottom: 6px; | |
| top: 50%; | |
| left: 0; | |
| padding: 0 5px; | |
| transform: translateY(-50%); | |
| line-height: 1.8; | |
| color: rgba(0, 0, 0, 0.4); | |
| pointer-events: none; | |
| font-family: inherit; | |
| font-size: inherit; | |
| } | |
| x-numberinput[empty] > x-label { | |
| display: block; | |
| } | |
| /* @skin "condensed" */ | |
| x-numberinput[skin="condensed"] > x-stepper { | |
| border-radius: 0; | |
| margin: 0; | |
| height: 100%; | |
| display: flex; | |
| } | |
| x-numberinput[skin="condensed"]:focus > x-stepper { | |
| display: none; | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Tag input | |
| */ | |
| x-taginput { | |
| background: white; | |
| border: 1px solid #BFBFBF; | |
| --selection-background: inherit; | |
| } | |
| x-taginput:focus { | |
| outline: 3px solid hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 20%)); | |
| border-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 3%)); | |
| z-index: 10; | |
| } | |
| x-taginput[invalid] { | |
| border-color: #d50000; | |
| outline: 3px solid rgba(255, 0, 0, 0.49); | |
| } | |
| x-taginput > x-label { | |
| align-self: center; | |
| margin-left: -8px; | |
| color: rgba(0, 0, 0, 0.4); | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Textarea | |
| */ | |
| x-textarea { | |
| border: 1px solid #BFBFBF; | |
| font-size: 12px; | |
| --inner-padding: 2px 5px; | |
| --selection-background: inherit; | |
| } | |
| x-textarea:focus { | |
| outline: 3px solid hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 20%)); | |
| border-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 3%)); | |
| z-index: 10; | |
| } | |
| x-textarea[invalid] { | |
| border-color: #d50000; | |
| outline: 3px solid rgba(255, 0, 0, 0.49); | |
| } | |
| x-textarea > x-label { | |
| display: none; | |
| position: absolute; | |
| width: 100%; | |
| top: 0; | |
| left: 0; | |
| padding: var(--inner-padding); | |
| color: rgba(0, 0, 0, 0.4); | |
| font-family: inherit; | |
| font-size: inherit; | |
| line-height: inherit; | |
| pointer-events: none; | |
| } | |
| x-textarea[empty] > x-label { | |
| display: block; | |
| } | |
| /* @skin "textured" */ | |
| x-textarea[skin="textured"] { | |
| height: 24px; | |
| color: #737373; | |
| background-image: linear-gradient(to bottom, #FCFCFC, #F1F1F1); | |
| border-color: rgba(0, 0, 0, 0.25); | |
| border-radius: 4px; | |
| } | |
| x-textarea[skin="textured"]:focus { | |
| outline: none; | |
| box-shadow: 0 0 0px 3px hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 20%)); | |
| border-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) - 3%)); | |
| } | |
| x-textarea[skin="textured"][invalid] { | |
| border-color: #d50000; | |
| box-shadow: 0 0 0px 3px rgba(255, 0, 0, 0.49); | |
| outline: none; | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Slider | |
| */ | |
| x-slider { | |
| --thumb-width: 17px; | |
| --thumb-height: 17px; | |
| --thumb-color: white; | |
| --focus-ring-width: 6px; | |
| --focus-ring-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 20%)); | |
| --focus-ring-transition-duration: 0; | |
| --track-height: 3px; | |
| --track-color: #B0B0B0; | |
| --track-tint-color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 7%)); | |
| } | |
| x-slider:active { | |
| --thumb-color: #F1F5F5; | |
| } | |
| x-slider > x-label { | |
| font-size: 11px; | |
| } | |
| /* @skin "arrow" */ | |
| x-slider[skin="arrow"] { | |
| --track-tint-color: #B0B0B0; | |
| --thumb-d: path("M 0 0 L 100 0 L 100 55 L 50 100 L 0 55 Z"); | |
| --thumb-width: 16px; | |
| --thumb-height: 20px; | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Progressbar | |
| */ | |
| x-progressbar { | |
| height: 6px; | |
| background: #DBDBDB; | |
| box-shadow: inset 0px 0px 0px 1px #C0C0C0; | |
| border-radius: 5px; | |
| --bar-background: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 7%)); | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Throbber | |
| */ | |
| x-throbber[type="ring"] { | |
| color: hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 0%)); | |
| } | |
| /*****************************************************************************************************************/ | |
| /** | |
| * Demo site | |
| */ | |
| xel-codeview { | |
| font-family: "Menlo", "Andale Mono", monospace; | |
| background: white; | |
| border: 1px solid #d0d0d0; | |
| --selection-background: inherit; | |
| } | |
| /* Sidebar */ | |
| :host(xel-app) #sidebar { | |
| background: #f5f5f5; | |
| } | |
| :host(xel-app) #sidebar #header { | |
| background: rgba(0, 0, 0, 0.03); | |
| } | |
| :host(xel-app) #sidebar h1 { | |
| color: rgba(0, 0, 0, 0.5); | |
| } | |
| :host(xel-app) #nav { | |
| box-sizing: border-box; | |
| padding: 0 30px; | |
| } | |
| :host(xel-app) #nav section { | |
| margin: 15px 0; | |
| } | |
| :host(xel-app) #nav h3 { | |
| opacity: 0.4; | |
| margin: 12px 0 6px -6px; | |
| padding: 0; | |
| font-size: 13px; | |
| font-weight: 700; | |
| user-select: none; | |
| cursor: default; | |
| } | |
| :host(xel-app) #nav hr { | |
| margin: 0 0 0 -30px; | |
| width: calc(100% + 60px); | |
| } | |
| :host(xel-app) #sidebar #nav .external-link-icon { | |
| color: hsl(var(--accent-color-h), var(--accent-color-s), var(--accent-color-l)); | |
| } | |
| /* About view */ | |
| :host(xel-app) #about-view { | |
| background: linear-gradient(to bottom, | |
| hsl(var(--accent-color-h), var(--accent-color-s), calc(var(--accent-color-l) + 15%)), | |
| hsl(var(--accent-color-h), var(--accent-color-s), var(--accent-color-l)) | |
| ); | |
| } | |
| /* Setup view */ | |
| :host(xel-app) #setup-view h3 x-icon { | |
| color: hsl(var(--accent-color-h), var(--accent-color-s), var(--accent-color-l)); | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment