xp.css/dist/GUI.css.map

A design system for building faithful recreations of old UIs

{"version":3,"sources":["../gui/index.scss","../gui/_fonts.scss","../gui/_global.scss","../gui/_buttons.scss","../gui/_forms.scss","../gui/_window.scss","../gui/_treeview.scss","../gui/_groupbox.scss","../gui/_tabs.scss"],"names":[],"mappings":"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","file":"GUI.css","sourcesContent":["/*! GUI.css v0.2.6 - https://botoxparty.github.io/XP.css/ */\n/**\n * GUI.css\n * Copyright (c) 2020 Adam Hammad <adamham.dev>\n * Based on 98.css by Jordan Scales <thatjdanisso.cool>\n * https://github.com/botoxparty/XP.css/blob/main/LICENSE\n */\n\n@import \"_variables.scss\";\n@import \"_fonts.scss\";\n@import \"_global.scss\";\n@import \"_buttons.scss\";\n@import \"_forms.scss\";\n@import \"_window.scss\";\n@import \"_treeview.scss\";\n@import \"_groupbox.scss\";\n@import \"_tabs.scss\";\n","/*-------------------------------------------*\\\n    Fonts\n\\*-------------------------------------------*/\n\n@font-face {\n    font-family: \"Pixelated MS Sans Serif\";\n    src: url(\"fonts/converted/ms_sans_serif.woff\") format(\"woff\");\n    src: url(\"fonts/converted/ms_sans_serif.woff2\") format(\"woff2\");\n    font-weight: normal;\n    font-style: normal;\n}\n@font-face {\n    font-family: \"Pixelated MS Sans Serif\";\n    src: url(\"fonts/converted/ms_sans_serif_bold.woff\") format(\"woff\");\n    src: url(\"fonts/converted/ms_sans_serif_bold.woff2\") format(\"woff2\");\n    font-weight: bold;\n    font-style: normal;\n}\n\n@font-face {\n    font-family: \"Perfect DOS VGA 437 Win\";\n    src: url(\"fonts/converted/PerfectDOSVGA437Win.woff2\") format(\"woff2\"),\n        url(\"fonts/converted/PerfectDOSVGA437Win.woff\") format(\"woff\");\n    font-weight: normal;\n    font-style: normal;\n}\n","/*-------------------------------------------*\\\n    Global\n\\*-------------------------------------------*/\n\nbody {\n    font-family: Arial;\n    font-size: 12px;\n    color: #222222;\n}\n.surface {\n    background: var(--surface);\n}\nh1 {\n    font-size: 5rem;\n}\nh2 {\n    font-size: 2.5rem;\n}\nh3 {\n    font-size: 2rem;\n}\nh4 {\n    font-size: 1.5rem;\n}\nu {\n    text-decoration: none;\n    border-bottom: 0.5px solid #222222;\n}\n\na {\n    color: var(--link-blue);\n    &:focus {\n        outline: 1px dotted var(--link-blue);\n    }\n}\n\ncode {\n    font-family: monospace;\n    * {\n        font-family: monospace;\n    }\n}\npre {\n    display: block;\n    padding: 12px 8px;\n    background-color: black;\n    color: #c0c0c0;\n    font-family: \"Perfect DOS VGA 437 Win\";\n    font-size: 1rem;\n    margin: 0;\n    * {\n        font-family: \"Perfect DOS VGA 437 Win\";\n    }\n}\nsummary {\n    &:focus {\n        outline: 1px dotted #000000;\n    }\n}\n::-webkit-scrollbar {\n    width: 16px;\n    &:horizontal {\n        height: 17px;\n    }\n}\n::-webkit-scrollbar-corner {\n    background: var(--button-face);\n}\n::-webkit-scrollbar {\n    width: 16px;\n    &:horizontal {\n        height: 17px;\n    }\n}\n::-webkit-scrollbar-corner {\n    background: var(--button-face);\n}\n::-webkit-scrollbar-track {\n    background-image: svg-load(\"./icon/scrollbar-background.svg\");\n}\n::-webkit-scrollbar-thumb {\n    background-color: var(--button-face);\n    box-shadow: var(--border-raised-outer), var(--border-raised-inner);\n}\n::-webkit-scrollbar-button:horizontal:start:decrement,\n::-webkit-scrollbar-button:horizontal:end:increment,\n::-webkit-scrollbar-button:vertical:start:decrement,\n::-webkit-scrollbar-button:vertical:end:increment {\n    display: block;\n}\n::-webkit-scrollbar-button {\n    &:vertical {\n        &:start {\n            height: 17px;\n            background-image: svg-load(\"./icon/button-up.svg\");\n        }\n        &:end {\n            height: 17px;\n            background-image: svg-load(\"./icon/button-down.svg\");\n        }\n    }\n    &:horizontal {\n        &:start {\n            width: 16px;\n            background-image: svg-load(\"./icon/button-left.svg\");\n        }\n        &:end {\n            width: 16px;\n            background-image: svg-load(\"./icon/button-right.svg\");\n        }\n    }\n}\n","/*-------------------------------------------*\\\n    Buttons\n\\*-------------------------------------------*/\n\nbutton {\n    font-family: var(--sans-serif);\n    font-size: 11px;\n    box-sizing: border-box;\n    border: none;\n    background: var(--surface);\n    box-shadow: var(--border-raised-outer), var(--border-raised-inner);\n    border-radius: 0;\n    min-width: 75px;\n    min-height: 23px;\n    padding: 0 12px;\n    &:not(:disabled) {\n        &:active,\n        &.active {\n            box-shadow: var(--border-sunken-outer), var(--border-sunken-inner);\n        }\n    }\n    &:focus,\n    &.focused {\n        outline: 1px dotted #000000;\n        outline-offset: -4px;\n    }\n    &::-moz-focus-inner {\n        border: 0;\n    }\n}\n","/*-------------------------------------------*\\\n    Forms\n\\*-------------------------------------------*/\n\nlabel {\n    font-family: var(--sans-serif);\n    font-size: 11px;\n    display: inline-flex;\n    align-items: center;\n}\ninput {\n    font-family: var(--sans-serif);\n    font-size: 11px;\n}\ntextarea {\n    font-family: var(--sans-serif);\n    font-size: 11px;\n    padding: 3px 4px;\n    border: none;\n    background-color: var(--button-highlight);\n    box-sizing: border-box;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    border-radius: 0;\n    &:focus {\n        outline: none;\n    }\n}\nselect {\n    font-family: var(--sans-serif);\n    font-size: 11px;\n    padding: 3px 4px;\n    border: none;\n    background-color: var(--button-highlight);\n    box-sizing: border-box;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    border-radius: 0;\n    height: 21px;\n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    position: relative;\n    padding-right: 32px;\n    background-image: svg-load(\"./icon/button-down.svg\");\n    background-position: top 2px right 2px;\n    background-repeat: no-repeat;\n    border-radius: 0;\n    &:focus {\n        outline: none;\n        color: var(--button-highlight);\n        background-color: var(--dialog-blue);\n        option {\n            color: #000;\n            background-color: #fff;\n        }\n    }\n    &:active {\n        background-image: svg-load(\"./icon/button-down-active.svg\");\n    }\n}\noption {\n    font-family: var(--sans-serif);\n    font-size: 11px;\n}\n.vertical-bar {\n    width: 4px;\n    height: 20px;\n    background: #c0c0c0;\n    box-shadow: var(--border-raised-outer), var(--border-raised-inner);\n}\n&:disabled {\n    color: var(--button-shadow);\n    text-shadow: 1px 1px 0 var(--button-highlight);\n    + {\n        label {\n            color: var(--button-shadow);\n            text-shadow: 1px 1px 0 var(--button-highlight);\n        }\n    }\n}\ninput[type=\"radio\"] {\n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    margin: 0;\n    background: 0;\n    position: fixed;\n    opacity: 0;\n    border: none;\n    + {\n        label {\n            line-height: 13px;\n            position: relative;\n            margin-left: var(--radio-total-width);\n            &::before {\n                content: \"\";\n                position: absolute;\n                top: 0;\n                left: calc(-1 * (var(--radio-total-width-precalc)));\n                display: inline-block;\n                width: var(--radio-width);\n                height: var(--radio-width);\n                margin-right: var(--radio-label-spacing);\n                background: svg-load(\"./icon/radio-border.svg\");\n            }\n        }\n    }\n    &:active {\n        + {\n            label {\n                &::before {\n                    background: svg-load(\"./icon/radio-border-disabled.svg\");\n                }\n            }\n        }\n    }\n    &:checked {\n        + {\n            label {\n                &::after {\n                    content: \"\";\n                    display: block;\n                    width: var(--radio-dot-width);\n                    height: var(--radio-dot-width);\n                    top: var(--radio-dot-top);\n                    left: var(--radio-dot-left);\n                    position: absolute;\n                    background: svg-load(\"./icon/radio-dot.svg\");\n                }\n            }\n        }\n    }\n    &:focus {\n        + {\n            label {\n                outline: 1px dotted #000000;\n            }\n        }\n    }\n}\ninput[type=\"checkbox\"] {\n    appearance: none;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    margin: 0;\n    background: 0;\n    position: fixed;\n    opacity: 0;\n    border: none;\n    + {\n        label {\n            line-height: 13px;\n            position: relative;\n            margin-left: var(--checkbox-total-width);\n            &::before {\n                content: \"\";\n                position: absolute;\n                left: calc(-1 * (var(--checkbox-total-width-precalc)));\n                display: inline-block;\n                width: var(--checkbox-width);\n                height: var(--checkbox-width);\n                background: var(--button-highlight);\n                box-shadow: var(--border-field);\n                margin-right: var(--radio-label-spacing);\n            }\n        }\n    }\n    &:focus {\n        + {\n            label {\n                outline: 1px dotted #000000;\n            }\n        }\n    }\n    &:active {\n        + {\n            label {\n                &::before {\n                    background: var(--surface);\n                }\n            }\n        }\n    }\n    &:checked {\n        + {\n            label {\n                &::after {\n                    content: \"\";\n                    display: block;\n                    width: var(--checkmark-width);\n                    height: var(--checkmark-width);\n                    position: absolute;\n                    background: svg-load(\"./icon/checkmark.svg\");\n                    top: 1px;\n                }\n            }\n        }\n    }\n}\ninput[type=\"radio\"][disabled] {\n    + {\n        label {\n            &::before {\n                background: svg-load(\"./icon/radio-border-disabled.svg\");\n            }\n        }\n    }\n    &:checked {\n        + {\n            label {\n                &::after {\n                    background: svg-load(\"./icon/radio-dot-disabled.svg\");\n                }\n            }\n        }\n    }\n}\ninput[type=\"checkbox\"][disabled] {\n    + {\n        label {\n            &::before {\n                background: var(--surface);\n            }\n        }\n    }\n    &:checked {\n        + {\n            label {\n                &::after {\n                    background: svg-load(\"./icon/checkmark-disabled.svg\");\n                }\n            }\n        }\n    }\n}\ninput[type=\"text\"],\ninput[type=\"password\"],\ninput[type=\"email\"] {\n    padding: 3px 4px;\n    border: solid #7f9db9 1px;\n    background-color: var(--button-highlight);\n    box-sizing: border-box;\n    -webkit-appearance: none;\n    -moz-appearance: none;\n    appearance: none;\n    border-radius: 0;\n    height: 21px;\n    line-height: 2;\n    &:focus {\n        outline: none;\n    }\n}\ninput[type=\"range\"] {\n    -webkit-appearance: none;\n    width: 100%;\n    background: transparent;\n    &:focus {\n        outline: none;\n    }\n    &::-webkit-slider-thumb {\n        -webkit-appearance: none;\n        height: 21px;\n        width: 11px;\n        background: svg-load(\"./icon/indicator-horizontal.svg\");\n        transform: translateY(-8px);\n    }\n    &::-moz-range-thumb {\n        height: 21px;\n        width: 11px;\n        border: 0;\n        border-radius: 0;\n        background: svg-load(\"./icon/indicator-horizontal.svg\");\n        transform: translateY(2px);\n    }\n    &::-webkit-slider-runnable-track {\n        width: 100%;\n        height: 2px;\n        box-sizing: border-box;\n        background: black;\n        border-right: 1px solid grey;\n        border-bottom: 1px solid grey;\n        box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey, -1px -1px 0 darkgrey,\n            0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;\n    }\n    &::-moz-range-track {\n        width: 100%;\n        height: 2px;\n        box-sizing: border-box;\n        background: black;\n        border-right: 1px solid grey;\n        border-bottom: 1px solid grey;\n        box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 darkgrey, -1px -1px 0 darkgrey,\n            0 -1px 0 darkgrey, -1px 1px 0 white, 1px -1px darkgrey;\n    }\n}\ninput[type=\"range\"].has-box-indicator {\n    &::-webkit-slider-thumb {\n        background: svg-load(\"./icon/indicator-rectangle-horizontal.svg\");\n        transform: translateY(-10px);\n    }\n    &::-moz-range-thumb {\n        background: svg-load(\"./icon/indicator-rectangle-horizontal.svg\");\n        transform: translateY(0px);\n    }\n}\n.is-vertical {\n    display: inline-block;\n    width: 4px;\n    height: 150px;\n    transform: translateY(50%);\n    > input[type=\"range\"] {\n        width: 150px;\n        height: 4px;\n        margin: 0 calc(var(--grouped-element-spacing) + var(--range-spacing)) 0 var(--range-spacing);\n        transform-origin: left;\n        transform: rotate(270deg) translateX(calc(-50% + var(--element-spacing)));\n        &::-webkit-slider-runnable-track {\n            border-left: 1px solid grey;\n            border-right: 0;\n            border-bottom: 1px solid grey;\n            box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey, 1px -1px 0 darkgrey,\n                0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey;\n        }\n        &::-moz-range-track {\n            border-left: 1px solid grey;\n            border-right: 0;\n            border-bottom: 1px solid grey;\n            box-shadow: -1px 0 0 white, -1px 1px 0 white, 0 1px 0 white, 1px 0 0 darkgrey, 1px -1px 0 darkgrey,\n                0 -1px 0 darkgrey, 1px 1px 0 white, -1px -1px darkgrey;\n        }\n        &::-webkit-slider-thumb {\n            transform: translateY(-8px) scaleX(-1);\n        }\n        &::-moz-range-thumb {\n            transform: translateY(2px) scaleX(-1);\n        }\n    }\n    > input[type=\"range\"].has-box-indicator {\n        &::-webkit-slider-thumb {\n            transform: translateY(-10px) scaleX(-1);\n        }\n        &::-moz-range-thumb {\n            transform: translateY(0px) scaleX(-1);\n        }\n    }\n}\n","/*-------------------------------------------*\\\n    Window\n\\*-------------------------------------------*/\n\n:root {\n    --title-bar-bg: black;\n}\n.window {\n    font-size: 11px;\n    box-shadow: var(--border-window-outer), var(--border-window-inner);\n    background: var(--surface);\n    padding: 3px;\n    fieldset {\n        margin-bottom: 9px;\n    }\n}\n.title-bar {\n    font-size: 11px;\n    background: var(--title-bar-bg);\n    padding: 3px 2px 3px 3px;\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n}\n.title-bar-text {\n    font-weight: bold;\n    color: white;\n    letter-spacing: 0;\n    margin-right: 24px;\n}\n.title-bar-controls {\n    display: flex;\n    button {\n        padding: 0;\n        display: block;\n        min-width: 16px;\n        min-height: 14px;\n        &:focus {\n            outline: none;\n        }\n    }\n    button[aria-label=\"Minimize\"] {\n    }\n    button[aria-label=\"Maximize\"] {\n    }\n    button[aria-label=\"Help\"] {\n    }\n    button[aria-label=\"Close\"] {\n    }\n}\n.window-body {\n    margin: var(--element-spacing);\n    pre {\n        margin: -8px;\n    }\n}\n\n.status-bar {\n    margin: 0px 1px;\n    display: flex;\n    gap: 1px;\n}\n\n.status-bar-field {\n    box-shadow: var(--border-status-bar-field);\n    flex-grow: 1;\n    padding: 2px 3px;\n    margin: 0;\n}","/*-------------------------------------------*\\\n    Tree View\n\\*-------------------------------------------*/\n\nul.tree-view {\n    font-family: var(--sans-serif);\n    font-size: 11px;\n    display: block;\n    background: var(--button-highlight);\n    padding: 6px;\n    margin: 0;\n    li {\n        list-style-type: none;\n        margin-top: 3px;\n    }\n    a {\n        text-decoration: none;\n        color: #000;\n        &:focus {\n            background-color: var(--dialog-blue);\n            color: var(--button-highlight);\n        }\n    }\n    ul {\n        margin-top: 3px;\n        margin-left: 16px;\n        padding-left: 16px;\n        border-left: 1px dotted #808080;\n        > li {\n            position: relative;\n            &::before {\n                content: \"\";\n                display: block;\n                position: absolute;\n                left: -16px;\n                top: 6px;\n                width: 12px;\n                border-bottom: 1px dotted #808080;\n            }\n            &:last-child {\n                &::after {\n                    content: \"\";\n                    display: block;\n                    position: absolute;\n                    left: -20px;\n                    top: 7px;\n                    bottom: 0px;\n                    width: 8px;\n                    background: var(--button-highlight);\n                }\n            }\n        }\n        details {\n            > summary {\n                &:before {\n                    margin-left: -22px;\n                    position: relative;\n                    z-index: 1;\n                }\n            }\n        }\n    }\n    details {\n        margin-top: 0;\n        > summary {\n            &:before {\n                text-align: center;\n                display: block;\n                float: left;\n                content: \"+\";\n                border: 1px solid #808080;\n                width: 8px;\n                height: 9px;\n                line-height: 9px;\n                margin-right: 5px;\n                padding-left: 1px;\n                background-color: #fff;\n            }\n        }\n    }\n    details[open] {\n        summary {\n            margin-bottom: 0;\n        }\n        > summary {\n            &:before {\n                content: \"-\";\n            }\n        }\n    }\n}\n","/*-------------------------------------------*\\\n    GroupBox\n\\*-------------------------------------------*/\n\nfieldset {\n    border-image: svg-load(\"./icon/groupbox-border.svg\") 2;\n    padding: calc(2 * var(--border-width) + var(--element-spacing));\n    padding-block-start: var(--element-spacing);\n    margin: 0;\n}\nlegend {\n    background: var(--surface);\n}\n.field-row {\n    display: flex;\n    align-items: center;\n    > * {\n        + {\n            * {\n                margin-left: var(--grouped-element-spacing);\n            }\n        }\n    }\n}\n[class^=\"field-row\"] {\n    + {\n        [class^=\"field-row\"] {\n            margin-top: var(--grouped-element-spacing);\n        }\n    }\n}\n.field-row-stacked {\n    display: flex;\n    flex-direction: column;\n    * {\n        + {\n            * {\n                margin-top: var(--grouped-element-spacing);\n            }\n        }\n    }\n}\n","/*-------------------------------------------*\\\n    Tabs\n\\*-------------------------------------------*/\n\n:root {\n    --tab-border: 1px solid #888;\n    --tab-bg: var(--surface);\n}\n\n[role=\"tabpanel\"] {\n    position: relative;\n    z-index: 2;\n}\n\nmenu[role=\"tablist\"] {\n    position: relative;\n    margin: 0 0 -2px 0;\n    text-indent: 0;\n    list-style-type: none;\n    display: flex;\n    padding-left: 3px;\n    button {\n        border-top-left-radius: 3px;\n        border-top-right-radius: 3px;\n        z-index: 1;\n        display: block;\n        color: #222;\n        text-decoration: none;\n        min-width: unset;\n        &[aria-selected=\"true\"] {\n            padding-bottom: 2px;\n            margin-top: -2px;\n            background-color: var(--surface);\n            position: relative;\n            z-index: 8;\n            margin-left: -3px;\n            margin-bottom: 1px;\n        }\n        &:focus {\n            outline: 1px dotted #222;\n            outline-offset: -4px;\n        }\n    }\n    &.justified {\n        button {\n            flex-grow: 1;\n            text-align: center;\n        }\n    }\n}\n\n[role=\"tabpanel\"] {\n    padding: 14px;\n    clear: both;\n    background: var(--tab-bg);\n    border: var(--tab-border);\n    position: relative;\n    z-index: 2;\n    margin-bottom: 9px;\n}\n"]}