/*** 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 text input doesn't working */ input, textarea { user-select: auto; -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; line-break: after-white-space; -webkit-line-break: after-white-space; user-select: auto; -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; } h1, h2, h3, h4 { padding: 0; margin: 0; } :focus { outline: 0 !Important; } button, button:focus, button:active, button:hover, .btn, .btn:focus, .btn:active, .btn.active, .btn:hover { box-shadow: none; outline: 0; } .form-control, .form-control:focus, .form-control:active, .form-control:hover { box-shadow: none; outline: 0; } svg { vertical-align: top; } :root { --app-background-gradient-end-color: #0e0e0e; --app-background-gradient-solid: linear-gradient(180deg, rgba(31, 32, 38, 0.5) 0%, rgba(95, 104, 117, 0.5) 100%) fixed, var(--app-background-gradient-end-color); --app-background-gradient-transparent: linear-gradient(180deg, rgba(31, 32, 38, 0.5) 0%, rgba(95, 104, 117, 0.5) 100%); --logo-gradient: linear-gradient(63deg, #EA2226 0%, #EA2226 50.25%, #DE161B 54.0156%, #C20413 57.5703%, #B3011B 58.3555%, #BC0414 59.5625%, #D00215 63.3984%, #BC0414 67.2344%, #B3011B 68.4258%, #C20413 69.1875%, #DE161B 72.7813%, #EA2226 76.8281%, #EA2226 100%); --color-brand-main: #ea2226; --color-brand-dark: #b3011b; --color-text-white: #ffffff; --color-text-black: #000000; --color-white-3: rgba(255, 255, 255, 0.03); --color-white-5: rgba(255, 255, 255, 0.05); --color-white-10: rgba(255, 255, 255, 0.1); --color-white-15: rgba(255, 255, 255, 0.15); --color-white-20: rgba(255, 255, 255, 0.2); --color-white-25: rgba(255, 255, 255, 0.25); --color-white-30: rgba(255, 255, 255, 0.3); --color-white-40: rgba(255, 255, 255, 0.4); --color-white-50: rgba(255, 255, 255, 0.5); --color-white-70: rgba(255, 255, 255, 0.7); --color-white-80: rgba(255, 255, 255, 0.8); --color-white: #ffffff; --color-black-3: rgba(0, 0, 0, 0.03); --color-black-5: rgba(0, 0, 0, 0.05); --color-black-7: rgba(0, 0, 0, 0.07); --color-black-10: rgba(0, 0, 0, 0.1); --color-black-15: rgba(0, 0, 0, 0.15); --color-black-20: rgba(0, 0, 0, 0.2); --color-black-25: rgba(0, 0, 0, 0.25); --color-black-30: rgba(0, 0, 0, 0.3); --color-black-40: rgba(0, 0, 0, 0.4); --color-black-50: rgba(0, 0, 0, 0.5); --color-black-60: rgba(0, 0, 0, 0.6); --color-black-70: rgba(0, 0, 0, 0.7); --color-black-80: rgba(0, 0, 0, 0.8); --color-black: #000000; /* * ========================================== * Тёмная тема приложения * ========================================== */ --color-button-active-text: var(--color-text-white); --color-button-classic-background: var(--color-white-5); --color-button-hover-background: var(--color-white-20); --color-button-active-background: var(--color-white-70); --color-notification-red: #ea2226; --color-notification-neutral: #1a1b1f; --border-violet: 1px solid #5e35b1; --border-purple: 1px solid #dc6fff; --border-rose: 1px solid #ffd1ea; --border-tomato: 1px solid tomato; --layout-min-width: 1200px; --layout-max-width: 1500px; --layout-max-width-mobile: 768px; --layout-single-column-width: 800px; --layout-single-thin-column-width: 600px; --text-description-max-width: 500px; --layout-left-right-indent: 20px; --layout-header-height: 90px; --layout-footer-padding: 120px; --layout-sidebar-width: 220px; --layout-sidebar-width-mobile: 250px; --layout-sidebar-margin-right: 100px; --layout-scrollbar-offset: 0px; --border-radius-small: 6px; --border-radius-base: 10px; --font-h1-size: 32px; --font-h1-weight: 600; --font-h1-line-height: 43px; --h1-margin-bottom: 40px; --font-h2-size: 24px; --font-h2-weight: 400; --font-h2-line-height: 28px; --h2-margin-bottom: 30px; --font-h3-size: 19px; --font-h3-weight: 400; --font-h3-line-height: 24px; --h3-margin-bottom: 20px; --font-base-size: 16px; --font-base-weight: 300; --font-base-line-height: 22px; --font-small-size: 14px; --font-small-weight: 300; --font-small-line-height: 18px; --font-micro-size: 12px; --font-micro-weight: 300; --font-micro-line-height: 16px; --loading-indicator-height: 24px; --rich-input-base-padding: 0 10px 0 25px; --rich-button-base-height: 38px; --buttons-transition: all 0.3s ease-out; --buttons-disabled-opacity: 0.3; --vertical-toggle-button-height: 46px; --horizontal-toggle-button-height: 44px; --badge-size: 18px; --checkbox-size: 18px; --radio-size: 18px; --base-header-height: 50px; --header-backdrop-filter: blur(20px); --header-border-bottom: 1px solid var(--color-white-5); --main-menu-padding: 6px; --main-menu-border-radius: calc(var(--rich-button-base-height) / 2 + var(--main-menu-padding)); --popup-width-medium: 500px; --popup-content-padding: 20px 30px 30px 30px; --pop-up-border-top: 1px solid var(--color-white-20); --pop-up-background: var(--color-black-30); --pop-up-backdrop-filter: blur(20px); --pop-up-player-z-index: 1000; --pop-up-menu-z-index: 1001; --pop-up-overlay-z-index: 1100; --pop-up-with-overlay-z-index: 1101; --pop-up-box-shadow: 0px 36px 20px -30px var(--color-black-5), 0px 20px 40px -10px var(--color-black-15); --tracklist-item-flashing-background: rgba(235, 39, 30, 0.5); --bezier-transition-v1: cubic-bezier(0.29, 0.29, 0.23, 0.87); --tracklist-h1-title-margin-bottom: 20px; /* * ========================================== * Светлая тема приложения * ========================================== */ --theme-light-app-background-gradient-end-color: #ffffff; --theme-light-app-background-gradient-solid: linear-gradient(180deg, rgba(230, 230, 230, 0.5) 0%, rgba(242, 242, 242, 0.5) 100%) fixed, var(--theme-light-app-background-gradient-end-color); --theme-light-app-background-gradient-transparent: linear-gradient(180deg, rgba(230, 230, 230, 0.5) 0%, rgba(242, 242, 242, 0.5) 100%); --theme-light-button-active-text: var(--color-text-black); --theme-light-button-background: var(--color-black-3); --theme-light-button-hover-background: var(--color-black-7); --theme-light-button-active-background: var(--color-white-50); --theme-light-header-border-bottom: 1px solid var(--color-black-5); --theme-light-menus-background: var(--color-black-3); --theme-light-pop-up-background: var(--color-black-5); --theme-light-pop-up-box-shadow: 0px 36px 20px -30px var(--color-black-5), 0px 20px 40px -10px var(--color-black-25); --theme-light-tracklist-item-flashing-background: rgba(235, 39, 30, 0.5); } hr { width: 100%; border: none; } hr.spacer-20px { height: 20px; } hr.spacer-30px { height: 30px; } hr.spacer-40px { height: 40px; } /* Изменение через css исходного цвета svg http://colorizer.org/ https://blog.union.io/code/2017/08/10/img-svg-fill/ Генератор цвета для css filter: https://codepen.io/sosuke/pen/Pjoqqp https://ru.stackoverflow.com/questions/659108/Задать-цвет-картинке-svg-в-файле-со-стилями/755510#755510 http://qaru.site/questions/936687/matching-a-color-in-svg-with-fecolormatrix/3296991#3296991 https://ru.stackoverflow.com/a/832558 https://css-tricks.com/color-filters-can-turn-your-gray-skies-blue/ https://jmperezperez.com/duotone-using-fecolormatrix/ *** https://codepen.io/jmperez/pen/LGqaxQ https://tympanus.net/codrops/2019/09/03/how-to-dynamically-change-the-colors-of-product-images-using-css-blend-mode-and-svg/ https://denis-creative.com/svg-to-bg/ */ html, body { min-height: 100vh; } body { display: flex; flex-direction: column; font-family: 'Roboto Flex', 'Open Sans', 'PT Sans', Arial, sans-serif; font-size: var(--font-base-size); font-weight: var(--font-base-weight); line-height: var(--font-base-line-height); font-style: normal; color: var(--color-text-white); z-index: 0; } a { position: relative; color: var(--color-text-white); text-decoration: none; } a:hover { cursor: pointer; } a::after, .a-like-hover::after { height: 1px; width: 100%; position: absolute; left: 0; bottom: 0; content: ''; transition: opacity 0.15s ease-in-out, background 0.15s ease-in-out; background: var(--color-white-50); visibility: hidden; opacity: 0; } h1, .h1 { font-size: var(--font-h1-size); font-weight: var(--font-h1-weight); line-height: var(--font-h1-line-height); padding: 0; margin-bottom: var(--h1-margin-bottom); } h2, .h2 { font-size: var(--font-h2-size); font-weight: var(--font-h2-weight); line-height: var(--font-h2-line-height); padding: 0; margin-bottom: var(--h2-margin-bottom); } h3, .h3 { font-size: var(--font-h3-size); font-weight: var(--font-h3-weight); line-height: var(--font-h3-line-height); padding: 0; margin-bottom: var(--h3-margin-bottom); } .tooltip { min-height: 25px; position: absolute; top: -30px; left: 50%; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; padding: 5px 10px; font-size: var(--font-micro-size); color: var(--color-text-white); line-height: 1; white-space: nowrap; pointer-events: none; user-select: none; border-radius: var(--border-radius-small); background: var(--color-black-70); transition: opacity 0.15s ease-out; visibility: hidden; opacity: 0; } .table-rows-dotted-line { height: 1em; flex-grow: 1; overflow: hidden; white-space: nowrap; } .table-rows-dotted-line::before { display: inline-block; content: '........................................................................................................................................................................................................'; text-align: left; color: var(--color-white-15); } .strings-dot-delimiter::before { content: ' ∙ '; } .layout-theme-dark { color: var(--color-text-white); } .layout-theme-dark a { color: var(--color-text-white); } .layout-theme-dark a::after, .layout-theme-dark .a-like-hover::after { background: var(--color-white-50); } .layout-theme-dark .table-rows-dotted-line::before { color: var(--color-white-15); } .layout-theme-light { color: var(--color-text-black); } .layout-theme-light a { color: var(--color-text-black); } .layout-theme-light a::after, .layout-theme-light .a-like-hover::after { background: var(--color-black-50); } .layout-theme-light .table-rows-dotted-line::before { color: var(--color-black-15); }