classicy 0.5.2 → 0.5.5

package/src/SystemFolder/ControlPanels/AppearanceManager/styles/scrollbars.scss

@@ -1,296 +0,0 @@
-@mixin scrollbars() {
-  ::-webkit-scrollbar {
-    width: var(--window-scrollbar-size);
-    height: var(--window-scrollbar-size);
-  }
-
-  ::-webkit-scrollbar-button:start:vertical,
-  ::-webkit-scrollbar-button:start:horizontal {
-    display: block;
-    top: 16px;
-    background-color: var(--color-system-02);
-    width: var(--window-scrollbar-size) v;
-    height: var(--window-scrollbar-size);
-  }
-
-  ::-webkit-scrollbar-button:start:vertical {
-    border-left: 1px solid var(--color-black);
-    border-right: 1px solid var(--color-black);
-    border-bottom: 1px solid var(--color-black);
-  }
-
-  ::-webkit-scrollbar-button:start:vertical:decrement {
-    background: linear-gradient(transparent 75%, var(--color-black) 0) 50%/8px 4px no-repeat,
-    linear-gradient(transparent 50%, var(--color-black) 0) 50%/6px 4px no-repeat,
-    linear-gradient(transparent 25%, var(--color-black) 0) 50%/4px 4px no-repeat,
-    linear-gradient(var(--color-black) 50%, var(--color-black) 0) 50%/2px 4px no-repeat,
-    var(--color-system-02);
-    width: var(--window-scrollbar-size);
-    height: var(--window-scrollbar-size);
-  }
-
-  ::-webkit-scrollbar-button:start:vertical:decrement:active {
-    background: linear-gradient(transparent 75%, var(--color-black) 0) 50%/8px 4px no-repeat,
-    linear-gradient(transparent 50%, var(--color-black) 0) 50%/6px 4px no-repeat,
-    linear-gradient(transparent 25%, var(--color-black) 0) 50%/4px 4px no-repeat,
-    linear-gradient(var(--color-black) 50%, var(--color-black) 0) 50%/2px 4px no-repeat,
-    var(--color-system-06);
-    box-shadow: inset 1px 1px 0 var(--color-system-07),
-    inset -1px -1px 0 var(--color-system-07);
-  }
-
-  ::-webkit-scrollbar-button:start:vertical:increment {
-    background: linear-gradient(0deg, transparent 75%, var(--color-black) 0) 50%/8px 4px no-repeat,
-    linear-gradient(0deg, transparent 50%, var(--color-black) 0) 50%/6px 4px no-repeat,
-    linear-gradient(0deg, transparent 25%, var(--color-black) 0) 50%/4px 4px no-repeat,
-    linear-gradient(0deg, var(--color-black) 50%, var(--color-black) 0) 50%/2px 4px no-repeat,
-    var(--color-system-02);
-    border-bottom: none;
-    width: var(--window-scrollbar-size);
-    height: var(--window-scrollbar-size);
-  }
-
-  ::-webkit-scrollbar-button:start:vertical:increment:active {
-    background: linear-gradient(0deg, transparent 75%, var(--color-black) 0) 50%/8px 4px no-repeat,
-    linear-gradient(0deg, transparent 50%, var(--color-black) 0) 50%/6px 4px no-repeat,
-    linear-gradient(0deg, transparent 25%, var(--color-black) 0) 50%/4px 4px no-repeat,
-    linear-gradient(var(--color-black) 50%, var(--color-black) 0) 50%/2px 4px no-repeat,
-    var(--color-system-06);
-    box-shadow: inset 1px 1px 0 var(--color-system-06),
-    inset -1px -1px 0 var(--color-system-07);
-  }
-
-  ::-webkit-scrollbar-button:start:horizontal {
-    border-top: 1px solid var(--color-black);
-    border-bottom: 1px solid var(--color-black);
-    border-right: 1px solid var(--color-black);
-  }
-
-  ::-webkit-scrollbar-button:start:horizontal:decrement {
-    background: linear-gradient(90deg, transparent 75%, var(--color-black) 0) 50%/4px 8px no-repeat,
-    linear-gradient(90deg, transparent 50%, var(--color-black) 0) 50%/4px 6px no-repeat,
-    linear-gradient(90deg, transparent 25%, var(--color-black) 0) 50%/4px 4px no-repeat,
-    linear-gradient(90deg, var(--color-black) 50%, var(--color-black) 0) 50%/4px 2px no-repeat,
-    var(--color-system-02);
-    width: var(--window-scrollbar-size);
-    height: var(--window-scrollbar-size);
-  }
-
-  ::-webkit-scrollbar-button:start:horizontal:decrement:active {
-    background: linear-gradient(90deg, transparent 75%, var(--color-black) 0) 50%/4px 8px no-repeat,
-    linear-gradient(90deg, transparent 50%, var(--color-black) 0) 50%/4px 6px no-repeat,
-    linear-gradient(90deg, transparent 25%, var(--color-black) 0) 50%/4px 4px no-repeat,
-    linear-gradient(var(--color-black) 50%, var(--color-black) 0) 50%/2px 4px no-repeat,
-    var(--color-system-06);
-    box-shadow: inset 1px 1px 0 var(--color-system-06),
-    inset -1px -1px 0 var(--color-system-07);
-  }
-
-  ::-webkit-scrollbar-button:start:horizontal:increment {
-    background: linear-gradient(270deg, transparent 75%, var(--color-black) 0) 50%/4px 8px no-repeat,
-    linear-gradient(270deg, transparent 50%, var(--color-black) 0) 50%/4px 6px no-repeat,
-    linear-gradient(270deg, transparent 25%, var(--color-black) 0) 50%/4px 4px no-repeat,
-    linear-gradient(270deg, var(--color-black) 50%, var(--color-black) 0) 50%/4px 2px no-repeat,
-    var(--color-system-02);
-    border-right: none;
-    width: var(--window-scrollbar-size);
-    height: var(--window-scrollbar-size);
-  }
-
-  ::-webkit-scrollbar-button:start:horizontal:increment:active {
-    background: linear-gradient(270deg, transparent 75%, var(--color-black) 0) 50%/4px 8px no-repeat,
-    linear-gradient(270deg, transparent 50%, var(--color-black) 0) 50%/4px 6px no-repeat,
-    linear-gradient(270deg, transparent 25%, var(--color-black) 0) 50%/4px 4px no-repeat,
-    linear-gradient(var(--color-black) 50%, var(--color-black) 0) 50%/2px 4px no-repeat,
-    var(--color-system-06);
-    box-shadow: inset 1px 1px 0 var(--color-system-06),
-    inset -1px -1px 0 var(--color-system-07);
-  }
-
-  ::-webkit-scrollbar-track {
-    background-color: var(--color-system-04);
-    border: 1px solid var(--color-black);
-  }
-
-  ::-webkit-scrollbar-track:vertical {
-    box-shadow: inset 1px 1px 0 var(--color-system-06),
-    inset -1px 2px 0 var(--color-system-03),
-    inset 2px 0 0 rgba(0, 0, 0, 0.25),
-    inset -2px 0 0 rgba(255, 255, 255, 0.25);
-  }
-
-  ::-webkit-scrollbar-track:horizontal {
-    box-shadow: inset 1px 1px 0 var(--color-system-06),
-    inset 2px -1px 0 var(--color-system-03),
-    inset 2px 0 0 rgba(0, 0, 0, 0.25),
-    inset -2px 0 0 rgba(255, 255, 255, 0.25);
-  }
-
-  ::-webkit-scrollbar-corner {
-    border-top: 1px solid var(--color-black);
-    border-left: 1px solid var(--color-black);
-    box-shadow: inset 1px 1px 0 var(--color-white);
-    background: var(--color-system-03);
-  }
-
-  ::-webkit-scrollbar {
-    margin-bottom: 100px;
-  }
-}
-
-@mixin scrollbars-inactive() {
-  ::-webkit-scrollbar-button:start:vertical,
-  ::-webkit-scrollbar-button:start:horizontal {
-    background-color: var(--color-system-02);
-    box-shadow: inset 1px 1px 0 var(--color-white),
-    inset -1px -1px 0 rgba(255, 255, 255, 0.5);
-  }
-
-  ::-webkit-scrollbar-button:start:vertical {
-    background: var(--color-system-02) !important;
-    border: none !important;
-  }
-
-  ::-webkit-scrollbar-button:start:vertical:decrement {
-    background: var(--color-system-02) !important;
-    border: none !important;
-    box-shadow: none !important;
-    width: 0 !important;
-    height: 0 !important;
-  }
-
-  ::-webkit-scrollbar-button:start:vertical:increment {
-    background: var(--color-system-02) !important;
-    border: none !important;
-    box-shadow: none !important;
-    width: 0 !important;
-    height: 0 !important;
-  }
-
-  ::-webkit-scrollbar-button:start:horizontal {
-    border: none !important;
-    box-shadow: none !important;
-  }
-
-  ::-webkit-scrollbar-button:start:horizontal:decrement {
-    background: var(--color-system-02) !important;
-    border: none !important;
-    box-shadow: none !important;
-    width: 0 !important;
-    height: 0 !important;
-  }
-
-  ::-webkit-scrollbar-button:start:horizontal:increment {
-    background: var(--color-system-02) !important;
-    border: none !important;
-    box-shadow: none !important;
-    width: 0 !important;
-    height: 0 !important;
-  }
-
-  ::-webkit-scrollbar-track {
-    background: var(--color-system-02) !important;
-    border: 1px solid var(--color-system-06) !important;
-  }
-
-  ::-webkit-scrollbar-track:vertical {
-    box-shadow: none !important;
-  }
-
-  ::-webkit-scrollbar-track:horizontal {
-    box-shadow: none !important;
-  }
-
-  ::-webkit-scrollbar-corner {
-    border: none !important;
-    box-shadow: none !important;
-  }
-
-  ::-webkit-scrollbar-thumb {
-    display: none !important;
-  }
-}
-
-@mixin scrollbars-themed() {
-  ::-webkit-scrollbar-thumb {
-    min-width: var(--window-control-size);
-    min-height: var(--window-control-size);
-    border: var(--window-border-size) solid var(--color-theme-07);
-    box-shadow: inset var(--window-border-size) var(--window-border-size) 0 var(--color-system-02),
-    inset calc(var(--window-border-size) * -1) calc(var(--window-border-size) * -1) 0 var(--color-theme-04) !important;
-  }
-
-  ::-webkit-scrollbar-thumb:vertical {
-    background: linear-gradient(
-                    transparent 12.5%,
-                    var(--color-theme-05) 0,
-                    var(--color-theme-05) 25%,
-                    transparent 0,
-                    transparent 37.5%,
-                    var(--color-theme-05) 0,
-                    var(--color-theme-05) 50%,
-                    transparent 0,
-                    transparent 62.5%,
-                    var(--color-theme-05) 0,
-                    var(--color-theme-05) 75%,
-                    transparent 0,
-                    transparent 87.5%,
-                    var(--color-theme-05) 0
-    ) 50%/7px 8px no-repeat,
-    linear-gradient(
-                    var(--color-theme-01) 12.5%,
-                    transparent 0,
-                    transparent 25%,
-                    var(--color-theme-01) 0,
-                    var(--color-theme-01) 37.5%,
-                    transparent 0,
-                    transparent 50%,
-                    var(--color-theme-01) 0,
-                    var(--color-theme-01) 62.5%,
-                    transparent 0,
-                    transparent 75%,
-                    var(--color-theme-01) 0,
-                    var(--color-theme-01) 87.5%,
-                    transparent 0
-    ) 49%/7px 8px no-repeat,
-    var(--color-theme-03);
-  }
-
-  ::-webkit-scrollbar-thumb:horizontal {
-    background: linear-gradient(
-                    90deg,
-                    transparent 12.5%,
-                    var(--color-theme-05) 0,
-                    var(--color-theme-05) 25%,
-                    transparent 0,
-                    transparent 37.5%,
-                    var(--color-theme-05) 0,
-                    var(--color-theme-05) 50%,
-                    transparent 0,
-                    transparent 62.5%,
-                    var(--color-theme-05) 0,
-                    var(--color-theme-05) 75%,
-                    transparent 0,
-                    transparent 87.5%,
-                    var(--color-theme-05) 0
-    ) 50%/8px 7px no-repeat,
-    linear-gradient(
-                    90deg,
-                    var(--color-theme-01) 12.5%,
-                    transparent 0,
-                    transparent 25%,
-                    var(--color-theme-01) 0,
-                    var(--color-theme-01) 37.5%,
-                    transparent 0,
-                    transparent 50%,
-                    var(--color-theme-01) 0,
-                    var(--color-theme-01) 62.5%,
-                    transparent 0,
-                    transparent 75%,
-                    var(--color-theme-01) 0,
-                    var(--color-theme-01) 87.5%,
-                    transparent 0
-    ) center 49%/8px 7px no-repeat,
-    var(--color-theme-03);
-  }
-}