/* arabic */ @font-face { font-family: 'Handjet'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/handjet/v22/oY108eXHq7n1OnbQrOY_2FrEwYEMLlcdP1mCtZaLaTutCwcIhGZenU3Fgt0.woff2) format('woff2'); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1; } /* armenian */ @font-face { font-family: 'Handjet'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/handjet/v22/oY108eXHq7n1OnbQrOY_2FrEwYEMLlcdP1mCtZaLaTutCwcIhGZeiE3Fgt0.woff2) format('woff2'); unicode-range: U+0308, U+0530-058F, U+2010, U+2024, U+25CC, U+FB13-FB17; } /* cyrillic-ext */ @font-face { font-family: 'Handjet'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/handjet/v22/oY108eXHq7n1OnbQrOY_2FrEwYEMLlcdP1mCtZaLaTutCwcIhGZelU3Fgt0.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Handjet'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/handjet/v22/oY108eXHq7n1OnbQrOY_2FrEwYEMLlcdP1mCtZaLaTutCwcIhGZenE3Fgt0.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek */ @font-face { font-family: 'Handjet'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/handjet/v22/oY108eXHq7n1OnbQrOY_2FrEwYEMLlcdP1mCtZaLaTutCwcIhGZem03Fgt0.woff2) format('woff2'); unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF; } /* hebrew */ @font-face { font-family: 'Handjet'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/handjet/v22/oY108eXHq7n1OnbQrOY_2FrEwYEMLlcdP1mCtZaLaTutCwcIhGZemk3Fgt0.woff2) format('woff2'); unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; } /* vietnamese */ @font-face { font-family: 'Handjet'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/handjet/v22/oY108eXHq7n1OnbQrOY_2FrEwYEMLlcdP1mCtZaLaTutCwcIhGZel03Fgt0.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Handjet'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/handjet/v22/oY108eXHq7n1OnbQrOY_2FrEwYEMLlcdP1mCtZaLaTutCwcIhGZelk3Fgt0.woff2) format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Handjet'; font-style: normal; font-weight: 100 900; font-display: swap; src: url(https://fonts.gstatic.com/s/handjet/v22/oY108eXHq7n1OnbQrOY_2FrEwYEMLlcdP1mCtZaLaTutCwcIhGZemE3F.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { --guiHeight:350px; --defaultMapPaddingX: 32px; --defaultMapPaddingY: 20px; --defaultGuiPaddingX: 20px; --defaultGuiPaddingY: 30px; --defaultGuiPaddingBottom: 20px; --defaultMapCircleHeight: 10px; --scaleBarContainerHeight: 250px; --scaleBarContainerWidth: 30px; --scaleBarContainerCurveSize: 50px; --mainFont: 'Handjet', 'MS Sans Serif', 'Helvetica', 'Arial', sans-serif; --guiCircleOffsetX: 50px; --guiCircleSize: 200px; --guiCurcleOffsetY: 50px; --clockWidth: 145px; --clockHeight: 30px; --clockPaddingY: 0px; --clockPaddingX: 0px; --clockCurve: 15px; } body, body *, body *::before, body *::after { padding: 0px; margin: 0px; border: 0px; border-radius: 0; background: transparent; box-sizing: border-box; } body, body :not(p, span, b, strong, a, i, u, strike, ul, ol), body :not(p, span, b, strong, a, i, u, strike)::after, body :not(p, span, b, strong, a, i, u, strike)::before { display: block; } ul, ol { list-style-type: none; display: flex; flex-direction: column; } :is(p, span, b, strong, a, i, u, strike), :is(p, span, b, strong, a, i, u, strike)::after, :is(p, span, b, strong, a, i, u, strike)::before { display: inline-block; } body { background: #404040; font-family: var(--mainFont); } :root { --secondary: #736fb0; --primary: #fab106; --tetriary: #1d2940; --complimentary: #383737; --secondComplimentary: #f5ece1; --color0: #05FAB0; --color1: #058cfa; --color2: #3605fa; --color3: #ee05fa; --color4: #fa054e; --color5: #fa7305; --color6: #c9fa05; --color7: #11fa05; --secondary-dark-67: #26253a; --secondary-dark-27: #545180; --secondary-light-37: #a7a4cd; --secondary-dark-17: #5f5c92; --secondary-dark-37: #48466f; --secondary-dark-57: #31304c; --secondary-desaturate-80-dark-70: #323135; --secondary-hue-60-desaturate-10-light-70: #e7d6e6; --secondary-hue-60-desaturate-20-dark-1: #ae7aaa; --secondary-desaturate-80-dark-80: #212123; --secondary-desaturate-80-light-10: #aeadb8; --secondary-desaturate-50-dark-20: #75738d; --secondary-light-70: #d5d4e7; --secondary-desaturate-50-dark-50: #494858; --secondary-desaturate-50-light-20: #a8a6c0; --secondary-light-50: #b9b7d8; --secondary-desaturate-50: #9290b0; --secondary-dark-50: #3a3858; --secondary-desaturate-70-dark-10: #8e8d9e; --secondary-desaturate-20-light-80: #e5e5ef; --secondary-desaturate-20-light-60: #cccadf; --secondary-desaturate-70-light-10: #a8a7b8; --secondary-desaturate-20-dark-40: #4c4a6a; --secondary-desaturate-40-light-30: #afacc8; --secondary-desaturate-30-light-70: #dadae7; --secondary-desaturate-10-light-45: #b6b4d4; --secondary-desaturate-10-light-40: #afadd0; --secondary-desaturate-50-dark-10: #83829e; --secondary-desaturate-59-dark-15: #808096; --primary-dark-50: #7d5903; --primary-dark-37: #9e7004; --primary-darken-50: #7d5803; --primary-dark-56: #6e4e03; --primary-desaturate-30-brighten-70: #fdc951; --primary-desaturate-80-dark-40: #968d78; --primary-desaturate-80-dark-50: #7d7664; --primary-desaturate-50-dark-40: #96804c; --primary-light-68: #fde6af; --primary-light-45: #fcd476; --primary-desaturate-40-dark-10: #e1b95c; --primary-dark-70: #4b3502; --primary-light-95: #fffbf3; --primary-hue-210: #3706fa; --primary-hue-210-desaturate-70-light-50: #e0d8fd; --primary-desaturate-80-dark-30: #afa58c; --primary-desaturate-60-light-50: #fdeecc; --primary-desaturate-70-dark-10: #e1cd9f; --primary-desaturate-80-dark-45: #8a816e; --primary-desaturate-30-dark-80: #322810; --primary-hue-210-desaturate-80-dark-30: #938caf; --primary-hue-210-desaturate-60-light-50: #d6ccfd; --primary-hue-210-desaturate-70-dark-10: #ad9fe1; --primary-hue-210-desaturate-80-dark-45: #746e8a; --primary-hue-210-desaturate-30-dark-80: #171032; --primary-desaturate-20-dark-80: #32260b; --complimentary-desaturate-80-dark-77: #0d0d0d; --complimentary-light-10: #4c4b4b; --secondary-dark-70-desaturate-80: var(--secondary-desaturate-80-dark-70); --secondary-hue-60-light-70-desaturate-10: var(--secondary-hue-60-desaturate-10-light-70); --secondary-desaturate-10-hue-60-light-70: var(--secondary-hue-60-desaturate-10-light-70); --secondary-desaturate-10-light-70-hue-60: var(--secondary-hue-60-desaturate-10-light-70); --secondary-light-70-hue-60-desaturate-10: var(--secondary-hue-60-desaturate-10-light-70); --secondary-light-70-desaturate-10-hue-60: var(--secondary-hue-60-desaturate-10-light-70); --secondary-hue-60-dark-1-desaturate-20: var(--secondary-hue-60-desaturate-20-dark-1); --secondary-desaturate-20-hue-60-dark-1: var(--secondary-hue-60-desaturate-20-dark-1); --secondary-desaturate-20-dark-1-hue-60: var(--secondary-hue-60-desaturate-20-dark-1); --secondary-dark-1-hue-60-desaturate-20: var(--secondary-hue-60-desaturate-20-dark-1); --secondary-dark-1-desaturate-20-hue-60: var(--secondary-hue-60-desaturate-20-dark-1); --secondary-dark-80-desaturate-80: var(--secondary-desaturate-80-dark-80); --secondary-light-10-desaturate-80: var(--secondary-desaturate-80-light-10); --secondary-dark-20-desaturate-50: var(--secondary-desaturate-50-dark-20); --secondary-dark-50-desaturate-50: var(--secondary-desaturate-50-dark-50); --secondary-light-20-desaturate-50: var(--secondary-desaturate-50-light-20); --secondary-dark-10-desaturate-70: var(--secondary-desaturate-70-dark-10); --secondary-light-80-desaturate-20: var(--secondary-desaturate-20-light-80); --secondary-light-60-desaturate-20: var(--secondary-desaturate-20-light-60); --secondary-light-10-desaturate-70: var(--secondary-desaturate-70-light-10); --secondary-dark-40-desaturate-20: var(--secondary-desaturate-20-dark-40); --secondary-light-30-desaturate-40: var(--secondary-desaturate-40-light-30); --secondary-light-70-desaturate-30: var(--secondary-desaturate-30-light-70); --secondary-light-45-desaturate-10: var(--secondary-desaturate-10-light-45); --secondary-light-40-desaturate-10: var(--secondary-desaturate-10-light-40); --secondary-dark-10-desaturate-50: var(--secondary-desaturate-50-dark-10); --secondary-dark-15-desaturate-59: var(--secondary-desaturate-59-dark-15); --primary-brighten-70-desaturate-30: var(--primary-desaturate-30-brighten-70); --primary-dark-40-desaturate-80: var(--primary-desaturate-80-dark-40); --primary-dark-50-desaturate-80: var(--primary-desaturate-80-dark-50); --primary-dark-40-desaturate-50: var(--primary-desaturate-50-dark-40); --primary-dark-10-desaturate-40: var(--primary-desaturate-40-dark-10); --primary-hue-210-light-50-desaturate-70: var(--primary-hue-210-desaturate-70-light-50); --primary-desaturate-70-hue-210-light-50: var(--primary-hue-210-desaturate-70-light-50); --primary-desaturate-70-light-50-hue-210: var(--primary-hue-210-desaturate-70-light-50); --primary-light-50-hue-210-desaturate-70: var(--primary-hue-210-desaturate-70-light-50); --primary-light-50-desaturate-70-hue-210: var(--primary-hue-210-desaturate-70-light-50); --primary-dark-30-desaturate-80: var(--primary-desaturate-80-dark-30); --primary-light-50-desaturate-60: var(--primary-desaturate-60-light-50); --primary-dark-10-desaturate-70: var(--primary-desaturate-70-dark-10); --primary-dark-45-desaturate-80: var(--primary-desaturate-80-dark-45); --primary-dark-80-desaturate-30: var(--primary-desaturate-30-dark-80); --primary-hue-210-dark-30-desaturate-80: var(--primary-hue-210-desaturate-80-dark-30); --primary-desaturate-80-hue-210-dark-30: var(--primary-hue-210-desaturate-80-dark-30); --primary-desaturate-80-dark-30-hue-210: var(--primary-hue-210-desaturate-80-dark-30); --primary-dark-30-hue-210-desaturate-80: var(--primary-hue-210-desaturate-80-dark-30); --primary-dark-30-desaturate-80-hue-210: var(--primary-hue-210-desaturate-80-dark-30); --primary-hue-210-light-50-desaturate-60: var(--primary-hue-210-desaturate-60-light-50); --primary-desaturate-60-hue-210-light-50: var(--primary-hue-210-desaturate-60-light-50); --primary-desaturate-60-light-50-hue-210: var(--primary-hue-210-desaturate-60-light-50); --primary-light-50-hue-210-desaturate-60: var(--primary-hue-210-desaturate-60-light-50); --primary-light-50-desaturate-60-hue-210: var(--primary-hue-210-desaturate-60-light-50); --primary-hue-210-dark-10-desaturate-70: var(--primary-hue-210-desaturate-70-dark-10); --primary-desaturate-70-hue-210-dark-10: var(--primary-hue-210-desaturate-70-dark-10); --primary-desaturate-70-dark-10-hue-210: var(--primary-hue-210-desaturate-70-dark-10); --primary-dark-10-hue-210-desaturate-70: var(--primary-hue-210-desaturate-70-dark-10); --primary-dark-10-desaturate-70-hue-210: var(--primary-hue-210-desaturate-70-dark-10); --primary-hue-210-dark-45-desaturate-80: var(--primary-hue-210-desaturate-80-dark-45); --primary-desaturate-80-hue-210-dark-45: var(--primary-hue-210-desaturate-80-dark-45); --primary-desaturate-80-dark-45-hue-210: var(--primary-hue-210-desaturate-80-dark-45); --primary-dark-45-hue-210-desaturate-80: var(--primary-hue-210-desaturate-80-dark-45); --primary-dark-45-desaturate-80-hue-210: var(--primary-hue-210-desaturate-80-dark-45); --primary-hue-210-dark-80-desaturate-30: var(--primary-hue-210-desaturate-30-dark-80); --primary-desaturate-30-hue-210-dark-80: var(--primary-hue-210-desaturate-30-dark-80); --primary-desaturate-30-dark-80-hue-210: var(--primary-hue-210-desaturate-30-dark-80); --primary-dark-80-hue-210-desaturate-30: var(--primary-hue-210-desaturate-30-dark-80); --primary-dark-80-desaturate-30-hue-210: var(--primary-hue-210-desaturate-30-dark-80); --primary-dark-80-desaturate-20: var(--primary-desaturate-20-dark-80); --complimentary-dark-77-desaturate-80: var(--complimentary-desaturate-80-dark-77); } body.mapView-dragging * { user-select: none; cursor: grabbing; } .face { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } .mapView { position: absolute; height: 100svh; width: 100lvw; z-index: 1; display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; --paddingX: 32px; --paddingTop: 20px; --paddingBottom: 20px; --circleHeight: 10px; --halfCircleTop: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='b' data-name='Warstwa 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 283.46 56.69' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cstyle%3E .d %7B fill: %231d1d1b; %7D %3C/style%3E%3C/defs%3E%3Cg id='c' data-name='Warstwa 1'%3E%3Cpath class='d' d='M141.73,0C0,0,0,56.69,0,56.69h283.46s0-56.69-141.73-56.69Z'/%3E%3C/g%3E%3C/svg%3E"); --halfCircleBottom: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='b' data-name='Warstwa 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 283.46 56.69' preserveAspectRatio='none'%3E%3Cdefs%3E%3Cstyle%3E .d %7B fill: %231d1d1b; %7D %3C/style%3E%3C/defs%3E%3Cg id='c' data-name='Warstwa 1'%3E%3Cpath class='d' d='M141.73,56.69c141.73,0,141.73-56.69,141.73-56.69H0s0,56.69,141.73,56.69Z'/%3E%3C/g%3E%3C/svg%3E"); --maskFull: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.69 56.69' preserveAspectRatio='none'%3E%3Crect width='56.69' height='56.69'/%3E%3C/svg%3E"); padding-top: var(--paddingTop); align-items: center; align-content: center; } .screenCutMask::before, .screenCutMask::after, .mapView .screenShadows .shadow::before, .mapView .screenShadows .shadow::after, .mapView .gui, .gui .clock, .screenCutMaskClock, .screenCutMaskInner { --h0: var(--posTop, 0%); --w0: var(--posLeft, 0%); --w100: calc(var(--maskScreen_w, 100%) + var(--posLeft, 0%)); --h100: calc(var(--maskScreen_h, 100%) + var(--posTop, 0%)); --w50: calc(calc(var(--maskScreen_w, 100%) * 0.5) + var(--posLeft, 0%)); --pR: calc(var(--paddingRight, var(--paddingX, var(--defaultMapPaddingX))) + var(--offsetRight, var(--offsetX, var(--offset, 0px)))); /* paddingRight */ --pT: calc(var(--posTop, 0%) + calc(var(--paddingTop, var(--paddingY, var(--defaultMapPaddingY))) + var(--offsetTop, var(--offsetY, var(--offset, 0px))))); /* paddingTop */ --pL: calc(var(--posLeft, 0%) + calc(var(--paddingLeft, var(--paddingX, var(--defaultMapPaddingX))) + var(--offsetLeft, var(--offsetX, var(--offset, 0px))))); /* paddingLeft */ --pB: calc(var(--paddingBottom, var(--paddingY, var(--defaultMapPaddingY))) + var(--offsetBottom, var(--offsetY, var(--offset, 0px)))); /* paddingBottom */ --cH: calc(var(--circleHeight, 0px) + var(--circleOffset, 0px)); /* circleHeight */ --hH: calc(calc(var(--h100) - calc(var(--pT) + var(--pB))) / 2); /* half height of screen area */ --tH: calc(var(--hH) + var(--pT)); /* top 50% inside screenArea */ --sBegin: calc(var(--tH) - calc(calc(var(--scaleBarContainerHeight) / 2)) - var(--offset, 0px)); /* scaleContHeight Begin */ --sEnd: calc(var(--tH) + calc(calc(var(--scaleBarContainerHeight) / 2)) + var(--offset, 0px)); /* scaleContHeight end */ --clock_w: calc(var(--clockWidth, 200px) + calc(var(--clockPaddingLeft, var(--clockPaddingX, var(--clockPadding, 10px))) + var(--clockPaddingRight, var(--clockPaddingX, var(--clockPadding, 10px))))); --clock_h: calc(var(--clockHeight, 20px) + calc(var(--clockPaddingTop, var(--clockPaddingY, var(--clockPadding, 10px))) + var(--clockPaddingBottom, var(--clockPaddingY, var(--clockPadding, 10px))))); --clock_c: calc(var(--clockCurve, 30px) / 2); --clock_y: calc(var(--pT) + var(--cH)); } .screenCutMask::before, .screenCutMask::after, .mapView .screenShadows .shadow::before, .mapView .screenShadows .shadow::after, .mapView .gui, .screenCutMaskClock, .clock .clockInner { mask-size: 100% 100%, 100px 100px; mask-repeat: no-repeat; mask-position: center center, top left; mask-composite: subtract; clip-path: shape( from calc(100% - var(--pR)) calc(var(--pT) + var(--cH)), curve to 50% var(--pT) with calc(100% - var(--pR)) var(--pT), curve to var(--pL) calc(var(--pT) + var(--cH)) with var(--pL) var(--pT), line to 0% calc(var(--pT) + var(--cH)), line to 0% 0%, line to 100% 0%, line to 100% calc(var(--pT) + var(--cH)), line to 100% calc(100% - calc(var(--pB) + var(--cH))), line to 100% 100%, line to 0% 100%, line to 0% calc(var(--pT) + var(--cH)), line to var(--pL) calc(var(--pT) + var(--cH)), line to var(--pL) calc(100% - calc(var(--pB) + var(--cH))), curve to 50% calc(100% - var(--pB)) with var(--pL) calc(100% - var(--pB)), curve to calc(100% - var(--pR)) calc(100% - calc(var(--pB) + var(--cH))) with calc(100% - var(--pR)) calc(100% - var(--pB)), line to calc(100% - var(--pR)) calc(var(--pT) + var(--cH)), close, move to calc(100% - var(--pR)) var(--sBegin), line to 100% var(--sBegin), line to 100% var(--sEnd), line to calc(100% - var(--pR)) var(--sEnd), curve to calc(100% - calc(var(--pR) + var(--scaleBarContainerWidth))) calc(var(--sEnd) - var(--scaleBarContainerCurveSize)) with calc(100% - var(--pR)) calc(var(--sEnd) - calc(calc(var(--scaleBarContainerCurveSize) + var(--offset, 0px)) / 2)) / calc(100% - calc(var(--pR) + var(--scaleBarContainerWidth))) calc(var(--sEnd) - calc(calc(var(--scaleBarContainerCurveSize) + var(--offset, 0px)) / 2)), line to calc(100% - calc(var(--pR) + var(--scaleBarContainerWidth))) calc(var(--sBegin) + calc(var(--scaleBarContainerCurveSize) + var(--offset, 0px))), curve to calc(100% - var(--pR)) var(--sBegin) with calc(100% - calc(var(--pR) + var(--scaleBarContainerWidth))) calc(var(--sBegin) + calc(calc(var(--scaleBarContainerCurveSize) + var(--offset, 0px)) / 2)) / calc(100% - var(--pR)) calc(var(--sBegin) + calc(calc(var(--scaleBarContainerCurveSize) + var(--offset, 0px)) / 2)), close, move to var(--guiCircleOffsetX) calc(var(--guiCurcleOffsetY) + calc(var(--guiCircleSize) / 2)), arc to calc(var(--guiCircleOffsetX) + var(--guiCircleSize)) calc(var(--guiCurcleOffsetY) + calc(var(--guiCircleSize) / 2)) of calc(var(--guiCircleSize) / 2) calc(var(--guiCircleSize) / 2) cw, close, move to 0% 0%, line to calc(var(--pL) + var(--clock_w)) 0%, line to calc(var(--pL) + var(--clock_w)) calc(var(--clock_y) + max(0px, calc(var(--clock_h) - calc(var(--clock_c) * 2)))), curve to calc(var(--pL) + max(0px, calc(var(--clock_w) - calc(var(--clock_c) * 2)))) calc(var(--clock_y) + var(--clock_h)) with calc(var(--pL) + max(0px, calc(var(--clock_w) - calc(var(--clock_c) * 0)))) calc(var(--clock_y) + max(0px, calc(var(--clock_h) - calc(var(--clock_c) * 2)))) / calc(var(--pL) + max(0px, calc(var(--clock_w) - calc(var(--clock_c) * 0)))) calc(var(--clock_y) + max(0px, calc(var(--clock_h) - calc(var(--clock_c) * 0)))), line to 0% calc(var(--clock_y) + var(--clock_h)), close, ); } .screenCutMaskInner { clip-path: shape( from calc(100% - var(--pR)) calc(var(--pT) + var(--cH)), curve to 50% var(--pT) with calc(100% - var(--pR)) var(--pT), curve to var(--pL) calc(var(--pT) + var(--cH)) with var(--pL) var(--pT), line to var(--pL) calc(100% - calc(var(--pB) + var(--cH))), curve to 50% calc(100% - var(--pB)) with var(--pL) calc(100% - var(--pB)), curve to calc(100% - var(--pR)) calc(100% - calc(var(--pB) + var(--cH))) with calc(100% - var(--pR)) calc(100% - var(--pB)), line to calc(100% - var(--pR)) calc(var(--pT) + var(--cH)), close ); } .screenCutMaskNoSlider::before, .screenCutMaskNoSlider::after, .screenCutMaskNoSliderBorder::before, .screenCutMaskBorderClock::before, .screenCutMaskBorderClock::after { --bs: var(--borderSize, 1px); --pR: calc(var(--paddingRight, var(--paddingX, var(--defaultMapPaddingX))) + var(--offsetRight, var(--offsetX, var(--offset, 0px)))); /* paddingRight */ --pT: calc(var(--paddingTop, var(--paddingY, var(--defaultMapPaddingY))) + var(--offsetTop, var(--offsetY, var(--offset, 0px)))); /* paddingTop */ --pL: calc(var(--paddingLeft, var(--paddingX, var(--defaultMapPaddingX))) + var(--offsetLeft, var(--offsetX, var(--offset, 0px)))); /* paddingLeft */ --pB: calc(var(--paddingBottom, var(--paddingY, var(--defaultMapPaddingY))) + var(--offsetBottom, var(--offsetY, var(--offset, 0px)))); /* paddingBottom */ --cH: calc(var(--circleHeight, 0px) + var(--circleOffset, 0px)); /* circleHeight */ --hH: calc(calc(100% - calc(var(--pT) + var(--pB))) / 2); /* half height of screen area */ --tH: calc(var(--hH) + var(--pT)); /* top 50% inside screenArea */ --sBegin: calc(var(--tH) - calc(calc(var(--scaleBarContainerHeight) / 2)) - var(--offset, 0px)); /* scaleContHeight Begin */ --sEnd: calc(var(--tH) + calc(calc(var(--scaleBarContainerHeight) / 2)) + var(--offset, 0px)); /* scaleContHeight end */ clip-path: shape( from calc(100% - var(--pR)) calc(var(--pT) + var(--cH)), curve to 50% var(--pT) with calc(100% - var(--pR)) var(--pT), curve to var(--pL) calc(var(--pT) + var(--cH)) with var(--pL) var(--pT), line to var(--pL) calc(100% - calc(var(--pB) + var(--cH))), curve to 50% calc(100% - var(--pB)) with var(--pL) calc(100% - var(--pB)), curve to calc(100% - var(--pR)) calc(100% - calc(var(--pB) + var(--cH))) with calc(100% - var(--pR)) calc(100% - var(--pB)), line to calc(100% - calc(var(--pR) + var(--bs))) calc(100% - calc(calc(var(--pB) + var(--bs)) + var(--cH))), curve to 50% calc(100% - calc(var(--pB) + var(--bs))) with calc(100% - calc(var(--pR) + var(--bs))) calc(100% - calc(var(--pB) + var(--bs))), curve to calc(var(--pL) + var(--bs)) calc(100% - calc(calc(var(--pB) + var(--bs)) + var(--cH))) with calc(var(--pL) + var(--bs)) calc(100% - calc(var(--pB) + var(--bs))), line to calc(var(--pL) + var(--bs)) calc(calc(var(--pT) + var(--bs)) + var(--cH)), curve to 50% calc(var(--pT) + var(--bs)) with calc(var(--pL) + var(--bs)) calc(var(--pT) + var(--bs)), curve to calc(100% - calc(var(--pR) + var(--bs))) calc(calc(var(--pT) + var(--bs)) + var(--cH)) with calc(100% - calc(var(--pR) + var(--bs))) calc(var(--pT) + var(--bs)), line to calc(100% - calc(var(--pR) + var(--bs))) calc(100% - calc(calc(var(--pB) + var(--bs)) + var(--cH))), line to calc(100% - var(--pR)) calc(100% - calc(var(--pB) + var(--cH))), close ); } .screenCutMaskNoSliderBorderClock { --bs: var(--borderSize, 1px); --pR: calc(var(--paddingRight, var(--paddingX, var(--defaultMapPaddingX))) + var(--offsetRight, var(--offsetX, var(--offset, 0px)))); /* paddingRight */ --pT: calc(var(--paddingTop, var(--paddingY, var(--defaultMapPaddingY))) + var(--offsetTop, var(--offsetY, var(--offset, 0px)))); /* paddingTop */ --pL: calc(var(--paddingLeft, var(--paddingX, var(--defaultMapPaddingX))) + var(--offsetLeft, var(--offsetX, var(--offset, 0px)))); /* paddingLeft */ --pB: calc(var(--paddingBottom, var(--paddingY, var(--defaultMapPaddingY))) + var(--offsetBottom, var(--offsetY, var(--offset, 0px)))); /* paddingBottom */ --cH: calc(var(--circleHeight, 0px) + var(--circleOffset, 0px)); /* circleHeight */ --hH: calc(calc(100% - calc(var(--pT) + var(--pB))) / 2); /* half height of screen area */ --tH: calc(var(--hH) + var(--pT)); /* top 50% inside screenArea */ --sBegin: calc(var(--tH) - calc(calc(var(--scaleBarContainerHeight) / 2)) - var(--offset, 0px)); /* scaleContHeight Begin */ --sEnd: calc(var(--tH) + calc(calc(var(--scaleBarContainerHeight) / 2)) + var(--offset, 0px)); /* scaleContHeight end */ clip-path: shape( from 0% 0%, line to var(--pL) calc(var(--pT) + var(--cH)), curve to calc(var(--pL) + var(--e_curve, 30px)) calc(var(--pT) + max(0px, calc(var(--cH) - var(--e_curve, 30px)))) with var(--pL) calc(var(--pT) + var(--cH)), line to calc(var(--pL) + var(--e_curve, 30px)) var(--pT), line to var(--pL) var(--pT), line to var(--pL) calc(var(--pT) + var(--cH)), close ); } .mapView .screenBorders { z-index: 2; position: absolute; width: 100%; /* --screenHeight: calc(100% - calc(var(--guiHeight, 100px) - var(--paddingBottom))); */ height: 100%; pointer-events: none; user-select: none; touch-action: none; left: 0px; top: 0px; } .mapView .screenBorders .face { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; } .mapView .screenBorders .face::before { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; content: ''; --paddingBottom: calc(var(--guiHeight) + 20px); background: #000; } .mapView .gui { --offset:-2px; --paddingBottom: calc(var(--guiHeight) + 20px); } .mapView .screenBorders .face .faces, .mapView .screenBorders .face .faces-lines, .mapView .screenBorders .face .faces-lines .face-lines { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; /* mask-repeat: no-repeat; mask-composite: subtract, add, add; */ } .mapView .screenBorders .face .faces-lines::after { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; content: ''; background: #000; --paddingBottom: calc(var(--guiHeight) + 20px); --offset: -12px; } .mapView .screenBorders .face .faces-lines::before { position: absolute; width: 100%; height: 100%; left: 1px; top: 1px; content: ''; background: #fff; --paddingBottom: calc(var(--guiHeight) + 20px); --offset: -12px; } /* .mapView .screenBorders .face .faces-lines .face-lines:last-child { clip-path: polygon(calc(100% - var(--pR)) 0, 0% 100%, 100% 100%); --offset: -12px; --pR: calc(var(--paddingRight, var(--paddingX, var(--defaultMapPaddingX))) + var(--offsetRight, var(--offsetX, var(--offset, 0px)))); --pT: calc(var(--paddingTop, var(--paddingY, var(--defaultMapPaddingY))) + var(--offsetTop, var(--offsetY, var(--offset, 0px)))); --pL: calc(var(--paddingLeft, var(--paddingX, var(--defaultMapPaddingX))) + var(--offsetLeft, var(--offsetX, var(--offset, 0px)))); --pB: calc(var(--paddingBottom, var(--paddingY, var(--defaultMapPaddingY))) + var(--offsetBottom, var(--offsetY, var(--offset, 0px)))); } .mapView .screenBorders .face .faces-lines .face-lines::before, .mapView .screenBorders .face .faces-lines .face-lines::after { position: absolute; width: 100%; height: 100%; left: 0px; content: ''; top: 0px; --paddingBottom: calc(var(--guiHeight) + 20px); } .mapView .screenBorders .face .faces-lines .face-lines::after { --offset: -12px; } .mapView .screenBorders .face .faces-lines .face-lines:first-child::after, .mapView .screenBorders .face .faces-lines .face-lines:last-child::before { background: #000; } .mapView .screenBorders .face .faces-lines .face-lines::before { --offset: -11px; } .mapView .screenBorders .face .faces-lines .face-lines:first-child::before, .mapView .screenBorders .face .faces-lines .face-lines:last-child::after { background: #fff; } */ .mapView .screenBorders .face .faces::before { content: ''; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; --offset: -2px; --paddingBottom: calc(var(--guiHeight) + 20px); } .mapView .screenBorders .face .faces::before, .mapView .gui .guiInner { background: linear-gradient(180deg, var(--secondary-dark-67) 0%, var(--secondary-dark-27) calc(0% + 2px), var(--secondary-light-37) calc(0% + 8px), var(--secondary-dark-17) calc(0% + 12px), var(--secondary-dark-37) 50%, var(--secondary-dark-57) calc(100% - calc(var(--guiHeight, 100px)) + 10%), var(--complimentary) 100%); background-size: var(--windowWidth, 100%) var(--windowHeight, 100%); } .mapView .screenBorders .face .faces::before { background-position: top left; } .mapView .gui .guiInner { background-position: 0px calc(var(--containerTop, 0px) * -1); } .mapView .screenBorders .face .faces.topLvl::before { --offset: -13px; --paddingBottom: calc(var(--guiHeight) + 20px); display: none; } .mapView .screenBorders .face .faces :is(.face-left, .face-right) { width: var(--paddingX); height: 100%; position: absolute; top: 0px; } .mapView .screenBorders .face .faces-lines { opacity: 0.5; } .mapView .screenBorders .face .faces .face-left { left: 0px; } .mapView .screenBorders .face .faces .face-right { right: 0px; } .mapView .screenBorders .face .faces :is(.face-top, .face-bottom) { width: 100%; left: 0px; } .mapView .screenBorders .face .faces .face-top { top: 0px; height: calc(var(--circleHeight) + var(--paddingTop)); } .mapView .screenBorders .face .faces .face-bottom { bottom: 0px; height: calc(var(--circleHeight) + var(--paddingBottom)); } .mapView .screen { position: absolute; --pR: var(--paddingRight, var(--paddingX, var(--defaultMapPaddingX))); /* paddingRight */ --pT: var(--paddingTop, var(--paddingY, var(--defaultMapPaddingY))); /* paddingTop */ --pL: var(--paddingLeft, var(--paddingX, var(--defaultMapPaddingX))); /* paddingLeft */ --pB: var(--paddingBottom, var(--paddingY, var(--defaultMapPaddingY))); /* paddingBottom */ top: var(--paddingTop, var(--paddingY, var(--defaultMapPaddingY))); height: calc(100% - calc(calc(var(--guiHeight, 100px) + var(--pB)) + var(--pT))); width: calc(100% - calc(var(--pL) + var(--pR))); left: var(--pL); z-index: 1; overflow: hidden; } .mapView .screen.hovering { cursor: pointer; } .mapView .layers { position: absolute; left: var(--left, 0px); top: var(--top, 0px); transform: translate(-50%, -50%); transform-origin: top left; z-index: 1; } .mapView .face { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 2; } .mapView .layers .mapLayer { position: absolute; left: 0px; top: 0px; } .mapView .layers .mapLayer > canvas { position: absolute; top: 0px; left: 0px; } @keyframes slideScreen { 0% { mask-position: 0% -100%; } 100% { mask-position: 0% 200%; } } .mapView .screen .layersEffectContainer { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; } .mapView .screen .layersEffectContainer { --maskHeight: 1000px; background: var(--complimentary-desaturate-80-dark-77); mask-image: linear-gradient(180deg, transparent 0%, #000 7.5%, #000 12.5%, #000 20%, transparent 25%, transparent 30%, #000 37.5%, #000 42.5%, #000 45%, transparent 50%, transparent 100% ); mask-size: 100% 75%; mask-repeat: repeat-y; mask-position: 0% 0%; animation-name: slideScreen; animation-timing-function: linear; animation-duration: 3s; animation-iteration-count: infinite; z-index: 2; mix-blend-mode: color; opacity: 0.75; transform-origin: center; transform: scale(1.01); } .mapView .screen .layersEffectContainer .layers { /* background: var(--complimentary-desaturate-80-dark-77); */ /* background: #fff; */ /* mix-blend-mode: exclusion; */ z-index: 2; } .mapView .layers .scalingCont { position: absolute; left: 0px; top: 0px; transform: scale(var(--scale, 1)); transform-origin: top left; } .mapView .layers.noise { mix-blend-mode: overlay; opacity: 0.15; } .dropdownMenusContainer { position: absolute; height: 100svh; width: 100lvw; z-index: 2; left: 0px; top: 0px; } .dropdownMenusContainer .bg, .dropdownMenusContainer .holder { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; } .dropdownMenusContainer .bg { z-index: 1; } .dropdownMenusContainer .holder { z-index: 2; } .dropdownMenusContainer.hidden { user-select: none; pointer-events: none; touch-action: none; } .dropdownMenuList { background: #000; } .dropdownMenuList li { color: #fff; background: transparent; position: relative; box-sizing: border-box; display: flex; justify-self: flex-start; align-items: center; align-content: center; padding: 0px 5px; cursor: pointer; } .dropdownMenuList li.empty .optionSelector { display: none; } .dropdownMenuList li .optionSelector { width: 10px; height: 10px; margin-right: 5px; border: 1px dotted #fff; } .dropdownMenuList li .optionSelector::before { font-family: var(--mainFont); color: #fff; position: absolute; width: fit-content; height: fit-content; width: 7px; height: 11px; border-right: 2px #fff solid; border-bottom: 2px #fff solid; left: 7px; top: 0px; transform: scaleX(0.5) rotateZ(30deg); transition: opacity 0.2s ease-in-out; opacity: 0; content: ''; } .dropdownMenuList.emptySelected li .optionSelector::before { opacity: 0.4; } .dropdownMenuList li.selected-hover .optionSelector::before { opacity: 0.8; } .dropdownMenuList li.hover .optionSelector::before { opacity: 0.8; } .dropdownMenuList li.selected .optionSelector::before { opacity: 1; } .dropdownMenuList li.selected { background: #222; } .dropdownMenuList li .optionSelector .face { user-select: none; pointer-events: none; touch-action: none; display: none; } .dropdownMenuList li.selected { background: #222; } .dropdownMenuList li.hover, .dropdownMenuList li.selected-hover { background: #444; } .dropdownMenuList li .optionSelector { user-select: none; pointer-events: none; touch-action: none; } .mapView .screenShadows .shadow::before, .mapView .screenShadows .shadow::after { position: absolute; left: 0px; top: 0px; width: 100%; height: 100%; } .mapView .screenShadows { position: absolute; /* left: calc(var(--paddingLeft, var(--paddingX, 0px)) * -1); top: calc(var(--paddingTop, var(--paddingT, 0px)) * - 1); width: calc(100% + calc(var(--paddingLeft, var(--paddingX, 0px)) + var(--paddingRifht, var(--paddingX, 0px)))); height: 100%; */ left: 0px; top: 0px; width: 100%; height: 100%; pointer-events: none; touch-action: none; user-select: none; z-index: 3; } .mapView .screenShadows .shadow { position: absolute; width: 100%; height: 100%; --paddingRight: 0px; --paddingTop: 0px; --paddingBottom: 0px; --paddingLeft: 0px; --screenHeight: 100%; filter: blur(15px); } .mapView .screenShadows .shadow.shadow-1 { left: 0px; top: 0px; --paddingTop: 20px; --paddingLeft: 20px; --screenHeight: 100%; --circleHeight: 12px; --paddingBottom: -5px; --paddingRight: -5px; } .mapView .screenShadows .shadow.shadow-0 { left: 0px; top: 0px; --paddingTop: -5px; --paddingLeft: -5px; --screenHeight: 100%; --circleHeight: 12px; --paddingBottom: 10px; --paddingRight: 10px; } .mapView .screenShadows .shadow.shadow-1::before { content: ''; background: #000; } .mapView .screenShadows .shadow.shadow-0::before { content: ''; background: #000; } .tooltipsContainer, .tooltipsContainer :is(.humanTooltips, .plotTooltips) { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; } :is(.humanTooltip, .plotTooltip) { position: absolute; left: calc(var(--left, 0px) + calc(var(--humanSize_width, 0px) / 2)); top: calc(var(--top, 0px) + calc(var(--humanSize_height, 0px) / 2)); transform: translateX(-12px); } :is(.humanTooltip, .plotTooltip) .inner { position: relative; width: 100%; height: 100%; min-height: fit-content; left: 0px; top: 0px; overflow: hidden; box-sizing: border-box; padding: 10px 5px 2px; } :is(.humanTooltip, .plotTooltip) .inner .face { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; z-index: 1; opacity: 0.8; } :is(.humanTooltip, .plotTooltip) .inner .face::before, :is(.humanTooltip, .plotTooltip) .inner .face::after { position: absolute; content: ''; background: #000; } :is(.humanTooltip, .plotTooltip) .inner .face::after { width: 14px; height: 9px; left: 5px; top: 0px; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); } :is(.humanTooltip, .plotTooltip) .inner .face::before { width: 100%; height: calc(100% - 8px); top: 8px; left: 0px; } :is(.humanTooltip, .plotTooltip) .inner .data { position: relative; width: fit-content; height: fit-content; z-index: 2; display: flex; flex-direction: column; color: #fff; } :is(.humanTooltip, .plotTooltip) .inner .data, :is(.humanTooltip, .plotTooltip) .inner .data * { white-space: nowrap; } :is(.humanTooltip, .plotTooltip) .inner .data .name { white-space: nowrap; font-weight: 600; font-size: 16px; } .mapView .gui { z-index: 3; height: 100%; position: absolute; top: 0px; left: 0px; width: 100%; } .mapView .gui .guiInner { z-index: 3; height: var(--guiHeight, 100px); position: absolute; bottom: 0px; left: 0px; width: 100%; } .mapView .gui .slider { --sliderHeight: calc(var(--scaleBarContainerHeight) - calc(var(--scaleBarContainerCurveSize) * 2)); --sliderWidth: 13px; position: absolute; right: calc(var(--paddingRight, var(--paddingX, var(--defaultMapPaddingX))) + calc(var(--scaleBarContainerWidth) / 2)); top: calc(var(--paddingTop, var(--paddingY, var(--defaultMapPaddingY))) + calc(var(--mapScreenHeight, calc(100% - calc(calc(var(--guiHeight, 100px) + var(--paddingTop, var(--paddingY, var(--defaultMapPaddingY)))) + var(--paddingBottom, var(--paddingY, var(--defaultMapPaddingY)))))) / 2)); transform: translate(100%, -50%); width: var(--sliderWidth); height: var(--sliderHeight); } .mapView .gui .slider input { left: 0px; top: 0px; position: absolute; height: var(--sliderWidth); width: var(--sliderHeight); transform: rotateZ(-90deg) translateX(-100%); transform-origin: top left; opacity: 0; cursor: pointer; } .mapView .gui .slider .face { left: 0px; top: 0px; position: absolute; width: 100%; height: 100%; user-select: none; touch-action: none; pointer-events: none; } /* .mapView .gui .slider > .face::before, .mapView .gui .slider > .face::after { content: ''; position: absolute; width: calc(100% + 3px); left: -1.5px; height: 0.5px; background: #fff; opacity: 0.5; } .mapView .gui .slider > .face::before { top: -2px; } .mapView .gui .slider > .face::after { bottom: -2px; } */ .mapView .gui .slider .face .bar { position: absolute; width: calc(100% - 6px); height: calc(100% - 4px); left: 3px; top: 0px; box-sizing: border-box; z-index: 1; } .mapView .gui .slider>.face .bar::before { position: absolute; content: ''; height: calc(100% - 5px); top: 5px; background-image: linear-gradient(180deg, transparent 0px,#000 0px, #000 1px, #fff, 1px, #fff 2px, transparent 0px, transparent 10px); background-size: 100% 10px; background-repeat: space; width: 5px; opacity: 0.5; left: -8px; } .mapView .gui .slider .face .bar .face { left: 0px; top: 0px; height: 100%; border-radius: 9999px; box-sizing: border-box; width: 100%; } .mapView .gui .slider .face .bar .face:first-of-type { background: var(--secondary-desaturate-80-dark-70); box-shadow: inset -2px -2px 2px -1px rgba(255, 255, 255, 0.1), inset 2px 2px 2px -1px rgba(0, 0, 0, 0.5); } .mapView .gui .slider .face .bar .face:first-of-type::before, .mapView .gui .slider .face .bar .face:first-of-type::after { position: absolute; content: ''; height: calc(100% - 5px); top: 5px; width: calc(100% + 5px); opacity: 0.5; box-sizing: border-box; } .mapView .gui .slider .face .bar .face:first-of-type::before { left: -3px; border-left: 1px #000 solid; border-right: 1px #000 solid; } .mapView .gui .slider .face .bar .face:first-of-type::after { left: -2px; border-left: 1px #fff solid; border-right: 1px #fff solid; } .mapView .gui .slider .face .bar .face:nth-of-type(2) { overflow: hidden; } .mapView .gui .slider .face .bar .face:nth-of-type(2)::before { content: ''; position: absolute; width: 100%; height: var(--progress, 0%); left: 0px; bottom: 0px; box-shadow: inset -2px -2px 2px -1px rgba(255, 255, 255, 0.1), inset 2px 2px 2px -1px rgba(0, 0, 0, 0.5); background: linear-gradient(180deg, var(--secondary-hue-60-desaturate-10-light-70) 0%, var(--secondary-hue-60-desaturate-20-dark-1) 100% ); } .mapView .gui .slider .face .thumb { position: absolute; left: 50%; top: calc(100% - var(--progress, 0%)); transform: translate(-50%, calc(-100% + var(--progress, 0%))); width: calc(100% + 2px); height: 26px; border-radius: 4px; background: var(--primary-desaturate-80-dark-40); display: flex; row-gap: 5px; box-shadow: inset 2px 2px 2px -1px rgba(255, 255, 255, 0.5), inset -2px -2px 2px -1px rgba(0, 0, 0, 0.5); z-index: 2; } .mapView .gui .slider .face .thumb::before, .mapView .gui .slider .face .thumb::after { content: ''; height: 2px; position: absolute; left: 50%; transform: translate(-50%, -50%); border-radius: 99999px; background: var(--primary-desaturate-80-dark-50); width: calc(100% - 4px); box-shadow: 1px 1px 0px 0px rgba(0, 0, 0, 0.4), -1px -1px 0px 0px rgba(255, 255, 255, 0.4); } .mapView .gui .slider .face .thumb::before { top: calc(50% - 2px); } .mapView .gui .slider .face .thumb::after { top: calc(50% + 2px); } .mapView .gui .guiInner { box-sizing: border-box; padding: abs(calc(var(--defaultMapPaddingY) - var(--defaultGuiPaddingY))) var(--defaultGuiPaddingX) var(--defaultGuiPaddingBottom, var(--defaultMapPaddingY)) var(--defaultGuiPaddingX); } .mapView .gui .guiInner .guiSet { position: relative; width: 100%; height: 100%; box-sizing: border-box; padding-left: calc(var(--guiCircleSize) + var(--defaultGuiPaddingX)); } .mapView .gui .guiInner .guiSet .data { position: relative; width: 100%; height: 100%; box-sizing: border-box; display: flex; } .mapView .gui .guiInner .followScreen { --borderSize: 8px; position: absolute; width: 250px; --circleEnd: calc(var(--guiCircleSize) / 2); height: 250px; border-radius: 50%; left: var(--defaultGuiPaddingX); background: radial-gradient( circle at center, #333333 0%, #333333 calc(var(--circleEnd) - var(--borderSize)), var(--secondary-desaturate-80-dark-80) calc(var(--circleEnd) - var(--borderSize)), var(--secondary-desaturate-80-light-10) calc(var(--circleEnd) - calc(var(--borderSize) * 0.25)), var(--secondary-desaturate-80-dark-80) var(--circleEnd) ); background-size: 100% 100%; top: -80px; } .mapView .gui .guiInner .followScreen .followScreenInner { position: absolute; width: calc(100% - calc(var(--borderSize) * 2)); height: calc(100% - calc(var(--borderSize) * 2)); left: var(--borderSize); top: var(--borderSize); overflow: hidden; border-radius: 50%; } .mapView .gui .guiInner .followScreen .followScreenInner img { width: 100%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; } .mapView .gui .guiInner .followScreen.human .followScreenInner::before { z-index: 2; width: 100%; height: 100%; left: 50%; top: 50%; position: absolute; content: ''; background: var(--primary); mix-blend-mode: multiply; transform: translate(-50%, -50%); } .mapView .gui .guiInner .guiSet.empty { display: flex; flex-direction: row; justify-content: center; padding-right: calc(var(--guiCircleSize) + var(--defaultGuiPaddingX)); } .mapView .gui .guiInner .guiSet .data { width: fit-content; box-sizing: border-box; color: #fff; --padding: 10px; --paddingTop: 10px; --paddingLeft: 10px; --paddingRight:10px; --paddingBottom: 10px; padding: var(--paddingTop) var(--paddingRight) var(--paddingBottom) var(--paddingLeft); --titleOffset: 20px; } .mapView .gui .guiInner .guiSet .dataFace, .mapView .gui .guiInner .guiSet .dataSetFace { position: absolute; user-select: none; pointer-events: none; touch-action: none; } .mapView .gui .guiInner .guiSet .dataFace.face-0 { z-index: 1; width: 100%; height: 100%; left: 0px; top: 0px; background: linear-gradient(180deg, #ffffff20 50px, #ffffff80 100%); background-size: 100% calc(100% + 30px); mix-blend-mode: overlay; backdrop-filter: saturate(1.2); border-radius: 10px; } .mapView .gui .guiInner .guiSet .dataFace.face-1 { z-index: 2; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; opacity: 0.5; clip-path: polygon(0 0, var(--titleOffset, 0px) 0, var(--titleOffset, 0px) calc(var(--titleHeight, 0px) / 2), calc(var(--titleOffset, 0px) + var(--titleWidth, 0px)) calc(var(--titleHeight, 0px) / 2), calc(var(--titleOffset, 0px) + var(--titleWidth, 0px)) 0, 100% 0, 100% 100%, 0 100%); } .mapView .gui .guiInner .guiSet .dataFace.face-1::before, .mapView .gui .guiInner .guiSet .dataFace.face-1::after { position: absolute; width: 100%; height: 100%; border-radius: 10px; content: ''; box-sizing: border-box; } .mapView .gui .guiInner .guiSet .dataFace.face-1::before { border: 1px #000 solid; left: -1px; top: -1px; } .mapView .gui .guiInner .guiSet .dataFace.face-1::after { border: 1px #fff solid; left: 0px; top: 0px; } .mapView .gui .guiInner .guiSet .data > .title { position: absolute; width: fit-content; height: fit-content; transform: translateY(-50%); z-index: 3; left: var(--titleOffset); top: 0px; box-sizing: border-box; padding: 0px 5px; font-size: 26px; line-height: 26px; } .mapView .gui .guiInner .guiSet.human .data { column-gap: 10px; row-gap: 5px ; display: grid; --colSize: 275px; grid-template-rows: max(0px, calc(calc(var(--titleHeight, 0px) / 2) - var(--padding))) 1fr 1fr 1fr 1.4fr 1fr 1fr; grid-template-columns: max(var(--colSize), calc(calc(var(--titleOffset) - var(--padding)) + var(--titleWidth, 0px))) var(--colSize) var(--colSize) 1fr 1fr; width: 100%; } .mapView .gui .guiInner .guiSet.plot .data { column-gap: 10px; row-gap: 5px ; display: grid; --colSize: 275px; grid-template-rows: max(0px, calc(calc(var(--titleHeight, 0px) / 2) - var(--padding))) 1fr 1fr; grid-template-columns: max(var(--colSize), calc(calc(var(--titleOffset) - var(--padding)) + var(--titleWidth, 0px))) var(--colSize) var(--colSize) 1fr; } .mapView .gui .guiInner .guiSet.plot.hospitality .data { grid-template-rows: max(0px, calc(calc(var(--titleHeight, 0px) / 2) - var(--padding))) 36px 3fr 2fr; } .mapView .gui .guiInner .guiSet .data .dataSet { position: relative; box-sizing: border-box; padding: 10px; font-size: 18px; line-height: 18px; display: flex; flex-direction: column; justify-content: center; /* box-shadow: inset 5px 5px 5px -2.5px rgba(255, 255, 255, 0.2), inset -5px -5px 5px -2.5px rgba(0, 0, 0, 0.3); */ /* border-radius: 10px; */ } .mapView .gui .guiInner .guiSet .data .dataSet::before { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; box-sizing: border-box; content: ''; user-select: none; pointer-events: none; touch-action: none; z-index: 3; background: linear-gradient(180deg, #00000080 0%, #ffffff20 2px, transparent 4px, transparent calc(100% - 4px), #ffffff00 calc(100% - 2px), #00000080 100%), linear-gradient(90deg, #00000080 0%, #ffffff20 2px, transparent 4px, transparent calc(100% - 4px), #ffffff20 calc(100% - 2px), #00000080 100%), /* linear-gradient(90deg, var(--secondary-desaturate-50-dark-20) 0%, var(--secondary-light-70) 2px, var(--secondary-desaturate-50-dark-20) 4px, transparent 5px, transparent calc(100% - 5px), var(--secondary-desaturate-50-dark-20) calc(100% - 4px), var(--secondary-light-70) calc(100% - 2px), var(--secondary-desaturate-50-dark-20) 100% ), */ linear-gradient(20deg, var(--secondary-desaturate-50-dark-50) 0%, var(--secondary-desaturate-50-dark-20) 80%, var(--secondary-desaturate-50-light-20) 100%); } .mapView .gui .guiInner .guiSet .data .dataSet.titled { padding-top: 36px; } .mapView .gui .guiInner .guiSet .data .dataSet.controls.titled { padding-top: 62px; } .mapView .gui .guiInner .guiSet .data .dataSet.navigable.controls.titled { padding-bottom: 30px; } .mapView .gui .guiInner .guiSet .data .dataSet.titled .title { position: absolute; width: 100%; top: 0px; left: 0px; font-size: 21px; line-height: 21px; box-sizing: border-box; padding-left: 10px; padding-right: 10px; padding-top: 2.5px; padding-bottom: 2.5px; font-weight: 500; text-align: center; color: #000; z-index: 4; /* paint-order: stroke fill; -webkit-text-stroke: 2px #fff; */ background: linear-gradient(90deg, #00000080 0%, #ffffff20 2px, transparent 5%, transparent 95%, #ffffff00 calc(100% - 2px), #00000080 100%), linear-gradient(180deg, var(--secondary-desaturate-50-dark-20) 0%, var(--secondary-light-70) 2px, var(--secondary-light-50) 25%, var(--secondary-desaturate-50) 50%, var(--secondary-desaturate-50) calc(100% - 2px), var(--secondary-dark-50) 100%) ; /* border-top-left-radius: 10px; border-top-right-radius: 10px; */ } .mapView .gui .guiInner .guiSet.plot .data .sign { z-index: 4; position: relative; line-height: 35px; text-align: center; background: linear-gradient(90deg, #00000080 0%, #ffffff20 2px, transparent 5%, transparent 95%, #ffffff00 calc(100% - 2px), #00000080 100%), linear-gradient(180deg, var(--secondary-desaturate-50-dark-20) 0%, var(--secondary-light-70) 2px, var(--secondary-light-50) 25%, var(--secondary-desaturate-50) 50%, var(--secondary-desaturate-50) calc(100% - 2px), var(--secondary-dark-50) 100%) ; } .mapView .gui .guiInner .guiSet.plot .data .sign .signContent { position: relative; z-index: 4; display: inline-block; color: #000; font-size: 20px; letter-spacing: 1px; font-weight: 400; paint-order: stroke fill; -webkit-text-stroke-color: #d0d0d0; -webkit-text-stroke-width: 2px; } .mapView .gui .guiInner .guiSet.plot .data .sign .signFace { z-index: 3; } .mapView .gui .guiInner .guiSet.plot .data .sign::before, .mapView .gui .guiInner .guiSet.plot .data .sign::after { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; content: ''; pointer-events: none; touch-action: none; user-select: none; transition: 0.2s opacity ease-in-out; } .mapView .gui .guiInner .guiSet.plot .data .sign::before { z-index: 1; background: linear-gradient(90deg, #00000080 0%, #ffffff20 2px, transparent 5%, transparent 95%, #ffffff00 calc(100% - 2px), #00000080 100%), linear-gradient(180deg, var(--primary-desaturate-50-dark-40) 0%, var(--primary-light-68) 2px, var(--primary-light-45) 25%, var(--primary-desaturate-40-dark-10) 50%, var(--primary-desaturate-40-dark-10) calc(100% - 2px), var(--primary-dark-70) 100%) ; } .mapView .gui .guiInner .guiSet.plot .data .sign::after { z-index: 2; } .mapView .gui .guiInner .guiSet.plot .data .sign.close::before, .mapView .gui .guiInner .guiSet.plot .data .sign.open::after { opacity: 0; } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls { position: absolute; width: 100%; top: 0px; left: 0px; font-weight: 500; text-align: center; color: #000; z-index: 4; } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls .controlsRow { position: relative; box-sizing: border-box; padding-left: 10px; padding-right: 10px; padding-top: 2.5px; padding-bottom: 2.5px; font-size: 21px; line-height: 21px; display: flex; column-gap: 10px; background: linear-gradient(90deg, #00000080 0%, #ffffff20 2px, transparent 5%, transparent 95%, #ffffff00 calc(100% - 2px), #00000080 100%), linear-gradient(180deg, var(--secondary-desaturate-70-dark-10) 0%, var(--secondary-desaturate-20-light-80) 2px, var(--secondary-desaturate-20-light-60) 25%, var(--secondary-desaturate-70-light-10) 50%, var(--secondary-desaturate-70-light-10) calc(100% - 2px), var(--secondary-desaturate-20-dark-40) 100%) ; } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls .controlsRow .controlEntry { display: flex; column-gap: 5px; } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls .controlsRow .controlEntry .controlLabel { white-space: nowrap; } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls .controlsRow .controlEntry .dropdownContainer { position: relative; max-width: 80px; min-width: 30px; height: 21px; box-sizing: border-box; font-size: 18px; line-height: 21px; padding: 0px 5px; background: var(--primary-light-95); border-radius: 5px; box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.3); } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls .controlsRow .controlEntry .dropdownContainer .dropdownPlaceholder { position: relative; width: fit-content; max-width: 100%; min-width: 30px; height: 100%; box-sizing: border-box; padding: 2px 0px; display: flex; overflow: hidden; justify-content: center; } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls .controlsRow .controlEntry .dropdownContainer .dropdownPlaceholder .placeholderEntry { white-space: nowrap; } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls .controlsRow .controlEntry .numericInput { position: relative; width: 40px; height: 21px; box-sizing: border-box; font-size: 18px; line-height: 21px; padding: 0px 5px; background: var(--primary-light-95); border-radius: 5px; box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.3); } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls .controlsRow .controlEntry .numericInput input { padding: 0px; position: relative; width: 100%; font-size: 18px; line-height: 21px; font-family: inherit; text-align: center; height: 21px; outline: none; } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls .controlsRow .controlEntry .dropdownContainer .dropdownContainerFakeSelect { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; opacity: 0; user-select: none; touch-action: none; pointer-events: none; } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls .controlsRow.eventListControls { padding-top: 2px; padding-bottom: 2px; font-size: 18px; line-height: 18px; } .mapView .gui .guiInner .guiSet .data .dataSet.controls.titled .controls { top: 26px; } .mapView .gui .guiInner .guiSet .data .dataSet.controls.titled .controls.navigation { top: unset; bottom: 0px; } .mapView .gui .guiInner .guiSet .data .dataSet.titled .title .titleFace, .mapView .gui .guiInner .guiSet.plot .data .sign .signFace { position: absolute; width: calc(100% - 20px); left: 10px; --h: 12px; height: var(--h, 12px); top: 6.5px; user-select: none; touch-action: none; pointer-events: none; --maskRight: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.69 85.04' preserveAspectRatio='none'%3E%3Cg id='c' data-name='Warstwa 1'%3E%3Ccircle class='d' cx='42.52' cy='14.17' r='14.17'/%3E%3Ccircle class='d' cx='14.17' cy='42.52' r='14.17'/%3E%3Ccircle class='d' cx='42.52' cy='70.87' r='14.17'/%3E%3C/g%3E%3C/svg%3E"); --maskLeft: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='b' data-name='Warstwa 2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56.69 85.04' preserveAspectRatio='none'%3E%3Cg id='c' data-name='Warstwa 1'%3E%3Ccircle class='d' cx='14.17' cy='14.17' r='14.17'/%3E%3Ccircle class='d' cx='42.52' cy='42.52' r='14.17'/%3E%3Ccircle class='d' cx='14.17' cy='70.87' r='14.17'/%3E%3C/g%3E%3C/svg%3E"); } .mapView .gui .guiInner .guiSet.plot .data .sign .signFace { top: 50%; transform: translate(-50%, -50%); left: 50%; --h: 15px; } .mapView .gui .guiInner .guiSet .data .dataSet.titled .title .titleFace::after, .mapView .gui .guiInner .guiSet.plot .data .sign .signFace::after { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; content: ''; background: #00000080; } .mapView .gui .guiInner .guiSet .data .dataSet.titled .title .titleFace::before, .mapView .gui .guiInner .guiSet.plot .data .sign .signFace::before { position: absolute; width: 100%; height: 100%; left: 0.5px; top: 0.5px; content: ''; background: #ffffff80; } .mapView .gui .guiInner .guiSet .data .dataSet.titled .title .titleFace::before, .mapView .gui .guiInner .guiSet .data .dataSet.titled .title .titleFace::after, .mapView .gui .guiInner .guiSet.plot .data .sign .signFace::before, .mapView .gui .guiInner .guiSet.plot .data .sign .signFace::after { mask-image: var(--maskLeft), var(--maskRight); mask-repeat: no-repeat; mask-size: calc(calc(var(--h, 12px) / 3) * 2) var(--h, 12px), calc(calc(var(--h, 12px) / 3) * 2) var(--h, 12px); mask-position: left top, right top; mask-composite: add; } .mapView .gui .guiInner .guiSet .data .dataSet .dataSetList { width: 100%; /* position: relative; -ms-overflow-style: none; scrollbar-width: none; height: 100%; */ } .mapView .gui .guiInner .guiSet .data .dataSet.friendList .dataSetList { /* overflow-x: hidden; overflow-y: auto; */ } .mapView .gui .guiInner .guiSet .data .dataSet .dataSetScroll-scrollContainer { position: relative; width: 100%; height: 100%; box-sizing: border-box; } .mapView .gui .guiInner .guiSet .data .dataSet .dataSetScroll-scrollContainer.dataSetScroll-scrollContainer-hasScrollbar-y { padding-right: 10px; } .mapView .gui .guiInner .guiSet .data .dataSet .dataSetList ul, .mapView .gui .guiInner .guiSet .data .dataSet ul.dataRow.list { position: relative; min-height: 100%; width: 100%; } .mapView .gui .guiInner .guiSet .data .dataSet.friendList .dataSetList ul, .mapView .gui .guiInner .guiSet .data .dataSet ul.dataRow.list { row-gap: 2px; } .mapView .gui .guiInner .guiSet .data .dataSet .dataSetList::-webkit-scrollbar { display: none; } .mapView .gui .guiInner .guiSet .data .dataSet.basicData .horizontalLine { position: relative; width: 100%; height: 18px; z-index: 4; } .mapView .gui .guiInner .guiSet .data .dataSet.basicData .horizontalLine::before { position: absolute; width: 100%; height: 2px; content: ''; left: 0px; top: 50%; transform: translateY(-50%); background: linear-gradient(180deg, #ffffff80 0%, #ffffff80 50%, #000000d0 50%, #000000d0 100%); } .mapView .gui .guiInner .guiSet.human .data .dataSet.basicData { grid-row-start: 2; grid-row-end: 4; } .mapView .gui .guiInner .guiSet.human .data .dataSet.basicData, .mapView .gui .guiInner .guiSet.human .data .dataSet.attributes, .mapView .gui .guiInner .guiSet.human .data .dataSet.statuses { grid-column-start: 1; grid-column-end: 2; } .mapView .gui .guiInner .guiSet.human .data .dataSet.attributes { grid-row-start: 4; grid-row-end: 6; } .mapView .gui .guiInner .guiSet.human .data .dataSet.statuses { grid-row-start: 6; grid-row-end: 8; } .mapView .gui .guiInner .guiSet.human .data .dataSet.friendList { grid-row-start: 1; grid-row-end: 8; } .mapView .gui .guiInner .guiSet.human .data .dataSet.intrests { grid-row-start: 5; grid-row-end: 8; } .mapView .gui .guiInner .guiSet.human .data .dataSet.specialTags { grid-row-start: 1; grid-row-end: 5; } .mapView .gui .guiInner .guiSet.human .data .dataSet.events { grid-row-start: 1; grid-row-end: 8; grid-column-start: 4; grid-column-end: 6; } .mapView .gui .guiInner .guiSet.human .data.noSpecialTags .dataSet.intrests { grid-row-start: 1; grid-row-end: 8; } .mapView .gui .guiInner .guiSet.plot .data .sign { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; } .mapView .gui .guiInner .guiSet.plot .data .dataSet.basicData { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 4; justify-content: flex-start; } .mapView .gui .guiInner .guiSet.plot.hospitality .data .dataSet.basicData { grid-row-start: 3; grid-row-end: 5; } .mapView .gui .guiInner .guiSet.plot .data.hasConnectedIntrests .dataSet.basicData { grid-column-start: 1; grid-column-end: 2; grid-row-start: 2; grid-row-end: 3; } .mapView .gui .guiInner .guiSet.plot.hospitality .data.hasConnectedIntrests .dataSet.basicData { grid-row-start: 3; grid-row-end: 4; } .mapView .gui .guiInner .guiSet.plot .data .dataSet.intrests { grid-column-start: 1; grid-column-end: 2; grid-row-start: 3; grid-row-end: 4; } .mapView .gui .guiInner .guiSet.plot.hospitality .data .dataSet.intrests { grid-row-start: 4; grid-row-end: 5; } .mapView .gui .guiInner .guiSet.plot .data .dataSet.visitors { grid-column-start: 2; grid-column-end: 3; grid-row-start: 1; grid-row-end: 4; } .mapView .gui .guiInner .guiSet.plot.hospitality .data .dataSet.visitors { grid-row-end: 5; } .mapView .gui .guiInner .guiSet.plot .data .dataSet.meetings { grid-column-start: 3; grid-column-end: 4; grid-row-start: 1; grid-row-end: 4; } .mapView .gui .guiInner .guiSet.plot .data .dataSet.meetings { grid-row-end: 5; } .mapView .gui .guiInner .guiSet .data .dataSet.msg { height: fit-content; max-width: 400px; } .mapView .gui .guiInner .guiSet .data .dataSet .dataRow { display: flex; justify-content: flex-start; align-items: center; align-content: center; } .mapView .gui .guiInner .guiSet .data .dataSet .dataRow.text { column-gap: 5px; } .mapView .gui .guiInner .guiSet .data .dataSet .dataRow .value.text:not(.withTooltip) { z-index: 4; } .mapView .gui .guiInner .guiSet .data .dataSet .dataRow .value.withTooltip { position: relative; } .mapView .gui .guiInner .guiSet .data .dataSet .dataRow a { cursor: pointer; color: #fff; transition: color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out; text-decoration: underline; text-decoration-color: #ffffff80; white-space: nowrap; } .mapView .gui .guiInner .guiSet .data .dataSet .dataRow a:hover { color: #ffffff80; text-decoration-color: #ffffff40; } .mapView .gui .guiInner .guiSet .data .dataSet.intrests .dataSetList ul, .mapView .gui .guiInner .guiSet .data .dataSet.specialTags .dataSetList ul, .mapView .gui .guiInner .guiSet .data .dataSet.visitors .dataSetScroll ul, .mapView .gui .guiInner .guiSet .data .dataSet.intrests ul.dataRow.list, .mapView .gui .guiInner .guiSet .data .dataSet.specialTags ul.dataRow.list, .mapView .gui .guiInner .guiSet .data .dataSet.visitors ul.dataRow.list { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; column-gap: 0px; row-gap: 2px; align-items: flex-start; align-content: flex-start; } .mapView .gui .guiInner .guiSet .data .dataSet.intrests .dataSetList ul .dataRow, .mapView .gui .guiInner .guiSet .data .dataSet.specialTags .dataSetList ul .dataRow, .mapView .gui .guiInner .guiSet .data .dataSet.visitors .dataSetScroll ul .dataRow, .mapView .gui .guiInner .guiSet .data .dataSet.intrests ul.dataRow.list li.value, .mapView .gui .guiInner .guiSet .data .dataSet.specialTags ul.dataRow.list li.value, .mapView .gui .guiInner .guiSet .data .dataSet.visitors ul.dataRow.list li.value { position: relative; box-sizing: border-box; padding-left: 5px; padding-right: 5px; } /* .mapView .gui .guiInner .guiSet .data .dataSet.intrests .dataSetList ul .dataRow:not(.lastInRow), .mapView .gui .guiInner .guiSet .data .dataSet.specialTags .dataSetList ul .dataRow:not(.lastInRow), .mapView .gui .guiInner .guiSet .data .dataSet.visitors .dataSetScroll ul .dataRow:not(.lastInRow) { padding-right: 7px; } .mapView .gui .guiInner .guiSet .data .dataSet.intrests .dataSetList ul .dataRow:last-child, .mapView .gui .guiInner .guiSet .data .dataSet.specialTags .dataSetList ul .dataRow:last-child, .mapView .gui .guiInner .guiSet .data .dataSet.visitors .dataSetScroll ul .dataRow:last-child { padding-left: 0px; } */ .mapView .gui .guiInner .guiSet .data .dataSet.intrests .dataSetList ul .dataRow:not(.lastInRow)::before, .mapView .gui .guiInner .guiSet .data .dataSet.specialTags .dataSetList ul .dataRow:not(.lastInRow)::before, .mapView .gui .guiInner .guiSet .data .dataSet.visitors .dataSetList ul .dataRow:not(.lastInRow)::before, .mapView .gui .guiInner .guiSet .data .dataSet.intrests ul.dataRow.list li.value:not(.lastInRow)::before, .mapView .gui .guiInner .guiSet .data .dataSet.specialTags ul.dataRow.list li.value:not(.lastInRow)::before, .mapView .gui .guiInner .guiSet .data .dataSet.visitors ul.dataRow.list li.value:not(.lastInRow)::before { height: 100%; position: absolute; content: ''; width: 2px; top: 0px; right: -1px; background: linear-gradient(270deg, #ffffff80 0%, #ffffff80 50%, #000000d0 50%, #000000d0 100%); z-index: 4; } .mapView .gui .guiInner .guiSet .data .dataSet.intrests .dataSetList ul .dataRow:last-child::before, .mapView .gui .guiInner .guiSet .data .dataSet.specialTags .dataSetList ul .dataRow:last-child::before, .mapView .gui .guiInner .guiSet .data .dataSet.visitors .dataSetList ul .dataRow:last-child::before, .mapView .gui .guiInner .guiSet .data .dataSet.intrests ul.dataRow.list li.value:last-child::before, .mapView .gui .guiInner .guiSet .data .dataSet.specialTags ul.dataRow.list li.value:last-child::before, .mapView .gui .guiInner .guiSet .data .dataSet.visitors ul.dataRow.list li.value:last-child::before { content: none; } .mapView .gui .guiInner .guiSet .data .dataSet .dataRow .value.withTooltip .tooltip { position: absolute; box-sizing: border-box; padding: 8px 5px 3px; background: #000; top: calc(100% - 5px); left: 50%; transform: translate(-50%); width: fit-content; clip-path: polygon(0 5px, calc(50% - 5px) 5px, 50% 0, calc(50% + 5px) 5px, 100% 5px, 100% 100%, 0 100%); transition: opacity 0.2s ease-in-out; opacity: 0; user-select: none; pointer-events: none; touch-action: none; z-index: 100; } .mapView .gui .guiInner .guiSet .data .dataSet.msg .dataRow.plainText p { font-size: 21px; line-height: 24px; } .mapView .gui .guiInner .guiSet .data .dataSet .dataRow :is(.tag, .valueCnt), .mapView .gui .guiInner .guiSet .data .dataSet .dataRow.plainText :is(.tag, .valueCnt, p) { z-index: 4; position: relative; } .mapView .gui .guiInner .guiSet .data .dataSet .dataRow.plainText { flex-direction: column; justify-content: flex-start; } .mapView .gui .guiInner .guiSet .data .dataSet .dataRow .value.withTooltip .tooltip.allowWrapping { white-space: pre-wrap; width: calc(var(--colSize) - 20px); text-align: center; } .mapView .gui .guiInner .guiSet .data .dataSet .dataRow .value.withTooltip .tooltip:not(.allowWrapping) { white-space: nowrap; } .mapView .gui .guiInner .guiSet .data .dataSet .dataRow .value.withTooltip:hover .tooltip { opacity: 1; } .mapView .gui .guiInner .guiSet .data .dataSet .dataRow.range { justify-content: space-between; } .mapView .gui .guiInner .guiSet .data .dataSet.friendList .dataRow.range { column-gap: 5px; } .mapView .gui .guiInner .guiSet .data .dataSet .dataRow .value.action, .mapView .gui .guiInner .guiSet .data .dataSet .dataRow .value.action .valueCnt { white-space: pre-wrap; } .mapView .gui .guiInner .guiSet .data .dataSet .dataRow .value.range { width: 100px; height: 10px; position: relative; border-radius: 3px; } .mapView .gui .guiInner .guiSet .data .dataSet.friendList .dataRow.range .value.range { width: 100%; max-width: 100px; flex-grow: 1; } .mapView .gui .guiInner .guiSet .data .dataSet .dataRow .value.range .valueCnt { width: 100px; height: 10px; background: #ffffff60; position: absolute; left: 0px; top: 0px; border-radius: 3px; z-index: 4; } .mapView .gui .guiInner .guiSet .data .dataSet.friendList .dataRow.range .value.range .valueCnt { width: 100%; } .mapView .gui .guiInner .guiSet .data .dataSet .dataRow .value.range .valueCnt::before { position: absolute; width: 100%; height: 100%; border-radius: 3px; left: 0px; top: 0px; content: ''; clip-path: polygon(0 0, max(2px, var(--current, 50%)) 0, max(2px, var(--current, 50%)) 100%, 0% 100%); background: linear-gradient(150deg, hsl(from var(--secondary) 110deg min(100, calc(s + calc(calc(100 - s) * 0.5))) l) 0%, hsl(from var(--secondary) 110deg min(100, calc(s + calc(calc(100 - s) * 0.5))) min(100, calc(l + calc(calc(100 - l) * 0.35)))) 50%, hsl(from var(--secondary) 110deg min(100, calc(s + calc(calc(100 - s) * 0.5))) max(0, calc(calc(100 - l) * 0.9))) 100%); } .mapView .gui .guiInner .guiSet .data .dataSet .dataRow.negative .value.range .valueCnt::before { background: linear-gradient(150deg, hsl(from var(--secondary) 354deg min(100, calc(s + calc(calc(100 - s) * 0.5))) l) 0%, hsl(from var(--secondary) 354deg min(100, calc(s + calc(calc(100 - s) * 0.5))) min(100, calc(l + calc(calc(100 - l) * 0.35)))) 50%, hsl(from var(--secondary) 354deg min(100, calc(s + calc(calc(100 - s) * 0.5))) max(0, calc(calc(100 - l) * 0.9))) 100%); } .mapView .gui .guiInner .guiSet .data .dataSet .dataRow .value.range .valueCnt::after { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; content: ''; border-radius: 3px; box-shadow: inset 2px 2px 4px -1px rgba(255, 255, 255, 0.3), inset -2px -2px 4px -1px rgba(0, 0, 0, 0.5); } /* .mapView .gui .guiInner .guiSet .data .dataSet:first-of-type { padding-top: calc(var(--dataTitleTop, 0px) + var(--dataTitleHeight, 0px)); } */ .mapView .gui .guiInner .guiSet .data .dataSet .eventList { position: relative; width: 100%; height: 100%; z-index: 4; } .mapView .gui .guiInner .guiSet .data .dataSet .controls { position: relative; z-index: 4; } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls.navigation .controlsRow { justify-content: center; } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls.navigation .controlsRow .pagination { position: relative; display: flex; justify-content: center; column-gap: 4px; } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls.navigation .controlsRow .pagination .btnPag:not(.btnArrow) { font-family: var(--mainFont); color: #000; font-size: 16px; line-height: 16px; text-decoration: none; text-decoration-color: #00000080; transition: color 0.2s ease-in-out, text-decoration-color 0.2 ease-in-out; } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls.navigation .controlsRow .pagination .btnPag:not(.btnArrow).current { text-decoration: underline; text-decoration-color: #00000080; text-decoration-thickness: 0.5px; } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls.navigation .controlsRow .pagination .btnPag:not([disabled]) { cursor: pointer; } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls.navigation .controlsRow .pagination .btnPag:not([disabled]):hover { opacity: 0.65; } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls.navigation .controlsRow .pagination .btnPag:is([disabled]):not(.btnArrow) { opacity: 0.5; } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls.navigation .controlsRow .pagination .btnPag.btnArrow { position: relative; width: 15px; height: 15px; color: transparent; } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls.navigation .controlsRow .pagination .btnPag.btnArrow::before { position: absolute; width: 100%; height: 100%; color: #000; left: 0px; top: -1px; line-height: 15px; font-size: 11px; } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls.navigation .controlsRow .pagination .btnPag.btnArrow.prev::before { content: '⇦'; } .mapView .gui .guiInner .guiSet .data .dataSet.controls .controls.navigation .controlsRow .pagination .btnPag.btnArrow.next::before { content: '⇨'; } .mapView .gui .guiInner .guiSet .data .dataSet .meetingData { z-index: 4; position: relative; } .mapView .gui .guiInner .guiSet .data .dataSet .meetingData .meetingTxt:not(.inlineLike) { display: inline-block; } .mapView .gui .guiInner .guiSet .data .dataSet .meetingData .meetingTxt:not(.inlineLike) > * { display: inline-block; } .mapView .gui .guiInner .guiSet .data .dataSet .meetingData .meetingTxt.inlineLike { display: flex; flex-direction: row; flex-wrap: wrap; width: 100%; } .mapView .gui .guiInner .guiSet .data .dataSet .meetingData .meetingTxt.inlineLike > * { width: fit-content; position: relative; display: flex; flex-direction: row; width: fit-content; } .mapView .gui .guiInner .guiSet .data .dataSet .meetingData .meetingTxt a.participant { text-decoration: underline; text-decoration-color: #ffffff40; cursor: pointer; transition: text-decoration 0.2s ease-in-out, color 0.2s ease-in-out, text-decoration-color 0.2s ease-in-out; } .mapView .gui .guiInner .guiSet .data .dataSet .meetingData .meetingTxt a.participant:hover { color: #ffffffd0; text-decoration: underline; text-decoration-color: #ffffff30; } .mapView .gui .guiInner .guiSet .data .dataSet .meetingData .meetingTxt.inlineLike > *, .mapView .gui .guiInner .guiSet .data .dataSet .meetingData .meetingTxt.inlineLike > * * { white-space: pre; } /* .mapView .gui .guiInner .guiSet .data .dataSet .meetingData .meetingTxt > .listLike > span { display: inline-block; white-space: nowrap; } */ /* .mapView .gui .guiInner .guiSet .data .dataSet .eventList * { white-space: nowrap; } */ .mapView .gui .guiInner .guiSet.human .data .dataSet .eventList .eventEntryList { /* display: grid; grid-template-columns: 1fr 1fr 1fr; */ display: flex; flex-direction: row; row-gap: 5px; column-gap: 5px; } .mapView .gui .guiInner .guiSet.human .data .dataSet .eventList .eventEntryList .eventEntry { display: flex; position: relative; flex-direction: column; box-sizing: border-box; padding: 8px; /* background: linear-gradient(180deg, hsl(from var(--primary-hue-210) h max(0, calc(s * 0.1)) max(0, calc(l * 0.55))) 0%, hsl(from var(--primary-hue-210) h max(0, calc(s * 0.2)) min(100, calc(l + calc(calc(100 - l) * 0.45)))) 4px, hsl(from var(--primary-hue-210) h max(0, calc(s * 0.1)) max(0, calc(l * 0.55))) max(50%, calc(100% - 6px)), hsl(from var(--primary-hue-210) h max(0, calc(s * 0.1)) max(0, calc(l * 0.50))) 100%); */ border-radius:5px; box-shadow: inset 5px 5px 5px -2.5px rgba(255, 255, 255, 0.2), inset -5px -5px 5px -2.5px rgba(0, 0, 0, 0.3); background: var(--primary-hue-210-desaturate-70-light-50); color: #000; } .mapView .gui .guiInner .guiSet.human .data .dataSet .eventList .eventEntryList .eventEntry .eventTitle { white-space: collapse; position: relative; margin-bottom: 16px; z-index: 1; } .mapView .gui .guiInner .guiSet.human .data .dataSet .eventList .eventEntryList .eventEntry .eventTitle .eventTitleFace { position: absolute; width: calc(100% + 16px); height: calc(100% + 16px); left: -8px; top: -8px; user-select: none; pointer-events: none; touch-action: none; border-top-left-radius:5px; border-top-right-radius:5px; background: linear-gradient(90deg, #00000080 0%, #ffffff20 2px, transparent 5%, transparent 95%, #ffffff00 calc(100% - 2px), #00000080 100%), /* linear-gradient(180deg, var(--primary-desaturate-80-dark-30) 0%, var(--primary-desaturate-60-light-50) 2px, var(--primary-desaturate-70-dark-10) calc(50% - 11px), var(--primary-desaturate-80-dark-30) 50%, var(--primary-desaturate-80-dark-30) calc(50% + 11px), var(--primary-desaturate-80-dark-45) calc(100% - 2px), var(--primary-desaturate-30-dark-80) 100%) ; */ linear-gradient(180deg, var(--primary-hue-210-desaturate-80-dark-30) 0%, var(--primary-hue-210-desaturate-60-light-50) 2px, var(--primary-hue-210-desaturate-70-dark-10) calc(50% - 11px), var(--primary-hue-210-desaturate-80-dark-30) 50%, var(--primary-hue-210-desaturate-80-dark-30) calc(50% + 11px), var(--primary-hue-210-desaturate-80-dark-45) calc(100% - 2px), var(--primary-hue-210-desaturate-30-dark-80) 100%) ; z-index: 1; } .mapView .gui .guiInner .guiSet.human .data .dataSet .eventList .eventEntryList .eventEntry .eventTitle :is(.eventTitleInner, .secondParticipant) { position: relative; z-index: 2; font-size: 18px; line-height: 18px; color: var(--primary-desaturate-20-dark-80); font-weight: 600; /* paint-order: stroke fill; -webkit-text-stroke: 2px #fff; */ } .mapView .gui .guiInner .guiSet.human .data .dataSet .eventList .eventEntryList .eventEntry .eventDescription { width: 200px; } .mapView .gui .guiInner .guiSet.human .data .dataSet .eventList .eventEntryList .eventEntry .eventDescription p { white-space: collapse; } .mapView .gui .guiInner .guiSet.human .data .dataSet .eventList .eventEntryList .eventEntry .eventDescription p.participantsMsg .countTooltip { position: relative; } .mapView .gui .guiInner .guiSet.human .data .dataSet .eventList .eventEntryList .eventEntry .eventDescription p.participantsMsg .countTooltip .tooltip { position: absolute; padding: 28px 5px 3px; clip-path: polygon(0 25px, calc(50% - 5px) 25px, 50% 20px, calc(50% + 5px) 25px, 100% 25px, 100% 100%, 0 100%); background: #000000d0; left: 50%; top: calc(100% - 20px); white-space: collapse-all; max-width: 250px; transform: translate(-50%, 0%); opacity: 0; pointer-events: none; color: #fff; } .mapView .gui .guiInner .guiSet.human .data .dataSet .eventList .eventEntryList .eventEntry .eventDescription p.participantsMsg .countTooltip .tooltip:hover, .mapView .gui .guiInner .guiSet.human .data .dataSet .eventList .eventEntryList .eventEntry .eventDescription p.participantsMsg .countTooltip:hover .tooltip { opacity: 1; pointer-events: all; } .dataSetScroll-scrollContainer.scrollContainer-hasScrollbar-x .dataSetScroll-clipContainer { height: calc(100% - 5px) !important; } .dataSetScroll-scrollbarContainer-x { position: absolute; width: calc(100% + 20px); bottom: -10px; left: -10px; height: 15px; } .dataSetScroll-scrollbarContainer-x::before { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; content: ''; z-index: 2; user-select: none; pointer-events: none; touch-action: none; background: linear-gradient(180deg, #00000080 0%, #ffffff20 2px, transparent 4px, transparent calc(100% - 4px), #ffffff00 calc(100% - 2px), #00000040 100%), linear-gradient(90deg, #00000080 0%, #ffffff20 2px, transparent 4px, transparent calc(100% - 4px), #ffffff20 calc(100% - 2px), #00000080 100%); } .dataSetScroll-scrollbarContainer-x > div { position: absolute !important; width: 100%; height: 100%; left: 0px; top: 0px; display: flex; flex-direction: row; background: linear-gradient(180deg, var(--secondary-desaturate-40-light-30) 0%, var(--secondary-desaturate-30-light-70) 100% ); z-index: 1; } .dataSetScroll-scrollbarContainer-x > div .arrow { position: relative; width: 15px; height: 15px; } .dataSetScroll-scrollbarContainer-x > div .dataSetScroll-scrollbar-x { position: relative !important; width: calc(100% - 30px); height: 15px; } .dataSetScroll-scrollbarContainer-x > div .dataSetScroll-scrollbar-x input { opacity: 0 !important; } .dataSetScroll-scrollbarContainer-x > div .dataSetScroll-scrollbar-x .dataSetScroll-scrollbarThumb { position: absolute; width: var(--width, 0%); left: var(--left, 0%); transform: translateX(calc(var(--left, 0%) * -1)); height: 100%; top: 0px; pointer-events: none; user-select: none; touch-action: none; display: flex; flex-direction: row; justify-content: center; align-items: center; align-content: center; column-gap: 1px; } .dataSetScroll-scrollbarContainer-x > div .dataSetScroll-scrollbar-x .dataSetScroll-scrollbarThumb .dataSetScroll-scrollbarThumb-face { height: 7px; width: 12px; max-width: 100%; opacity: 0.5; position: relative; z-index: 3; } .dataSetScroll-scrollbarContainer-x > div .dataSetScroll-scrollbar-x .dataSetScroll-scrollbarThumb .dataSetScroll-scrollbarThumb-face::before, .dataSetScroll-scrollbarContainer-x > div .dataSetScroll-scrollbar-x .dataSetScroll-scrollbarThumb .dataSetScroll-scrollbarThumb-face::after { width: 100%; height: 100%; content: ''; position: absolute; mask-image: linear-gradient(90deg, transparent 0%, transparent calc(50% - 0.5px), #000 calc(50% - 0.5px), #000 calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent 100%); mask-size: 3px 100%; mask-repeat: space; mask-position: center center; } .dataSetScroll-scrollbarContainer-x > div .dataSetScroll-scrollbar-x .dataSetScroll-scrollbarThumb .dataSetScroll-scrollbarThumb-face::before { left: 0.5px; top: 0.5px; background: #fff; } .dataSetScroll-scrollbarContainer-x > div .dataSetScroll-scrollbar-x .dataSetScroll-scrollbarThumb .dataSetScroll-scrollbarThumb-face::after { left: 0px; top: 0px; background: #000; } .dataSetScroll-scrollbarContainer-x > div .dataSetScroll-scrollbar-x .dataSetScroll-scrollbarThumb::before, .dataSetScroll-scrollbarContainer-x > div .arrow .dataSetScroll-arrow-face::before { background: linear-gradient(180deg, var(--secondary-desaturate-10-light-45) 0%, var(--secondary-desaturate-10-light-40) 50%, var(--secondary-desaturate-50-dark-10) calc(100% - 2px), var(--secondary-desaturate-59-dark-15) 100% ); z-index: 1; content: ''; width: calc(100% - 3px); height: calc(100% - 3px); left: 1.5px; top: 1.5px; position: absolute; border-radius: 3px; box-shadow: inset 1px 2px 1.5px -1px rgba(255, 255, 255, 0.4), inset -1px -2px 1.5px -1px rgba(0, 0, 0, 0.5); } .dataSetScroll-scrollbarContainer-x > div .dataSetScroll-scrollbar-x .dataSetScroll-scrollbarThumb::after, .dataSetScroll-scrollbarContainer-x > div .arrow .dataSetScroll-arrow-face::after { z-index: 2; content: ''; width: calc(100% - 3px); height: calc(100% - 3px); left: 1.5px; top: 1.5px; position: absolute; border-radius: 3px; background: #fff; opacity: 0.1; transition: opacity 0.2s; } .dataSetScroll-scrollbarContainer-x > div .dataSetScroll-scrollbar-x .dataSetScroll-scrollbarThumb::before, .dataSetScroll-scrollbarContainer-x > div .dataSetScroll-scrollbar-x .dataSetScroll-scrollbarThumb::after { width: 100%; left: 0px; } .dataSetScroll-scrollbarContainer-x > div .dataSetScroll-scrollbar-x .dataSetScroll-scrollbarThumb.pointerOver::after, .scrollingX-byBar .dataSetScroll-scrollbarContainer-x > div .dataSetScroll-scrollbar-x .dataSetScroll-scrollbarThumb::after, .dataSetScroll-scrollbarContainer-x > div .arrow.pressed .dataSetScroll-arrow-face::after, :not(.scrollingX-byBar) .dataSetScroll-scrollbarContainer-x > div .arrow:hover .dataSetScroll-arrow-face::after { opacity: 0; } .dataSetScroll-scrollbarContainer-x > div .arrow::before, .dataSetScroll-scrollbarContainer-x > div .arrow::after { position: absolute; width: 100%; height: 100%; line-height: 15px; font-size: 9px; left: 0px; top: 1px; content: '🠈'; z-index: 3; } .dataSetScroll-scrollbarContainer-x > div .arrow::before { color: #fff; opacity: 0.5; left: 0.5px; top: 1.5px; } .dataSetScroll-scrollbarContainer-x > div .arrow::after { color: #000; opacity: 0.5; } .dataSetScroll-scrollbarContainer-x > div .arrow.right::before, .dataSetScroll-scrollbarContainer-x > div .arrow.right::after { content: '🠊'; } .dataSetScroll-scrollbarContainer-y { position: absolute; height: calc(100% + 20px); right: -10px; top: -10px; width: 15px; z-index: 4; } .dataSetScroll-scrollbarContainer-y::before { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; content: ''; z-index: 2; user-select: none; pointer-events: none; touch-action: none; background: linear-gradient(90deg, #00000080 0%, #ffffff20 2px, transparent 4px, transparent calc(100% - 4px), #ffffff00 calc(100% - 2px), #00000040 100%), linear-gradient(180deg, #00000080 0%, #ffffff20 2px, transparent 4px, transparent calc(100% - 4px), #ffffff20 calc(100% - 2px), #00000080 100%); } .dataSetScroll-scrollbarContainer-y > div { position: absolute !important; width: 100%; height: 100%; left: 0px; top: 0px; display: flex; flex-direction: column; background: linear-gradient(90deg, var(--secondary-desaturate-40-light-30) 0%, var(--secondary-desaturate-30-light-70) 100% ); z-index: 1; } .dataSetScroll-scrollbarContainer-y > div .arrow { position: relative; width: 15px; height: 15px; } .dataSetScroll-scrollbarContainer-y > div .dataSetScroll-scrollbar-y { position: relative !important; height: calc(100% - 30px); width: 15px; } .dataSetScroll-scrollbarContainer-y > div .dataSetScroll-scrollbar-y input { opacity: 0 !important; } .dataSetScroll-scrollbarContainer-y > div .dataSetScroll-scrollbar-y .dataSetScroll-scrollbarThumb { position: absolute; height: var(--height, 0%); top: var(--top, 0%); transform: translateY(calc(var(--top, 0%) * -1)); width: 100%; left: 0px; pointer-events: none; user-select: none; touch-action: none; display: flex; flex-direction: row; justify-content: center; align-items: center; align-content: center; row-gap: 1px; } .dataSetScroll-scrollbarContainer-y > div .dataSetScroll-scrollbar-y .dataSetScroll-scrollbarThumb .dataSetScroll-scrollbarThumb-face { width: 7px; height: 12px; max-height: 100%; opacity: 0.5; position: relative; z-index: 3; } .dataSetScroll-scrollbarContainer-y > div .dataSetScroll-scrollbar-y .dataSetScroll-scrollbarThumb .dataSetScroll-scrollbarThumb-face::before, .dataSetScroll-scrollbarContainer-y > div .dataSetScroll-scrollbar-y .dataSetScroll-scrollbarThumb .dataSetScroll-scrollbarThumb-face::after { width: 100%; height: 100%; content: ''; position: absolute; mask-image: linear-gradient(180deg, transparent 0%, transparent calc(50% - 0.5px), #000 calc(50% - 0.5px), #000 calc(50% + 0.5px), transparent calc(50% + 0.5px), transparent 100%); mask-size: 100% 3px; mask-repeat: space; mask-position: center center; } .dataSetScroll-scrollbarContainer-y > div .dataSetScroll-scrollbar-y .dataSetScroll-scrollbarThumb .dataSetScroll-scrollbarThumb-face::before { left: 0.5px; top: 0.5px; background: #fff; } .dataSetScroll-scrollbarContainer-y > div .dataSetScroll-scrollbar-y .dataSetScroll-scrollbarThumb .dataSetScroll-scrollbarThumb-face::after { left: 0px; top: 0px; background: #000; } .dataSetScroll-scrollbarContainer-y > div .dataSetScroll-scrollbar-y .dataSetScroll-scrollbarThumb::before, .dataSetScroll-scrollbarContainer-y > div .arrow .dataSetScroll-arrow-face::before { background: linear-gradient(90deg, var(--secondary-desaturate-10-light-45) 0%, var(--secondary-desaturate-10-light-40) 50%, var(--secondary-desaturate-50-dark-10) calc(100% - 2px), var(--secondary-desaturate-59-dark-15) 100% ); z-index: 1; content: ''; width: calc(100% - 3px); height: calc(100% - 3px); left: 1.5px; top: 1.5px; position: absolute; border-radius: 3px; box-shadow: inset 1px 2px 1.5px -1px rgba(255, 255, 255, 0.4), inset -1px -2px 1.5px -1px rgba(0, 0, 0, 0.5); } .dataSetScroll-scrollbarContainer-y > div .dataSetScroll-scrollbar-y .dataSetScroll-scrollbarThumb::after, .dataSetScroll-scrollbarContainer-y > div .arrow .dataSetScroll-arrow-face::after { z-index: 2; content: ''; width: calc(100% - 3px); height: calc(100% - 3px); left: 1.5px; top: 1.5px; position: absolute; border-radius: 3px; background: #fff; opacity: 0.1; transition: opacity 0.2s; } .dataSetScroll-scrollbarContainer-y > div .dataSetScroll-scrollbar-y .dataSetScroll-scrollbarThumb::before, .dataSetScroll-scrollbarContainer-y > div .dataSetScroll-scrollbar-y .dataSetScroll-scrollbarThumb::after { height: 100%; top: 0px; } .dataSetScroll-scrollbarContainer-y > div .dataSetScroll-scrollbar-y .dataSetScroll-scrollbarThumb.pointerOver::after, .scrollingX-byBar .dataSetScroll-scrollbarContainer-y > div .dataSetScroll-scrollbar-y .dataSetScroll-scrollbarThumb::after, .dataSetScroll-scrollbarContainer-y > div .arrow.pressed .dataSetScroll-arrow-face::after, :not(.scrollingX-byBar) .dataSetScroll-scrollbarContainer-y > div .arrow:hover .dataSetScroll-arrow-face::after { opacity: 0; } .dataSetScroll-scrollbarContainer-y > div .arrow::before, .dataSetScroll-scrollbarContainer-y > div .arrow::after { position: absolute; width: 100%; height: 100%; line-height: 15px; font-size: 9px; left: 0px; top: 1px; content: '🠉'; z-index: 3; } .dataSetScroll-scrollbarContainer-y > div .arrow::before { color: #fff; opacity: 0.5; left: 0.5px; top: 1.5px; } .dataSetScroll-scrollbarContainer-y > div .arrow::after { color: #000; opacity: 0.5; } .dataSetScroll-scrollbarContainer-y > div .arrow.down::before, .dataSetScroll-scrollbarContainer-y > div .arrow.down::after { content: '🠋'; } .gui .clockHolder, .gui .clock, .gui .clock .clockFace, .gui .clock .cface .cface-face { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; } .gui .clock { --offset: -5px; } .gui .clock .clockInner { z-index: 3; box-sizing: border-box; padding: calc(var(--clockPaddingTop, var(--clockPaddingY, var(--clockPadding, 10px)))) calc(var(--clockPaddingRight, var(--clockPaddingX, var(--clockPadding, 10px)))) calc(var(--clockPaddingBottom, var(--clockPaddingY, var(--clockPadding, 10px)))) calc(var(--clockPaddingLeft, var(--clockPaddingX, var(--clockPadding, 10px)))); } .gui .clock .clockFace .clockBorderFace, .gui .clock .clockInner { position: absolute; width: var(--clock_w); height: var(--clock_h); box-sizing: border-box; top: var(--clock_y); left: var(--pL); } .gui .clock .cface { position: absolute; width: var(--clock_w); height: calc(var(--clock_h) + var(--cH)); box-sizing: border-box; top: var(--pT); left: var(--pL); } .gui .clock .cface .cface-clip { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; /* background-position: calc(var(--pL) * -1) calc(var(--clock_y) * -1); */ } .gui .clock .cface:first-of-type .cface-clip { clip-path: polygon(-10px -10px, calc(100% + 5px) 2px, calc(100% + 5px) calc(100% + 3px), 2px calc(100% + 5px)); /* background: #fff; */ } .gui .clock .cface:nth-of-type(2) .cface-clip { clip-path: polygon(-100px 2px, calc(100% - 30px) 2px, calc(100% + 20px) 6px, calc(100% + 5px) calc(100% + 3px), 2px calc(100% - 5px), 2px calc(100% + 20px), -2px calc(100% - 20px), -8px calc(100% - 60px)); } .gui .clock .cface:first-of-type .cface-face { /* var(--secondary-dark-67) 0%, var(--secondary-dark-27) calc(0% + 2px), var(--secondary-light-37) calc(0% + 8px), var(--secondary-dark-17) calc(0% + 12px), var(--secondary-dark-37) 50%, var(--secondary-dark-57) calc(100% - calc(var(--guiHeight, 100px)) + 10%), var(--complimentary) 100%); background-size: var(--windowWidth, 100%) var(--windowHeight, 100%); */ --offset: 3px; /* display: none; */ } .gui .clock .cface:first-of-type .cface-face::before { position: absolute; width: var(--clock_w); height: calc(var(--clock_h) + 40px); box-sizing: border-box; top: calc(var(--clock_y) - 40px); left: var(--pL); content: ''; background: linear-gradient(180deg, #fff 0%, #00000090 20%, #ffffff30 80%, #ffffff30 90%, #ffffff80 100%); } /* .gui .clock .cface:first-of-type .cface-face::after { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; content: ''; background: #fff; opacity: 0.44; } */ .gui .clock .cface:nth-of-type(2) { filter: blur(4px); } .gui .clock .cface:first-of-type { filter: blur(4px); } .gui .clock .cface:nth-of-type(2) .cface-face::before { position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; content: ''; --borderSize: 6px; --offset: -4px; --offsetTop:-4px; background: #fff; } .gui .clock .clockFace .clockBorderFace .faceInner { position: absolute; width: 100%; height: 100%; left: 0px; } .gui .clock .clockFace .clockBorderFace .faceInner .inner { position: absolute; width: 100lvw; height: 100lvh; left: calc(var(--pL) * -1); top: calc(var(--clock_y) * -1); } .gui .clock .cface .cface-face { position: absolute; width: 100lvw; height: 100lvh; top: calc(var(--paddingTop, var(--paddingY, var(--defaultMapPaddingY))) * -1); left: calc(var(--paddingLeft, var(--paddingX, var(--defaultMapPaddingX))) * -1); } .gui .clock .clockFace, .gui .clock .clockFace .clockBorderFace, .gui .clock .clockFace .clockBorderFace .faceInner, .gui .clock .clockFace .clockBorderFace .faceInner .inner { pointer-events: none; touch-action: none; user-select: none; } .gui .clock .clockInner { display: flex; justify-content: flex-start; box-sizing: border-box; padding-left: 5px; align-items: center; align-content: center; } .gui .clock .clockInner .clockDisplay { box-sizing: border-box; height: 28px; padding: 0px 10px; border-radius: 5px; display: flex; justify-content: space-between; align-items: center; align-content: center; box-shadow: inset 3px 3px 12px -3px #00000080, inset -3px -3px 12px -3px #88888880; background: linear-gradient(179deg, var(--primary-dark-50) 0%, var(--primary-dark-37) 50%, var(--primary-darken-50) 70%, var(--primary-dark-56) 100%); } .gui .clock .clockInner .clockDisplay .clockDisplayFlex { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; column-gap: 5px; } .gui .clock .clockInner .clockDisplay .clockDisplaySeparator { position: relative; align-self: center; height: 21px; width: 1.5px; } .gui .clock .clockInner .clockDisplay .clockDisplaySeparator::before { content: ''; position: absolute; height: calc(100% - 4px); top: 2px; left: 0px; width: 100%; box-sizing: border-box; border-right: var(--primary-desaturate-30-brighten-70) dashed 1.5px; } .gui .clock .clockInner .clockDisplay p { color: var(--primary-desaturate-30-brighten-70); font-weight: 600; } .gui .clock .clockInner .clockDisplay p.time { font-size: 21px; line-height: 21px; } .gui .clock .clockInner .clockDisplay p.date { font-size: 18px; line-height: 18px; } .loader { position: absolute; width: 100lvw; height: 100lvh; left: 0px; top: 0px; background: var(--complimentary-desaturate-80-dark-77); z-index: 99999999999999999; } body { background: var(--complimentary-desaturate-80-dark-77); color: var(--complimentary-light-10); overflow: hidden; width: 100vw; height: 100vh; }:root { --secondary: #736fb0; --primary: #fab106; --tetriary: #1d2940; --complimentary: #383737; --secondComplimentary: #f5ece1; --color0: #05FAB0; --color1: #058cfa; --color2: #3605fa; --color3: #ee05fa; --color4: #fa054e; --color5: #fa7305; --color6: #c9fa05; --color7: #11fa05; --secondary-dark-67: #26253a; --secondary-dark-27: #545180; --secondary-light-37: #a7a4cd; --secondary-dark-17: #5f5c92; --secondary-dark-37: #48466f; --secondary-dark-57: #31304c; --secondary-desaturate-80-dark-70: #323135; --secondary-hue-60-desaturate-10-light-70: #e7d6e6; --secondary-hue-60-desaturate-20-dark-1: #ae7aaa; --secondary-desaturate-80-dark-80: #212123; --secondary-desaturate-80-light-10: #aeadb8; --secondary-desaturate-50-dark-20: #75738d; --secondary-light-70: #d5d4e7; --secondary-desaturate-50-dark-50: #494858; --secondary-desaturate-50-light-20: #a8a6c0; --secondary-light-50: #b9b7d8; --secondary-desaturate-50: #9290b0; --secondary-dark-50: #3a3858; --secondary-desaturate-70-dark-10: #8e8d9e; --secondary-desaturate-20-light-80: #e5e5ef; --secondary-desaturate-20-light-60: #cccadf; --secondary-desaturate-70-light-10: #a8a7b8; --secondary-desaturate-20-dark-40: #4c4a6a; --secondary-desaturate-40-light-30: #afacc8; --secondary-desaturate-30-light-70: #dadae7; --secondary-desaturate-10-light-45: #b6b4d4; --secondary-desaturate-10-light-40: #afadd0; --secondary-desaturate-50-dark-10: #83829e; --secondary-desaturate-59-dark-15: #808096; --primary-dark-50: #7d5903; --primary-dark-37: #9e7004; --primary-darken-50: #7d5803; --primary-dark-56: #6e4e03; --primary-desaturate-30-brighten-70: #fdc951; --primary-desaturate-80-dark-40: #968d78; --primary-desaturate-80-dark-50: #7d7664; --primary-desaturate-50-dark-40: #96804c; --primary-light-68: #fde6af; --primary-light-45: #fcd476; --primary-desaturate-40-dark-10: #e1b95c; --primary-dark-70: #4b3502; --primary-light-95: #fffbf3; --primary-hue-210: #3706fa; --primary-hue-210-desaturate-70-light-50: #e0d8fd; --primary-desaturate-80-dark-30: #afa58c; --primary-desaturate-60-light-50: #fdeecc; --primary-desaturate-70-dark-10: #e1cd9f; --primary-desaturate-80-dark-45: #8a816e; --primary-desaturate-30-dark-80: #322810; --primary-hue-210-desaturate-80-dark-30: #938caf; --primary-hue-210-desaturate-60-light-50: #d6ccfd; --primary-hue-210-desaturate-70-dark-10: #ad9fe1; --primary-hue-210-desaturate-80-dark-45: #746e8a; --primary-hue-210-desaturate-30-dark-80: #171032; --primary-desaturate-20-dark-80: #32260b; --complimentary-desaturate-80-dark-77: #0d0d0d; --complimentary-light-10: #4c4b4b; --secondary-dark-70-desaturate-80: var(--secondary-desaturate-80-dark-70); --secondary-hue-60-light-70-desaturate-10: var(--secondary-hue-60-desaturate-10-light-70); --secondary-desaturate-10-hue-60-light-70: var(--secondary-hue-60-desaturate-10-light-70); --secondary-desaturate-10-light-70-hue-60: var(--secondary-hue-60-desaturate-10-light-70); --secondary-light-70-hue-60-desaturate-10: var(--secondary-hue-60-desaturate-10-light-70); --secondary-light-70-desaturate-10-hue-60: var(--secondary-hue-60-desaturate-10-light-70); --secondary-hue-60-dark-1-desaturate-20: var(--secondary-hue-60-desaturate-20-dark-1); --secondary-desaturate-20-hue-60-dark-1: var(--secondary-hue-60-desaturate-20-dark-1); --secondary-desaturate-20-dark-1-hue-60: var(--secondary-hue-60-desaturate-20-dark-1); --secondary-dark-1-hue-60-desaturate-20: var(--secondary-hue-60-desaturate-20-dark-1); --secondary-dark-1-desaturate-20-hue-60: var(--secondary-hue-60-desaturate-20-dark-1); --secondary-dark-80-desaturate-80: var(--secondary-desaturate-80-dark-80); --secondary-light-10-desaturate-80: var(--secondary-desaturate-80-light-10); --secondary-dark-20-desaturate-50: var(--secondary-desaturate-50-dark-20); --secondary-dark-50-desaturate-50: var(--secondary-desaturate-50-dark-50); --secondary-light-20-desaturate-50: var(--secondary-desaturate-50-light-20); --secondary-dark-10-desaturate-70: var(--secondary-desaturate-70-dark-10); --secondary-light-80-desaturate-20: var(--secondary-desaturate-20-light-80); --secondary-light-60-desaturate-20: var(--secondary-desaturate-20-light-60); --secondary-light-10-desaturate-70: var(--secondary-desaturate-70-light-10); --secondary-dark-40-desaturate-20: var(--secondary-desaturate-20-dark-40); --secondary-light-30-desaturate-40: var(--secondary-desaturate-40-light-30); --secondary-light-70-desaturate-30: var(--secondary-desaturate-30-light-70); --secondary-light-45-desaturate-10: var(--secondary-desaturate-10-light-45); --secondary-light-40-desaturate-10: var(--secondary-desaturate-10-light-40); --secondary-dark-10-desaturate-50: var(--secondary-desaturate-50-dark-10); --secondary-dark-15-desaturate-59: var(--secondary-desaturate-59-dark-15); --primary-brighten-70-desaturate-30: var(--primary-desaturate-30-brighten-70); --primary-dark-40-desaturate-80: var(--primary-desaturate-80-dark-40); --primary-dark-50-desaturate-80: var(--primary-desaturate-80-dark-50); --primary-dark-40-desaturate-50: var(--primary-desaturate-50-dark-40); --primary-dark-10-desaturate-40: var(--primary-desaturate-40-dark-10); --primary-hue-210-light-50-desaturate-70: var(--primary-hue-210-desaturate-70-light-50); --primary-desaturate-70-hue-210-light-50: var(--primary-hue-210-desaturate-70-light-50); --primary-desaturate-70-light-50-hue-210: var(--primary-hue-210-desaturate-70-light-50); --primary-light-50-hue-210-desaturate-70: var(--primary-hue-210-desaturate-70-light-50); --primary-light-50-desaturate-70-hue-210: var(--primary-hue-210-desaturate-70-light-50); --primary-dark-30-desaturate-80: var(--primary-desaturate-80-dark-30); --primary-light-50-desaturate-60: var(--primary-desaturate-60-light-50); --primary-dark-10-desaturate-70: var(--primary-desaturate-70-dark-10); --primary-dark-45-desaturate-80: var(--primary-desaturate-80-dark-45); --primary-dark-80-desaturate-30: var(--primary-desaturate-30-dark-80); --primary-hue-210-dark-30-desaturate-80: var(--primary-hue-210-desaturate-80-dark-30); --primary-desaturate-80-hue-210-dark-30: var(--primary-hue-210-desaturate-80-dark-30); --primary-desaturate-80-dark-30-hue-210: var(--primary-hue-210-desaturate-80-dark-30); --primary-dark-30-hue-210-desaturate-80: var(--primary-hue-210-desaturate-80-dark-30); --primary-dark-30-desaturate-80-hue-210: var(--primary-hue-210-desaturate-80-dark-30); --primary-hue-210-light-50-desaturate-60: var(--primary-hue-210-desaturate-60-light-50); --primary-desaturate-60-hue-210-light-50: var(--primary-hue-210-desaturate-60-light-50); --primary-desaturate-60-light-50-hue-210: var(--primary-hue-210-desaturate-60-light-50); --primary-light-50-hue-210-desaturate-60: var(--primary-hue-210-desaturate-60-light-50); --primary-light-50-desaturate-60-hue-210: var(--primary-hue-210-desaturate-60-light-50); --primary-hue-210-dark-10-desaturate-70: var(--primary-hue-210-desaturate-70-dark-10); --primary-desaturate-70-hue-210-dark-10: var(--primary-hue-210-desaturate-70-dark-10); --primary-desaturate-70-dark-10-hue-210: var(--primary-hue-210-desaturate-70-dark-10); --primary-dark-10-hue-210-desaturate-70: var(--primary-hue-210-desaturate-70-dark-10); --primary-dark-10-desaturate-70-hue-210: var(--primary-hue-210-desaturate-70-dark-10); --primary-hue-210-dark-45-desaturate-80: var(--primary-hue-210-desaturate-80-dark-45); --primary-desaturate-80-hue-210-dark-45: var(--primary-hue-210-desaturate-80-dark-45); --primary-desaturate-80-dark-45-hue-210: var(--primary-hue-210-desaturate-80-dark-45); --primary-dark-45-hue-210-desaturate-80: var(--primary-hue-210-desaturate-80-dark-45); --primary-dark-45-desaturate-80-hue-210: var(--primary-hue-210-desaturate-80-dark-45); --primary-hue-210-dark-80-desaturate-30: var(--primary-hue-210-desaturate-30-dark-80); --primary-desaturate-30-hue-210-dark-80: var(--primary-hue-210-desaturate-30-dark-80); --primary-desaturate-30-dark-80-hue-210: var(--primary-hue-210-desaturate-30-dark-80); --primary-dark-80-hue-210-desaturate-30: var(--primary-hue-210-desaturate-30-dark-80); --primary-dark-80-desaturate-30-hue-210: var(--primary-hue-210-desaturate-30-dark-80); --primary-dark-80-desaturate-20: var(--primary-desaturate-20-dark-80); --complimentary-dark-77-desaturate-80: var(--complimentary-desaturate-80-dark-77); } section.svelte-111bhfi { position: relative; width: 100%; height: 100%; } section.svelte-111bhfi > div:where(.svelte-111bhfi):first-child { position: relative; width: 100%; height: 100%; scrollbar-width: 0px; -ms-overflow-style: none; overflow: hidden; } section.svelte-111bhfi > div:where(.svelte-111bhfi):first-child::-webkit-scrollbar { display: none; } section.svelte-111bhfi > div:first-child.scrollable_x:where(.svelte-111bhfi), section.svelte-111bhfi > div:first-child.scrollable-x:where(.svelte-111bhfi), section.svelte-111bhfi > div:first-child.scrollableX:where(.svelte-111bhfi) { overflow-x: auto !important; overflow-y: hidden !important; } section.svelte-111bhfi > div:first-child.scrollable_y:where(.svelte-111bhfi), section.svelte-111bhfi > div:first-child.scrollable-y:where(.svelte-111bhfi), section.svelte-111bhfi > div:first-child.scrollableY:where(.svelte-111bhfi) { overflow-y: auto !important; overflow-x: hidden !important; } section.svelte-111bhfi > div:first-child.scrollable_x_y:where(.svelte-111bhfi), section.svelte-111bhfi > div:first-child.scrollable-x-y:where(.svelte-111bhfi), section.svelte-111bhfi > div:first-child.scrollableXY:where(.svelte-111bhfi) { overflow-y: auto !important; overflow-x: auto !important; } section.svelte-111bhfi > div:where(.svelte-111bhfi):first-child > div:where(.svelte-111bhfi) { position: absolute; top: 0px; left: 0px; } section.svelte-111bhfi > div:where(.svelte-111bhfi):nth-child(n + 2) { position: absolute; } section.svelte-111bhfi > div:where(.svelte-111bhfi):nth-child(n + 2) > div:where(.svelte-111bhfi) { position: relative; } section.svelte-111bhfi > .custom-scrollbarContainer-y:where(.svelte-111bhfi), section.svelte-111bhfi > .custom_scrollbarContainer_y:where(.svelte-111bhfi), section.svelte-111bhfi > .custom-scrollbar-container-y:where(.svelte-111bhfi), section.svelte-111bhfi > .custom-scrollbar_container_y:where(.svelte-111bhfi), section.svelte-111bhfi > .customScrollbarContainerY:where(.svelte-111bhfi) { position: absolute; height: 100%; width: 10px; top: 0px; right: 0px; } section.svelte-111bhfi > .custom-scrollbarContainer-y:where(.svelte-111bhfi) > div:where(.svelte-111bhfi), section.svelte-111bhfi > .custom_scrollbarContainer_y:where(.svelte-111bhfi) > div:where(.svelte-111bhfi), section.svelte-111bhfi > .custom-scrollbar-container-y:where(.svelte-111bhfi) > div:where(.svelte-111bhfi), section.svelte-111bhfi > .custom-scrollbar_container_y:where(.svelte-111bhfi) > div:where(.svelte-111bhfi), section.svelte-111bhfi > .customScrollbarContainerY:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) { position: absolute; height: 100%; width: 10px; top: 0px; left: 0px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; align-content: flex-end; } section.svelte-111bhfi > .custom-scrollbarContainer-y:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom-scrollbar-y:where(.svelte-111bhfi), section.svelte-111bhfi > .custom_scrollbarContainer_y:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom_scrollbar_y:where(.svelte-111bhfi), section.svelte-111bhfi > .custom-scrollbar-container-y:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom-scrollbar-y:where(.svelte-111bhfi), section.svelte-111bhfi > .custom-scrollbar_container_y:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom_scrollbar_y:where(.svelte-111bhfi), section.svelte-111bhfi > .customScrollbarContainerY:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .customScrollbarY:where(.svelte-111bhfi) { flex-grow: 1; position: relative; width: 100%; } section.svelte-111bhfi > .custom-scrollbarContainer-y:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom-scrollbar-y:where(.svelte-111bhfi) > .custom-scrollbarThumb:where(.svelte-111bhfi), section.svelte-111bhfi > .custom_scrollbarContainer_y:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom_scrollbar_y:where(.svelte-111bhfi) > .custom_scrollbarThumb:where(.svelte-111bhfi), section.svelte-111bhfi > .custom-scrollbar-container-y:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom-scrollbar-y:where(.svelte-111bhfi) > .custom-scrollbar-thumb:where(.svelte-111bhfi), section.svelte-111bhfi > .custom-scrollbar_container_y:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom_scrollbar_y:where(.svelte-111bhfi) > .custom_scrollbar_thumb:where(.svelte-111bhfi), section.svelte-111bhfi > .customScrollbarContainerY:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .customScrollbarY:where(.svelte-111bhfi) > .customScrollbarThumb:where(.svelte-111bhfi) { position: absolute; top: var(--top, 0%); transform: translateY(calc(var(--top, 0%) * -1)); height: var(--height, 0%); } section.svelte-111bhfi > .custom-scrollbarContainer-y:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom-scrollbar-y:where(.svelte-111bhfi) > input:where(.svelte-111bhfi), section.svelte-111bhfi > .custom_scrollbarContainer_y:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom_scrollbar_y:where(.svelte-111bhfi) > input:where(.svelte-111bhfi), section.svelte-111bhfi > .custom-scrollbar-container-y:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom-scrollbar-y:where(.svelte-111bhfi) > input:where(.svelte-111bhfi), section.svelte-111bhfi > .custom-scrollbar_container_y:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom_scrollbar_y:where(.svelte-111bhfi) > input:where(.svelte-111bhfi), section.svelte-111bhfi > .customScrollbarContainerY:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .customScrollbarY:where(.svelte-111bhfi) > input:where(.svelte-111bhfi) { position: absolute; left: 0px; top: 0px; } section.svelte-111bhfi > .custom-scrollbarContainer-x:where(.svelte-111bhfi), section.svelte-111bhfi > .custom_scrollbarContainer_x:where(.svelte-111bhfi), section.svelte-111bhfi > .custom-scrollbar-container-x:where(.svelte-111bhfi), section.svelte-111bhfi > .custom-scrollbar_container_x:where(.svelte-111bhfi), section.svelte-111bhfi > .customScrollbarContainerX:where(.svelte-111bhfi) { position: absolute; width: 100%; height: 10px; left: 0px; bottom: 0px; } section.svelte-111bhfi > .custom-scrollbarContainer-x:where(.svelte-111bhfi) > div:where(.svelte-111bhfi), section.svelte-111bhfi > .custom_scrollbarContainer_x:where(.svelte-111bhfi) > div:where(.svelte-111bhfi), section.svelte-111bhfi > .custom-scrollbar-container-x:where(.svelte-111bhfi) > div:where(.svelte-111bhfi), section.svelte-111bhfi > .custom-scrollbar_container_x:where(.svelte-111bhfi) > div:where(.svelte-111bhfi), section.svelte-111bhfi > .customScrollbarContainerX:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) { position: absolute; width: 100%; height: 10px; bottom: 0px; left: 0px; display: flex; flex-direction: row; justify-content: center; align-items: flex-start; align-content: flex-end; } section.svelte-111bhfi > .custom-scrollbarContainer-x:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom-scrollbar-x:where(.svelte-111bhfi), section.svelte-111bhfi > .custom_scrollbarContainer_x:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom_scrollbar_x:where(.svelte-111bhfi), section.svelte-111bhfi > .custom-scrollbar-container-x:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom-scrollbar-x:where(.svelte-111bhfi), section.svelte-111bhfi > .custom-scrollbar_container_x:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom_scrollbar_x:where(.svelte-111bhfi), section.svelte-111bhfi > .customScrollbarContainerX:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .customScrollbarX:where(.svelte-111bhfi) { flex-grow: 1; position: relative; height: 100%; } section.svelte-111bhfi > .custom-scrollbarContainer-x:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom-scrollbar-x:where(.svelte-111bhfi) > .custom-scrollbarThumb:where(.svelte-111bhfi), section.svelte-111bhfi > .custom_scrollbarContainer_x:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom_scrollbar_x:where(.svelte-111bhfi) > .custom_scrollbarThumb:where(.svelte-111bhfi), section.svelte-111bhfi > .custom-scrollbar-container-x:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom-scrollbar-x:where(.svelte-111bhfi) > .custom-scrollbar-thumb:where(.svelte-111bhfi), section.svelte-111bhfi > .custom-scrollbar_container_x:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom_scrollbar_x:where(.svelte-111bhfi) > .custom_scrollbar_thumb:where(.svelte-111bhfi), section.svelte-111bhfi > .customScrollbarContainerX:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .customScrollbarX:where(.svelte-111bhfi) > .customScrollbarThumb:where(.svelte-111bhfi) { position: absolute; left: var(--left, 0%); transform: translateX(calc(var(--left, 0%) * -1)); height: var(--width, 0%); } section.svelte-111bhfi > .custom-scrollbarContainer-x:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom-scrollbar-x:where(.svelte-111bhfi) > input:where(.svelte-111bhfi), section.svelte-111bhfi > .custom_scrollbarContainer_x:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom_scrollbar_x:where(.svelte-111bhfi) > input:where(.svelte-111bhfi), section.svelte-111bhfi > .custom-scrollbar-container-x:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom-scrollbar-x:where(.svelte-111bhfi) > input:where(.svelte-111bhfi), section.svelte-111bhfi > .custom-scrollbar_container_x:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .custom_scrollbar_x:where(.svelte-111bhfi) > input:where(.svelte-111bhfi), section.svelte-111bhfi > .customScrollbarContainerX:where(.svelte-111bhfi) > div:where(.svelte-111bhfi) > .customScrollbarX:where(.svelte-111bhfi) > input:where(.svelte-111bhfi) { position: absolute; left: 0px; top: 0px; } section[data-selection="disallowed"].custom-scrolling.svelte-111bhfi, section[data-selection="disallowed"].custom-scrolling.svelte-111bhfi :where(.svelte-111bhfi), section[data-selection="disallowed"].custom_scrolling.svelte-111bhfi, section[data-selection="disallowed"].custom_scrolling.svelte-111bhfi :where(.svelte-111bhfi), section[data-selection="disallowed"].customScrolling.svelte-111bhfi, section[data-selection="disallowed"].customScrolling.svelte-111bhfi :where(.svelte-111bhfi), section[data-selection="disallowed"].scrolling.svelte-111bhfi, section[data-selection="disallowed"].scrolling.svelte-111bhfi :where(.svelte-111bhfi), section[data-selection="disallowed"]._scrolling.svelte-111bhfi, section[data-selection="disallowed"]._scrolling.svelte-111bhfi :where(.svelte-111bhfi) { user-select: none; }