windows95.css

/* Windows 95 CSS Customizations */

@font-face {
    font-family: "R95 Sans Serif 12pt";
       src: url("https://cdn.jsdelivr.net/gh/React95/R95-Sans-serif@main/sources/12pt/R95%20Sans%20serif%2012pt.ttf") format("truetype");
}

* {
    font-family: "R95 Sans Serif 12pt", sans-serif !important;
}

/* Textbox Component */
.input-container {
    padding: 2px !important;
    font-size: 1rem !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: rgb(132, 133, 132) rgb(254, 254, 254) rgb(254, 254, 254) rgb(132, 133, 132) !important;
    line-height: 1.5 !important;
}

.input-container::before {
    position: absolute !important;
    left: 0px !important;
    top: 0px !important;
    content: "" !important;
    width: calc(100% - 4px) !important;
    height: calc(100% - 4px) !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: rgb(10, 10, 10) rgb(223, 223, 223) rgb(223, 223, 223) rgb(10, 10, 10) !important;
    pointer-events: none !important;
    box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 3px inset !important;
}

/* Number component */
input[type="number"] {
    left: 0px !important;
    top: 0px !important;
    content: "" !important;
    border-style: solid !important;
    border-width: 2px !important;
    border-color: rgb(10, 10, 10) rgb(223, 223, 223) rgb(223, 223, 223) rgb(10, 10, 10) !important;
    pointer-events: none !important;
    box-shadow: rgba(0, 0, 0, 0.2) 2px 2px 3px inset !important;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Slider styling */
.slider_input_container {
    display: flex !important;
    align-items: center !important;
    background: #c0c0c0 !important;
    padding: 5px 0 !important;
    border: 2px solid #000000 !important;
    box-shadow: 1px 1px 0px white inset, -1px -1px 0px #808080 inset !important;
    position: relative !important;
    border: none !important;
    box-shadow: none !important;
}

.min_value, .max_value {
    padding: 0 5px !important;
}

input[type="range"] {
    appearance: none !important;
    width: 100% !important;
    height: 18px !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    position: relative !important;
    margin: 10px 0 15px !important;
}

input[type="range"]:focus {
    outline: none !important;
}

/* Track styling */
input[type="range"]::-webkit-slider-runnable-track {
    width: 100% !important;
    height: 2px !important;
    box-sizing: border-box !important;
    background: black !important;
    border-right: 1px solid #808080 !important;
    border-bottom: 1px solid #808080 !important;
    box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 #808080,
      -1px -1px 0 #808080, 0 -1px 0 #808080, -1px 1px 0 white, 1px -1px #808080 !important;
}

input[type="range"]::-moz-range-track {
    width: 100% !important;
    height: 2px !important;
    box-sizing: border-box !important;
    background: black !important;
    border-right: 1px solid #808080 !important;
    border-bottom: 1px solid #808080 !important;
    box-shadow: 1px 0 0 white, 1px 1px 0 white, 0 1px 0 white, -1px 0 0 #808080,
      -1px -1px 0 #808080, 0 -1px 0 #808080, -1px 1px 0 white, 1px -1px #808080 !important;
}

/* Slider thumb styling - triangular shape */
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none !important;
    width: 21px !important;
    height: 21px !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    transform: translateY(-5px) !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 2 !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3e%3cpath fill='%23c0c0c0' stroke='%23000' d='M4,1 h12 v14 l-6,5 l-6,-5 z'%3e%3c/path%3e%3cpath fill='none' stroke='%23FFF' d='M5,2 h10 v12 l-5,4 l-5,-4 z'%3e%3c/path%3e%3cpath fill='none' stroke='%23808080' d='M15,2 v12 l-5,4 l-5,-4 v-12'%3e%3c/path%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

input[type="range"]::-moz-range-thumb {
    width: 21px !important;
    height: 21px !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 2 !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21' viewBox='0 0 21 21'%3e%3cpath fill='%23c0c0c0' stroke='%23000' d='M4,1 h12 v14 l-6,5 l-6,-5 z'%3e%3c/path%3e%3cpath fill='none' stroke='%23FFF' d='M5,2 h10 v12 l-5,4 l-5,-4 z'%3e%3c/path%3e%3cpath fill='none' stroke='%23808080' d='M15,2 v12 l-5,4 l-5,-4 v-12'%3e%3c/path%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}

/* Tick marks for the slider */
.slider_input_container::after {
    content: "";
    position: absolute;
    left: 48px;
    right: 26px;
    bottom: 8px;
    height: 6px;
    background-image: 
        repeating-linear-gradient(
            to right,
            #000000,
            #000000 1px,
            transparent 1px,
            transparent 10%
        );
    pointer-events: none;

}

/* Dropdown options styling */
div[id^="dropdown-options"] {
    background-color: white !important;
    border: 2px solid #000000 !important;
    box-shadow: 1px 1px 0px white inset, -1px -1px 0px #808080 inset !important;
    border-radius: 0 !important;
    margin-top: 1px !important;
    max-height: 200px !important;
    overflow-y: auto !important;
}

div[id^="dropdown-options"] div {
    padding: 2px 4px !important;
}

div[id^="dropdown-options"] div:hover, 
div[id^="dropdown-options"] div.selected {
    background-color: #000080 !important;
    color: white !important;
}


/* Scrollbars */
::-webkit-scrollbar {
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-track {
    background: #c0c0c0;
    border: 1px solid #000000;
    box-shadow: inset 1px 1px 0px white, inset -1px -1px 0px #808080;
}

::-webkit-scrollbar-thumb {
    background: #c0c0c0;
    border: 1px solid #000000;
    box-shadow: inset 1px 1px 0px white, inset -1px -1px 0px #808080;
}

::-webkit-scrollbar-button {
    display: block;
    background: #c0c0c0;
    border: 1px solid #000000;
    box-shadow: inset 1px 1px 0px white, inset -1px -1px 0px #808080;
    width: 16px;
    height: 16px;
}

::-webkit-scrollbar-button:vertical:start:decrement {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><polygon points='8,4 4,8 12,8' fill='black'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
}

::-webkit-scrollbar-button:vertical:end:increment {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'><polygon points='8,12 4,8 12,8' fill='black'/></svg>");
    background-position: center;
    background-repeat: no-repeat;
}

/* Windows 95 checkboxes and radio buttons */
input[type="checkbox"], input[type="radio"] {
    appearance: none !important;
    width: 13px !important;
    height: 13px !important;
    background: white !important;
    border: 1px solid black !important;
    box-shadow: inset -1px -1px 0px white, inset 1px 1px 0px #808080 !important;
}

input[type="checkbox"]:checked {
    background: white url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13'><path d='M2,6 L5,9 L11,3' stroke='black' stroke-width='2' fill='none'/></svg>") no-repeat center !important;
}

input[type="radio"] {
    border-radius: 50% !important;
}

input[type="radio"]:checked {
    background: white url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='13' height='13'><circle cx='6.5' cy='6.5' r='3.5' fill='black'/></svg>") no-repeat center !important;
}

/* Windows 95 buttons additional styling */
button {
    text-align: center !important;
    position: relative !important;
}

button:active {
    padding-top: 2px !important;
    padding-left: 2px !important;
    padding-bottom: 0px !important;
    padding-right: 0px !important;
}


/* File input custom styling */
input[type="file"] {
    background-color: white !important;
    border: 2px solid #000000 !important;
    box-shadow: inset 1px 1px 0px #808080, inset -1px -1px 0px white !important;
}

/* Focus outlines */
*:focus {
    outline: 1px dotted black !important;
}

/* Progress bars */
progress {
    appearance: none !important;
    height: 16px !important;
    background: white !important;
    border: 2px solid #000000 !important;
    box-shadow: inset 1px 1px 0px #808080, inset -1px -1px 0px white !important;
}

progress::-webkit-progress-bar {
    background: white !important;
}

progress::-webkit-progress-value {
    background: #000080 !important;
} 

.icon-button-wrapper  {
    box-shadow: var(--block-label-shadow);
    border: var(--block-label-border-width) solid var(--block-label-border-color);
    border-top: none;
    border-left: none;
    border-radius: var(--block-label-radius);
    background: var(--block-label-background-fill);
    pointer-events: none;
    color: var(--block-label-text-color);
    font-weight: var(--block-label-text-weight);
    font-size: var(--block-label-text-size);
    line-height: var(--line-sm);
}

.icon-button-wrapper button {
    background: none;
}