You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 line
58 KiB
Plaintext
1 line
58 KiB
Plaintext
{"version":3,"sources":["../gui/index.scss","../gui/_global.scss","../gui/_balloon.scss","../gui/_button.scss","../gui/_checkbox.scss","../gui/_collapse.scss","../gui/_combobox.scss","../gui/_dropdown.scss","../gui/_groupbox.scss","../gui/_listbox.scss","../gui/_menu.scss","../gui/_progressbar.scss","../gui/_radiobutton.scss","../gui/_searchbox.scss","../gui/_slider.scss","../gui/_spinner.scss","../gui/_tabs.scss","../gui/_textbox.scss","../gui/_treeview.scss","../gui/_typography.scss","../gui/_window.scss"],"names":[],"mappings":"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","file":"7.scoped.css","sourcesContent":["/*! 7.css v0.12.0 - https://khang-nd.github.io/7.css */\n/**\r\n * Core 7.css\r\n * Based on XP GUI.css by Adam Hammad <adamham.dev>\r\n * https://github.com/khang-nd/7.css/blob/main/LICENSE\r\n */\r\n\r\n@import \"_variables.scss\";\r\n@import \"_global.scss\";\r\n@import \"_balloon.scss\";\r\n@import \"_button.scss\";\r\n@import \"_checkbox.scss\";\r\n@import \"_collapse.scss\";\r\n@import \"_combobox.scss\";\r\n@import \"_dropdown.scss\";\r\n@import \"_groupbox.scss\";\r\n@import \"_listbox.scss\";\r\n@import \"_menu.scss\";\r\n@import \"_progressbar.scss\";\r\n@import \"_radiobutton.scss\";\r\n@import \"_searchbox.scss\";\r\n@import \"_slider.scss\";\r\n@import \"_spinner.scss\";\r\n@import \"_tabs.scss\";\r\n@import \"_textbox.scss\";\r\n@import \"_treeview.scss\";\r\n@import \"_typography.scss\";\r\n@import \"_window.scss\";\r\n",":root {\r\n --scrollbar-y: linear-gradient(to right, #e5e5e5, var(--surface) 20%);\r\n --scrollbar-x: linear-gradient(to bottom, #e5e5e5, var(--surface) 20%);\r\n}\r\n\r\nbody {\r\n font-family: Arial;\r\n font-size: 12px;\r\n color: #222222;\r\n}\r\n\r\n.surface {\r\n background: var(--surface);\r\n}\r\n\r\nh1 {\r\n font-size: 5rem;\r\n}\r\n\r\nh2 {\r\n font-size: 2.5rem;\r\n}\r\n\r\nh3 {\r\n font-size: 2rem;\r\n}\r\n\r\nh4 {\r\n font-size: 1.5rem;\r\n}\r\n\r\nu {\r\n text-decoration: none;\r\n border-bottom: 0.5px solid #222222;\r\n}\r\n\r\ncode {\r\n &,\r\n * {\r\n font-family: monospace;\r\n }\r\n}\r\n\r\npre {\r\n display: block;\r\n margin: 0;\r\n padding: 12px 8px;\r\n background: #fff;\r\n border: 1px solid var(--button-border-color);\r\n}\r\n\r\nsummary {\r\n &:focus {\r\n outline: 1px dotted #000000;\r\n }\r\n}\r\n\r\n::-webkit-scrollbar {\r\n width: 16px;\r\n\r\n &:horizontal {\r\n height: 17px;\r\n }\r\n\r\n &-corner {\r\n background: var(--button-face);\r\n }\r\n \r\n &-track {\r\n &:vertical {\r\n background: var(--scrollbar-y);\r\n }\r\n \r\n &:horizontal {\r\n background: var(--scrollbar-x);\r\n }\r\n }\r\n\r\n &-thumb {\r\n border: var(--button-border);\r\n border-color: var(--button-border-color);\r\n border-radius: var(--border-radius);\r\n box-shadow: var(--button-shadow);\r\n background-color: var(--button-face);\r\n \r\n &:vertical {\r\n background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC\")\r\n no-repeat center,\r\n linear-gradient(\r\n to right,\r\n var(--button-face) 45%,\r\n var(--button-shade-light) 45%,\r\n var(--button-shade-dark)\r\n );\r\n }\r\n \r\n &:horizontal {\r\n background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC\")\r\n no-repeat center,\r\n linear-gradient(\r\n to bottom,\r\n var(--button-face) 45%,\r\n var(--button-shade-light) 45%,\r\n var(--button-shade-dark)\r\n );\r\n }\r\n\r\n &:hover {\r\n &:vertical {\r\n border-color: var(--button-border-color-hovered);\r\n background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC\")\r\n no-repeat center,\r\n linear-gradient(\r\n to right,\r\n var(--button-face-hover) 45%,\r\n var(--button-shade-light-hovered) 45%\r\n );\r\n }\r\n \r\n &:horizontal {\r\n border-color: var(--button-border-color-hovered);\r\n background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC\")\r\n no-repeat center,\r\n linear-gradient(\r\n to bottom,\r\n var(--button-face-hover) 45%,\r\n var(--button-shade-light-hovered) 45%\r\n );\r\n }\r\n }\r\n\r\n &:active {\r\n &:vertical {\r\n border-color: var(--button-border-color-active);\r\n background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAKCAIAAADpZ+PpAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADrSURBVChTTc5LboJQGAXguyoCu4ERCzAGlRk7UOwGWIDh0s4M4kxb06RSq/jAB6AxJkJ4lTDrue3AnvyzP+fLId+/yfM8juP7PQmCCOf7B3e+ZD+O40RRVFW12VQUpd3r9U3T2m4OpKoqWZYNwzBZLEqfh0N7NnvfrPcEWlEUWZb9mWF4Ph6D0ylcLbfM5HkeJrhGA2hb15/QXnv+w7RYXsDatjOdvnmrHSnLEizMNE2v11sUXQBCnn98kbquBUGQJAlmq9WB2e3qg4HJdqKkaRql1HGc0WgMcDJ5dd0F24kediZJ8t/ELT69H+8py0CYSIO5AAAAAElFTkSuQmCC\")\r\n no-repeat center,\r\n linear-gradient(\r\n to right,\r\n var(--button-face-active) 45%,\r\n var(--button-shade-light-active) 45%\r\n );\r\n }\r\n \r\n &:horizontal {\r\n border-color: var(--button-border-color-active);\r\n background: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAJCAYAAAALpr0TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAADcSURBVChTNZBLqoUwEEQrURQUxZGCvy24ACfiityJi7tv8GauQoPxk5tquA2RQ9vVVYk6z9NZaxFFEe77htYazjk8z4MwDIVZ+rourOuKaZrwvi+WZcE8z1BKCbPPCjk4DAO2bRP1OI7wLiL6Mbd7J408z1GWpQwWRYGqqiQG+03TgMu0MacfUN4qANmn8UOv9MjW3sKaSm7iIdOSlziOQ3LScd93aPonSYK6riVLlmVo21aYfVqzND9pmqLrOlGT+76XbcxLZkb19/l3fEP+oF0cx8KMEASBsDEGX2/CgZCHkg+8AAAAAElFTkSuQmCC\")\r\n no-repeat center,\r\n linear-gradient(\r\n to bottom,\r\n var(--button-face-active) 45%,\r\n var(--button-shade-light-active) 45%\r\n );\r\n }\r\n }\r\n }\r\n \r\n &-button:horizontal:start:decrement,\r\n &-button:horizontal:end:increment,\r\n &-button:vertical:start:decrement,\r\n &-button:vertical:end:increment {\r\n display: block;\r\n }\r\n\r\n &-button {\r\n /* Add an invisible border to prevent shifting\r\n when hovering the scrollbar buttons */\r\n border: var(--button-border);\r\n border-color: #0000;\r\n\r\n &:vertical {\r\n height: 17px;\r\n\r\n &:start {\r\n background: url(\"./icon/button-up.svg\"), var(--scrollbar-y);\r\n }\r\n\r\n &:end {\r\n background: url(\"./icon/button-down.svg\"), var(--scrollbar-y);\r\n }\r\n }\r\n\r\n &:horizontal {\r\n width: 16px;\r\n\r\n &:start {\r\n background: url(\"./icon/button-left.svg\"), var(--scrollbar-x);\r\n }\r\n\r\n &:end {\r\n background: url(\"./icon/button-right.svg\"), var(--scrollbar-x);\r\n }\r\n }\r\n\r\n &:hover {\r\n border: var(--button-border);\r\n border-color: var(--button-border-color);\r\n border-radius: var(--border-radius);\r\n box-shadow: var(--button-shadow);\r\n background-color: var(--button-face);\r\n \r\n &:vertical {\r\n height: 17px;\r\n \r\n &:start {\r\n border-color: var(--button-border-color-hovered);\r\n background: url(\"./icon/button-up.svg\"),\r\n linear-gradient(\r\n to right,\r\n var(--button-face-hover) 45%,\r\n var(--button-shade-light-hovered) 45%\r\n );\r\n }\r\n \r\n &:end {\r\n border-color: var(--button-border-color-hovered);\r\n background: url(\"./icon/button-down.svg\"),\r\n linear-gradient(\r\n to right,\r\n var(--button-face-hover) 45%,\r\n var(--button-shade-light-hovered) 45%\r\n );\r\n }\r\n }\r\n \r\n &:horizontal {\r\n width: 16px;\r\n \r\n &:start {\r\n border-color: var(--button-border-color-hovered);\r\n background: url(\"./icon/button-left.svg\"),\r\n linear-gradient(\r\n to bottom,\r\n var(--button-face-hover) 45%,\r\n var(--button-shade-light-hovered) 45%\r\n );\r\n }\r\n \r\n &:end {\r\n border-color: var(--button-border-color-hovered);\r\n background: url(\"./icon/button-right.svg\"),\r\n linear-gradient(\r\n to bottom,\r\n var(--button-face-hover) 45%,\r\n var(--button-shade-light-hovered) 45%\r\n );\r\n }\r\n }\r\n }\r\n\r\n &:active {\r\n border: var(--button-border);\r\n border-color: var(--button-border-color);\r\n border-radius: var(--border-radius);\r\n box-shadow: var(--button-shadow);\r\n background-color: var(--button-face);\r\n \r\n &:vertical {\r\n height: 17px;\r\n \r\n &:start {\r\n border-color: var(--button-border-color-active);\r\n background: url(\"./icon/button-up.svg\"),\r\n linear-gradient(\r\n to right,\r\n var(--button-face-active) 45%,\r\n var(--button-shade-light-active) 45%\r\n );\r\n }\r\n \r\n &:end {\r\n border-color: var(--button-border-color-active);\r\n background: url(\"./icon/button-down.svg\"),\r\n linear-gradient(\r\n to right,\r\n var(--button-face-active) 45%,\r\n var(--button-shade-light-active) 45%\r\n );\r\n }\r\n }\r\n \r\n &:horizontal {\r\n width: 16px;\r\n \r\n &:start {\r\n border-color: var(--button-border-color-active);\r\n background: url(\"./icon/button-left.svg\"),\r\n linear-gradient(\r\n to bottom,\r\n var(--button-face-active) 45%,\r\n var(--button-shade-light-active) 45%\r\n );\r\n }\r\n \r\n &:end {\r\n border-color: var(--button-border-color-active);\r\n background: url(\"./icon/button-right.svg\"),\r\n linear-gradient(\r\n to bottom,\r\n var(--button-face-active) 45%,\r\n var(--button-shade-light-active) 45%\r\n );\r\n }\r\n }\r\n }\r\n }\r\n}\r\n",":root {\r\n --balloon-border-color: rgba(0, 0, 0, 0.4);\r\n --balloon-tail-top: url(\"data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 1.5V19.5H18.5L0.5 1.5Z' fill='%23fff' stroke='%23fff'/%3E%3Cpath d='M1 19.5H0.5V1.5L18.5 19.5H18' stroke='%23939393'/%3E%3C/svg%3E\");\r\n --balloon-tail-bottom: url(\"data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.5 1.5V19.5H18.5L0.5 1.5Z' fill='%23ddd' stroke='%23ddd'/%3E%3Cpath d='M1 19.5H0.5V1.5L18.5 19.5H18' stroke='%23939393'/%3E%3C/svg%3E\");\r\n --balloon-tail-size: 18px;\r\n --balloon-tail-offset: 1em;\r\n}\r\n\r\n[role=\"tooltip\"] {\r\n position: relative;\r\n padding: 1em 1em 1em 2.5em;\r\n border: 1px solid var(--balloon-border-color);\r\n border-radius: var(--border-radius);\r\n box-shadow: 5px 5px 3px -3px var(--balloon-border-color);\r\n background: linear-gradient(to bottom, #fff, var(--button-shade-light));\r\n\r\n &::before {\r\n content: \"\";\r\n position: absolute;\r\n background: var(--balloon-tail-top);\r\n width: var(--balloon-tail-size);\r\n height: var(--balloon-tail-size);\r\n top: -var(--balloon-tail-size);\r\n left: var(--balloon-tail-offset);\r\n }\r\n\r\n &[id] {\r\n position: absolute;\r\n }\r\n\r\n &.is-top {\r\n &::before {\r\n background: var(--balloon-tail-bottom);\r\n bottom: -var(--balloon-tail-size);\r\n top: unset;\r\n transform: scale(-1);\r\n }\r\n\r\n &.is-right {\r\n &::before {\r\n transform: scaleY(-1);\r\n }\r\n }\r\n }\r\n\r\n &.is-left {\r\n &::before {\r\n left: unset;\r\n right: var(--balloon-tail-offset);\r\n }\r\n\r\n &.is-bottom {\r\n &::before {\r\n transform: scaleX(-1);\r\n }\r\n }\r\n }\r\n}\r\n","button,\r\n[role=\"button\"] {\r\n font: var(--font);\r\n box-sizing: border-box;\r\n border: var(--button-border);\r\n border-color: var(--button-border-color);\r\n border-radius: var(--border-radius);\r\n box-shadow: var(--button-shadow);\r\n color: #222;\r\n min-width: 75px;\r\n min-height: 23px;\r\n padding: 0 12px;\r\n text-align: center;\r\n background: var(--button-gradient);\r\n\r\n &:disabled {\r\n background: var(--button-face-disabled);\r\n border-color: var(--button-border-color-disabled);\r\n color: var(--button-text-color-disabled);\r\n }\r\n\r\n &:not(:disabled) {\r\n &:hover {\r\n border-color: var(--button-border-color-hovered);\r\n background: var(--button-gradient-hovered);\r\n }\r\n\r\n &:active,\r\n &.active {\r\n box-shadow: none;\r\n border-color: var(--button-border-color-active);\r\n background: var(--button-gradient-active);\r\n }\r\n }\r\n\r\n &:focus,\r\n &.focused {\r\n box-shadow: inset 0 0 0 2px var(--button-shade-light-active);\r\n outline: 1px dotted #000000;\r\n outline-offset: -4px;\r\n }\r\n\r\n &.default {\r\n box-shadow: inset 0 0 0 1px #34deff;\r\n border-color: var(--button-border-color-default);\r\n background: linear-gradient(\r\n to bottom,\r\n var(--button-face) 45%,\r\n var(--button-shade-light-default) 45%\r\n );\r\n }\r\n}\r\n",":root {\r\n --checkbox-width: 14px;\r\n --checkbox-label-spacing: 6px;\r\n --checkbox-total-width-precalc: 0;\r\n --checkbox-total-width: calc(var(--checkbox-total-width-precalc));\r\n --checkmark-top: 0;\r\n --checkmark-left: 2px;\r\n}\r\n\r\ninput[type=\"checkbox\"] {\r\n appearance: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n font: var(--font);\r\n background: none;\r\n border: none;\r\n margin: 0;\r\n opacity: 0;\r\n\r\n + label {\r\n font: var(--font);\r\n display: inline-flex;\r\n align-items: center;\r\n position: relative;\r\n margin-left: var(--checkbox-total-width);\r\n\r\n &::before {\r\n content: \"\";\r\n display: inline-block;\r\n width: var(--checkbox-width);\r\n height: var(--checkbox-width);\r\n margin-right: var(--checkbox-label-spacing);\r\n background: #f6f6f6;\r\n border: 1px solid;\r\n border-color: var(--button-border-color);\r\n box-shadow: inset 0 0 0 1px #f4f4f4, inset 1px 1px 0 1px #aeaeae,\r\n inset -1px -1px 0 1px #ddd, inset 3px 3px 6px #ccc;\r\n box-sizing: border-box;\r\n transition: 0.4s;\r\n }\r\n\r\n &:hover::before {\r\n background: #e9f7fe;\r\n border-color: var(--button-border-color-hovered);\r\n box-shadow: inset 0 0 0 1px #def9fa, inset 1px 1px 0 1px #79c6f9,\r\n inset -1px -1px 0 1px #c6e9fc, inset 3px 3px 6px #b1dffd;\r\n }\r\n }\r\n\r\n &:focus {\r\n + label {\r\n outline: 1px dotted #000000;\r\n }\r\n }\r\n\r\n &:checked {\r\n + label {\r\n &::after {\r\n content: \"\\2714\";\r\n font-weight: bold;\r\n display: block;\r\n position: absolute;\r\n top: var(--checkmark-top);\r\n left: var(--checkmark-left);\r\n color: #4a5f97;\r\n }\r\n }\r\n }\r\n\r\n &:disabled {\r\n + label {\r\n opacity: 0.6;\r\n }\r\n }\r\n}\r\n",":root {\r\n --chevron-size: 5px;\r\n}\r\n\r\ndetails {\r\n margin-top: 0;\r\n\r\n > summary {\r\n display: inline;\r\n position: relative;\r\n margin-bottom: 0;\r\n cursor: pointer;\r\n\r\n &:before {\r\n content: \"\";\r\n position: absolute;\r\n top: calc(50% - var(--chevron-size));\r\n right: 100%;\r\n border: var(--chevron-size) solid transparent;\r\n border-left-color: #000;\r\n border-radius: 3px;\r\n }\r\n }\r\n\r\n &[open] {\r\n > summary {\r\n &:before {\r\n top: calc(50% - var(--chevron-size) / 2);\r\n transform: rotateZ(45deg);\r\n }\r\n }\r\n }\r\n}\r\n",":root {\r\n --combobox-chevron-size: 4px;\r\n}\r\n\r\n.combobox {\r\n position: relative;\r\n display: inline-block;\r\n\r\n input[type=\"text\"] {\r\n padding-right: 20px;\r\n width: 100%;\r\n }\r\n\r\n button {\r\n position: absolute;\r\n right: 0;\r\n padding: 0;\r\n min-width: 16px;\r\n border-top-left-radius: 0;\r\n border-bottom-left-radius: 0;\r\n\r\n &::before {\r\n content: \"\";\r\n position: absolute;\r\n top: calc(50% - var(--combobox-chevron-size) / 4);\r\n left: calc(50% - var(--combobox-chevron-size));\r\n border: var(--combobox-chevron-size) solid transparent;\r\n border-top-color: #000;\r\n border-radius: 2px;\r\n }\r\n\r\n &:focus {\r\n box-shadow: none;\r\n outline: none;\r\n }\r\n }\r\n}\r\n","select:not([multiple]) {\r\n font: var(--font);\r\n padding: 2px 3px;\r\n border: var(--button-border);\r\n border-color: var(--button-border-color);\r\n border-radius: var(--border-radius);\r\n box-shadow: var(--button-shadow);\r\n box-sizing: border-box;\r\n color: #222;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n position: relative;\r\n padding-right: 30px;\r\n background: url(\"./icon/button-down.svg\"), var(--button-gradient);\r\n background-position: center right;\r\n background-repeat: no-repeat;\r\n\r\n &:hover {\r\n border-color: var(--button-border-color-hovered);\r\n background-image: url(\"./icon/button-down.svg\"),\r\n var(--button-gradient-hovered);\r\n }\r\n\r\n &:focus {\r\n outline: none;\r\n border-color: var(--button-border-color-active);\r\n box-shadow: unset;\r\n background-image: url(\"./icon/button-down.svg\"),\r\n var(--button-gradient-active);\r\n }\r\n}\r\n","fieldset {\r\n border: 1px solid #cdd7db;\r\n border-radius: var(--border-radius);\r\n box-shadow: inset 0 0 0 1px #fff;\r\n padding: calc(2 * var(--border-width) + var(--element-spacing));\r\n padding-block-start: var(--element-spacing);\r\n margin: 0;\r\n\r\n legend {\r\n font: var(--font);\r\n }\r\n}\r\n\r\n.field-row {\r\n display: flex;\r\n align-items: center;\r\n\r\n > * {\r\n + * {\r\n margin-left: var(--grouped-element-spacing);\r\n }\r\n }\r\n\r\n &-stacked {\r\n display: flex;\r\n flex-direction: column;\r\n\r\n * {\r\n + * {\r\n margin-top: var(--grouped-element-spacing);\r\n }\r\n }\r\n }\r\n}\r\n\r\n[class^=\"field-row\"] {\r\n + [class^=\"field-row\"] {\r\n margin-top: var(--grouped-element-spacing);\r\n }\r\n}\r\n","[role=\"listbox\"],\r\nselect[multiple] {\r\n background: #fff;\r\n border: 1px solid #c0c1cd;\r\n display: block;\r\n font: var(--font);\r\n overflow-y: scroll;\r\n\r\n &.has-shadow {\r\n box-shadow: 4px 4px 3px -2px #999;\r\n }\r\n\r\n &.has-hover {\r\n li:hover {\r\n background-color: #2a90ff;\r\n color: #fff;\r\n }\r\n }\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n\r\n [role=\"option\"],\r\n option {\r\n padding: 2px;\r\n\r\n &[aria-selected],\r\n &:focus {\r\n background-color: #2a90ff;\r\n color: #fff;\r\n }\r\n }\r\n}\r\n",":root {\r\n --menu-padding: 2px;\r\n --item-offset-left: 30px;\r\n --item-hover-background: linear-gradient(\r\n to bottom,\r\n rgba(255, 255, 255, 0.6),\r\n rgba(230, 236, 245, 0.8) 90%,\r\n rgba(255, 255, 255, 0.8)\r\n );\r\n}\r\n\r\nul {\r\n &[role] {\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n cursor: default;\r\n }\r\n\r\n &[role=\"menubar\"] {\r\n display: flex;\r\n background: linear-gradient(\r\n #fff 20%,\r\n #f1f4fa 25%,\r\n #f1f4fa 43%,\r\n #d4dbee 48%,\r\n #e6eaf6\r\n );\r\n\r\n > [role=\"menuitem\"] {\r\n position: relative;\r\n padding: 6px 10px;\r\n\r\n &:focus,\r\n &:focus-within,\r\n &:hover {\r\n background: #3399ff;\r\n color: #fff;\r\n outline: none;\r\n }\r\n }\r\n }\r\n\r\n &[role=\"menu\"] {\r\n position: relative;\r\n min-width: 150px;\r\n padding: var(--menu-padding);\r\n background: var(--surface);\r\n color: initial;\r\n border: 1px solid rgba(0, 0, 0, 0.4);\r\n box-shadow: 4px 4px 3px -2px rgba(0, 0, 0, 0.5);\r\n\r\n &::before {\r\n content: \"\";\r\n pointer-events: none;\r\n position: absolute;\r\n left: var(--item-offset-left);\r\n width: 2px;\r\n height: calc(100% - 4px);\r\n box-shadow: inset 1px 0 rgba(0, 0, 0, 0.15), inset -1px 0 #fff;\r\n }\r\n\r\n [role=\"menuitem\"] & {\r\n display: none;\r\n position: absolute;\r\n left: 0;\r\n top: 100%;\r\n z-index: 99;\r\n }\r\n\r\n & [role=\"menuitem\"] > [role=\"menu\"] {\r\n top: -4px;\r\n left: 100%;\r\n }\r\n\r\n > [role=\"menuitem\"] {\r\n > a,\r\n > button,\r\n > label,\r\n &[aria-haspopup=\"true\"] {\r\n all: unset;\r\n position: relative;\r\n display: flex;\r\n justify-content: space-between;\r\n width: 100%;\r\n padding: 4px 10px 4px 32px;\r\n box-sizing: border-box;\r\n border: 1px solid transparent;\r\n border-radius: 3px;\r\n white-space: nowrap;\r\n\r\n &:hover,\r\n &:focus {\r\n background: var(--item-hover-background);\r\n border-color: #b8d6fb;\r\n }\r\n }\r\n\r\n &[aria-haspopup=\"true\"] {\r\n &::after {\r\n content: \"\";\r\n position: absolute;\r\n top: 50%;\r\n right: 2px;\r\n transform: translateY(-50%);\r\n border: 4px solid transparent;\r\n border-left-color: currentColor;\r\n }\r\n }\r\n }\r\n }\r\n\r\n [role=\"menuitem\"] {\r\n position: relative;\r\n\r\n > input[type] {\r\n display: none;\r\n\r\n & + label {\r\n display: block;\r\n position: relative;\r\n\r\n &::before {\r\n all: unset; /* unset the standalone checkbox/radio styles */\r\n background: var(--item-hover-background);\r\n box-shadow: 0 0 0 1px #b3d3f9;\r\n border-radius: inherit;\r\n box-sizing: border-box;\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 22px;\r\n height: 22px;\r\n }\r\n }\r\n\r\n &:checked + label {\r\n &::before {\r\n content: \"\";\r\n }\r\n }\r\n\r\n &[type=\"radio\"]:checked + label {\r\n &::after {\r\n left: 8px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background: radial-gradient(circle at 75% 25%, #d5d4ea, #333583);\r\n border: 1px solid #1a1490;\r\n box-shadow: none;\r\n }\r\n }\r\n\r\n &[type=\"checkbox\"]:checked + label {\r\n &::after {\r\n color: rgb(12, 18, 161);\r\n font-size: 10pt;\r\n left: 6px;\r\n top: 50%;\r\n transform: translateY(-52%);\r\n }\r\n }\r\n }\r\n\r\n &:focus,\r\n &:focus-within {\r\n > [role=\"menu\"] {\r\n display: block;\r\n }\r\n }\r\n\r\n &[aria-disabled] {\r\n opacity: 0.5;\r\n pointer-events: none;\r\n }\r\n\r\n &.has-divider {\r\n &::after {\r\n content: \"\";\r\n pointer-events: none;\r\n display: block;\r\n margin: 3px 0 2px;\r\n height: 2px;\r\n margin-left: var(--item-offset-left);\r\n box-shadow: inset 0 1px rgba(0, 0, 0, 0.15), inset 0 -1px #fff;\r\n }\r\n }\r\n\r\n img {\r\n position: absolute;\r\n z-index: 1;\r\n left: 2px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n pointer-events: none;\r\n }\r\n\r\n span {\r\n margin-left: 32px;\r\n }\r\n }\r\n\r\n &.can-hover [role=\"menuitem\"]:hover {\r\n > [role=\"menu\"] {\r\n display: block;\r\n }\r\n }\r\n}\r\n",":root {\r\n --progress-color-normal: #0bd82c;\r\n --progress-color-paused: #e6df1b;\r\n --progress-color-error: #ef0000;\r\n}\r\n\r\n[role=\"progressbar\"] {\r\n height: 15px;\r\n border: 1px solid var(--button-border-color);\r\n border-radius: var(--border-radius);\r\n box-shadow: inset 0 0 2px #fff, 0 0 2px #aaa;\r\n margin: 2px 0;\r\n overflow: hidden;\r\n background: linear-gradient(\r\n to right,\r\n rgba(0, 0, 0, 0.1),\r\n transparent 20%,\r\n transparent 80%,\r\n rgba(0, 0, 0, 0.1)\r\n ),\r\n linear-gradient(\r\n to bottom,\r\n rgba(255, 255, 255, 0.6) 25%,\r\n rgba(0, 0, 0, 0.05) 35%,\r\n rgba(0, 0, 0, 0.05) 90%,\r\n rgba(255, 255, 255, 0.2) 95%\r\n ),\r\n #ddd;\r\n\r\n > div {\r\n overflow: hidden;\r\n height: 100%;\r\n box-shadow: inset 0 0 1px #fff;\r\n background-color: var(--progress-color-normal);\r\n background-image: linear-gradient(\r\n to right,\r\n rgba(0, 0, 0, 0.2),\r\n transparent 20%,\r\n transparent 80%,\r\n rgba(0, 0, 0, 0.2)\r\n ),\r\n linear-gradient(\r\n to bottom,\r\n rgba(255, 255, 255, 0.6) 30%,\r\n rgba(0, 0, 0, 0.05) 30%,\r\n rgba(0, 0, 0, 0.05) 90%,\r\n rgba(255, 255, 255, 0.2) 95%\r\n );\r\n }\r\n\r\n &.paused > div {\r\n background-color: var(--progress-color-paused);\r\n }\r\n\r\n &.error > div {\r\n background-color: var(--progress-color-error);\r\n }\r\n\r\n &.animate > div::before,\r\n &.marquee::before {\r\n content: \"\";\r\n animation: progressbar 3s linear infinite;\r\n display: block;\r\n height: 100%;\r\n background: linear-gradient(\r\n to right,\r\n transparent,\r\n rgba(255, 255, 255, 0.5),\r\n transparent 40%\r\n );\r\n }\r\n\r\n &.marquee::before {\r\n opacity: 0.5;\r\n background: linear-gradient(\r\n to right,\r\n transparent,\r\n var(--progress-color-normal),\r\n transparent 35%\r\n );\r\n }\r\n}\r\n\r\n@keyframes progressbar {\r\n 0% {\r\n transform: translateX(-40%);\r\n }\r\n 60% {\r\n transform: translateX(100%);\r\n }\r\n 100% {\r\n /* for faking delay */\r\n transform: translateX(100%);\r\n }\r\n}\r\n",":root {\r\n --radio-width: 14px;\r\n --radio-label-spacing: 6px;\r\n --radio-total-width-precalc: var(--radio-width) + var(--radio-label-spacing);\r\n --radio-total-width: calc(var(--radio-total-width-precalc));\r\n --radio-dot-width: 8px;\r\n --radio-dot-top: calc(var(--radio-width) / 2 - var(--radio-dot-width) / 2);\r\n --radio-dot-left: calc(\r\n -1 * (var(--radio-total-width-precalc)) + var(--radio-width) / 2 - var(\r\n --radio-dot-width\r\n ) / 2\r\n );\r\n}\r\n\r\ninput[type=\"radio\"] {\r\n appearance: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n margin: 0;\r\n background: 0;\r\n position: fixed;\r\n opacity: 0;\r\n border: none;\r\n\r\n + label {\r\n font: var(--font);\r\n display: inline-flex;\r\n align-items: center;\r\n position: relative;\r\n margin-left: var(--radio-total-width);\r\n\r\n &::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: calc(-1 * (var(--radio-total-width-precalc)));\r\n display: inline-block;\r\n width: var(--radio-width);\r\n height: var(--radio-width);\r\n margin-right: var(--radio-label-spacing);\r\n background: #f6f6f6;\r\n border-radius: 50%;\r\n border: 1px solid;\r\n border-color: var(--button-border-color);\r\n box-shadow: inset 0 0 0 1.5px #f4f4f4, inset 1px 1px 0 1.5px #aeaeae,\r\n inset -1px 0 0 1.5px #ddd, inset 3px 3px 6px #ccc;\r\n box-sizing: border-box;\r\n transition: 0.4s;\r\n }\r\n\r\n &:hover::before {\r\n border-color: var(--button-border-color-hovered);\r\n box-shadow: inset 0 0 0 1.5px #def9fa, inset 1px 1px 0 1.5px #79c6f9,\r\n inset -1px -1px 0 1.5px #c6e9fc, inset 3px 3px 6px #b1dffd;\r\n }\r\n }\r\n\r\n &:checked {\r\n + label {\r\n &::after {\r\n content: \"\";\r\n display: block;\r\n width: var(--radio-dot-width);\r\n height: var(--radio-dot-width);\r\n top: var(--radio-dot-top);\r\n left: var(--radio-dot-left);\r\n position: absolute;\r\n background: #7cd3eb;\r\n border-radius: 50%;\r\n border: 1.5px solid #27506d;\r\n box-shadow: inset -1px -1px 0 0.5px #16638f,\r\n inset -1px -1px 0 1px #1985c0;\r\n box-sizing: border-box;\r\n }\r\n }\r\n }\r\n\r\n &:focus {\r\n + label {\r\n outline: 1px dotted #000000;\r\n }\r\n }\r\n\r\n &:disabled {\r\n + label {\r\n opacity: 0.6;\r\n }\r\n }\r\n}\r\n",":root {\r\n --search-icon: url(\"./icon/search.svg\");\r\n --search-button: var(--search-icon) no-repeat center;\r\n}\r\n\r\n[type=\"search\"] {\r\n height: 24px;\r\n font: var(--font);\r\n padding: 3px 6px;\r\n border: 1px solid transparent;\r\n border-radius: 2px;\r\n background-color: var(--button-highlight);\r\n box-shadow: inset 1px 1px 0 var(--button-border-color), inset -1px -1px 0 #ccc;\r\n box-sizing: border-box;\r\n min-width: 187px;\r\n\r\n &:placeholder-shown {\r\n background-size: 14px;\r\n background-position: calc(100% - 8px) center;\r\n background-image: var(--search-icon);\r\n background-repeat: no-repeat;\r\n }\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n\r\n &::placeholder {\r\n font-style: italic;\r\n }\r\n\r\n .searchbox & {\r\n padding-right: 26px;\r\n\r\n & + [aria-label=\"search\"] {\r\n position: absolute;\r\n top: 1px;\r\n right: 1px;\r\n border-radius: 0;\r\n padding: 0;\r\n min-width: 26px;\r\n min-height: 22px;\r\n background: var(--search-button), var(--button-gradient);\r\n background-size: 14px;\r\n\r\n &:hover {\r\n background: var(--search-button), var(--button-gradient-hovered);\r\n background-size: 14px;\r\n }\r\n\r\n &:active {\r\n background: var(--search-button), var(--button-gradient-active);\r\n background-size: 14px;\r\n box-shadow: inset 1px 1px 2px #37698f;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.searchbox {\r\n position: relative;\r\n display: inline-block;\r\n}\r\n",":root {\r\n --thumb-w: 10px;\r\n --thumb-h: 18px;\r\n --thumb-icon: url(\"./icon/slider-indicator.png\");\r\n --thumb-icon-box: url(\"./icon/slider-indicator-box.png\");\r\n --thumb-icon-active: url(\"./icon/slider-indicator-active.png\");\r\n --thumb-icon-box-active: url(\"./icon/slider-indicator-box-active.png\");\r\n}\r\n\r\ninput[type=\"range\"] {\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n width: 100%;\r\n background: transparent;\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n\r\n &::-webkit-slider-thumb {\r\n -webkit-appearance: none;\r\n height: var(--thumb-h);\r\n width: var(--thumb-w);\r\n background: var(--thumb-icon);\r\n transform: translateY(-7px);\r\n\r\n &:active {\r\n background: var(--thumb-icon-active);\r\n }\r\n }\r\n\r\n &::-moz-range-thumb {\r\n height: var(--thumb-h);\r\n width: var(--thumb-w);\r\n background: var(--thumb-icon);\r\n border: 0;\r\n border-radius: 0;\r\n\r\n &:active {\r\n background: var(--thumb-icon-active);\r\n }\r\n }\r\n\r\n &::-webkit-slider-runnable-track,\r\n &::-moz-range-track {\r\n width: 100%;\r\n height: 3px;\r\n background: var(--surface);\r\n box-sizing: border-box;\r\n box-shadow: inset 1px 1px 1px #999, inset -1px 0 #999, 0 1px #fff;\r\n }\r\n}\r\n\r\ninput[type=\"range\"].has-box-indicator {\r\n &::-webkit-slider-thumb {\r\n background: var(--thumb-icon-box);\r\n\r\n &:active {\r\n background: var(--thumb-icon-box-active);\r\n }\r\n }\r\n\r\n &::-moz-range-thumb {\r\n background: var(--thumb-icon-box);\r\n\r\n &:active {\r\n background: var(--thumb-icon-box-active);\r\n }\r\n }\r\n}\r\n\r\n.is-vertical {\r\n display: inline-block;\r\n width: 4px;\r\n height: 150px;\r\n transform: translateY(50%);\r\n\r\n > input[type=\"range\"] {\r\n width: 150px;\r\n height: 4px;\r\n margin: 0 calc(var(--grouped-element-spacing) + var(--range-spacing)) 0\r\n var(--range-spacing);\r\n transform-origin: left;\r\n transform: rotate(270deg) translateX(calc(-50% + var(--element-spacing)));\r\n\r\n &::-webkit-slider-thumb {\r\n transform: translateY(-8px) scaleX(-1);\r\n }\r\n\r\n &::-moz-range-thumb {\r\n transform: translateY(2px) scaleX(-1);\r\n }\r\n }\r\n\r\n > input[type=\"range\"].has-box-indicator {\r\n &::-webkit-slider-thumb {\r\n transform: translateY(-9px) scaleX(-1);\r\n }\r\n\r\n &::-moz-range-thumb {\r\n transform: translateY(0px) scaleX(-1);\r\n }\r\n }\r\n}\r\n",".spinner,\r\n.loader {\r\n background: url(\"./icon/spinner.png\") center;\r\n width: 20px;\r\n height: 20px;\r\n display: inline-block;\r\n color: transparent;\r\n\r\n &.animate {\r\n background-image: url(\"./icon/spinner.gif\");\r\n }\r\n}\r\n",":root {\r\n --tab-border: 1px solid #888;\r\n --tab-bg: #fff;\r\n}\r\n\r\n[role=\"tabpanel\"] {\r\n position: relative;\r\n z-index: 2;\r\n}\r\n\r\nmenu[role=\"tablist\"] {\r\n position: relative;\r\n margin: 0 0 -2px 0;\r\n text-indent: 0;\r\n list-style-type: none;\r\n display: flex;\r\n padding-left: 3px;\r\n\r\n button {\r\n padding: 2px 6px;\r\n border-radius: 0;\r\n z-index: 1;\r\n display: block;\r\n color: #222;\r\n text-decoration: none;\r\n min-width: unset;\r\n\r\n &[aria-selected=\"true\"] {\r\n padding-bottom: 4px;\r\n margin: -2px 0px 1px -3px;\r\n background: var(--tab-bg);\r\n box-shadow: none;\r\n border-bottom: 0;\r\n position: relative;\r\n z-index: 8;\r\n }\r\n\r\n &:focus {\r\n outline: 1px dotted #222;\r\n outline-offset: -4px;\r\n }\r\n\r\n &:disabled {\r\n opacity: 0.6;\r\n }\r\n }\r\n\r\n &.justified {\r\n button {\r\n flex-grow: 1;\r\n text-align: center;\r\n }\r\n }\r\n}\r\n\r\n[role=\"tabpanel\"] {\r\n padding: 14px;\r\n clear: both;\r\n background: var(--tab-bg);\r\n border: var(--tab-border);\r\n position: relative;\r\n z-index: 2;\r\n margin-bottom: 9px;\r\n}\r\n","input {\r\n &[type=\"text\"],\r\n &[type=\"email\"],\r\n &[type=\"number\"],\r\n &[type=\"password\"] {\r\n height: 23px;\r\n }\r\n}\r\n\r\ninput[type=\"text\"],\r\ninput[type=\"email\"],\r\ninput[type=\"number\"],\r\ninput[type=\"password\"],\r\ntextarea {\r\n font: var(--font);\r\n padding: 3px 4px 5px;\r\n border: 1px solid #ccc;\r\n border-top-color: var(--button-border-color);\r\n border-radius: 2px;\r\n background-color: var(--button-highlight);\r\n box-sizing: border-box;\r\n\r\n &:focus {\r\n outline: none;\r\n border-color: var(--button-shade-light-hovered);\r\n border-top-color: var(--button-shade-light-active);\r\n }\r\n}\r\n",":root {\r\n --treeview-square-size: 8px;\r\n --treeview-spacing: 20px;\r\n}\r\n\r\nul.tree-view {\r\n font: var(--font);\r\n display: block;\r\n margin: 0;\r\n padding: 6px 6px 6px var(--treeview-spacing);\r\n\r\n li {\r\n list-style-type: none;\r\n margin-top: 4px;\r\n position: relative;\r\n }\r\n\r\n a {\r\n text-decoration: none;\r\n color: #000;\r\n }\r\n\r\n ul {\r\n margin-top: 4px;\r\n padding-left: var(--treeview-spacing);\r\n }\r\n\r\n &.has-container {\r\n background: #fff;\r\n border: 1px solid var(--button-border-color);\r\n }\r\n\r\n &.has-collapse-button details {\r\n > summary::before {\r\n content: \"\\002b\";\r\n top: calc(50% - var(--treeview-square-size) / 2);\r\n left: calc(-var(--treeview-square-size) * 2);\r\n right: unset;\r\n width: var(--treeview-square-size);\r\n height: var(--treeview-square-size);\r\n background: linear-gradient(\r\n to bottom,\r\n var(--button-face) 45%,\r\n var(--button-shade-light)\r\n );\r\n border: 1px solid #919191;\r\n border-radius: 1px;\r\n color: #4b63a7;\r\n font-size: 8pt;\r\n font-weight: bold;\r\n line-height: 0.5;\r\n text-align: center;\r\n margin: 0;\r\n }\r\n\r\n &[open] > summary::before {\r\n content: \"\\2013\";\r\n transform: none;\r\n }\r\n }\r\n\r\n &.has-connector {\r\n ul {\r\n position: relative;\r\n\r\n &::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: var(--treeview-square-size);\r\n height: calc(100% - var(--treeview-square-size));\r\n border-left: 1px dotted #000;\r\n }\r\n\r\n li::before {\r\n content: \"\";\r\n position: absolute;\r\n top: var(--treeview-square-size);\r\n right: calc(100% + var(--treeview-square-size) / 4);\r\n width: calc(var(--treeview-spacing) / 2);\r\n border-bottom: 1px dotted #000;\r\n }\r\n }\r\n }\r\n}\r\n",":root {\r\n --link-color: #0066cc;\r\n --link-color-hovered: #3399ff;\r\n --primary-color: #003399;\r\n --secondary-color: #000000;\r\n}\r\n\r\na {\r\n color: var(--link-color);\r\n text-decoration: none;\r\n\r\n &:focus {\r\n outline: 1px dotted var(--link-color);\r\n }\r\n\r\n &:hover {\r\n color: var(--link-color-hovered);\r\n text-decoration: underline;\r\n }\r\n}\r\n\r\n.instruction {\r\n font: var(--font);\r\n color: var(--secondary-color);\r\n font-weight: normal;\r\n margin: 0 0 20px;\r\n\r\n &-primary {\r\n font-size: 12pt;\r\n color: var(--primary-color);\r\n }\r\n}\r\n\r\n.header {\r\n font: var(--font);\r\n font-weight: normal;\r\n\r\n &-document {\r\n font-family: \"Calibri\";\r\n font-size: 17pt;\r\n color: var(--secondary-color); \r\n }\r\n\r\n &-group {\r\n font-size: 11pt;\r\n color: var(--primary-color);\r\n }\r\n}\r\n",":root {\r\n --window-spacing: 6px;\r\n --window-border: 1px solid;\r\n --window-border-radius: 6px;\r\n --window-border-color: rgba(0, 0, 0, 0.7);\r\n --window-background-color: #4580c4;\r\n --window-background: linear-gradient(\r\n to right,\r\n rgba(255, 255, 255, 0.4),\r\n rgba(0, 0, 0, 0.1),\r\n rgba(255, 255, 255, 0.2)\r\n ),\r\n linear-gradient(\r\n 55deg,\r\n transparent,\r\n rgba(0, 0, 0, 0.1) 20%,\r\n rgba(0, 0, 0, 0.1) 50%,\r\n transparent 53%\r\n ),\r\n var(--window-background-color);\r\n --control-border-color: rgba(0, 0, 0, 0.3);\r\n --control-border-radius: 5px;\r\n --control-inset-shadow: inset 0 0 0 1px #eee8;\r\n --control-background: linear-gradient(\r\n rgba(255, 255, 255, 0.5),\r\n rgba(255, 255, 255, 0.3) 45%,\r\n rgba(0, 0, 0, 0.1) 50%,\r\n rgba(0, 0, 0, 0.1) 75%,\r\n rgba(255, 255, 255, 0.5)\r\n );\r\n}\r\n\r\n.window {\r\n font: var(--font);\r\n box-shadow: 2px 2px 10px 1px var(--window-border-color);\r\n border: var(--window-border) var(--window-border-color);\r\n border-radius: var(--window-border-radius);\r\n position: relative;\r\n z-index: 0;\r\n\r\n &::before {\r\n content: \"\";\r\n position: absolute;\r\n z-index: -1;\r\n width: 100%;\r\n height: 100%;\r\n border-radius: var(--window-border-radius);\r\n background: linear-gradient(\r\n transparent 20%,\r\n rgba(255, 255, 255, 0.7) 40%,\r\n transparent 41%\r\n ),\r\n var(--window-background);\r\n }\r\n\r\n &-body {\r\n margin: var(--window-spacing);\r\n margin-top: 0;\r\n border: var(--window-border) var(--window-border-color);\r\n background: var(--surface);\r\n box-shadow: 0 0 1px 0.5px #fff;\r\n\r\n &.has-space {\r\n padding: var(--window-spacing);\r\n }\r\n\r\n pre {\r\n margin: -var(--window-spacing);\r\n }\r\n }\r\n\r\n &-footer,\r\n footer {\r\n margin: var(--window-spacing);\r\n margin-top: calc(-1 * var(--window-spacing) - 1px);\r\n background: var(--surface);\r\n border: var(--window-border) var(--window-border-color);\r\n border-top: 0;\r\n box-shadow: 0 0.5px 1px 0.5px #fff;\r\n position: relative;\r\n padding: 10px;\r\n\r\n &::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n left: 0;\r\n width: 100%;\r\n height: 2px;\r\n box-shadow: inset 0 1px rgba(0, 0, 0, 0.3), inset 0 -1px #fff;\r\n }\r\n }\r\n\r\n &.is-bright {\r\n .window-body {\r\n background: #fff;\r\n }\r\n\r\n .window-footer,\r\n footer {\r\n background: #eee;\r\n box-shadow: inset 0 1px 3px #ddd;\r\n\r\n &::before {\r\n content: none;\r\n }\r\n }\r\n }\r\n\r\n &.glass {\r\n backdrop-filter: blur(1.5px);\r\n\r\n &::before {\r\n opacity: 0.5;\r\n filter: brightness(1.4);\r\n }\r\n\r\n > .title-bar {\r\n background: linear-gradient(\r\n 55deg,\r\n transparent 8%,\r\n rgba(255, 255, 255, 0.1) 10%,\r\n rgba(255, 255, 255, 0.3) 30%,\r\n rgba(0, 0, 0, 0.1) 32%,\r\n rgba(0, 0, 0, 0.3) 55%,\r\n transparent 57%,\r\n rgba(255, 255, 255, 0.3) 70%,\r\n transparent 72%\r\n );\r\n }\r\n }\r\n\r\n > .title-bar {\r\n border: 0;\r\n box-shadow: inset 0 0.5px #fff;\r\n }\r\n\r\n fieldset {\r\n margin-bottom: 9px;\r\n }\r\n\r\n &[role=\"dialog\"] {\r\n position: fixed;\r\n z-index: 999;\r\n top: 50%;\r\n left: 50%;\r\n transform: translate(-50%, -50%);\r\n visibility: hidden;\r\n opacity: 0;\r\n transition-duration: 0.2s;\r\n transition-property: visibility, opacity;\r\n\r\n &:target {\r\n visibility: visible;\r\n opacity: 1;\r\n }\r\n }\r\n}\r\n\r\n.title-bar {\r\n font: var(--font);\r\n box-shadow: inset 0 0 0.5px 0.5px #fff;\r\n border: var(--window-border) var(--window-border-color);\r\n border-radius: var(--window-border-radius) var(--window-border-radius) 0 0;\r\n padding: var(--window-spacing);\r\n display: flex;\r\n justify-content: space-between;\r\n align-items: center;\r\n background: var(--window-background);\r\n\r\n &-text {\r\n color: #000;\r\n letter-spacing: 0;\r\n line-height: 15px;\r\n text-shadow: 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff,\r\n 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff, 0 0 10px #fff;\r\n }\r\n\r\n &-controls {\r\n display: flex;\r\n background: rgba(255, 255, 255, 0.2);\r\n border: var(--window-border) var(--control-border-color);\r\n border-top: 0;\r\n border-radius: 0 0 var(--control-border-radius) var(--control-border-radius);\r\n margin-top: -var(--window-spacing);\r\n box-shadow: 0 0 2px #fff;\r\n\r\n button {\r\n position: relative;\r\n min-width: 29px;\r\n min-height: 19px;\r\n padding: 0;\r\n border: 0;\r\n border-right: var(--window-border) var(--control-border-color);\r\n border-radius: 0;\r\n box-shadow: var(--control-inset-shadow);\r\n box-sizing: border-box;\r\n background: none;\r\n\r\n &:hover,\r\n &:active {\r\n /* resolve the conflict with button styles */\r\n background: none;\r\n border-color: var(--control-border-color);\r\n box-shadow: var(--control-inset-shadow);\r\n }\r\n\r\n &:disabled {\r\n &::before {\r\n opacity: 0.4;\r\n }\r\n }\r\n\r\n &::before {\r\n content: \"\";\r\n position: absolute;\r\n top: 0;\r\n bottom: 0;\r\n left: 0;\r\n right: 0;\r\n }\r\n\r\n &[aria-label=\"Minimize\"],\r\n &.is-minimize {\r\n &::before {\r\n background: url(\"./icon/minimize.png\") no-repeat center 10px;\r\n }\r\n }\r\n\r\n &[aria-label=\"Maximize\"],\r\n &.is-maximize {\r\n &::before {\r\n background: url(\"./icon/maximize.png\") no-repeat center;\r\n }\r\n }\r\n\r\n &[aria-label=\"Restore\"],\r\n &.is-restore {\r\n &::before {\r\n background: url(\"./icon/restore.png\") no-repeat center;\r\n }\r\n }\r\n\r\n &[aria-label=\"Close\"],\r\n &.is-close {\r\n min-width: 48px;\r\n\r\n &::before {\r\n background: url(\"./icon/close.png\") no-repeat center;\r\n }\r\n }\r\n\r\n &:first-child {\r\n border-bottom-left-radius: var(--control-border-radius);\r\n }\r\n\r\n &:last-child {\r\n border: 0;\r\n border-bottom-right-radius: var(--control-border-radius);\r\n }\r\n\r\n &:focus {\r\n outline: none;\r\n }\r\n }\r\n }\r\n\r\n /* Active title-bar */\r\n .window.active &,\r\n &.active {\r\n .title-bar-controls {\r\n border-color: var(--window-border-color);\r\n\r\n button {\r\n background: var(--control-background);\r\n border-color: var(--window-border-color);\r\n box-shadow: var(--control-inset-shadow);\r\n\r\n &:hover {\r\n box-shadow: 0 0 15px #2aceda, var(--control-inset-shadow);\r\n background: radial-gradient(\r\n circle at bottom,\r\n #2aceda,\r\n transparent 60%\r\n ),\r\n linear-gradient(#a9d2e8 50%, #196c9b 50%);\r\n }\r\n\r\n &:active {\r\n box-shadow: 0 0 15px #2aceda, var(--control-inset-shadow);\r\n background: radial-gradient(\r\n circle at bottom,\r\n #0bfdfa,\r\n transparent 60%\r\n ),\r\n linear-gradient(#86a7bc 50%, #092747 50%);\r\n }\r\n\r\n &[aria-label=\"Close\"],\r\n &.is-close {\r\n background-color: #d04834;\r\n box-shadow: var(--control-inset-shadow);\r\n\r\n &:hover {\r\n background: var(--control-background),\r\n radial-gradient(circle at 50% 170%, orange 10% 20%, #0000 60%),\r\n linear-gradient(#ee6d56 50%, #d42809 50%);\r\n box-shadow: 0 0 15px #e68e75, var(--control-inset-shadow);\r\n }\r\n\r\n &:active {\r\n background: var(--control-background),\r\n radial-gradient(circle at 50% 170%, yellow 10% 20%, #0000 60%),\r\n linear-gradient(#b67562 50%, #780c01 50%);\r\n }\r\n }\r\n\r\n &:disabled {\r\n &:hover,\r\n &:active {\r\n background: var(--control-background);\r\n box-shadow: var(--control-inset-shadow);\r\n }\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.status-bar {\r\n margin: var(--window-spacing);\r\n margin-top: -var(--window-spacing);\r\n background: var(--surface);\r\n border: var(--window-border) var(--window-border-color);\r\n border-top: 0;\r\n box-shadow: 0 0.5px 1px 0.5px #fff;\r\n display: flex;\r\n\r\n &-field {\r\n border-right: var(--window-border) #cfcfcf;\r\n padding: 2px 3px;\r\n margin: 0;\r\n flex-grow: 1;\r\n\r\n &:last-child {\r\n border-right: 0;\r\n }\r\n }\r\n}\r\n"]} |