Create windows95.css

windows95.css

@@ -0,0 +1,303 @@
+/* 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;
+}