jvcgpt / dist /assets /index-BhbZavTP.css
Greums's picture
fix the slider
63e28ac
raw
history blame
18.8 kB
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap");
/***
The new CSS reset - version 1.11.3 (last updated 25.08.2024)
GitHub page: https://github.com/elad2412/the-new-css-reset
***/
/*
Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
- The "symbol *" part is to solve Firefox SVG sprite bug
- The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36)
*/
*:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) {
all: unset;
display: revert;
}
/* Preferred box-sizing value */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* Fix mobile Safari increase font-size on landscape mode */
html {
-moz-text-size-adjust: none;
-webkit-text-size-adjust: none;
text-size-adjust: none;
}
/* Reapply the pointer cursor for anchor tags */
a, button {
cursor: revert;
}
/* Remove list styles (bullets/numbers) */
ol, ul, menu, summary {
list-style: none;
}
/* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */
ol {
counter-reset: revert;
}
/* For images to not be able to exceed their container */
img {
max-inline-size: 100%;
max-block-size: 100%;
}
/* removes spacing between cells in tables */
table {
border-collapse: collapse;
}
/* Safari - solving issue when using user-select:none on the <body> text input doesn't working */
input, textarea {
-webkit-user-select: auto;
}
/* revert the 'white-space' property for textarea elements on Safari */
textarea {
white-space: revert;
}
/* minimum style to allow to style meter element */
meter {
-webkit-appearance: revert;
appearance: revert;
}
/* preformatted text - use only for this feature */
:where(pre) {
all: revert;
box-sizing: border-box;
}
/* reset default text opacity of input placeholder */
::placeholder {
color: unset;
}
/* fix the feature of 'hidden' attribute.
display:revert; revert to element instead of attribute */
:where([hidden]) {
display: none;
}
/* revert for bug in Chromium browsers
- fix for the content editable attribute will work properly.
- webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/
:where([contenteditable]:not([contenteditable=false])) {
-moz-user-modify: read-write;
-webkit-user-modify: read-write;
overflow-wrap: break-word;
-webkit-line-break: after-white-space;
-webkit-user-select: auto;
}
/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
-webkit-user-drag: element;
}
/* Revert Modal native behavior */
:where(dialog:modal) {
all: revert;
box-sizing: border-box;
}
/* Remove details summary webkit styles */
::-webkit-details-marker {
display: none;
}
:root {
color-scheme: dark;
--body-bg: #22252a;
--text-primary: #3d87f5;
--text-hover-primary: #5596f6;
--text-secondary: #f66031;
--text-hover-secondary: #f7734a;
--text-danger: #e4606d;
--text-hover-danger: #dc3545;
--text-dark: #e0e0e0;
--text-hover-dark: #fff;
--text-light: #000;
--bg-color-light: #272a30;
--bg-color-light-transparent: rgba(39, 42, 48, 0);
--bg-color: #22252a;
--text-color: #f2f2f2;
--border-color: #4a4c4f;
--border-even-color: #454f5e;
--border-highlighted-color: #765d3f;
--block-bg-color: #2e3238;
--block-even-bg-color: #363e49;
--block-highlighted-bg-color: #594126;
--block-bg-color-hover: #353941;
--block-bg-color-hover-dark: #454b54;
--text-muted-color: #9e9e9e;
--text-muted-hover-color: #bababa;
--text-blockquote-color: #c7c7d1;
--link-color: #7dc3f7;
--link-hover-bg-color: #4c5767;
--header-bg-color: #18191b;
--header-bottom-bg-color: #000;
--header-bottom-bg-color-hover: #303236;
--video-footer-bg-color: #1d1e20;
--layout-bg-color: #292d32;
--disabled-bg-color: #1d1e20;
--disabled-text-color: #787e87;
--disabled-border-color: #787e87;
--ad-bg-color: #18191b;
--ad-border-color: #000;
--game-header-bg-color: #2c2f35;
--bg-light: #2c2f35;
--game-tab-hover-bg-color: #17191c;
--price-color: #9fafc6;
--blue-light: #414a58;
--live-color: #ff4d4d;
--live-hover-color: #ff1a1a;
--gauge-bg-color: #616161;
--blue-gray-color: #9fafc6;
--message-delete: #104e60;
--message-delete-border: #092a34;
--message-delete-gta: #46435b;
--message-delete-gta-border: #191820;
--input-bg-color: #303236;
--input-border-color: #636569;
--input-text-color: #f2f2f2;
--input-placeholder-color: #616161;
--form-select-indicator: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 16 16%27%3e%3cpath stroke=%27%23e0e0e0%27 stroke-width=%272px%27 d=%27M2 5l6 6 6-6%27 fill=%27none%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3e%3c/svg%3e");
--form-switch-bg-image: url("data:image/svg+xml,<svg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27><circle r=%273%27 fill=%27%23636569%27/></svg>");
--admin-color: #f24444;
--modo-color: #42b228;
--ad-placeholder-opacity: 0.4;
--alert-brightness: 0.85;
--filters-bg-color: #16191d;
--gray-100: #f8f9fa;
--gray-200: #e9ecef;
--gray-300: #dee2e6;
--gray-400: #ced4da;
--gray-500: #adb5bd;
--gray-600: #6c757d;
--gray-700: #495057;
--gray-800: #343a40;
--gray-900: #212529;
--white-rgb: #fff;
--black-rgb: #000;
--body-color-rgb: var(--text-color);
--body-bg-rgb: var(--body-bg);
--font-sans-serif: "Roboto", Arial, Helvetica, sans-serif;
--font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
--gradient: linear-gradient(180deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0));
--root-font-size: 1rem;
--body-font-family: "Roboto", Arial, Helvetica, sans-serif;
--body-font-size: 0.9375rem;
--body-font-weight: 400;
--body-line-height: 1.5;
--body-color: var(--text-color);
--border-width: 0.0625rem;
--border-style: solid;
--border-color-translucent: rgba(0, 0, 0, 0.175);
--border-radius: 0.75rem;
--border-radius-sm: 0.5rem;
--border-radius-lg: 0.75rem;
--border-radius-xl: 1rem;
--border-radius-2xl: 2rem;
--border-radius-pill: 50rem;
--link-hover-color: var(--text-hover-secondary);
--code-color: #d63384;
--highlight-bg: #fff3cd;
--topic-font-size: 0.8125rem;
--topic-font-weight: 700;
--topic-line-height: 1.25;
--topic-gap: 0.625rem;
--topic-title-font-size: 0.9375rem;
--topic-title-font-weight: 500;
}
body {
margin: 0;
font-family: var(--body-font-family), sans-serif;
font-size: var(--body-font-size);
font-weight: var(--body-font-weight);
line-height: var(--body-line-height);
color: var(--body-color);
text-align: var(--body-text-align);
background-color: var(--body-bg);
-webkit-text-size-adjust: 100%;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
hr {
height: 1px;
width: 100%;
background-color: var(--border-color);
display: block;
margin: 1.5rem 0;
}
h2 {
font-size: 1.59375rem;
line-height: 1.25;
font-weight: 500;
color: var(--text-color);
padding-bottom: 1.5rem;
}._header_1hnaa_1 {
background-color: var(--header-bg-color);
color: var(--text-color);
}
._logo_1hnaa_6 {
font-size: 2rem;
font-weight: 700;
}._container_1putz_1 {
margin: 0 auto;
min-width: 20rem;
max-width: 73.5rem;
padding: 0 0.5rem;
}._spinnerSquare_4vgl0_1 {
display: flex;
flex-direction: row;
width: 90px;
height: 120px;
}
._spinnerSquare_4vgl0_1 > div {
width: 17px;
height: 80px;
margin: auto auto;
border-radius: 4px;
}
._square1_4vgl0_14 {
animation: _square-anim_4vgl0_1 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 0s infinite;
}
._square2_4vgl0_18 {
animation: _square-anim_4vgl0_1 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 200ms infinite;
}
._square3_4vgl0_22 {
animation: _square-anim_4vgl0_1 1200ms cubic-bezier(0.445, 0.05, 0.55, 0.95) 400ms infinite;
}
@keyframes _square-anim_4vgl0_1 {
0% {
height: 80px;
background-color: var(--text-secondary);
}
20% {
height: 80px;
}
40% {
height: 120px;
background-color: var(--text-hover-secondary);
}
80% {
height: 80px;
}
100% {
height: 80px;
background-color: var(--text-secondary);
}
}._spinner_1pqws_1 {
margin: 5rem auto;
}
._list_1pqws_5 {
display: grid;
grid-template-columns: 10fr 3fr 1fr 3fr;
list-style-type: none;
background: var(--block-bg-color);
border: 0.0625rem solid var(--border-color);
border-radius: 0.75rem;
width: 100%;
padding: 0;
overflow: hidden;
margin-bottom: 1.5rem;
}
._list_1pqws_5 > li {
display: contents;
list-style: none;
padding: 0;
margin: 0;
}
._list_1pqws_5 > li > span {
font-weight: var(--topic-font-weight);
font-size: var(--topic-font-size);
padding: var(--topic-gap);
}
._list_1pqws_5 > li > span a {
overflow: hidden;
display: -webkit-box;
-webkit-line-clamp: var(--topic-title-lines);
-webkit-box-orient: vertical;
color: var(--link-color);
text-decoration: none;
font-size: var(--topic-title-font-size);
font-weight: var(--topic-title-font-weight);
}
._list_1pqws_5 > li > span a:hover {
color: var(--text-hover-secondary);
}
._list_1pqws_5 > li:nth-child(even) > span {
background: var(--block-even-bg-color);
}
._list_1pqws_5 > li._highlight_1pqws_44 > span {
background: var(--block-highlighted-bg-color);
}
._head_1pqws_48 > span {
text-transform: uppercase;
}
._generationSettings_1pqws_52 {
display: grid;
grid-template-columns: 1fr 1fr;
}._btn_1ts7o_1 {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
padding: 0 1.25rem;
margin: 0;
border: 0.0625rem solid var(--text-secondary);
height: 2.25rem;
line-height: 2.25rem;
font-size: 0.9375rem;
text-decoration: none;
color: var(--text-secondary);
border-radius: 1.125rem;
white-space: nowrap;
cursor: pointer;
}
._btn_1ts7o_1:not(._disabled_1ts7o_18):hover {
border-color: var(--text-hover-secondary);
color: var(--text-hover-secondary);
}
._btn_1ts7o_1._secondary_1ts7o_22 {
color: #fff;
background-color: var(--text-secondary);
}
._btn_1ts7o_1._secondary_1ts7o_22:not(._disabled_1ts7o_18):hover {
border-color: var(--text-hover-secondary);
background: var(--text-hover-secondary);
color: #fff;
}
._spinner_1ts7o_32 {
font-size: 10px;
margin-right: 1em;
width: 1.5em;
height: 1.5em;
border-radius: 50%;
background: #ffffff;
background: linear-gradient(to right, #ffffff 10%, rgba(255, 255, 255, 0) 42%);
position: relative;
animation: _load3_1ts7o_1 1.4s infinite linear;
transform: translateZ(0);
}
._spinner_1ts7o_32:before {
width: 50%;
height: 50%;
background: #ffffff;
border-radius: 100% 0 0 0;
position: absolute;
top: 0;
left: 0;
content: "";
}
._spinner_1ts7o_32:after {
background: var(--text-secondary);
width: 75%;
height: 75%;
border-radius: 50%;
content: "";
margin: auto;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
@keyframes _load3_1ts7o_1 {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
._disabled_1ts7o_18 {
cursor: not-allowed;
}
._disabled_1ts7o_18:after {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: #4f4f4f;
border: 0.0625rem solid #4f4f4f;
border-radius: 1.125rem;
opacity: 0.5;
box-sizing: content-box;
}._formGroup_b3g81_1 {
display: flex;
flex-direction: column;
margin-bottom: 1rem;
justify-content: space-between;
}
._formGroup_b3g81_1 > * {
flex-grow: 0;
}
._formGroup_b3g81_1 label {
font-size: 1rem;
margin-bottom: 1rem;
}._slider_1hlzr_1 {
--ticks-count: calc(var(--max) - var(--min)) / var(--step);
--too-many-ticks: min(1, Max(var(--ticks-count) - 30, 0));
--x-step: max(var(--step), var(--too-many-ticks) * (var(--max) - var(--min)));
position: relative;
background: linear-gradient(to right, var(--text-muted-color) 1px, transparent 1px) repeat-x;
background-size: calc((100% - 20px) / ((var(--max) - var(--min)) / var(--x-step))) 5px;
background-position-x: calc(10px - 0.5px);
background-position-y: bottom;
font-weight: 700;
color: var(--text-muted-color);
font-size: 0.8125rem;
height: 22px;
margin-top: 2.5ch;
margin-bottom: 2.5ch;
}
._slider_1hlzr_1::before, ._slider_1hlzr_1::after {
content: counter(x);
position: absolute;
bottom: calc(-2.5ch - 2px);
top: calc(2.5ch + 2px);
opacity: 0.5;
transform: translateX(calc(50% * var(--before, -1) * -1));
pointer-events: none;
}
._slider_1hlzr_1::before {
--before: 1;
counter-reset: x var(--min);
left: 10px;
}
._slider_1hlzr_1::after {
counter-reset: x var(--max);
right: 10px;
}
._outputContainer_1hlzr_36 {
position: absolute;
top: 0;
left: 10px;
right: 10px;
height: 10px;
pointer-events: none;
}
._output_1hlzr_36 {
pointer-events: none;
position: absolute;
z-index: 5;
width: 20px;
height: 20px;
left: calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100% - 10px);
bottom: 16px;
text-align: center;
}
._progress_1hlzr_56 {
--completed-a: calc((clamp(var(--min), var(--value, 0), var(--max)) - var(--min)) / (var(--max) - var(--min)) * 100);
--completed-b: calc((var(--value) - var(--min)) / (var(--max) - var(--min)) * 100);
--cb: max(var(--completed-a), var(--completed-b));
--start-end: 10px;
--clip-end: calc(100% - (var(--cb)) * 1%);
--clip: inset(-20px var(--clip-end) -20px 0);
position: absolute;
width: 100%;
height: 10px;
background: var(--text-color);
border-radius: 10px;
z-index: -1;
}
._progress_1hlzr_56::before {
content: "";
position: absolute;
left: 0;
right: 0;
clip-path: var(--clip);
top: 0;
bottom: 0;
background: var(--text-secondary);
z-index: 1;
border-radius: inherit;
}
._input_1hlzr_83 {
--thumb-shadow: 0 0 3px rgba(0, 0, 0, 0.4), 0 0 1px rgba(0, 0, 0, 0.5) inset, 0 0 0 99px var(--text-color) inset;
-webkit-appearance: none;
width: 100%;
height: 20px;
margin: 0;
position: absolute;
left: 0;
cursor: grab;
outline: none;
background: none;
}
._input_1hlzr_83::-webkit-slider-thumb {
appearance: none;
height: 20px;
width: 20px;
transform: translateY(-5px);
border-radius: 50%;
background: var(--text-color);
box-shadow: var(--thumb-shadow);
border: none;
pointer-events: auto;
}
._input_1hlzr_83::-moz-range-thumb {
appearance: none;
height: 20px;
width: 20px;
transform: translateY(-5px);
border-radius: 50%;
background: var(--text-color);
box-shadow: var(--thumb-shadow);
border: none;
pointer-events: auto;
}
._input_1hlzr_83::-ms-thumb {
appearance: none;
height: 20px;
width: 20px;
transform: translateY(-5px);
border-radius: 50%;
background: var(--text-color);
box-shadow: var(--thumb-shadow);
border: none;
pointer-events: auto;
}
._input_1hlzr_83:active {
--thumb-shadow: 0 0 0 5px inset var(--text-color), 0 0 0 99px var(--text-secondary) inset, 0 0 3px rgba(0, 0, 0, 0.4);
cursor: grabbing;
}._post_uuidr_1 {
margin-bottom: 0.9375rem;
font-size: 0.9375rem;
line-height: 1.5;
background: var(--block-bg-color);
border: 0.0625rem solid var(--border-color);
border-radius: 0.5rem;
overflow: hidden;
padding: 0.75rem;
}
._postHeader_uuidr_12 {
border-bottom: 0.0625rem dotted var(--border-color);
height: 3.625rem;
margin-bottom: 0.75rem;
display: grid;
grid-template-areas: "avatar user" "avatar date";
grid-template-rows: 1.5rem 1.5rem;
grid-template-columns: auto 1fr;
column-gap: 0.625rem;
}
._avatar_uuidr_23 {
grid-area: avatar;
height: 3rem;
width: 3rem;
object-fit: cover;
border-radius: 50%;
}
._user_uuidr_31 {
grid-area: user;
font-size: 1.0625rem;
font-weight: 500;
font-family: "Roboto", Arial, Helvetica, sans-serif;
line-height: 1.25;
}
._date_uuidr_39 {
grid-area: date;
color: var(--link-color);
text-decoration: none;
font-size: 0.8125rem;
}
._generationSettings_uuidr_46 {
display: grid;
grid-template-columns: 1fr 1fr;
}._wrapper_cfqzy_1 .bloc-spoil-jv {
margin-bottom: 0;
display: inline;
}
._wrapper_cfqzy_1 .bloc-spoil-jv .open-spoil {
position: absolute;
left: -999rem;
}
._wrapper_cfqzy_1 .bloc-spoil-jv .barre-head {
height: auto;
line-height: inherit;
text-align: center;
cursor: pointer;
position: relative;
display: inline;
}
._wrapper_cfqzy_1 .bloc-spoil-jv .barre-head .txt-spoil {
position: static;
display: inline;
padding: 0.125rem 1.25rem;
line-height: inherit;
top: 0;
left: 0;
width: 4.6875rem;
font-size: 0.9285em;
text-align: center;
color: #fff;
text-transform: uppercase;
background: #fd374e;
font-weight: 700;
border-radius: 0.25rem;
}
._wrapper_cfqzy_1 .bloc-spoil-jv .contenu-spoil {
background: #f4d6da;
color: #212121;
padding: 0.625rem;
display: none;
text-align: left;
overflow: hidden;
}
._wrapper_cfqzy_1 .bloc-spoil-jv .open-spoil:checked ~ .contenu-spoil {
display: inline;
}
._wrapper_cfqzy_1 blockquote {
text-align: left;
border-left: 0.3125rem solid rgba(0, 0, 0, 0.2);
color: var(--text-blockquote-color);
padding: 0.625rem;
background: none;
font-style: normal;
font-size: inherit;
margin: 0 0 0.9375rem 1rem;
}
._wrapper_cfqzy_1 a {
color: var(--link-color);
text-decoration: none;
}
._wrapper_cfqzy_1 a:hover {
color: var(--text-hover-secondary);
text-decoration: none;
}._wrapper_1dmrl_1 {
position: relative;
margin-bottom: 0.9375rem;
}
._icon_1dmrl_6 {
position: absolute;
top: 0.625rem;
left: 0.625rem;
font-size: 1.125rem;
line-height: 1em;
}
._input_1dmrl_14 {
display: block;
width: 100%;
font-weight: 400;
line-height: 1.5;
color: var(--input-text-color);
background-color: var(--input-bg-color);
background-clip: padding-box;
border: 0.0625rem solid var(--input-border-color);
-webkit-appearance: none;
appearance: none;
border-radius: 0.75rem;
box-shadow: inset 0 0.0625rem 0.125rem rgba(0, 0, 0, 0.075);
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
padding-top: 0;
padding-right: 0.3125rem;
padding-left: 2.5rem;
padding-bottom: 0;
font-weight: 700;
height: 2.5rem;
font-size: 1rem;
}
._input_1dmrl_14::placeholder {
color: var(--input-placeholder-color);
font-weight: 400;
}._breadcrumbs_145yl_1 {
font-weight: 700;
color: var(--text-muted-color);
font-size: 0.8125rem;
margin-top: 1.25rem;
margin-bottom: 0.9375rem;
display: flex;
}
._actions_145yl_10 {
margin-left: auto;
}
._actions_145yl_10 a:hover {
color: var(--text-muted-hover-color);
}