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.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"]} |