Alternative CSS to provide CSS variables

resources/build/manifest.json

@@ -1,16 +1,16 @@
 {
   "resources/css/app.css": {
-    "file": "assets/app-ByZFPTut.css",
+    "file": "assets/app-B08CKj5m.css",
     "src": "resources/css/app.css",
     "isEntry": true
   },
   "resources/js/app.js": {
-    "file": "assets/app-QPD58V34.js",
+    "file": "assets/app-CwC92lz5.js",
     "name": "app",
     "src": "resources/js/app.js",
     "isEntry": true,
     "css": [
-      "assets/app-DMm3YVxD.css"
+      "assets/app-CI74Z7ga.css"
     ]
   }
 }

resources/css/nouislider.css

@@ -0,0 +1,290 @@
+:root {
+    --noui-width: 16px;
+    --noui-height: 12px;
+    --noui-handle-size: 28px;
+    --noui-handle-radius: 100%;
+    --noui-border-radius: 0;
+    --noui-bg: #FAFAFA;
+    --noui-bg-dark: #e4e4e4;
+    --noui-border: #D3D3D3;
+    --noui-shadow-light: #F0F0F0;
+    --noui-shadow-dark: #BBB;
+    --noui-connect: #2563eb;
+    --noui-shadow-active: #DDD;
+}
+
+/* Functional styling;
+ * These styles are required for noUiSlider to function.
+ * You don't need to change these rules to apply your design.
+ */
+ .noUi-target,
+ .noUi-target * {
+     -webkit-touch-callout: none;
+     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+     -webkit-user-select: none;
+     -ms-touch-action: none;
+     touch-action: none;
+     -ms-user-select: none;
+     -moz-user-select: none;
+     user-select: none;
+     -moz-box-sizing: border-box;
+     box-sizing: border-box;
+ }
+ .noUi-target {
+     position: relative;
+ }
+ .noUi-base,
+ .noUi-connects {
+     width: 100%;
+     height: 100%;
+     position: relative;
+     z-index: 1;
+ }
+ /* Wrapper for all connect elements. */
+ .noUi-connects {
+     overflow: hidden;
+     z-index: 0;
+ }
+ .noUi-connect,
+ .noUi-origin {
+     will-change: transform;
+     position: absolute;
+     z-index: 1;
+     top: 0;
+     right: 0;
+     height: 100%;
+     width: 100%;
+     -ms-transform-origin: 0 0;
+     -webkit-transform-origin: 0 0;
+     -webkit-transform-style: preserve-3d;
+     transform-origin: 0 0;
+     transform-style: flat;
+ }
+ /* Offset direction */
+ .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
+     left: 0;
+     right: auto;
+ }
+ /* Give origins 0 height/width so they don't interfere with clicking the
+  * connect elements.
+  */
+ .noUi-vertical .noUi-origin {
+     top: -100%;
+     width: 0;
+ }
+ .noUi-horizontal .noUi-origin {
+     height: 0;
+ }
+ .noUi-handle {
+     backface-visibility: hidden;
+     position: absolute;
+ }
+ .noUi-touch-area {
+     height: 100%;
+     width: 100%;
+ }
+ .noUi-state-tap .noUi-connect,
+ .noUi-state-tap .noUi-origin {
+     transition: transform 0.3s;
+ }
+ .noUi-state-drag * {
+     cursor: inherit !important;
+ }
+ /* Slider size and handle placement */
+ .noUi-horizontal {
+     height: var(--noui-height);
+ }
+ .noUi-horizontal .noUi-handle {
+     width: var(--noui-handle-size);
+     height: var(--noui-handle-size);
+     border-radius: var(--noui-handle-radius);
+     right: calc(var(--noui-handle-size) / 2 * -1);
+     top: calc(((var(--noui-handle-size) - var(--noui-height)) / 2 * -1) - 1px)
+ }
+ .noUi-vertical {
+     width: var(--noui-width);
+ }
+ .noUi-vertical .noUi-handle {
+     width: var(--noui-handle-size);
+     height: var(--noui-handle-size);
+     right: calc(((var(--noui-handle-size) - var(--noui-height)) / 2 * -1) - 1px);
+     bottom: calc(var(--noui-handle-size) / 2 * -1);
+ }
+ .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
+     left: calc(var(--noui-handle-size) / 2 * -1);
+     right: auto;
+ }
+
+ /* Styling */
+ .noUi-target {
+     background: var(--noui-bg);
+     border-radius: var(--noui-border-radius);
+     border: 1px solid var(--noui-border);
+     box-shadow: inset 0 1px 1px var(--noui-shadow-light), 0 3px 6px -5px var(--noui-shadow-dark);
+ }
+
+ .noUi-connects {
+     border-radius: 3px;
+ }
+
+ .noUi-connect {
+     background: var(--noui-connect);
+ }
+
+ /* Handles and cursors */
+ .noUi-draggable {
+     cursor: ew-resize;
+ }
+
+ .noUi-vertical .noUi-draggable {
+     cursor: ns-resize;
+ }
+
+ .noUi-handle {
+     border: 1px solid var(--noui-border);
+     border-radius: 3px;
+     background: var(--noui-bg);
+     transition: 0.3s background;
+     cursor: pointer;
+     box-shadow: 0 3px 6px -3px var(--noui-shadow-dark);
+ }
+
+ .noUi-active {
+     box-shadow: 0 3px 6px -3px var(--noui-shadow-active);
+     background: var(--noui-bg-dark);
+ }
+
+ .noUi-handle:hover {
+     background: var(--noui-bg-dark);
+ }
+
+ /* Disabled state */
+ [disabled] .noUi-connect {
+     background: #B8B8B8;
+ }
+ [disabled].noUi-target,
+ [disabled].noUi-handle,
+ [disabled] .noUi-handle {
+     cursor: not-allowed;
+ }
+ /* Base */
+ .noUi-pips,
+ .noUi-pips * {
+     -moz-box-sizing: border-box;
+     box-sizing: border-box;
+ }
+ .noUi-pips {
+     position: absolute;
+     color: #999;
+ }
+ /* Values */
+ .noUi-value {
+     position: absolute;
+     white-space: nowrap;
+     text-align: center;
+ }
+ .noUi-value-sub {
+     color: #ccc;
+     font-size: 10px;
+ }
+ /* Markings */
+ .noUi-marker {
+     position: absolute;
+     background: #CCC;
+ }
+ .noUi-marker-sub {
+     background: #AAA;
+ }
+ .noUi-marker-large {
+     background: #AAA;
+ }
+ /* Horizontal layout */
+ .noUi-pips-horizontal {
+     padding: 10px 0;
+     height: 80px;
+     top: 100%;
+     left: 0;
+     width: 100%;
+ }
+ .noUi-value-horizontal {
+     -webkit-transform: translate(-50%, 50%);
+     transform: translate(-50%, 50%);
+ }
+ .noUi-rtl .noUi-value-horizontal {
+     -webkit-transform: translate(50%, 50%);
+     transform: translate(50%, 50%);
+ }
+ .noUi-marker-horizontal.noUi-marker {
+     margin-left: -1px;
+     width: 2px;
+     height: 5px;
+ }
+ .noUi-marker-horizontal.noUi-marker-sub {
+     height: 10px;
+ }
+ .noUi-marker-horizontal.noUi-marker-large {
+     height: 15px;
+ }
+ /* Vertical layout */
+ .noUi-pips-vertical {
+     padding: 0 10px;
+     height: 100%;
+     top: 0;
+     left: 100%;
+ }
+ .noUi-value-vertical {
+     -webkit-transform: translate(0, -50%);
+     transform: translate(0, -50%);
+     padding-left: 25px;
+ }
+ .noUi-rtl .noUi-value-vertical {
+     -webkit-transform: translate(0, 50%);
+     transform: translate(0, 50%);
+ }
+ .noUi-marker-vertical.noUi-marker {
+     width: 5px;
+     height: 2px;
+     margin-top: -1px;
+ }
+ .noUi-marker-vertical.noUi-marker-sub {
+     width: 10px;
+ }
+ .noUi-marker-vertical.noUi-marker-large {
+     width: 15px;
+ }
+ .noUi-tooltip {
+     display: block;
+     position: absolute;
+     border: 1px solid #D9D9D9;
+     border-radius: 3px;
+     background: #fff;
+     color: #000;
+     padding: 5px;
+     text-align: center;
+     white-space: nowrap;
+ }
+ .noUi-horizontal .noUi-tooltip {
+     -webkit-transform: translate(-50%, 0);
+     transform: translate(-50%, 0);
+     left: 50%;
+     bottom: 120%;
+ }
+ .noUi-vertical .noUi-tooltip {
+     -webkit-transform: translate(0, -50%);
+     transform: translate(0, -50%);
+     top: 50%;
+     right: 120%;
+ }
+ .noUi-horizontal .noUi-origin > .noUi-tooltip {
+     -webkit-transform: translate(50%, 0);
+     transform: translate(50%, 0);
+     left: auto;
+     bottom: 10px;
+ }
+ .noUi-vertical .noUi-origin > .noUi-tooltip {
+     -webkit-transform: translate(0, -18px);
+     transform: translate(0, -18px);
+     top: auto;
+     right: 28px;
+ }
+

resources/js/app.js

@@ -3,5 +3,5 @@ import flatpickr from "flatpickr"
 import "flatpickr/dist/flatpickr.min.css";
 
 import noUiSlider from 'nouislider';
-import 'nouislider/dist/nouislider.css';
+import '../css/nouislider.css';
 window.noUiSlider = noUiSlider;