/* @import url('https://fonts.googleapis.com/css2?family=Andika&family=Raleway:wght@100;300;400;500&display=swap'); */ @import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap'); /*@import url('https://fonts.googleapis.com/css2?family=Andika&family=Nunito:wght@500&family=Raleway:wght@100;300;400&display=swap');*/ /*h1 100 font-family: 'Raleway', sans-serif;*/ /*h2 400 font-family: 'Raleway', sans-serif;*/ /*h3, h4 300 font-family: 'Raleway', sans-serif;*/ /*... 400 font-family: 'Andika', sans-serif;*/ /*logo 500 'Nunito', sans-serif;*/ @import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400&display=swap'); /* @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500&display=swap'); */ :root { /* TODO сделать по material design colors https://m2.material.io/design/color/applying-color-to-ui.html#top-and-bottom-app-bars */ /* Color variables */ /* --down-down-main-color: #17298F; --down-main-color: #2C1791; --main-color: #4A1A7A; --up-main-color: #7C1791; --up-up-main-color: #871667; */ /* для вывода в админку можно использовать https://docs.wagtail.org/en/stable/reference/contrib/modeladmin/indexview.html */ --background-light-color: #ffffff; --background-light-color-rgb: 255, 255, 255; --text-on-light-color: #333333; --background-dark-color: #333333; --background-dark-color-rgb: 51, 51, 51; --text-on-dark-color: #ffffff; --psevdo-color: #d9dadc; --grey-back-color: #f7f7f7; --grey-back-color-rgb: 247, 247, 247; --green-color: green; --green-color-rgb: 0, 128, 0; --down-down-main-color: #26201C; --down-down-main-color-rgb: 38, 32, 28; --down-main-color: #73461F; --down-main-color-rgb: 115, 70, 31; --main-color: #F2C288; --main-color-rgb: 242, 194, 136; --up-main-color: #BF8845; --up-up-main-color: #F2E4BB; --up-up-main-color-rgb: 242, 228, 187; --down-down-main-color: #00FFFF; --down-down-main-color-rgb: 0, 255, 255; --down-main-color: #397054; --down-main-color-rgb: 57, 112, 84; --down-main-color-lightweight: #ecf3ef; --main-color: #B795F5; --main-color-rgb: 183, 149, 245; --up-main-color: #F5AAA2; --up-main-color-rgb: 245, 170, 162; --up-up-main-color: #F5DFCF; --up-up-main-color-rgb: 245, 223, 207; --down-down-main-color: #7A87B8; --down-down-main-color-rgb: 122, 135, 184; --down-main-color: #B2D6CD; --down-main-color-rgb: 178, 214, 205; --down-main-color-lightweight: #E6E6E6; --down-main-color-lightweight-rgb: 230, 230, 230; --main-color: #a696b8; --main-color-rgb: 166, 150, 184; --up-main-color: #C8BAD3; --up-main-color-rgb: 200, 186, 211; /* --up-up-main-color: #EADADE; */ --up-up-main-color: #ECDBDF; /* --up-up-main-color-rgb: 234, 218, 222; */ --up-up-main-color-rgb: 236, 219, 223; /* Font variables */ /* Настроить использование */ /* --headline1: 300 96px/112px 'Roboto', sans-serif; */ /* --headline1: 100 55px/60px 'Raleway', sans-serif; Было у меня */ --headline1: 100 62px/72px 'Raleway', sans-serif; --headline1-min: 100 49px/55px 'Raleway', sans-serif; /* --subtitle1: 400 16px/24px 'Roboto', sans-serif; */ /* --subtitle1: 300 18px/22px 'Raleway', sans-serif; Было у меня */ --subtitle1: 400 16px/22px 'Raleway', sans-serif; /* --headline2: 300 60px/72px 'Roboto', sans-serif; */ /* --headline2: 400 28px/34px 'Raleway', sans-serif; Было у меня */ --headline2: 300 49px/55px 'Raleway', sans-serif; --headline2-min: 300 35px/39px 'Raleway', sans-serif; /* --headline3: 400 48px/56px 'Roboto', sans-serif; */ /* --headline3: 300 22px/28px 'Raleway', sans-serif; Было у меня */ --headline3: 400 35px/39px 'Raleway', sans-serif; --headline3-min: 400 25px/27px 'Raleway', sans-serif; /* --headline4: 400 34px/36px 'Roboto', sans-serif; */ /* --headline4: 300 18px/22px 'Raleway', sans-serif; Было у меня */ --headline4: 400 25px/27px 'Raleway', sans-serif; --headline4-min: 400 21px/23px 'Raleway', sans-serif; /* --headline5: 400 24px/24px 'Roboto', sans-serif; */ /* --headline5: 400 24px/24px 'Raleway', sans-serif; Было у меня */ --headline5: 400 21px/23px 'Raleway', sans-serif; --headline5-min: 400 19px/21px 'Raleway', sans-serif; /* --headline6: 500 20px/24px 'Roboto', sans-serif; */ /* --headline6: 500 20px/24px 'Raleway', sans-serif; Было у меня */ --headline6: 500 19px/21px 'Raleway', sans-serif; --headline6-min: 500 17px/19px 'Raleway', sans-serif; /* --subtitle2: 500 14px/24px 'Roboto', sans-serif; */ --subtitle2: 500 14px/16px 'Raleway', sans-serif; /* --body1: 400 16px/24px 'Roboto', sans-serif; Было у меня */ --body1: 400 17px/23px 'Lato', sans-serif; /* --body2: 400 14px/20px 'Roboto', sans-serif; */ /* --body2: 400 14px/20px 'Andika', sans-serif;Было у меня */ --body2: 400 15px/19px 'Lato', sans-serif; /* --button: 500 14px/16px 'Roboto', sans-serif; */ /* --button: 500 14px/16px 'Andika', sans-serif;Было у меня */ /* --button: 500 15px/17px 'Lato', sans-serif; */ --button: 900 15px/17px 'Raleway', sans-serif; --button-light: 600 15px/17px 'Raleway', sans-serif; /* --caption: 400 12px/16px 'Roboto', sans-serif;Было у меня */ --caption: 400 13px/17px 'Lato', sans-serif; /* --overline: 500 10px/16px 'Roboto', sans-serif;Было у меня */ --overline: 400 11px/12px 'Lato', sans-serif; /* --label: 400 10px/14px 'Roboto', sans-serif; */ /* --label: 400 10px/14px 'Andika', sans-serif;Было у меня */ --label: 400 13px/17px 'Lato', sans-serif; /* --logotext: 300 28px/28px 'Raleway', sans-serif; */ --logotext: 700 28px/28px 'Raleway', sans-serif; } *, a { box-sizing: border-box; max-width: 100%; /* word-break: break-word; */ overflow-wrap: break-word; /* NOTE это для мобильных. если нужно другое поведение, например, с overflow, переопределите */ } .logo, .logo * { word-break: normal !important; overflow-wrap: normal !important; } /* .visually-hidden:not(:focus):not(:active), */ .visually-hidden, a.visually-hidden, input[type="checkbox"].visually-hidden, input[type="file"].visually-hidden, input[type="radio"].visually-hidden { position: absolute; clip: rect(0 0 0 0); margin: -1px !important; /* max-width: 1px !important; */ max-height: 1px !important; border: 0; padding: 0; overflow: hidden !important; white-space: nowrap; clip-path: inset(100%); } .visually-hidden:not(.tab_content), a.visually-hidden:not(.tab_content), input[type="checkbox"].visually-hidden:not(.tab_content), input[type="file"].visually-hidden:not(.tab_content), input[type="radio"].visually-hidden:not(.tab_content) { width: 1px !important; height: 1px !important; } iframe { min-width: 100%; } .iframe-wrapper { width: 100%; height: fit-content; resize: vertical; border: 3px dotted rgba(var(--down-main-color-rgb), 0.3); overflow: hidden; } .iframe-wrapper::-webkit-resizer { display: block; position: static; width: 16px; height: 16px; background: url('data:image/svg+xml, '); background-repeat: no-repeat; background-position: center; background-size: cover; /* border: 10px solid black; */ /* background: var(--down-down-main-color); */ /* box-shadow: 0 0 10px 10px blue; */ outline: 6px solid rgba(var(--down-main-color-rgb), 0.3); } /* iframe { width: auto; min-width: 100%; height: auto; min-height: 50vh; } .block-embed iframe { width: 100%; height: 50vw; } */ /* iframe { width: 100%; height: auto; } */ @media (min-width: 768px) { .video-container { position: relative; padding-bottom: 56.25%; /* Соотношение сторон 16:9 */ /* для видео 4:3 используйте padding-bottom: 75% */ height: 0; overflow: hidden; max-width: 100%; width: 100%; /* background: #000; */ } .video-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } } /* @media (min-width: 768px) { .complex_block__block iframe { aspect-ratio: 16 / 9 !important; } } */ @media (max-height: 480px) { .video-container iframe { height: 100vh; } } /* FIXME когда открыывается расшифровка сжимать до 60% экрана */ html, body { min-height: 100vh; /* min-width: 100vw; */ max-width: 100%; margin: 0 auto; padding: 0; } body { font: var(--body1); /* font-family: 'Andika', sans-serif; font-weight: 400; font-size: 16px; line-height: 22px; */ padding: 0; margin: 0 auto; background: var(--background-light-color); color: var(--text-on-light-color); --color-of-parent: var(--text-on-light-color); min-height: 100vh; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } .body-wrapper, .header-nav, .footer-body { width: 90vw; flex-grow: 1; padding: 0; margin: 0; } /* TODO galaxy tab S4 - 712 */ /* TODO ipad - 768 */ /* резину в промежутках надо */ /* проверить на реальном планшете, что такое с ними, почему неправильно отображается */ @media (min-width: 768px) { .body-wrapper, .header-nav, .footer-body { width: 720px; } } @media (min-width: 1024px) { .body-wrapper, .header-nav, .footer-body { width: 1000px; } } @media (min-width: 1201px) { .body-wrapper, .header-nav, .footer-body { width: 1200px; } } a { color: inherit; } /* переменная здесь не работает и селектором до нее не добраться. все равно переделывать надо на динамические свг. но обидно. */ /* content: url('data:image/svg+xml, '); */ /* a[target="blank"]:not(.without_blank_tag)::before, a[target="_blank"]:not(.without_blank_tag)::before { display: inline; content: url('data:image/svg+xml, '); fill: var(--color-of-parent) !important; height: 24px; width: 24px; padding: 0; margin: 0; vertical-align: middle; } */ a[target="blank"]:not(.without_blank_tag)::before, a[target="_blank"]:not(.without_blank_tag)::before { content: ""; vertical-align: middle; display: inline-block; padding: 0; margin: 0; width: 24px; height: 24px; background-color: var(--color-of-parent); -webkit-mask: url('data:image/svg+xml;utf8,') no-repeat center; mask-size: contain; } /* a[href^="https://t.me"]::after { display: inline; content: "_t "; # BUG не работает svg оф. телеграма height: 24px; width: 24px; padding: 0; margin: 0; vertical-align: middle; } */ button, .button, a.button { display: flex; flex-direction: row; align-items: center; justify-content: center; /* padding: 5px 16px; */ padding: 8px 16px; width: fit-content; max-width: 100%; min-height: 48px; border: none; /* border-radius: 4px; */ border-radius: 24px; background: var(--main-color); font: var(--button); letter-spacing: 1.25px; text-align: center; /* text-transform: uppercase; */ text-decoration: none; /* color: var(--text-on-dark-color); --color-of-parent: var(--text-on-dark-color); */ color: var(--text-on-light-color); --color-of-parent: var(--text-on-light-color); cursor: pointer; box-shadow: 4px 4px 4px rgba(var(--background-dark-color-rgb), 0.4); transition: box-shadow 0.3s; } button a, .button a { text-decoration: none; } .button.squarable { min-height: 48px; min-width: 48px; height: 48px; width: 48px; max-height: 48px; max-width: 48px; padding: 8px; display: flex; align-items: center; justify-content: center; } .squarable_title { display: none; } @media (min-width: 768px) { .button.squarable { /* Сбрасываем размеры, чтобы другие стили применились */ min-height: unset; min-width: unset; height: unset; width: unset; max-height: unset; max-width: unset; } .squarable_title { display: inline; } } input[type="file"]::-webkit-file-upload-button { /* display: flex; flex-direction: column; align-items: center; justify-content: center; */ padding: 8px 16px; width: fit-content; max-width: 100%; min-height: 36px; border: none; border-radius: 4px; background: var(--main-color); font: var(--button); letter-spacing: 1.25px; text-align: center; text-transform: uppercase; text-decoration: none; color: var(--text-on-dark-color); --color-of-parent: var(--text-on-dark-color); cursor: pointer; } .button:hover, a.button:hover, input[type="file"]:hover::-webkit-file-upload-button, .button.active { box-shadow: 0 0 4px rgba(var(--background-dark-color-rgb), 0.8); } .button:focus, .button:active, .button.active, input[type="file"]:focus::-webkit-file-upload-button { background-color: var(--up-main-color); box-shadow: 0 0 4px rgba(var(--background-dark-color-rgb), 0.8); } .button.down-down, a.button.down-down { background-color: var(--down-down-main-color); } .button.down-down:focus, .button.down-down:active, .button.down-down.active, input[type="file"].down-down:focus::-webkit-file-upload-button { background-color: var(--down-main-color); } .button.down, a.button.down { background-color: var(--down-main-color); } .button.down:focus, .button.down:active, .button.down.active, input[type="file"].down-down:focus::-webkit-file-upload-button { background-color: var(--down-down-main-color); } .button.light, a.button.light, .switch.light { font: var(--button-light); background-color: var(--background-light-color); color: var(--text-on-light-color); --color-of-parent: var(--text-on-light-color); border: 1px solid var(--background-dark-color); box-shadow: none; /* box-shadow: 0 0 10px var(--main-color); */ } .button.light:hover, a.button.light:hover, .switch.light:hover, .button.light:focus, a.button.light:focus, .switch.light:focus, .button.light.active { background-color: var(--up-up-main-color); /* color: var(--text-on-dark-color); */ /* --color-of-parent: var(--text-on-dark-color); */ /*color: var(--down-down-main-color);*/ /*box-shadow: inset 0 0 20px var(--psevdo-color);*/ /* box-shadow: 0 0 10px var(--text-on-dark-color); */ } .mini-button { height: 36px !important; min-height: 36px !important; max-height: 36px !important; } button:disabled, button[disabled], .button:disabled, .button[disabled] { background-color: var(--psevdo-color) !important; } .square { min-height: 48px; min-width: 48px; height: 48px; width: 48px; max-height: 48px; max-width: 48px; padding: 8px; display: flex; align-items: center; justify-content: center; } .mini-square { min-height: 36px; min-width: 36px; height: 36px; width: 36px; max-height: 36px; max-width: 36px; } .big-square { min-height: 64px; min-width: 64px; height: 64px; width: 64px; max-height: 64px; max-width: 64px; padding: 8px; display: flex; align-items: center; justify-content: center; } .big-button { min-height: 64px !important; /* min-width: 64px; */ } .glitter, .double-glitter { overflow: visible; position: relative; } .glitter:not(.visually-hidden), .double-glitter:not(.visually-hidden) { margin-bottom: 16px; margin-top: 16px; } .glitter::before, .double-glitter::before { content: ""; display: block; position: absolute; left: -24px; bottom: -15px; width: 26px; height: 26px; background: no-repeat center/contain url("../img/star4.b043bfc1bb72.png"); transform: rotate(15deg); } .glitter::before { top: -2px; transform: rotate(0deg); } .double-glitter::after { content: ""; display: block; position: absolute; right: -27px; top: -15px; width: 31px; height: 31px; background: no-repeat center/contain url("../img/star5.87db5afc4072.png"); transform: rotate(-15deg); } @keyframes glitter { 0% { transform: rotate(0deg) scale(1); } 25% { transform: rotate(25deg) scale(1.1); } 50% { transform: rotate(0deg) scale(1); } 75% { transform: rotate(-25deg) scale(0.9); } 100% { transform: rotate(0deg) scale(1); } } .glitter:hover::before, .double-glitter:hover::before, .double-glitter:hover::after { animation: glitter 0.4s infinite linear; } .button.cornered { border-radius: 10px; } .sup-button-wrap { position: relative; } .sup-button { transform: scale(0.5); position: absolute; top: -20px; right: -28px; } svg { fill: var(--color-of-parent); /* color: var(--color-of-parent); */ /* width: 24px; height: 24px; */ min-width: 24px; min-height: 24px; } /* path { fill: var(--color-of-parent); } */ /* svg.button, .button svg { fill: var(--text-on-dark-color); } */ .center { text-align: center; } .p2_8 { padding: 2% 8%; } .p8_8 { padding: 8px; } .p16_16 { padding: 16px; } .m8_0 { margin: 8px 0; } .m0 { margin: 0; } .m16_0 { margin: 16px 0; } .m16_16 { margin: 16px; } h1, .h1, a.h1 { font: var(--headline1-min); text-align: center; text-transform: uppercase; } @media (min-width: 768px) { h1, .h1, a.h1 { font: var(--headline1); word-break: normal; overflow-wrap: normal; } } .subtitle1 { font: var(--subtitle1); /* text-align: left; */ } @media (min-width: 768px) { .subtitle1 { font-size: 28px; line-height: 34px; } } /* .banner { background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; flex-direction: column; justify-content: center; background-color: var(--down-down-main-color); color: var(--text-on-dark-color); --color-of-parent: var(--text-on-dark-color); } @media (min-width: 768px) { .banner { min-height: 300px; } } @media (min-width: 1024px) { .banner { min-height: 400px; } } @media (min-width: 1201px) { .banner { min-height: 500px; } } */ h2, .h2, a.h2 { font: var(--headline2-min); color: var(--down-down-main-color); --color-of-parent: var(--down-down-main-color); } @media (min-width: 768px) { h2, .h2, a.h2 { font: var(--headline2); } } h3, .h3, a.h3 { font: var(--headline3-min); } @media (min-width: 768px) { h3, .h3, a.h3 { font: var(--headline3); } } .subtitle2 { font: var(--subtitle2); /* font-family: 'Raleway', sans-serif; font-weight: 400; font-size: 18px; line-height: 22px; */ /* text-align: left; */ /* margin-top: 3%; */ } .caption, caption { font: var(--caption); } /*@media (min-width: 768px) {*/ /* .h3-subtitle {*/ /* font-size: 28px;*/ /* line-height: 34px;*/ /* }*/ /*}*/ h4, .h4, a.h4 { font: var(--headline4-min); text-transform: uppercase; } @media (min-width: 768px) { h4, .h4, a.h4 { font: var(--headline4); } } h5, .h5, a.h5 { font: var(--headline5-min); } @media (min-width: 768px) { h5, .h5, a.h5 { font: var(--headline5) !important; } } h6, .h6, a.h6 { font: var(--headline6-min) !important; } @media (min-width: 768px) { h6, .h6, a.h6 { font: var(--headline6) !important; } } img { max-width: 100%; height: auto; } /* BUG ОЧЕНЬ МЕЛКАЯ КАРТИНКА НА МОБИЛЬНОМ. НУЖНО В КОНТЕЙНЕР ПОМЕСТИТЬ */ /*@media (min-width: 768px) {*/ /* img {*/ /* max-width: 80%;*/ /* }*/ /*}*/ /*@media (min-width: 1024px) {*/ /* img {*/ /* max-width: 80%;*/ /* }*/ /*}*/ /*@media (min-width: 1201px) {*/ /* img {*/ /* max-width: 70%;*/ /* }*/ /*}*/ P { padding: 0; margin: 0; } table { border-collapse: collapse; } .table-wrap { border-radius: 16px; overflow-x: auto; overflow-y: hidden; max-width: 100%; } .table-wrap > table, .table-wrap > .table { max-width: 10000%; /* word-break: normal; */ overflow-wrap: normal; width: 100%; } td { border: 1px solid var(--psevdo-color); } .backdrop { display: none; background: var(--background-light-color); opacity: 0.7; position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; } .backdrop--opened { display: block; } .popup-window { border-radius: 10px; background-color: var(--background-light-color); display: none !important; flex-direction: column; align-items: center; justify-content: flex-start; box-shadow: 0 0 10px 10px var(--up-up-main-color); position: fixed; z-index: 101; left: 32px; width: calc(100% - 32px*2); max-width: calc(100% - 32px*2); top: 32px; height: fit-content; max-height: calc(100% - 32px*2); /* overflow: auto; */ } @media (min-width: 1024px) { .popup-window { left: calc(100%/2 - 690px/2); width: 690px; max-width: 690px; top: 10%; height: fit-content; max-height: 80%; } } .popup-window.popup-window--opened { display: block !important; } .popup-window * { max-width: 100%; } .popup-header { border-radius: 10px 10px 0 0; display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 0px 32px; width: 100%; height: 56px; /* position: absolute; z-index: 102; */ background: var(--main-color); color: var(--text-on-dark-color); --color-of-parent: var(--text-on-dark-color); } .popup-header .left-wrap, .popup-header .right-wrap { display: flex; flex-direction: row; align-items: center; height: 56px; } .popup-header .popup-title:not(:first-child) { margin-left: 32px; } .popup-window .items-wrap { width: 100%; /* padding: calc(32px + 56px) 32px 32px 32px; */ padding: 32px 32px 32px 32px; /* max-height: calc(690px - 56px - 56px); */ max-height: calc(690px - 56px - 56px); overflow: auto; } .popup-footer { width: 100%; display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; /* height: 56px; */ /* padding: 0px 32px 32px 32px; */ /* padding: 16px 32px; */ } .popup-footer > * { margin: 8px; } .popup-footer::before { content: ""; display: block; width: 100%; height: 2px; background-color: var(--psevdo-color); padding: 0; margin: 0; } .wth-back { position: relative; /* background: no-repeat center / cover url("../img/backvert3.dc2d7ce37e10.png"); */ background-color: var(--main-color); /* color: var(--text-on-dark-color); */ /* --color-of-parent: var(--text-on-dark-color); */ z-index: 0; overflow: hidden; } /* FIXME затемнение нужно было только для белого цвета и для картинок */ /* .wth-back::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .4; background: black; } */ .wth-back > * { position: relative; z-index: 1; } @media (min-width: 1024px) { .wth-back { /* background: no-repeat center / cover url("../img/back3.8443a45bc138.png"); */ background-color: var(--main-color); } } /* .wth-back:not(header) { */ /* padding: 2% 8%; TODO вынести паддинг этот стандартный отдельным классом базовый блок типа */ /* } */ .grey-back { background-color: var(--grey-back-color); color: var(--text-on-light-color); --color-of-parent: var(--text-on-light-color); /* padding: 2% 8%; */ } .horiz { display: flex; flex-direction: row !important; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; /* max-width: 100% !important; */ } @media (min-width: 1024px) { .horiz { flex-wrap: no-wrap !important; } } /* .horiz > * { padding: 5px; } */ .centered { display: flex; flex-direction: column; align-items: center; justify-content: center; } .logo, a.logo, .logo a { /*color: #ffffff;*/ text-decoration: none; margin: 0; padding: 0; display: block; } .logo { position: relative; text-align: left; /*background-color: var(--main-color);*/ font: var(--logotext); /* text-transform: uppercase; */ /*display: table-caption;*/ /*width: min-content;*/ /*transform: scale(1, 1.2);*/ /*border: solid 1px var(--main-color);*/ /*padding: 6px 10px 4px 10px;*/ /*margin: 25px 0 25px 0;*/ padding: 0 0 0 calc(28px + 10px); margin: 10px; --color-of-parent: var(--text-on-light-color); cursor: pointer; } .logo sup { text-transform: none; font: var(--logotext); } /* .logo:hover svg, .logo:focus svg, .logo:active svg { transform: scaleX(0.9); transition: transform 0.2s; } */ @keyframes hoverScaleX { 0% { transform: scaleX(1); } 25% { transform: scaleX(0.9); } 50% { transform: scaleX(1); } 75% { transform: scaleX(1.1); } 100% { transform: scaleX(1); } } .logo:hover svg, .logo:focus svg, .logo:active svg { animation: hoverScaleX 0.8s infinite linear; } /* .logo::before { content: ""; display: block; position: absolute; width: 28px; height: 28px; left: 0; margin: 0; padding: 0; */ /* background: no-repeat center/100% url("../img/logo_symb_black.26baff8e5494.png"); */ /* background: no-repeat center/contain url("../img/logo_symb_black.26baff8e5494.png"); */ /*top: -13px;*/ /*color: var(--main-color);*/ /*font-weight: 300;*/ /*font-size: 10px;*/ /*line-height: 12px;*/ /* } */ @media (min-width: 768px) { .logo { font-size: 38px; line-height: 38px; padding: 0 0 0 calc(38px + 10px); } .logo::before { width: 38px; height: 38px; } } /*.logo::after {*/ /* display: block;*/ /* position: absolute;*/ /* bottom: -1px;*/ /* left: 10px;*/ /* content: "";*/ /* width: 18px;*/ /* height: 5px;*/ /* border-radius: 3px;*/ /* background-color: #ffffff;*/ /*}*/ .contentblock { margin: 0; padding: 0; background: var(--background-light-color); color: var(--text-on-light-color); --color-of-parent: var(--text-on-light-color); width: 100%; } form p { /* TODO переделать на ширину адекватную, наверное */ /* width: 100%; display: flex; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; */ } /* form > *:not(:last-child) { margin-bottom: 8px; } */ /* TODO нужно индивидуализировать стили каждого типа инпута. вынести в переменную высоту кнопок/инпутов и текст в них. вместо дурацких паддингов тупа высоту дать кнопкам и отцентровать, как в square сделано. вынести square в общие классы. сделать еще round кнопки. сделать общие классы, добавляющие иконки svg в кнопки внутрь */ input[type="checkbox"], input[type="radio"] { position: relative; max-height: 24px; max-width: 24px; min-height: 24px; min-width: 24px; margin: 12px; /* display: flex; align-items: center; justify-content: center; */ } input[type="checkbox"]::after, input[type="radio"]::after { position: absolute; /* border: 1px solid black; */ padding: 12px; top: -12px; left: -12px; bottom: -12px; right: -12px; /* top: calc(0px - (48px - 24px)/2); padding у checkbox не стилизуется */ /* left: calc(0px - (48px - 24px)/2); */ display: block; content: ""; } .input-line { display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: center; position: relative; } .input-line:not(:first-child) { margin-top: 6px; } /* .input-line:not(:last-child) { margin-bottom: 8px; } */ input[type="date"], input[type="datetime-local"], input[type="email"], input[type="file"], input[type="month"], input[type="number"], input[type="password"], input[type="range"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"], input[type="datetime"], select, textarea { background: var(--background-light-color); color: var(--text-on-light-color); font: var(--body2); padding: 8px 12px 8px 16px; width: 100%; min-width: 80px; height: 48px; /* On Surface | Medium | 60% */ /* TODO добавить стили все Material */ /* color: rgba(0, 0, 0, 0.6); */ /* Surface Hover Content On Surface */ /* background: rgba(0, 0, 0, 0.04); */ /* border: none; */ /* On Surface | Medium | 60% */ /* border-bottom: 1px solid rgba(0, 0, 0, 0.6); */ border-radius: 8px 8px 0px 0px; } textarea { height: auto; } input[type="date"], input[type="datetime-local"], input[type="email"], input[type="file"], input[type="month"], input[type="number"], input[type="password"], input[type="range"], input[type="search"], input[type="tel"], input[type="time"], input[type="url"], input[type="week"], input[type="datetime"], select, input[type="text"], textarea { border: solid 2px var(--down-main-color); } input[type="date"]:placeholder-shown ~ .placeholder, input[type="datetime-local"]:placeholder-shown ~ .placeholder, input[type="email"]:placeholder-shown ~ .placeholder, input[type="file"]:placeholder-shown ~ .placeholder, input[type="month"]:placeholder-shown ~ .placeholder, input[type="number"]:placeholder-shown ~ .placeholder, input[type="password"]:placeholder-shown ~ .placeholder, input[type="range"]:placeholder-shown ~ .placeholder, input[type="search"]:placeholder-shown ~ .placeholder, input[type="tel"]:placeholder-shown ~ .placeholder, input[type="time"]:placeholder-shown ~ .placeholder, input[type="url"]:placeholder-shown ~ .placeholder, input[type="week"]:placeholder-shown ~ .placeholder, input[type="datetime"]:placeholder-shown ~ .placeholder, select:placeholder-shown ~ .placeholder, input[type="text"]:placeholder-shown ~ .placeholder, textarea:placeholder-shown ~ .placeholder { /* display: none; */ /* visually-hidden */ position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; white-space: nowrap; clip-path: inset(100%); opacity: 0; } input[type="date"]:not(:placeholder-shown) ~ .placeholder, input[type="datetime-local"]:not(:placeholder-shown) ~ .placeholder, input[type="email"]:not(:placeholder-shown) ~ .placeholder, input[type="file"]:not(:placeholder-shown) ~ .placeholder, input[type="month"]:not(:placeholder-shown) ~ .placeholder, input[type="number"]:not(:placeholder-shown) ~ .placeholder, input[type="password"]:not(:placeholder-shown) ~ .placeholder, input[type="range"]:not(:placeholder-shown) ~ .placeholder, input[type="search"]:not(:placeholder-shown) ~ .placeholder, input[type="tel"]:not(:placeholder-shown) ~ .placeholder, input[type="time"]:not(:placeholder-shown) ~ .placeholder, input[type="url"]:not(:placeholder-shown) ~ .placeholder, input[type="week"]:not(:placeholder-shown) ~ .placeholder, input[type="datetime"]:not(:placeholder-shown) ~ .placeholder, select:not(:placeholder-shown) ~ .placeholder, input[type="text"]:not(:placeholder-shown) ~ .placeholder, textarea:not(:placeholder-shown) ~ .placeholder { position: absolute; border-radius: 3px; display: block; top: -6px; left: 16px; max-width: calc(100% - 12px - 16px); font: var(--overline); color: var(--main-color); --color-of-parent: var(--main-color); overflow: hidden; max-height: 12px; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; margin: 0; background: var(--background-light-color); opacity: 1; transition: 0.2s ease; } input[type="file"] { cursor: pointer; /* padding: 6px; */ height: auto; } ol li::marker { font: inherit; } .helptext { font: var(--label); margin-left: 16px; } header { width: 100%; /* background-color: var(--main-color); color: var(--text-on-dark-color); */ /* margin-bottom: 50px; */ } footer { width: 100%; margin-top: 50px; } .footer-body { margin: 0 auto; padding: 2% 0; } @media (min-width: 1024px) { .footer-body > * { max-width: 30%; } } .header-nav { margin: 0 auto; padding: 2% 0; /*margin-top: 20px;*/ position: relative; display: flex; flex-direction: column; align-items: center; /* width: calc(100% - (8% * 2)); */ /* width: auto; */ text-align: center; /*color: #070D20;*/ } @media (min-width: 768px) { .header-nav { flex-direction: row; /* justify-content: space-between; */ /* width: auto; */ } .no-logo-wrapper { width: 100%; margin-left: 2%; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; } } @media (min-width: 1024px) { } .header-nav__item { margin: 2% 0; display: flex; flex-direction: row; align-items: center; justify-content: center; min-height: 36px; /* flex-wrap: wrap; */ } .header-nav__item a, a.header-nav__item { text-decoration: none; } .header-nav__item a:hover, a.header-nav__item:hover, .header-nav__item a:focus, a.header-nav__item:focus, .header-nav__item a:active, a.header-nav__item:active { text-decoration: underline; } @media (min-width: 768px) { .header-nav__item { margin: 1% 2%; } .header-nav__item > *:not(:first-child) { margin-left: 8px; } } .logo.header-nav__item::before { transform: scale(1.1); } .h1-wrapper { padding: 2% 8%; } .contentblock > div:nth-child(8n) h2, .system_functional_all > div:nth-child(8n) h2 { color: var(--down-down-main-color); } .contentblock > div:nth-child(8n+1) h2, .system_functional_all > div:nth-child(8n+1) h2 { color: var(--down-main-color); } .contentblock > div:nth-child(8n+2) h2, .system_functional_all > div:nth-child(8n+2) h2 { color: var(--main-color); } .contentblock > div:nth-child(8n+3) h2, .system_functional_all > div:nth-child(8n+3) h2 { color: var(--up-main-color); } .contentblock > div:nth-child(8n+4) h2, .system_functional_all > div:nth-child(8n+4) h2 { color: var(--up-up-main-color); } .contentblock > div:nth-child(8n+5) h2, .system_functional_all > div:nth-child(8n+5) h2 { color: var(--up-main-color); } .contentblock > div:nth-child(8n+6) h2, .system_functional_all > div:nth-child(8n+6) h2 { color: var(--main-color); } .contentblock > div:nth-child(8n+7) h2, .system_functional_all > div:nth-child(8n+7) h2 { color: var(--down-main-color); } /* TODO убрано. потому что больше мешает. найти, где надо, и там добавить. можно в переменные вынести, чтобы быстро переменными добавлять и регулировать */ /* .contentblock > *:not(.card):not(.wth-back):not(.grey-back):not(:last-child):not(.liners)::after, .system_functional_all > *:not(.card):not(.wth-back):not(.grey-back):not(:last-child)::after { content: ""; display: block; width: 80%; margin: 50px auto; height: 2px; background-color: var(--psevdo-color); border-radius: 3px; } */ body.simple img { box-shadow: 0 0 10px var(--psevdo-color); border-radius: 5px; } .tag { display: inline-block; background-color: var(--down-main-color); color: var(--text-on-dark-color); --color-of-parent: var(--text-on-dark-color); border-radius: 15px; padding: 2px 9px; margin: 3px; text-decoration: none; cursor: pointer !important; user-select: none; } .inactive_tags .tag, .tag.inactive { background-color: var(--main-color); } .active_tags .tag, .tag.active { background-color: var(--green-color); } .tags .toggle-icon { fill: var(--color-of-parent); } .block-wrapper { margin-top: 50px; } .block-wrapper > *:not(:first-child) { margin-top: 50px; } .path .arrow { display: none; } .path { display: flex; flex-direction: column; align-items: center; justify-content: space-between; } @media (min-width: 1024px) { .path { flex-direction: row; flex-wrap: wrap; } .path .arrow { display: block; } } .path__item { max-width: 240px; text-align: center; } .path__item:not(:last-child) { margin-bottom: 30px; } @media (min-width: 1024px) { .path__item:not(:last-child) { margin-bottom: 0; margin-right: 10px; } } .path-parent { padding: 5% 8% !important; } @media (min-width: 1024px) { .path-parent { padding: 2% 8% !important; } } .path__item .icon { width: 45px; height: 45px; } .path__item .icon img { max-width: 100%; max-height: 100%; } .path__item .number { width: 30px; height: 30px; /*background-color: var(--main-color);*/ padding: 20px; border: solid 2px var(--text-on-dark-color); border-radius: 50%; display: flex; align-items: center; justify-content: center; } .path__item > *:not(:last-child) { margin-bottom: 15px; } .path-parent .button { margin-top: 30px; } .sales-block { text-align: center; } .gallery { width: 100%; margin: 0 !important; padding: 0 !important; } .gallery .conteiner { height: 480px; overflow: auto; white-space: nowrap; } /*@media (min-width: 768px) {*/ /* .gallery .conteiner {*/ /* height: 480px;*/ /* }*/ /*}*/ .gallery__item { display: inline-block; text-align: center; margin-right: 10px; } .gallery__item .h3 { margin-top: 15px; } .gallery__item img { border-radius: 5px; } .main-info img { max-width: 100%; border-radius: 5px; } @media (min-width: 768px) { .main-info img { max-width: 50%; } } .main-info > * { margin: 0; } .main-info > *:not(:first-child) { margin-top: 30px; } .main-info .button { text-transform: uppercase; } .message_block-wrapper { position: sticky; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 0; margin: 0; top: 0; left: 0; width: 100%; min-width: 100%; height: 0; } .message_block { background: var(--background-light-color); position: sticky; z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 100%; max-width: 100%; top: 0; right: 0; padding: 2% 4%; margin: 6px; border-radius: 5px; box-shadow: 0 0 5px 5px var(--up-up-main-color); } @media (min-width: 768px) { .message_block-wrapper { align-items: flex-end; /* justify-content: flex-end; */ } .message_block { width: 50vw; } } @media (min-width: 1201px) { .message_block { width: 30vw; } } .message_block > *:not(:first-child) { margin-top: 15px; } .message_block:not(.visually-hidden)::after { content: ""; position: absolute; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(var(--up-up-main-color-rgb), 0.3); animation: slideBackground 10s linear; } @keyframes slideBackground { 0% { left: 0; } 100% { left: 100%; } } .show { animation: message_blockslideIn 0.5s ease; } .hide { animation: message_blockslideOut 0.5s ease; } @keyframes message_blockslideIn { 0% { opacity: 0; transform: translateY(100%); } 100% { opacity: 1; transform: translateY(0); } } @keyframes message_blockslideOut { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(100%); } } .note { padding: 4% 8%; margin: 4% 8%; border-radius: 12px; display: flex; flex-direction: row; justify-content: center; align-items: center; } .note.done { background-color: rgba(var(--green-color-rgb), 0.1); } .circle { /* типа тут на паддинги оставлялось */ padding: 0; clip-path: circle(50% at center center); } .heart { /* background-position: center center; */ /* clip-path: polygon(-41% 0, 50% 91%, 141% 0); */ /* aspect-ratio: 1; */ /* object-fit: cover; */ /* clip-path: path("M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"); */ /* clip-path: path("M12 4.248c-3.148-5.402-12-3.825-12 2.944 0 4.661 5.571 9.427 12 15.808 6.43-6.381 12-11.147 12-15.808 0-6.792-8.875-8.306-12-2.944z"); */ /* transform: scale(2); */ /* clip-path: path("M0.5,1 C0.5,1,0,0.7,0,0.3 A0.25,0.25,1,1,1,0.5,0.3 A0.25,0.25,1,1,1,1,0.3 C1,0.7,0.5,1,0.5,1 Z"); */ clip-path: url(#heart_path); } .star { /* clip-path: polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% ); */ -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,'); mask-image: url('data:image/svg+xml;charset=utf-8,'); mask-size: cover; } .star_reverse { -webkit-mask-image: url('data:image/svg+xml;charset=utf-8,'); mask-image: url('data:image/svg+xml;charset=utf-8,'); mask-size: cover; } @keyframes heartbeat { 0% { transform: scale(1); } 25% { transform: scale(1.1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } .animate_heart { /* BUG ужасно работает. вернее не работает. сделать двойника и анимировать ВСЕ ЦЕЛИ НА СТРАНИЦЕ position: fixed; top: 100px; right: 100px; z-index: 999; */ animation-duration: 1.1s; animation-name: heartbeat; animation-iteration-count: 2; /* animation: 1.1s 2 heartbeat; */ } .cardholder { display: flex; flex-direction: row; align-items: flex-start; justify-content: center; flex-wrap: wrap; } .card { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; /* flex-wrap: wrap; */ border-radius: 12px; overflow: hidden; box-shadow: 0 0 10px var(--psevdo-color); margin: 8px; max-width: 100%; border-radius: 32px; } .color-main { box-shadow: none; background-color: var(--main-color); } .color-down-lightweight { box-shadow: none; background-color: var(--down-main-color-lightweight); } .gradient-down-to-main-color { box-shadow: none; background: linear-gradient(to right, var(--down-main-color), var(--main-color)); } .card.grow { flex-grow: 1; } .card > *:not(input) { margin: 0; padding: 16px; } .card .media { background-color: var(--grey-back-color); color: var(--text-on-light-color); --color-of-parent: var(--text-on-light-color); display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } .card .media > *:not(:first-child) { margin-left: 16px; } .card .button.circle { margin-left: -8px; margin-top: -8px; } .card .circle_block { background-color: var(--background-light-color); color: var(--text-on-light-color); --color-of-parent: var(--text-on-light-color); border: solid 3px var(--grey-back-color); /* padding: 3%; */ min-width: 80px; min-height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; } .card .colored { background-color: var(--psevdo-color); } .card .correct_solution.colored, .card .correct_solution .colored, .card.correct_solution .colored { background-color: rgba(var(--green-color-rgb), 0.1); } .card .not_correct_solution.colored, .card .not_correct_solution .colored, .card.not_correct_solution .colored, .card.not_correct_solution.colored { background-color: rgba(var(--main-color-rgb), 0.5); } /* FIXME .card ОГРАНИЧИТЬ ВЫСОТУ ДЕТЕЙ, ЧТОБ ОВЕРФЛОУ ПОЯВЛЯЛСЯ */ .cover-back { position: relative; z-index: 0; background-color: var(--grey-back-color); color: var(--text-on-light-color); border-radius: 12px; overflow: hidden; } .cover-back::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: .5; z-index: -1; background: no-repeat center / cover url("../img/logo_symb.5c411e729778.png"); } .cover-back.light-back::after { opacity: .1; } .stream .stream_side_panel { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; position: sticky; top: 0; z-index: 2; width: 100%; /* left: 0; right: 0; */ /* min-width: 30%; */ /* padding: 2% 4%; */ } .stream .stream_side_panel > * { display: flex; flex-direction: row; align-items: center; justify-content: center; flex-wrap: wrap; padding: 0; margin: 0; width: 100%; text-align: center; } .stream .stream_side_panel > * > * { margin: 8px; } .stream .card { /* padding: 16px; */ box-shadow: 0 0 5px 5px var(--up-up-main-color); width: 100%; } .stream .card > .line { width: 100%; } @media (min-width: 768px) { /* .stream .card { flex-direction: row; align-items: flex-start; justify-content: space-between; } */ .stream .card:nth-child(even) > .line { flex-direction: row-reverse !important; } } /* @media (min-width: 768px) { .stream .card { flex-wrap: nowrap; } } */ .actions-with-stream > * { display: flex; flex-direction: row; align-items: center; justify-content: center; } .actions-with-stream > * > * { margin: 4px; } .stream .select_all-label { cursor: pointer; } .image_n_buttons { position: relative; width: 200px; height: 300px; } .image_n_buttons .buttons_wrap { position: absolute; top: 0; left: 0; display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 100%; padding: 8px; width: 100%; max-width: 100%; } .top_buttons { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%; max-width: 100%; } .stream .card:nth-child(even) .top_buttons { flex-direction: row-reverse; } .bottom_buttons { display: flex; flex-direction: column; align-items: center; max-width: calc(100% + 16px); width: calc(100% + 16px); background-color: rgba(var(--background-light-color-rgb), 0.7); margin-bottom: -8px; padding: 8px; } .bottom_buttons > *:not(:first-child) { margin-top: 2%; } /* .filters_n_courses_wrap .courses .course .text { flex-grow: 1; } */ /* .filters_n_courses_wrap .courses .course .text:not(:first-child) { margin-left: 16px; } */ /* .filters_n_courses_wrap .courses .course:nth-child(even) .text:not(:first-child) { margin-right: 16px; } */ .card .text { display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 100%; min-height: 300px; flex-grow: 1; } .card .text > *:not(:first-child) { margin-top: 32px; } .richtext > *:not(:first-child) { margin-top: 8px; } /* .task_chooser .task:not(:last-child)::after { content: ""; display: block; width: 80%; margin: 50px auto; height: 2px; background-color: var(--psevdo-color); border-radius: 3px; } .task_chooser .task > * { margin-bottom: 16px; } */ /* TASK */ .task { position: relative; } .task_info_toggle { background-color: var(--up-up-main-color); font: var(--headline3); font-weight: bold; user-select: none; } .task_info { position: absolute; top: 0; left: 0; padding: 0 !important; background-color: var(--background-light-color); color: var(--text-on-light-color); --color-of-parent: var(--text-on-light-color); align-items: flex-start; z-index: 1; margin: 0; transition: opacity 0.5s; opacity: 0; z-index: -9999; } .task_info_toggle_input:checked + .task_info { /* display: block; */ z-index: 1; opacity: 1; } .variant_select_visualisation_container_parent { position: relative; } .variant_select_visualisation_container { position: static; display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-end; flex-wrap: wrap; text-align: center; margin-top: 16px; } @media (min-width: 768px) { .variant_select_visualisation_container { justify-content: flex-end; margin-top: 0; } } @media (min-width: 1024px) { .task:not(.trainingitempagetasksimple) .variant_select_visualisation_container { position: absolute; flex-direction: column; justify-content: flex-end; align-items: flex-end; bottom: 0; right: 0; } } @media (min-width: 768px) { .variant_select_visualisation_container > * { margin: 8px; } } .variant_select_visualisation_container > * { background: var(--background-light-color); } .variant_select_visualisation caption { padding: 8px; } .variant_select_visualisation th, .variant_select_visualisation .th, .variant_select_visualisation .td, .variant_select_visualisation td { border: solid 1px var(--psevdo-color); padding: 8px; } .variant_select_visualisation.clean_blank { border-collapse: separate; } .variant_select_visualisation.clean_blank th, .variant_select_visualisation.clean_blank .th { border: none; } .variant_select_visualisation.clean_blank td, .variant_select_visualisation.clean_blank .td { display: inline-block; border: dashed 1px var(--psevdo-color); border-radius: 10px; } .variant_select_visualisation th.task_variant_header, .variant_select_visualisation .th.task_variant_header { display: inline-block; border-bottom: 3px solid black; } /* \TASK */ /* TASK COMPARISON */ .task_variants_comparison { display: flex; flex-direction: row; align-items: flex-start; justify-content: space-between; } .task_variants_comparison > * { flex-shrink: 2; flex-grow: 1; } .task_variants_comparison .group_compare_at { flex-shrink: 1; flex-grow: 2; } .task_variants_comparison > *:not(:first-child) { margin-left: 16px; } .task_variants_comparison .task_variant_visual_id_at { margin: 4px; } .group_compare_that { display: none; } .group_compare_at__aim { display: none; } @media (min-width: 1024px) { .group_compare_that { display: block; } .group_compare_at__aim { display: block; } .variants_at { /* visually-hidden */ position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; white-space: nowrap; clip-path: inset(100%); } } .group_compare_at__aim { padding: 24px; background: linear-gradient(90deg,var(--grey-back-color) 20px,transparent 1%) 50%, linear-gradient(var(--grey-back-color) 20px,transparent 1%) 50%, rgba(var(--down-main-color-rgb), 0.8); background-size: 22px 22px; min-height: calc(20px * 3); min-width: calc(20px * 5); } .group_compare_that__item { padding: 16px; background-color: var(--background-light-color); background-image: url("data:image/svg+xml; utf8, "); } .task_variants_comparison .group_compare_that__item { cursor: grab; } .group_compare_at__item:not(:first-child), .group_compare_that__item:not(:first-child) { margin-top: 8px; } .before_animate_sticker_in { transform: rotate3d(1, 1, 1, -90deg) scaleX(0) scaleY(50%); transform-origin: 100% 100%; transition: transform 0.5s ease; opacity: 0.5; } .animate_sticker_in { transform: rotate3d(1, 1, 1, 0deg) scaleX(1) scaleY(1); transform-origin: 0% 0%; opacity: 1; } /* \TASK COMPARISON */ /* СОДЕРЖАНИЕ СВОРАЧИВАНИЕ РАЗВОРАЧИВАНИЕ */ .contents .contents-child { /* position: relative; */ /* transition: max-height 0.3s ease-in; */ } .loading-container { height: 100px; width: 100%; min-width: 100px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; margin: 8px; /* gap: 16px; */ } /* .loading-container > *:not(:first-child) { margin-top: 16px; } */ .loading-spinner { /* border: 3px solid var(--down-main-color); border-top: 3px solid var(--main-color); border-radius: 24px; width: 48px; height: 48px; margin: 16px; animation: spin 1s linear infinite; */ /* margin-bottom: 20px; */ } .loading-spinner { width: 100px; height: 100px; mask-repeat: no-repeat; mask-position: center; mask-image: url('data:image/svg+xml;charset=utf-8,'); mask-size: contain; position: relative; overflow: hidden; } .loading-spinner-back { position: absolute; height: 200px; width: 200px; min-width: 200px; position: absolute; top: -50px; left: -50px; /* inset: 0; */ /* background: conic-gradient(var(--down-down-main-color) 0%, var(--main-color) 10%, var(--down-main-color) 50%, var(--up-main-color) 90%, var(--down-down-main-color) 100%); */ background: conic-gradient(rgba(var(--down-down-main-color-rgb), 0.9) 0%, rgba(var(--down-down-main-color-rgb), 0.9) 2%, var(--up-main-color) 25%, var(--down-main-color) 45%, var(--up-up-main-color) 70%, rgba(var(--down-down-main-color-rgb), 0.9) 98%, rgba(var(--down-down-main-color-rgb), 0.9) 100%); animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* .loading-text { font-size: 24px; font-weight: bold; } */ .loading-bar-container { width: 100%; height: 16px; background-color: var(--main-color); border-radius: 8px; overflow: hidden; /* margin-top: 20px; */ } .loading-bar { height: 100%; width: 0; background-color: var(--down-main-color); border-radius: 8px; animation: fill 5s ease-out infinite; } @keyframes fill { 0% { width: 0; } 50% { width: 100%; } 100% { width: 0; } } .limited-height-parent { position: relative; } .limited-height-block { transition: all 0.5s; } .limited-height-200 { max-height: 200px; /* overflow: auto; */ overflow-x: hidden; overflow-y: auto; } .limited-height-200-click-area { position: absolute; bottom: 0; right: 0; left: 0; height: 4px; max-height: 4px; text-align: center; background-color: var(--down-down-main-color); color: var(--text-on-dark-color); line-height: 2px; cursor: row-resize; } .limited-height-200-click-area::after { position: absolute; content: ""; top: -16px; width: 100%; height: 36px; left: 0; } .limited-height-200-click-area:hover, .limited-height-200-click-area:focus, .limited-height-200-click-area:active { height: 8px; max-height: 8px; line-height: 4px; box-shadow: 0 0 4px rgba(var(--background-dark-color-rgb), 0.8); } /* .contents .contents-child::after { content: ". . ."; display: block; position: absolute; bottom: 0; right: 5px; background: var(--background-light-color); } */ .input-line.contents-child label { max-height: 200px; } .input-line.contents-child input[type="checkbox"] { position: sticky; top: calc(50% - 24px/2); } /* .contents.opened > .contents-child:not(:first-child) { margin: 16px; } */ .contents.opened > .contents-child { /* margin: 16px; */ } .contents:not(.opened) > .contents-child { /* overflow-y: hidden; max-height: 0 !important; BUG ПОЧЕМУ-ТО ЛАГАЕТ В САМОМ СОДЕРЖАНИИ, НЕ СПЛЮЩИВАЕТСЯ ФРАГМЕНТ */ } /* .contents-child.horizontal { display: flex; flex-direction: row; justify-content: flex-start; align-items: flex-start; } */ .contents-header { /* text-decoration: underline dotted; */ cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .contents-header.no-text-deco { text-decoration: none; } /* .contents-child.horizontal > *:not(:first-child) { margin-left: 16px; } */ .contents-header .toggle-icon { transform: rotate(-90deg); transition: transform 0.3s ease-out; } .contents-header .toggle-icon.arrow-insert { transform: rotate(135deg); } .contents.opened > .contents-header > .toggle-icon, .contents-header.opened > .toggle-icon { transform: rotate(180deg); transition: transform 0.3s ease-in; } .contents.opened > .contents-header > .toggle-icon.arrow-insert { transform: rotate(405deg); } .contents-child.comment_pattern { border-radius: 16px; /* background: rgba(var(--down-main-color-rgb), 0.2); */ background: linear-gradient(90deg, var(--down-main-color-lightweight) 20px, transparent 1%) 50%, linear-gradient(var(--down-main-color-lightweight) 20px, transparent 1%) 50%, var(--main-color); background-size: 22px 22px; } .contents.opened .contents-child.comment_pattern { padding: 8px 0; } .contents .child-form { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; border-radius: 12px; } .contents .child-form > * { margin: 8px; } /* \СОДЕРЖАНИЕ СВОРАЧИВАНИЕ РАЗВОРАЧИВАНИЕ */ .task_solution { align-items: flex-start; } .task_solution > * { width: 100%; } .task_solution .user_solution { border-radius: 16px; border: 3px solid rgba(var(--down-main-color-rgb), 0.8); padding: 8px; } .expert_comment .text_input { min-height: 100px; } .task_solution .task_text > *:first-child::before { display: inline; content: "🔹"; margin: 0 6px 0 0; } .task_solution.TrainingItemPageTaskSimple .task_variants > *::before { display: inline; content: "🟨"; margin: 0 6px 0 0; } .task_solution.TrainingItemPageTaskSimple.correct_solution .task_variants > *::before { content: "✅"; } .task_solution.TrainingItemPageTaskSimple .task_variants > *:not(:last-child)::after { display: inline; content: ";"; margin: 0 6px; } .task_solution.TrainingItemPageTaskComparison .task_variants { margin-top: 16px; } .type_of_solution_select-container { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; } .type_of_solution_select-container > *:not(:first-child) { margin-left: 16px; } .profile-actions { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; } .profile-actions > * { margin: 8px; } @keyframes portalAnimation { 0% { box-shadow: 0 0 0 0 rgba(var(--main-color-rgb), 0.8); } 50% { box-shadow: 0 0 30px 15px rgba(var(--main-color-rgb), 0.3); } 100% { box-shadow: 0 0 0 0 rgba(var(--main-color-rgb), 0.8); } } .portal.content_unit, .portal .contents-child { --progress-val: 75%; position: relative; z-index: 0; } .portal.content_unit::after, .portal .contents-child::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; right: var(--progress-val); /* right: var(--progress-val); */ /* background-color: rgba(var(--up-up-main-color-rgb), 0.3); */ background: linear-gradient(90deg,var(--up-up-main-color) 20px,transparent 1%) 50%, linear-gradient(var(--up-up-main-color) 20px,transparent 1%) 50%, rgba(var(--down-main-color-rgb), 0.8); background-size: 22px 22px; animation: slideportalBackground 1.5s linear; border-radius: 5px; } @keyframes slideportalBackground { 0% { right: 100%; } 100% { right: var(--progress-val); } } .portal .cover-back { background-color: var(--down-main-color); animation: portalAnimation 3s infinite; cursor: pointer; } @keyframes animate_space { 0% { transform: scale(1); opacity: 1; } 50% { transform: scale(5); opacity: 0.3; } 100% { transform: scale(10); opacity: 0; } } .animate_space { animation-duration: 5s; animation-name: animate_space; animation-timing-function: cubic-bezier(0.1, -0.3, 0.2, 0); } .task_for_user { flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: space-between; cursor: pointer; } /* # TODO */ /* .task-form-items > *:not(.wth-back):not(.grey-back):not(:last-child)::after { content: ""; display: block; width: 80%; margin: 50px auto; height: 2px; background-color: var(--psevdo-color); border-radius: 3px; } */ .line { display: flex; max-width: 100%; flex-direction: column; /* flex-wrap: wrap; */ overflow: auto; align-items: center; justify-content: flex-start; /* margin: 8px; */ } @media (min-width: 768px) { .line { flex-direction: row !important; } } .line > * { margin: 8px; } input[type="checkbox"][name="gender"] { /* visually-hidden */ /* position: relative; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; overflow: hidden; white-space: nowrap; clip-path: inset(100%); */ /* border: none; */ height: 32px; min-height: 32px; max-height: 32px; padding: 0; margin: 6px; margin-bottom: 28px; /* display: inline-flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; */ } input[type="checkbox"][name="gender"]::before, input[type="checkbox"][name="gender"]::after { cursor: pointer; position: absolute; content: ""; display: flex; align-items: center; justify-content: center; top: 0; box-sizing: border-box; width: 34px; height: 34px; margin: 0; padding: 0; background-color: var(--background-light-color); border-radius: 50px; border: 5px solid var(--main-color); } input[type="checkbox"][name="gender"]::before { content: ""; left: -5px; } input[type="checkbox"][name="gender"]::after { content: "🟣"; left: 40px; } input[type="checkbox"][name="gender"]:checked::before { content: "🟣"; } input[type="checkbox"][name="gender"]:checked::after { content: ""; } label[for="id_gender"] { cursor: pointer; position: relative; box-sizing: border-box; } label[for="id_gender"]::before, label[for="id_gender"]::after { cursor: pointer; position: absolute; content: ""; display: flex; align-items: center; justify-content: center; bottom: -22px; box-sizing: border-box; /* width: 32px; */ /* height: 32px; */ margin: 0; padding: 0; /* background-color: var(--background-light-color); */ /* border-radius: 50px; */ /* border: 5px solid var(--main-color); */ } label[for="id_gender"]::before { content: "М"; left: 50px; } label[for="id_gender"]::after { content: "Ж"; left: 94px; } .template-404 .img { background: no-repeat center / cover url("../img/labyrinth.bfd9df294376.png"); width: 100%; height: 50vh; } .child-header { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; } .child-header > * { padding: 0; margin: 8px; } @media (min-width: 1024px) { .child-header { flex-wrap: nowrap; } } /* tracks */ .tracks { display: grid !important; grid-template-columns: 1fr; /* одна колонка на мобильных устройствах */ gap: 16px; /* зазор между элементами */ grid-auto-rows: 1fr; /* автоматическая высота строк */ width: 100%; /* padding: 5px 0 0 0 !important; */ } @media (min-width: 768px) { .tracks { grid-template-columns: repeat(var(--tracks_count), 1fr); /* align-items: flex-start; */ } } /* .tracks .card * { margin: 0; } */ .track_mini_infos, .track_mini_infos .child-form { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: center; } .track_mini_infos > *, .track_mini_infos .child-form > * { margin: 6px; } .tracks__item { display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 0 !important; margin: 0 !important; height: 100%; } .tracks__item:not(:last-child)::after { content: ""; display: block; width: 80%; margin: 16px auto; height: 2px; background-color: var(--psevdo-color); border-radius: 3px; } @media (min-width: 768px) { /* .tracks__item { flex-shrink: 0; flex-grow: 2; max-width: var(--max-width) !important; width: var(--max-width) !important; margin: 8px !important; } */ .tracks__item:not(:last-child)::after { display: none; } } .tracks__item .big_label:hover a, .tracks__item .big_label:focus a { text-decoration: underline; } .big_label { text-transform: none; width: 100% !important; height: 100%; margin: 0 !important; padding-bottom: 60px !important; } .big_label * { margin: 30px 0 0 0 !important; } .big_label *:not(.button) { padding: 0 !important; } /* \tracks */ /* graph */ .graph-wrapper { position: relative; } .graph-container { position: relative; max-width: 100%; max-height: 300px; overflow: auto; user-select: none; } .active_route { filter: drop-shadow(0 0 4px var(--psevdo-color)); } .active_route + .context { display: block !important; } .active_route + .context + .context_text { display: block !important; } /* #TODO .graph-container .finish { cursor: pointer; } .graph-container path { cursor: pointer; } {*/ #graph:active { cursor: grabbing; } #graph { transition: transform 0.5s; transform-origin: 0 0; cursor: grab; } #graph * { transition: all 1s ease-in-out; } .graph-legend { user-select: none; position: absolute; z-index: 1999; bottom: 16px; left: 16px; background-color: var(--background-light-color); box-shadow: 0 0 5px 5px var(--psevdo-color); max-width: calc(100% - 32px); border-radius: 5px; width: fit-content; } .graph-legend.hidden > * > *:not(.hide_buttons) { display: none; } .graph-legend, .graph-buttons-wrap, .graph_legend_items_wrap, .graph_legend_item { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; flex-wrap: wrap; } .graph-buttons-wrap > *, .graph_legend_items_wrap > * { margin: 6px; } .graph_legend_item { flex-wrap: nowrap; } .graph-legend .graph_legend_item > *:not(:first-child) { margin-left: 4px; } .graph-legend .stick { background-color: var(--color-of-parent); width: 16px; height: 4px; } .graph-wrapper.popup-window--opened, .graph-wrapper.popup-window--opened .graph-container { position: fixed; top: 0; left: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%; background-color: var(--background-light-color); z-index: 1000; } .graph-wrapper.popup-window--opened .open-popup { display: none; } .graph-wrapper:not(.popup-window--opened) .close-popup { display: none; } .track_input { position: fixed !important; } .track_label { cursor: pointer; background-color: var(--color-of-parent); border-radius: 7.5px; box-shadow: 0 0 5px 5px var(--psevdo-color); display: flex; justify-content: center; align-items: center; overflow: hidden; transition: all 1s ease-in-out; } .track_label_text { padding: 8px; color: var(--color-of-parent); filter: grayscale(100%) invert(100%); transition: all 0.7s ease-in-out; } input:checked + .track_label { box-shadow: none; } input:checked + .track_label .track_label_text { /*box-shadow: inset 0 0 8px 5px var(--color-of-parent);*/ box-shadow: inset 0 0 8px 5px rgba(var(--up-up-main-color-rgb), 0.6); } /* \graph */ /* .track-icon-wrapper { height: 140px; min-height: 200px; display: flex; align-items: center; justify-content: center; } */ /* .big_label:hover img, .big_label:focus img, .big_label.active img { filter: invert(100%); } */ .button.light:hover img, .button.light:focus img, .button.light.active img, .button.light:hover .ICON::after, .button.light:focus .ICON::after, .button.light.active .ICON::after { filter: invert(100%); } s { text-decoration: none; position: relative; } s::before { background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAwCAYAAADab77TAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAAAAZdEVYdFNvZnR3YXJlAEFkb2JlIEltYWdlUmVhZHlxyWU8AAADKGlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS41LWMwMjEgNzkuMTU1NzcyLCAyMDE0LzAxLzEzLTE5OjQ0OjAwICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdFJlZj0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlUmVmIyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxNCAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo1Q0MyQzgxMDg2MjUxMUU3QkQ4QjkxMjM1NUZDM0E1MCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo4N0Q5REM5MDg2MjYxMUU3QkQ4QjkxMjM1NUZDM0E1MCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjVDQzJDODBFODYyNTExRTdCRDhCOTEyMzU1RkMzQTUwIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjVDQzJDODBGODYyNTExRTdCRDhCOTEyMzU1RkMzQTUwIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpS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'); } s::before { content: ""; display: block; position: absolute; left: -60%; top: -60%; height: 190%; width: 190%; background-size: 100%; clip-path: polygon(0% 10%, 20% 20%, 40% 33%, 60% 48%, 80% 65%, 105% 90%, 80% 79%, 60% 68%, 40% 53%, 20% 35%, -5% 10%); filter: invert(1) brightness(2) sepia(1) saturate(10) hue-rotate(-80deg); } .progress_action_container { display: flex; width: 100%; min-width: 100%; align-items: center; justify-content: center; } .daily_check > * { width: 100%; } /* свичи */ @media (min-width: 768px) { .switches-line > * { margin: 0; } .switches-line > *:not(:last-child) { position: relative; margin-right: 16px; } .switches-line > *:not(:first-child) { margin-left: 16px; } .switches-line > *:not(:last-child)::before { position: absolute; content: ""; display: block; top: 0; bottom: 0; right: -16px; width: 2px; background-color: var(--psevdo-color); } } .switch { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; } .switch > *:not(:first-child) { margin-left: 6px; } .switch label:not(.disabled) { cursor: pointer; } .switch-track { position: relative; display: block; background-color: var(--grey-back-color); /* border: solid 2px var(--psevdo-color); */ outline: 2px solid var(--psevdo-color); transition: background-color 0.4s; border-radius: 12px; height: 24px; min-height: 24px; width: 39px; min-width: 39px; } .switch-track::before { /* Handle */ position: absolute; transition: 0.4s; content: ""; height: 12px; width: 12px; min-height: 12px; min-width: 12px; border-radius: 50%; left: 6px; top: 6px; background-color: var(--psevdo-color); } input:checked + .switch-track { background-color: var(--main-color); /* Основной цвет */ outline: none; } input:checked + .switch-track::before { /* transform: translateX(16px); */ height: 18px; width: 18px; min-height: 18px; min-width: 18px; left: auto; right: 3px; top: 3px; background-color: var(--background-light-color); } /* \свичи */ /* куки */ .cookie-consent-form a { --color-of-parent: var(--main-color); color: var(--main-color); text-decoration: none; } .cookie-consent-form a:hover { text-decoration: underline; } /* \куки */ /* color_theme */ /* button.color_theme { padding: 3px; background: none; } */ /* button.color_theme .light_fill { fill: whitesmoke; } */ /* button.color_theme .light_stroke { stroke: whitesmoke; } */ /* button.color_theme .dark_fill { fill: yellow; } button.color_theme .dark_stroke { fill: yellow; } */ .color_theme { --clr-ico-size: calc(36px - 6px - 6px - 3px); --clr-ico-padding: 6px; height: 36px !important; min-height: 36px !important; max-height: 36px !important; width: calc(36px * 2 - (3px * 2)); padding: 0; } .color_theme .switch-track { background: none !important; width: 100%; height: 100%; min-width: 100%; min-height: 100%; outline: none; padding: 0; margin: 0; } .color_theme .switch-track::before { background-color: var(--down-down-main-color) !important; z-index: 1; border: none; /* border-radius: unset; */ background: no-repeat center/var(--clr-ico-size) url("../img/moon бел.050bd43983e9.png"); width: var(--clr-ico-size); height: var(--clr-ico-size); min-width: var(--clr-ico-size); min-height: var(--clr-ico-size); right: 1px; left: unset; padding: var(--clr-ico-padding); top: 1px; } .color_theme input:checked + .switch-track::before { background-color: var(--up-up-main-color) !important; z-index: 1; /* background-color: none !important; border: none; border-radius: unset; */ background: no-repeat center/var(--clr-ico-size) url("../img/sun.896a044ebadc.png"); width: var(--clr-ico-size); height: var(--clr-ico-size); min-width: var(--clr-ico-size); min-height: var(--clr-ico-size); left: 1px; right: unset; padding: var(--clr-ico-padding); top: 1px; } .color_theme .switch-track::after { content: ""; position: absolute; z-index: 0; background: no-repeat center/var(--clr-ico-size) url("../img/sun бел.0b1ef43fad97.png"); width: var(--clr-ico-size); height: var(--clr-ico-size); min-width: var(--clr-ico-size); min-height: var(--clr-ico-size); left: 1px; right: unset; padding: var(--clr-ico-padding); top: 1px; } .color_theme input:checked + .switch-track::after { content: ""; position: absolute; z-index: 0; background: no-repeat center/var(--clr-ico-size) url("../img/moon.1106e2f14d81.png"); width: var(--clr-ico-size); height: var(--clr-ico-size); min-width: var(--clr-ico-size); min-height: var(--clr-ico-size); right: 1px; left: unset; padding: var(--clr-ico-padding); top: 1px; } /* \color_theme */ /* tip training_item_page */ .prev_next { display: flex; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; width: 100%; min-width: 100%; max-width: 100%; gap: 16px; } .prev_next:not(.prev_next_top) { margin-top: 50px; } .prev_next > * { flex-grow: 2; /* margin: 8px; */ } /* tip training_item_page */ .EGE-results-table tr { border: 1px solid var(--background-light-color); background-color: #ffccb1; } .EGE-results-table td { border: 2px solid #ffccb1; text-align: center; background-color: var(--background-light-color); } .EGE-results-table .hd { background-color: #ff9760; border: 2px solid #ff9760; color: #9f2e04; } .EGE-results-table .subhd { background-color: #ffccb1; color: #9f2e04; } .EGE-results-table .subsubhd { background-color: #ffccb1; color: #d88c7c; } .EGE-results-table .bold { text-shadow: -1px -1px 0 var(--text-on-light-color), 1px -1px 0 var(--text-on-light-color), -1px 1px 0 var(--text-on-light-color), 1px 1px 0 var(--text-on-light-color); } .EGE-results-table.secondary { opacity: 0.8; } .progress-container { position: relative; display: flex; flex-direction: row; justify-content: center; align-items: center; --progress: 0%; width: 100%; /* height: 64px; */ min-height: 64px; background-color: var(--up-up-main-color); border-radius: 32px; overflow: hidden; margin: 8px 0; user-select: none; font: var(--headline4-min); font-weight: bold; padding: 16px; } .progress-container > * { position: relative; z-index: 2; height: 100%; } .progress-container .label { word-break: break-word; max-width: 90%; } .progress-container .progress-bar { z-index: 1; top: 0; left: 0; position: absolute; width: var(--progress); height: 100%; background-color: var(--down-main-color); /* background: linear-gradient(90deg, #4caf50, #81c784); */ transition: width 0.2s ease-in-out; } .progress-mask { display: flex; height: 64px; padding: 0 !important; /* gap: 8px; */ } .progress-mask > * { background-color: var(--grey-back-color); /* width: 50px; height: 100%; */ padding: 0; margin: 8px; width: 48px; height: 48px; /* background-color: var(--up-up-main-color); */ } .side-block-wrapper { max-height: 100vh; overflow: auto; } @media (min-width: 1800px) { .body-wrapper { position: relative; } /* .content-with-sides-wrapper { display: flex; flex-wrap: no-wrap; } */ .side-block { position: absolute; /* background: red; */ height: 100%; z-index: 333; } .side-block-wrapper { /* background: blue; */ position: sticky; top: 0; bottom: 0; width: 290px; } .left-side-block { left: -305px; } .right-side-block { right: -305px; } }