:root { --small-display-size:1100px; --progress-line-height:3px; --aside-z-index: 19; --header-height:clamp( var(--s-3), 14vw, var(--s-4) ); --footer-height:70px; --main-padding:clamp(var(--s-1), 2vw, var(--s-2) ); --main-padding-top:clamp(var(--s-1), 6vw, var(--s-2) ); --font-weight-base:350; --font-family-base:Manrope, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } @view-transition { navigation: auto; } ::view-transition-old(root) { animation: slide-out 0.4s cubic-bezier(0.4, 0, 0.2, 1) both; } ::view-transition-new(root) { animation: slide-in 0.4s cubic-bezier(0.4, 0, 0.2, 1) both; } ::view-transition-old(root), ::view-transition-new(root) { background: transparent !important; } @keyframes slide-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100px); opacity: 0.6; } } @keyframes slide-in { from { transform: translateX(100px); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } } ::view-transition-old(root):only-child { animation: slide-out-back 0.4s cubic-bezier(0.4, 0, 0.2, 1) both; } ::view-transition-new(root):only-child { animation: slide-in-back 0.4s cubic-bezier(0.4, 0, 0.2, 1) both; } @keyframes slide-out-back { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100px); opacity: 0.6; } } @keyframes slide-in-back { from { transform: translateX(-100px); opacity: 0.6; } to { transform: translateX(0); opacity: 1; } } @layer core, app, module; a.button { display:flex; align-items: center; justify-content: center; gap: var(--s-05); background: var(--accent); color: var(--accent-text); text-transform: uppercase; text-align: center; font-weight: 400; cursor: pointer; width: 100%; padding: var(--s-075); border-radius: var(--r-s); border: none; &:hover { background-color: var(--accent-hover); } & svg { fill: var(--accent-text); } } .access_error { display:flex; align-items: center; justify-content: center; height:100%; & .in { display:flex; justify-content: center; text-align: center; width:100%; max-width:500px; height:fit-content; background-color: var(--bg-400); padding:var(--s-2); border-radius:var(--s-1); border:solid 1px var(--border-600); } } .blinking { animation: opacity 1s ease-in-out infinite; opacity: 1; &.slow { animation: opacity 2s ease-in-out infinite; } } @keyframes opacity { 0% { opacity: 1; } 50% { opacity: 0 } 100% { opacity: 1; } } .spiner { & svg { animation-name: spiner; animation-duration: 2s; animation-timing-function: ease; animation-iteration-count: infinite; } } @keyframes spiner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes pulse-ring { 0% { transform: scale(0.6); opacity: 0.7; } 70% { transform: scale(2); opacity: 0; } 100% { transform: scale(2); opacity: 0; } } svg.rotated { transform: rotate(180deg); transition: transform 0.3s ease; } @keyframes slideInFromLeft { 0% { opacity: 0; transform: translateX(-100%); } 100% { opacity: 1; transform: translateX(0); } } @keyframes slideInFromRight { 0% { opacity: 0; transform: translateX(100%); } 100% { opacity: 1; transform: translateX(0); } } @keyframes slideInFromTop { 0% { opacity: 0; transform: translateY(-100%); } 100% { opacity: 1; transform: translateX(0); } } @layer core { aside { display:flex; flex-direction: column; gap:var(--s-1); z-index:10; position:fixed; color:var(--aside-text); & .in { display:flex; flex-direction: column; gap:var(--s-1); overflow-y:auto; padding:var(--s-1); } & span.close { position:absolute; width:35px; aspect-ratio: 1; align-items: center; justify-content: center; cursor:pointer; z-index:5; background-color: color-mix(in srgb, var(--error) 100%, transparent 10%); color:#FFF; border-radius:500px; &:hover { background-color: color-mix(in srgb, var(--error) 100%, black 30%); } } & .table_links { & a { display:flex; align-items: center; gap:var(--s-1); color:var(--aside-text); padding:var(--s-1); border-bottom:none; border-radius:var(--r); & span { display:block; width:100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } &:hover { background-color: var(--aside-bg-hover); } & svg { flex-shrink: 0; fill:var(--text); } & svg { &:last-child { margin-left:auto; } } &:nth-child(10n + 1) svg { fill: var(--color-1-bg); } &:nth-child(10n + 2) svg { fill: var(--color-2-bg); } &:nth-child(10n + 3) svg { fill: var(--color-3-bg); } &:nth-child(10n + 4) svg { fill: var(--color-4-bg); } &:nth-child(10n + 5) svg { fill: var(--color-5-bg); } &:nth-child(10n + 6) svg { fill: var(--color-6-bg); } &:nth-child(10n + 7) svg { fill: var(--color-7-bg); } &:nth-child(10n + 8) svg { fill: var(--color-8-bg); } &:nth-child(10n + 9) svg { fill: var(--color-9-bg); } &:nth-child(10n) svg { fill: var(--color-10-bg); } &.active { background-color: var(--accent); color:var(--accent-text); & svg { fill:var(--accent-text); } } } } } aside.left { background-color: var(--aside-left-bg); & .close { margin-left:auto; top:var(--s-1); right:calc( 0px - var(--s-1) ); } } aside.right { padding:var(--s-1); padding-left:0px; position:fixed; top:var(--header-height); right:0px; z-index:var(--aside-z-index); bottom: var(--header-height); height:calc( 100% - var(--header-height) - var(--header-height) ); background:none; & .right_in { display:flex; flex-direction: column; gap:var(--s-1); height:100%; border-radius:var(--r); background-color: var(--aside-right-bg); border: solid 1px var(--border-1); } & .close { margin-left:auto; left:0px; } } } @media screen and (width < 1000px) { @layer core { aside { box-shadow: 0px 0px 20px var(--shadow-1); } aside.right { top:0px; bottom:0px; height:100%; padding:0px; border-radius:0px; & .right_in { border-radius:0px; } & span.close { top:var(--s-1); left:calc(0px - var(--s-1)); } } } } .bg_orange { background-color:var(--orange); } .bg_green { background-color:var(--success); } .bg_lightblue { background-color:var(--lightblue); } .block_info { display:flex; flex-direction: column; background-color: var(--bg-500); border:solid 1px var(--border-1); border-radius: var(--r); & > .title { display:flex; align-items: center; justify-content: space-between; padding: var(--s-1); border-bottom: solid 1px var(--border-1); text-transform: uppercase; color: var(--text-muted); font-size: var(--font-size-small); & svg { fill:var(--color-5-bg); } } & .body { border-bottom:none; overflow: hidden; & [data-panel] { gap:0px; } } } & .answer_quote { display:flex; align-items: start; gap:var(--s-05); background-color: var(--bg-500); border-radius: var(--r-ss); padding:var(--s-05); border: dashed 2px var(--border-1); font-size:var(--font-size-small); color:var(--text-muted); & svg { flex-shrink: 0; } } & .answer_quote_cancel { cursor:pointer; } [data-add-post] { display:grid; --width-left: 40px; --width-right: 50px; grid-template-columns: var(--width-left) 1fr ; grid-template-rows: 1fr; height:100%; align-items: start; gap:var(--s-05); & .ava { display:flex; align-items: center; justify-content: center; width:var(--width-left); aspect-ratio: 1/1; background-color: var(--bg-500); border-radius: var(--r-s); & img { width:100%; aspect-ratio: 1/1; object-fit: cover; border-radius:500px; } } & .bottom_row { display:flex; align-items: start; gap:var(--s-05); & span.send { margin-left: auto; display:flex; gap:var(--s-05); align-items: center; justify-content: center; background-color: var(--accent); color:var(--accent-text); border-radius:var(--r-ss); cursor:pointer; padding:var(--s-025) var(--s-1); font-size:var(--font-size-medium); & svg { fill:var(--accent-text); } } } } .answer_quote_left { display: flex; flex-direction: row; align-items: center; gap: var(--s-05); } @container form (width < 500px) { .answer_quote_left { flex-direction: column; align-items: flex-start; } } [data-cards-to-input] { display:flex; flex-wrap: wrap; gap: var(--s-05); & > div { display:flex; background-color: var(--bg-500); border-radius:var(--s-05); padding:var(--s-05); border:solid 1px var(--border-1); cursor:pointer; font-size:var(--font-size-small); font-weight:600; text-transform: uppercase; border:solid 2px var(--border-1); &:hover { background-color: var(--bg-300); } & .ico { span { width:50px; aspect-ratio: 1; background-color: color-mix(in srgb, var(--accent) 10%, transparent); border:solid 1px color-mix(in srgb, var(--accent) 30%, transparent); border-radius:var(--r-ss); display:flex; align-items: center; justify-content: center; & svg { width:1.1rem; fill:var(--text); } } } & .title { color:var(--text-full); font-weight:bold; } &.active { border:solid 2px var(--accent); background-color: color-mix(in srgb, var(--accent) 5%, transparent); & .ico { & span { border:solid 1px color-mix(in srgb, var(--accent) 70%, transparent); & svg { fill:var(--accent); } } } } } } @layer core { [data-native-scroll] { display:flex; flex-direction: column; gap:var(--gap-2); width:100%; &.gap-1 { gap:var(--gap-1); } [data-panel-link] { cursor: pointer; } & [data-tabs] { --color: var(--color-6-bg); --color-text: var(--color-6-text); display:flex; overflow-x: scroll; max-width:fit-content; gap:var(--s-025); &.is-sticky { position: sticky; top: var(--header-height); z-index: 2; background-color: var(--bg-500); border-bottom:solid 1px var(--border-1); box-shadow: 0px 1px 5px var(--bg-800); } &.js-sb { justify-content: space-between; } & > span { flex-shrink: 0; flex:1; display:flex; align-items: center; justify-content: center; gap:var(--s-05); cursor:pointer; padding:var(--s-025) clamp(var(--s-1), 5vw, var(--s-1) ); border-radius:var(--r-ss); font-size:var(--font-size-small); font-weight:600; color:var(--text_muted); text-transform: uppercase; white-space: nowrap; letter-spacing:.05em; border:solid 1px transparent; & svg { width:var(--font-size-small); } & b { display:flex; align-items: center; justify-content: center; font-size:.65rem; font-weight:600; padding:0px var(--s-05); min-width:var(--s-1); background-color: var(--bg-400); border:solid 1px var(--border-1); border-radius:500px; } &.active { border: solid 1px color-mix(in srgb, var(--color) 45%, transparent); color:var(--a); background-color: color-mix(in srgb, var(--color) 10%, transparent); & b { background-color: color-mix(in srgb, var(--color) 85%, transparent); color:var(--color-text); } & svg { fill:var(--accent); } } } &.underline { & span { border-bottom: 3px solid var(--bg-300); background-color: transparent; border-radius:0px; &.active { color:var(--text); } } } } & [data-panels] { display:flex; gap:var(--gap-1); overflow-x: scroll; scroll-snap-type: x mandatory; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; margin:0px calc(0px - var(--s-1) ); padding:0px var(--s-1); scroll-padding: var(--s-1); align-items: flex-start; overflow-y: hidden; transition: height 0.3s ease; will-change: height; & [data-panel] { flex: 0 0 100%; display:flex; flex-direction: column; gap:var(--gap-1); min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; max-width: 100%; } } } } [data-pages] { display: flex; flex-direction: column; gap: var(--s-075); margin: 0px calc(0px - var(--main-padding)); padding: 0px var(--main-padding); height: fit-content; overflow-x: clip; & .pages_links { display: flex; align-items: center; gap: var(--s-05); min-width: 0; max-width: 100%; & .pages_scroll { display: flex; align-items: center; gap: var(--s-05); overflow-x: auto; flex: 1 1 0; min-width: 0; width: 0; scrollbar-width: none; -ms-overflow-style: none; &::-webkit-scrollbar { display: none; } } & > a, & .pages_scroll > a { flex-shrink: 0; display: flex; line-height: 1; background-color: var(--bg-500); border: solid 1px var(--border-1); border-radius: var(--r-s); width: 35px; aspect-ratio: 1; align-items: center; justify-content: center; color: var(--text); font-size: .7rem; font-weight: bold; &:hover { background-color: var(--accent); color: var(--accent-text); & svg { fill: var(--accent-text); } } &.active { background-color: var(--accent); color: var(--accent-text); & svg { fill: var(--accent-text); } } } & > .page-dots { flex-shrink: 0; width: 24px; text-align: center; color: var(--text-muted); font-size: .8rem; line-height: 1; user-select: none; } } & .pages_slider { display: flex; align-items: center; gap: var(--s-075); & .page-slider { flex: 1; -webkit-appearance: none; appearance: none; height: var(--s-05); border-radius: var(--r-ss); background: linear-gradient(to right, var(--accent) var(--page-slider-progress, 0%), var(--bg-300) var(--page-slider-progress, 0%)); outline: none; cursor: pointer; } & .page-slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--s-1-5); height: var(--s-1-5); border-radius: 50%; background: var(--accent); border: var(--s-025) solid var(--bg-400); cursor: pointer; } & .page-slider::-moz-range-track { height: var(--s-05); border-radius: var(--r-ss); background: var(--bg-300); } & .page-slider::-moz-range-progress { height: var(--s-05); border-radius: var(--r-ss); background: var(--accent); } & .page-slider::-moz-range-thumb { width: var(--s-1-5); height: var(--s-1-5); border-radius: 50%; background: var(--accent); border: var(--s-025) solid var(--bg-400); cursor: pointer; } & .page-slider-label { flex-shrink: 0; min-width: 44px; text-align: center; font-size: var(--font-size-small-2); color: var(--text-muted); white-space: nowrap; } } } button[popovertarget] { background: none; border: none; cursor: pointer; padding: var(--s-05); &:hover { background-color: var(--bg-100); border-radius: var(--r-ss); & svg { transition: transform .4s ease-in-out; rotate: 180deg; } } } [popover] { position-area: bottom span-left; position-try-fallbacks: flip-block, flip-inline; margin: 5px 0 0 0; max-width: calc(100vw - 2 * var(--s-1, 16px)); background-color: var(--bg-500); border-radius: var(--r-s); border: solid 1px var(--border-1); box-shadow: 0 0 20px var(--shadow-1); opacity: 0; transform: translateY(-4px); transition: opacity .15s ease-out, transform .15s ease-out, overlay .15s allow-discrete, display .15s allow-discrete; } [popover]:popover-open { opacity: 1; transform: translateY(0); } @starting-style { [popover]:popover-open { opacity: 0; transform: translateY(-4px); } } [popover] a, [popover] span { padding: var(--s-075); display: flex; align-items: center; gap: var(--s-075); border-bottom: solid 1px var(--border-1); color: var(--text); cursor: pointer; min-width: 200px; &:last-child { border-bottom: none; } &:hover { background-color: var(--bg-300); } & svg { width: .9rem; &:last-child { margin-left: auto; } } } @media (max-width: 768px) { [popover] { position-area: none; position-try-fallbacks: none; top: auto; right: 0; bottom: 0; left: 0; width: 100%; max-width: 100%; margin: 0; border-radius: var(--r) var(--r) 0 0; border-bottom: none; box-shadow: 0 -10px 30px var(--shadow-1); max-height: 85vh; overflow-y: auto; padding-bottom: env(safe-area-inset-bottom, 0px); transform: translateY(100%); transition: opacity .25s ease-out, transform .25s ease-out, overlay .25s allow-discrete, display .25s allow-discrete; } [popover]::backdrop { background: rgba(0, 0, 0, 0.5); } html:has([popover]:popover-open), body:has([popover]:popover-open) { overflow: hidden; } @starting-style { [popover]:popover-open { opacity: 0; transform: translateY(100%); } } } [data-simple-uploader] { display:flex; gap:var(--s-1); --img-width:50px; --img-small:30px; & label { cursor: pointer; background-color: var(--bg-400); border:dashed 2px var(--accent); border-radius:var(--r-s); width:var(--img-width); aspect-ratio: 1; display:flex; gap:var(--s-05); flex-direction: column; align-items: center; justify-content: center; text-align: center; font-size:.6rem; & input { display: none; } & svg { width:var(--s-1); fill:var(--accent); } &.no_border { border:none; background-color: transparent; padding:0px; width:fit-content; & svg { width: 1.3rem; } } } & .previews { &:empty { display:none; } & img { width:var(--img-width); aspect-ratio: 1; object-fit: cover; border-radius:var(--r-s); border: solid 1px var(--border-1); } & .preview-item { width:var(--img-width); height:var(--img-width); } } } [data-sticky-control] { z-index: 2; transition: background-color 0.3s ease; } [data-sticky-control].is-sticky { background-color: var(--bg-500); margin:0px calc(0px - var(--main-padding) ); border-bottom:solid 1px var(--border-1); box-shadow: 0px 1px 5px var(--bg-800); } [data-surface] { border-radius: var(--r-s); background-color: var(--bg-500); border:solid 1px var(--border-1); &.padding-1 { padding:var(--s-1); } } [data-uploader-progress] { & label { display:flex; flex-direction: column; gap:var(--s-2); align-items: center; justify-content: center; border-radius: var(--r-s); border:dashed 3px var(--accent); width:100%; background-color:var(--bg-500); cursor:pointer; padding:var(--s-2); input[type="file"] { display: none; } &:hover { background-color:var(--bg-400); } & .plus { display:flex; align-items: center; justify-content: center; background-color:var(--background-400); border:dashed 3px var(--border-1); border-radius:var(--s-05); width:75px; aspect-ratio: 1; & svg { } } & .descr { font-weight:bold; } & .max { color:var(--text-muted); } } } .empty_state { width:100%; max-width:600px; display:flex; flex-direction: column; gap:var(--s-3); text-wrap:balance; text-align: center; & .image { width:80%; max-width:450px; margin:0px auto; & img { max-width:100%; aspect-ratio: 16/9; object-fit: cover; margin:0px auto; border-radius:var(--s-05); box-shadow: 0px 0px 30px var(--bg-700); } } } .empty_card { position: relative; overflow: hidden; width: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: var(--s-1); text-align: center; padding: var(--s-2) var(--s-1-5); border-radius: var(--r-base); background: var(--bg-500); border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); &::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 25%, color-mix(in srgb, var(--accent) 10%, transparent) 45%, color-mix(in srgb, var(--accent2) 10%, transparent) 60%, transparent 75%); background-size: 200% 100%; animation: empty_shimmer 4s ease-in-out infinite; pointer-events: none; } & .image { position: relative; z-index: 1; width: 100%; max-width: 340px; & img { width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: var(--r-base); box-shadow: 0 0 40px color-mix(in srgb, var(--accent) 25%, transparent); } } & h1, & h2 { position: relative; z-index: 1; font-size: 1.5rem; font-weight: 900; letter-spacing: -.02em; background: linear-gradient(90deg, var(--accent), var(--accent2)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } & .empty_text { position: relative; z-index: 1; color: var(--text-muted); line-height: 1.6; } & .empty_link { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: var(--s-05); color: var(--accent); font-weight: 700; font-size: var(--font-size-small); & svg { fill: var(--accent); } &:hover { color: var(--accent-hover); } } } @keyframes empty_shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @layer core { * { box-sizing: border-box; margin:0px; padding:0px; scroll-margin-top:calc( var(--header-height) + var(--s-1) ); } html { font-size:var(--font-base); } a { color:var(--a); text-decoration:none; cursor:pointer; &:hover { color:var(--a-hover); & svg { fill: var(--a-hover); } } & span.tag.number { padding:3px 5px; line-height:1; font-size:var(--font-size-small); border-radius: 500px; background-color:var(--bg-200); color:var(--text); font-weight: 600; } } & span.delete, & a.delete { & svg { fill: var(--error); } } img { font-size:1px; } .small { font-size:.7rem; } .text_ellipsis { overflow:hidden; white-space: nowrap; width:100%; text-overflow: ellipsis; } img { display:block; } .ta-center { text-align: center; } .ta-right { text-align: right; } .none { display:none; } * { scrollbar-width: none; } *::-webkit-scrollbar { display: none; } & svg { width: 1rem; aspect-ratio: 1; fill: color-mix(in srgb, var(--svg-fill) 90%, transparent 30%); align-self: center; display:block; transition: transform 0.3s ease; } & span { & svg { cursor:pointer; } } a:hover, span:hover, label:hover { & svg { transition: transform 0.4s ease-in-out; transform: rotate(360deg); } } pre { position: relative; z-index: 999999; display: block; width: fit-content; height: fit-content; margin: 2px 0; padding: var(--s-2); background-color: color-mix( in srgb, var(--bg) 100%, transparent 10% ); grid-column: 1 / -1; } .center_page { display:flex; width:100%; height:100%; align-items:center; justify-content:center; flex-direction:column; gap:var(--gap-1); text-wrap:balance; text-align: center; & div.image { width:100%; & img { width:100%; aspect-ratio: 16/9; object-fit: cover; max-width:450px; margin:0px auto; border-radius:var(--r-s); background-color:var(--bg-300); } } &.left { text-align: left; } } .center { text-align: center; } .block { display:flex; flex-direction: column; gap:var(--gap-1); & h3 { text-transform:uppercase; font-size:.8rem; font-weight:600; color:var(--text-muted); line-height:1; } } a.back_link { display:flex; gap:var(--s-05); align-items: center; } .error_text { color:var(--error); } } .text_small { font-size: var(--font-size-small); & svg { width: var(--font-size-small); } } .text_small-2 { font-size: var(--font-size-small-2); & svg { width: var(--font-size-small-2); } } .text_muted { color:var(--text-muted); & svg { fill:var(--text-muted); } } .text_balance { text-wrap: balance; } .text_medium { font-size: var(--font-size-medium); & svg { width: var(--font-size-medium); } } .pointer { cursor:pointer; } & .b { font-weight: 600; } hr { border:solid 1px color-mix(in srgb, var(--border-1) 50%, transparent); } .padd-1 { padding:var(--s-1); } .ellipsis { overflow:hidden; white-space: nowrap; width:100%; text-overflow: ellipsis; } .flex { display:flex; &.inline { display:inline-flex; } &.flex1 { flex:1; } &.flex2 { flex:2; } &.w100 { width:100%; } &.gap010 { gap:.1rem; } &.gap025 { gap:.25rem; } &.gap05 { gap:.5rem; } &.gap1 { gap:1rem; } &.gap1-5 { gap:1.5rem; } &.gap2 { gap:2rem; } &.gap3 { gap:3rem; } &.gap4 { gap:4rem; } &.gap5 { gap:clamp(3rem, 12vw, 5rem); } &.column { flex-direction: column; } &.row { flex-direction: row; } &.ai-start { align-items: start; } &.ai-center { align-items: center; } &.jc-center { justify-content: center; } &.jc-right { justify-content: right; } &.jc-sb { justify-content:space-between; } &.c { text-align: center; } & .ml-auto { margin-left:auto; } & .mt-auto { margin-top:auto; } } @container form (width < 500px) { .flex { &.row-to-column { flex-direction: column; } } } .grid { display:grid; &.gap1 { gap:var(--s-1); } &.auto_1fr { grid-template-columns: auto 1fr; } &.w50px_1fr { grid-template-columns: 50px 1fr; } &.w70px_1fr { grid-template-columns: 70px 1fr; } &._1fr_w80 { grid-template-columns: 1fr 80px; } &._1fr_w100 { grid-template-columns: 1fr 100px; } &._1fr_1fr { grid-template-columns: 1fr 1fr; } &._1fr_1fr_1fr_1fr { grid-template-columns: 1fr 1fr 1fr 1fr; } & > div { &:nth-child(odd) { } & .title { font-weight:bold; color:var(--text-full); font-size:var(--font-size-medium); line-height:1.5; } & .value { color:var(--text-muted); font-size:var(--font-size-small); line-height:1; } } & .ico { width: 100%; aspect-ratio: 1; & img { margin-top:3px; width:100%; aspect-ratio: 1; border-radius:var(--r-ss); border: solid 1px var(--border-1); } } } .error { display:flex; flex-direction: column; gap:var(--s-3); background-color: var(--bg); padding:var(--s-1); border-radius:var(--s-05); max-width:1000px; margin:0px auto; width:100%; border:solid 1px var(--bg-700); box-shadow: 0px 0px 30px var(--bg-700); & h1 { text-align: center; font-size:clamp(1.2rem, 6vw, 3rem); } h2 { font-weight:400; text-align: center; font-size:clamp(1rem, 4vw, 1.5rem); } & .gamepad { display: flex; align-items: center; justify-content: center; animation: gamepad 1.5s ease-in-out infinite; transform-origin: center center; svg { width: 5rem; } } & .for_search { & .flex_row { display:flex; gap:var(--s-1); & .search { } & .btn { width:fit-content; } } } } @keyframes gamepad { 0%, 100% { transform: rotate(0deg) translateY(0); } 25% { transform: rotate(8deg) translateY(-3px); } 75% { transform: rotate(-8deg) translateY(-3px); } } @keyframes gamepad { 0%, 100% { transform: rotate(0deg) scale(1); } 30% { transform: rotate(10deg) scale(1.05); } 60% { transform: rotate(-10deg) scale(1.05); } } @layer core { .form { --form-radius: var(--s-05); display:flex; width:100%; height:100%; flex-direction: column; container: form / inline-size; &.auto_height { height:auto; } &.no_border { & .row { border:none; } } & .block { display:flex; width:100%; flex-direction: column; gap:var(--s-1); } & .row { display:flex; align-items: center; width:100%; flex-direction: row; gap:clamp( var(--s-075), 2vw, var(--s-1) ); padding:var(--s-1); background-color: var(--bg-500); border:solid 1px var(--border-1); border-bottom:none; container: form_row / inline-size; &.padding-025 { padding:var(--s-025); } & > div { flex:1 1 0; width:100%; & > div:first-child { font-weight:500; } & > div { &:last-child { font-size:var(--font-size-small); } } } &:first-child { border-top-left-radius: var(--form-radius); border-top-right-radius: var(--form-radius); } &:last-child { border-bottom-left-radius: var(--form-radius); border-bottom-right-radius: var(--form-radius); border-bottom:solid 1px var(--bg-200); } & .small { font-size:.8rem; } & .switch { display:flex; gap:var(--s-05); align-items:center; justify-content: space-between; } & .text_muted { color:var(--text-muted); } &:has(.switch) { display:flex; align-items: center; flex-direction: row; & > div { flex:initial; &:first-child { } } & .switch { width:fit-content; flex-shrink: 1; } } &.column { flex-direction: column; } } & input:-webkit-autofill { -webkit-text-fill-color: var(--text) !important; caret-color: var(--text) !important; } & input:-webkit-autofill::first-line { color: var(--text) !important; } & input[type=submit], & a.button, & span.button { cursor:pointer; width:100%; padding:var(--s-1); border-radius:var(--form-radius); border: none; background: var(--accent); color:var(--accent-text); text-transform: uppercase; text-align:center; font-weight:500; letter-spacing:1px; &:hover { background: var(--accent-hover); } } & a.button, & span.button { width:fit-content; } & input[type=text], & input[type=password], & input[type=number], & input[type=date], & input[type=datetime-local], & input[type=tel], & input[type=time], & select, & textarea { width:100%; padding:var(--s-05) 0px; line-height:1; border-radius:var(--form-radius); border: solid 1px var(--border-1); padding:var(--s-075) var(--s-1); line-height:1; color:var(--input-text); background-color: var(--bg); font-weight:300; font-size:var(--s-1); font-family:var(--font-family-base); &:focus { outline:none; background-color: var(--bg); } &::placeholder { color: var(--text-muted); } &:-webkit-autofill:hover { -webkit-box-shadow: 0 0 0px 1000px var(--input-bg) inset !important; -webkit-text-fill-color: var(--text) !important; background-color: var(--input-bg) !important; border-color: var(--input-border-focus) !important; font-size:1rem; } &:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px var(--bg) inset; -webkit-text-fill-color: var(--text); transition: background-color 5000s ease-in-out 0s; font-size:1rem; } &:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px var(--input-bg) inset, inset 1px 1px 1px var(--shadow-1); -webkit-text-fill-color: var(--text); font-size:1rem; } &.input-border-error { border:solid 1px var(--error); } } & input[type=time] { width:120px; } textarea { field-sizing: content; resize: none; overflow: hidden; min-height: 5rem; line-height: 1.5; } input:disabled, input[readonly] { color: var(--text-muted-2); &::placeholder { color: var(--color-light-muted); } } input[type="date"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { filter: var(--picker-icon); } &.grid { display:flex; gap:var(--s-1); min-height:0; height:100%; & .body { flex:1; min-height:0; height:30%; border-radius:var(--s-05); overflow-y:auto; } & .submit { position:sticky; bottom:var(--main-padding); } } } .quick_edit_actions { display:flex; gap:var(--s-075); margin-top:var(--s-075); & button { cursor:pointer; padding:var(--s-075) var(--s-1); border-radius:var(--r); border: none; background: var(--accent); color:var(--accent-text); text-align:center; font-weight:500; letter-spacing:1px; &:hover { background: var(--accent-hover); } } } @container form (width < 800px) { .form { &.grid { & .submit { border-radius:var(--s-05); position:sticky; bottom:calc( calc( var(--main-padding) / 2 ) + var(--header-height) ); } } & .row { align-items: start; flex-direction: column; } } } } @layer core { .form { & .checkboxes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-1) var(--s-2); container: checkboxes / inline-size; & label { display: flex; align-items: center; gap: var(--s-1); cursor: pointer; word-break: break-all; & input { appearance: none; width: 1.6rem; height: 1.6rem; aspect-ratio: 1/1; -webkit-appearance: none; border-radius: 15px; cursor: pointer; transition: all 0.2s ease; background-color: var(--bg-100); &:hover { box-shadow: inset 0px 2px 1px var(--shadow-2); } &:checked { background-color: var(--accent); border: solid 1px var(--accent); box-shadow: inset 0px 0px 0px var(--accent); } &:focus { outline: 2px solid var(--color-primary); outline-offset: 2px; } &[type=checkbox] { border-radius: var(--r-ss); } } &.flex { background-color: var(--bg-500); padding:var(--s-1); border-radius: var(--r-s); border: solid 1px var(--border-1); &:has(input:checked) { background-color: var(--bg-300); border: solid 1px var(--accent); } & input { margin-top:5px; } } word-wrap: break-word; overflow-wrap: break-word; word-break: keep-all; hyphens: auto; line-break: strict; } &.input-border-error { border: 1px solid var(--error) !important; border-radius: var(--r-s); padding: var(--s-1); } } .switch { --track-width: 50px; & label { display: flex; align-items: center; gap: var(--s-1); cursor: pointer; & input { appearance: none; width: var(--track-width); aspect-ratio: 2 / 1; margin: 0; border-radius: 999px; background: var(--bg-200); border: solid 2px var(--border-1); padding:var(--s-075); position: relative; cursor: pointer; transition: .2s; &::after { content: ""; position: absolute; width: calc(var(--track-width) / 2 - 6px); height: calc(var(--track-width) / 2 - 6px); top: 2px; left: 3px; border-radius: 50%; background: var(--shadow-1); transition: .2s; } &:checked { border: solid 1.5px var(--accent); background: color-mix(in srgb, var(--accent) 20%, transparent); &::after { transform: translateX(calc(var(--track-width) / 2)); background: color-mix(in srgb, var(--accent) 70%, transparent); } } &:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } } } } } @container form_row (width < 550px) { .form { & .checkboxes { grid-template-columns: 1fr; } } } } .form { & .uploader { & label { display:flex; gap:var(--s-1); width:fit-content; background-color: var(--accent); border-radius:var(--s-5); color:var(--accent-text); padding:var(--s-05) var(--s-2); cursor:pointer; font-weight:400; & input[type=file] { display:none; } & svg { fill:var(--accent-text); } &:hover { background-color: var(--accent-hover); } } & .previews { display:flex; flex-wrap:wrap; & > div { width:80px; aspect-ratio: 1; position:relative; & img { cursor:pointer; width:100%; aspect-ratio: 1; object-fit: cover; border-radius:var(--s-05); border:solid 1px var(--border-600); } & span.delete { cursor:pointer; position:absolute; top:-8px; right:-8px; display:flex; align-items: center; justify-content: center; width:35px; aspect-ratio: 1; line-height: 1; border-radius:500px; background-color: color-mix(in srgb, var(--error) 100%, transparent 70%); color:#FFF; &:hover { background-color:var(--error); } } } } } } label.disabled { opacity:0.5; pointer-events: none; filter: grayscale(1); } @layer core { h1, h2, h3 { font-weight:500; } h1 { font-size:clamp(1.2rem, 6vw, 2rem); } h2 { font-size:clamp(1.1rem, 5vw, 1.6rem); } } @layer core { html { --aside-left-width:350px; --aside-right-width:310px; container: html / inline-size; min-height:100dvh; & body { display:grid; min-height:100dvh; grid-template-columns: var(--aside-left-width) 1fr var(--aside-right-width); grid-template-rows: var(--header-height) 1fr var(--header-height); background-color: var(--bg); color: var(--text); font-size:clamp( .9rem, 2vw, var(--font-size-base) ); line-height:1.7; font-family:var(--font-family-base); font-weight:var(--font-weight-base); letter-spacing:0.2px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; grid-template-areas: "side_left header header" "side_left main side_right" "side_left footer footer" ; & aside.left { left:calc( 0px - var(--aside-left-width) - 50px ); left:0px; border-right:solid 1px var(--border-1); grid-area: side_left; width:var(--aside-left-width); &.active { left:0px; } } & aside.right { grid-area: side_right; width:var(--aside-right-width); &.active { right:0px; } } & aside { height:100%; z-index:9; transition: all .3s ease-in-out; & span.close { display:none; } } & header { display:flex; align-items: center; height:var(--header-height); background-color: var(--bg-500); border-bottom:solid 1px var(--border-1); grid-area: header; & .top_links { display:flex; gap:var(--s-05); align-items: center; justify-content: center; width:100%; & a { display:flex; flex-direction: column; gap:3px; align-items: center; justify-content: center; transition: all .5s; font-weight:600; padding:var(--s-05) var(--s-1); font-size:.6rem; & svg { width:1.1rem; flex-shrink:0; } &:hover { background-color: var(--accent); color:var(--accent-text); border-radius:var(--s-05); & svg { fill: var(--accent-text); } } &.active { background-color: var(--accent); color:var(--accent-text); border-radius:var(--s-05); & svg { fill:var(--accent-text); } } } } & .right_head { display:flex; align-items: center; gap:var(--s-05); margin-left:auto; & span { display:flex; align-items: center; justify-content: center; cursor:pointer; width: 40px; aspect-ratio: 1; padding: var(--s-025); border-radius:500px; transition: all .5s; &:hover { background-color: var(--accent); & svg { fill:var(--accent-text); } } &.avatar { border:solid 3px var(--accent); } & img { width:100%; aspect-ratio: 1; object-fit: cover; border-radius:500px; } } & svg { width:1.2rem; } } & span.menu { display:none; } } & header , & footer { display:flex; align-items: center; z-index:9; & a { color:var(--text); } } & footer { border-top:solid 1px var(--border-1); display:flex; gap:var(--s-1); padding:var(--s-1); font-size:.8rem; grid-area: footer; background-color: var(--bg-500); } & header { position:sticky; top:0px; display:flex; gap:var(--main-padding); align-items: center; width:100%; padding:0px var(--main-padding); padding-top:var(--progress-line-height); & svg { width:1.7rem; } & .logo { display:flex; align-items: end; gap:var(--s-1); & svg { width:6rem; aspect-ratio: auto; } } & .right { margin-left:auto; } } #main { display:flex; flex-direction: column; gap:var(--gap-1); grid-area: main; width:100%; min-height:100%; max-width:1350px; margin:0px auto; padding:var(--main-padding-top) var(--main-padding); container: main / inline-size; } & .search_holder { display:none; } } } @media screen and ( width < 1500px) { html { --aside-left-width:300px; --aside-right-width:280px; } } @media screen and ( width < 1400px) { html { --aside-left-width:290px; --aside-right-width:250px; } } @container html ( width < 1600px ) { html { & body { grid-template-columns: var(--aside-left-width) 1fr; grid-template-areas: "side_left header" "side_left main" "side_left footer"; & .side_bottom { display:flex !important; } & aside.right { --aside-right-width:300px; right:calc( 0px - var(--aside-right-width) - 50px ); & span.close { display:flex; } &.active { right:0px; } } } } } @container html ( width < 800px ) { html { & body { grid-template-columns: 1fr; grid-template-rows:var(--header-height) 1fr; grid-template-areas: "header" "main" ; & header { & span.menu { display:flex; } } & aside { position:fixed; top:0px; z-index:var(--aside-z-index); & span.close { display:flex; } &.left { left:calc( 0px - var(--aside-left-width) - 50px ); &.active { left:0px; } } &.right { right:calc(0px - var(--aside-right-width) - 50px); &.active { right:0px; } } } & footer { display:none; } } } } } @layer core { .labels { flex-shrink: 0; display:flex; gap:var(--s-05); align-items: center; overflow-x: auto; flex-wrap:wrap; & span { --font-size:.5rem; &.original { --color: var(--color-2-bg); } &.mod { --color: var(--color-1-bg); } &.mod_free_shopping { --color: var(--color-3-bg); } &.unlocked { --color: var(--color-5-bg); } &.mod_no_adv { --color: var(--color-6-bg); } &.mod_money { --color: var(--color-7-bg); } &.premium { --color: var(--color-8-bg); } &.pro { --color: var(--color-4-bg); } &.modder { --color: var(--color-5-bg); } &.admin { --color: var(--accent2); } &.user { --color: var(--color-1-bg); } &.rating { --color: var(--color-orange-bg); & svg { fill:var(--color-orange-text); } } &.actual_version { --color: var(--success); } & svg { width: var(--font-size); } min-width:0; flex-shrink: 0; display:flex; align-items: center; background-color: color-mix(in srgb, var(--color) 25%, transparent); border:solid 1px var(--color); color:var(--text-full); gap:var(--s-025); letter-spacing:1px; text-transform: uppercase; font-weight:550; font-size:var(--font-size); padding:1px 4px; border-radius:3px; } } } #progress_line { position: fixed; top:0; left: 0; width: 100%; height: var(--progress-line-height); background: var(--accent); z-index: 100; animation: line_progress 2s linear; animation-timeline: scroll(); } @keyframes line_progress { 0% { width: 0%; } 100% { width: 100%; } } .modal_offscreen { z-index:1; left:0px; top:0px; position:absolute; } .modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 10000; display: flex; align-items: center; justify-content: center; padding: var(--s-1); animation: fadeIn 0.2s ease forwards; } .modal { display:flex; gap: var(--s-2); text-align: center; flex-direction: column; align-items: center; justify-content: center; background-color: var(--bg-500); border-radius: var(--s-1, 8px); box-shadow: 0 10px 30px #222; min-width: 300px; max-width: 500px; width: 100%; animation: modalSlideIn 0.3s ease forwards; border: solid 1px var(--border-1); overflow: hidden; padding: var(--s-2, 16px); .modal-body { color: var(--text); line-height: 1.5; } .modal-footer { display: flex; gap: var(--s-1); } } .modal-btn { padding: var(--s-1, 8px) var(--s-2, 16px); border-radius: var(--s-05, 4px); border: solid 1px var(--border-1); background-color: var(--bg-400); color: var(--text); cursor: pointer; font-weight: 500; transition: all 0.2s ease; &:hover { background-color: var(--bg-300); } &:active { transform: translateY(1px); } } .modal-btn-primary { background-color: var(--accent); color: var(--accent-text); border-color: var(--accent); &:hover { background-color: var(--accent-hover); } } .modal-btn-danger { background-color: var(--error); color: var(--error-text); border-color: var(--error); &:hover { background-color: color-mix(in srgb, var(--error) 100%, var(--bg-500) 40% ); } } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalSlideIn { from { opacity: 0; transform: translateY(-20px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes modalSlideOut { from { opacity: 1; transform: translateY(0) scale(1); } to { opacity: 0; transform: translateY(-20px) scale(0.95); } } .modal-overlay.closing { animation: fadeOut 0.2s ease forwards; } .modal.closing { animation: modalSlideOut 0.3s ease forwards; } @keyframes fadeOut { to { opacity: 0; } } @layer core { .side_bar_inform_div { display:flex; flex-direction: column; gap:var(--s-1); background: var(--aside-bg-surface); padding:var(--s-1); border-radius:var(--s-05); & .photo { display:flex; width:fit-content; padding:var(--s-1); align-items: center; justify-content: center; margin:0px auto; border-radius:500px; background-color: var(--color-1); & svg { fill:var(--accent-text); width:60px; } } & .title { margin:0px auto; font-size:1.1rem; font-weight:400; } } & .user_sidebar_icons { display:flex; gap:var(--s-1); align-items: center; justify-content: space-between; & > a { flex:1; display:flex; justify-content: center; padding: var(--s-1); border-radius:var(--s-05); border:solid 1px var(--bg-200); background: radial-gradient( var(--bg-600), var(--bg-700)) ; &:hover { background-color: var(--bg-200); } & svg { fill:var(--text); } } } } .side_bottom { display:flex; flex-direction: column; width:100%; cursor:pointer; padding:var(--s-1); margin-top:auto; font-size:var(--font-size-small); & .row { display:flex; padding:var(--s-1); align-items: center; justify-content: space-between; background-color: var(--bg-400); color:var(--text); &:first-child { border-bottom:solid 1px var(--border-1); } &:hover { background-color: var(--bg-300); } &:first-child { border-top-left-radius:var(--r-s); border-top-right-radius:var(--r-s); } &:last-child { border-bottom-left-radius:var(--r-s); border-bottom-right-radius:var(--r-s); } & .languages { display:flex; gap:var(--s-05); background-color: var(--bg-200); border-radius:var(--r-s); padding:var(--s-025); } & span.lang { padding:var(--s-025); line-height:1; font-size:var(--font-size-small-2); border-radius:5px; &.active { color:var(--accent-text); background-color: var(--accent); } } } } .colors { & span { &:nth-child(1) { --bg: var(--color-1-bg); --color:var(--color-1-text); & svg { fill: var(--color); } } &:nth-child(2) { --bg: var(--color-2-bg); --color:var(--color-2-text); & svg { fill: var(--color); } } &:nth-child(3) { --bg: var(--color-3-bg); --color:var(--color-3-text); & svg { fill: var(--color); } } &:nth-child(4) { --bg: var(--color-4-bg); --color:var(--color-4-text); & svg { fill: var(--color); } } &:nth-child(5) { --bg: var(--color-5-bg); --color:var(--color-5-text); & svg { fill: var(--color); } } &:nth-child(6) { --bg: var(--color-6-bg); --color:var(--color-6-text); & svg { fill: var(--color); } } &:nth-child(7) { --bg: var(--color-7-bg); --color:var(--color-7-text); & svg { fill: var(--color); } } &:nth-child(8) { --bg: var(--color-8-bg); --color:var(--color-8-text); & svg { fill: var(--color); } } &:nth-child(9) { --bg: var(--color-9-bg); --color:var(--color-9-text); & svg { fill: var(--color); } } &:nth-child(10) { --bg: var(--color-10-bg); --color:var(--color-10-text); & svg { fill: var(--color); } } background-color: var(--bg); color:var(--color); & svg { fill: var(--color); } } &.opacity { & span { background-color: color-mix(in srgb, var(--bg) 20%, transparent); } } & a { &:nth-child(1) { & svg { fill: var(--color-1-bg); } } &:nth-child(2) { & svg { fill: var(--color-2-bg); } } &:nth-child(3) { & svg { fill: var(--color-3-bg); } } &:nth-child(4) { & svg { fill: var(--color-4-bg); } } &:nth-child(5) { & svg { fill: var(--color-5-bg); } } &:nth-child(6) { & svg { fill: var(--color-6-bg); } } &:nth-child(7) { & svg { fill: var(--color-7-bg); } } &:nth-child(8) { & svg { fill: var(--color-8-bg); } } &:nth-child(9) { & svg { fill: var(--color-9-bg); } } &:nth-child(10) { & svg { fill: var(--color-10-bg); } } } } .table { --radius: var(--s-05); display:flex; flex-direction: column; & .row { display:flex; background-color: var(--bg-100); padding:var(--s-1); border:solid 1px var(--border-1); border-bottom:none; background-color: var(--bg-500); width:100%; &:first-child { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } &:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); border:solid 1px var(--bg-300); } &:hover { background-color:var(--bg-400); } & > div { &.w50 { flex:1; width:50%; } & .ellipsis { overflow:hidden; white-space: nowrap; text-overflow: ellipsis; } & > div { overflow-wrap: anywhere; word-break: break-word; } } } &.column { & .row { width:100%; align-items: flex-start; } } } .table_list { --radius: var(--s-05); --svg-fill: var(--accent); display:flex; width:100%; flex-direction: column; container-type: inline-size; container-name: table_list_container; overflow:hidden; & .row { display:grid; align-items: center; grid-template-columns: var(--cols, auto 1fr auto); gap: var(--s-1); padding:var(--s-1); border:solid 1px var(--bg-300); border-bottom:none; color:var(--text); font-size:clamp( .8rem, 3.5vw, 1rem ); & .svg { & svg { fill: var(--text-muted); width:1.2rem; } } & div.ellipsis, & a.ellipsis { width:100%; white-space: nowrap; display:block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; & span { width:100%; display:block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } } &:first-child { border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } &:last-child { border-bottom-left-radius: var(--radius); border-bottom-right-radius: var(--radius); border-bottom:solid 1px var(--bg-300); } &:nth-child(odd) { background-color: var(--bg-450); } &:nth-child(even) { background-color: var(--bg-500); } &:hover { background-color: var(--bg-450); } & .item_status_round { display:flex; width:var(--s-1); aspect-ratio: 1; background-color: var(--error); border-radius:500px; &._1 { background-color: var(--success); } } & .options { display:flex; align-items: center; justify-content: center; gap:var(--s-05); & a, & span { cursor:pointer; flex-shrink: 0; display:flex; align-items: center; justify-content: center; aspect-ratio: 1; width:48px; height:48px; padding:var(--s-075); border-radius:50px; background-color: var(--bg-400); border: solid 1px var(--border-1); & svg { width:1rem; fill:var(--text); } &:hover { background-color: var(--bg-500); } &.delete { color:var(--error); & svg { fill: var(--error); } } } & .options_mobile_menu, .options_mobile_menu_close { display: none; } } & div.ico { & img { aspect-ratio: 1; object-fit: cover; border-radius:var(--s-05); width:100%; border: solid 3px var(--bg-300); } } & > div.photo { position:relative; & img { width:100%; aspect-ratio: 1; object-fit: cover; border-radius:50px; border: solid 3px transparent; } & span:is(.online, .offline) { position:absolute; top:0px; right:0px; display:flex; width:1px; aspect-ratio: 1/1; border-radius:100px; animation: opacity 2s ease-in-out infinite; &.online { border:solid 10px var(--success); } &.offline { border:solid 10px var(--error); } } } & > div { white-space: nowrap; overflow: hidden; & .ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width:100%; } } &.head { font-weight:800; color:var(--accent); } & > div:nth-child(1) { justify-self: var(--align-1, center); text-align: var(--align-1, center); } & > div:nth-child(2) { justify-self: var(--align-2, center); text-align: var(--align-2, center); } & > div:nth-child(3) { justify-self: var(--align-3, center); text-align: var(--align-3, center); } & > div:nth-child(4) { justify-self: var(--align-4, center); text-align: var(--align-4, center); } & > div:nth-child(5) { justify-self: var(--align-5, center); text-align: var(--align-5, center); } & > div:nth-child(6) { justify-self: var(--align-6, center); text-align: var(--align-6, center); } & div:last-child() { justify-self: center; } & .multi_rows { display:flex; flex-direction: column; gap:var(--s-05); & .title { font-weight:bold; } & .size, & .date { font-size:.8rem; } } } @container table_list_container (width < 700px) { .row { position: relative; grid-template-columns: var(--cols-mobile, 35px 35px 1fr auto ); & .hide_on_mobile { display:none; } & .options { & .option_id { display:flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 0; z-index: 2; height:100%; width:100%; background-color: color-mix(in srgb, var(--bg-500) 95%, transparent); backdrop-filter: blur(5px); opacity: 0; transform: translateX(-100%) translateY(-50%); transition: all 0.3s ease; pointer-events: none; &.active { opacity: 1; transform: translate(0px, -50%); pointer-events: all; } } & .options_mobile_menu, .options_mobile_menu_close { display: flex; } & a, & span { background-color: var(--surface-1); } } &:first-child { & .options { & .option_id { border-top-left-radius: var(--s-05); border-top-right-radius: var(--s-05); } } } &:last-child { & .options { & .option_id { border-bottom-left-radius: var(--s-05); border-bottom-right-radius: var(--s-05); } } } } } @container table_list_container (width < 400px) { & .row { overflow-x:auto; grid-auto-flow: row; } } &.empty { & .row { grid-template-columns: 1fr; } } } .toast-container { position: fixed; top: 20px; right: 20px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; max-width: 300px; } .toast { padding: var(--s-1) var(--s-2); border-radius: var(--r-s); color: white; box-shadow: 0 4px 12px var(--shadow-1); animation: slideIn 0.3s ease forwards, slideOut 0.3s ease 4.7s forwards; display: flex; gap:var(--s-05); align-items: center; justify-content: space-between; min-width: 280px; position: relative; overflow: hidden; &.short { animation: slideIn 0.3s ease forwards, slideOut 0.3s ease 2.7s forwards; } &::before { content: ''; position: absolute; bottom: 0; left: 0; height: 5px; width: 100%; background: rgba(255, 255, 255, 0.3); transform-origin: left center; animation: progressShrink 3.5s linear forwards; } &.short::before { animation: progressShrink 2s linear forwards; } } .toast-success { background-color: var(--success); } .toast-info { background-color: var(--info); } .toast-error { background-color: var(--error); } .toast-neutral { background-color: #6c757d; } .toast-close { background: none; border: none; color: white; font-size: 20px; cursor: pointer; margin-left: 10px; opacity: 0.7; padding: 0; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; } .toast-close:hover { opacity: 1; } @keyframes slideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes progressShrink { from { transform: scaleX(1); } to { transform: scaleX(0); } } @keyframes slideOut { to { transform: translateX(100%); opacity: 0; } } [data-theme="dark"] .toast-success { background-color: #155724; } [data-theme="dark"] .toast-info { background-color: #0c5460; } [data-theme="dark"] .toast-error { background-color: #721c24; } [data-theme="dark"] .toast-neutral { background-color: #343a40; } [data-theme="dark"] .toast { box-shadow: 0 4px 12px rgba(0,0,0,0.3); } ul, ol { margin: 0; padding: 0; list-style-position: inside; } html { --h:220; --s:18%; --l-bg: 97%; --l:100%; --a-h: 199; --a-s: 66%; --a-l: 50%; --bg: hsl(var(--h), var(--s), var(--l-bg)); --text: hsl(var(--h), var(--s), 0% ); --text-full: hsl(0, 0%, 0%); --text-muted: hsl(var(--h), var(--s), 35% ); --text-muted-2: hsl(var(--h), var(--s), 50% ); --a: hsl(198, 63%, 37%); --a-hover: hsl( var(--a-h), var(--s), 25% ); --svg-fill: var(--text); --accent: hsl( var(--a-h), var(--a-s), var(--a-l) ); --accent-hover: hsl( var(--a-h), var(--a-s), calc( var(--a-l) - 5% ) ); --accent-text: hsl(var(--a-h), var(--a-s), 97%); --accent-muted: hsl( var(--a-h), calc( var(--a-s) - 75% ), calc( var(--a-l) + 20% ) ); --accent-02: color-mix(in srgb, var(--accent) 2%, transparent); --accent-05: color-mix(in srgb, var(--accent) 5%, transparent); --accent-10: color-mix(in srgb, var(--accent) 10%, transparent); --accent-20: color-mix(in srgb, var(--accent) 20%, transparent); --accent-30: color-mix(in srgb, var(--accent) 30%, transparent); --accent-40: color-mix(in srgb, var(--accent) 40%, transparent); --accent-50: color-mix(in srgb, var(--accent) 50%, transparent); --accent-60: color-mix(in srgb, var(--accent) 60%, transparent); --accent-70: color-mix(in srgb, var(--accent) 70%, transparent); --accent-80: color-mix(in srgb, var(--accent) 80%, transparent); --accent-90: color-mix(in srgb, var(--accent) 90%, transparent); --accent-100: color-mix(in srgb, var(--accent) 100%, transparent); --bg-500: hsl(var(--h), var(--s), var(--l)); --bg-450: hsl(var(--h), var(--s), calc(var(--l) - 1%)); --bg-400: hsl(var(--h), var(--s), calc(var(--l) - 3%)); --bg-300: hsl(var(--h), var(--s), calc(var(--l) - 6%)); --bg-200: hsl(var(--h), var(--s), calc(var(--l) - 9%)); --bg-100: hsl(var(--h), var(--s), calc(var(--l) - 12%)); --border-1: hsl(var(--h), var(--a-s), calc(var(--l) - 12%)); --aside-left-bg: #e5ebf1; --aside-bg-hover: #cedded; --aside-right-bg: #e4e7f6; --aside-text: #041425; --a2-h: 328; --a2-s: 97%; --a2-l: 48%; --accent2: hsl( var(--a2-h), var(--a2-s), var(--a2-l) ); --accent2-hover: hsl( var(--a2-h), var(--a2-s), calc( var(--a2-l) - 5% ) ); --accent2-text: hsl(var(--a2-h), var(--a2-s), 95%); --error:hsl(354, 70%, 60%); --error-text:hsl(350, 100%, 99%); --neutral: hsl(206, 9%, 66%); --neutral-text: hsl(48, 95%, 15%); --success:#299a44; --success-text:#e3ffea; --orange: #FF9F1C; --lightblue: #4579b1; --info-bg:hsl(200, 50%, 53%); --info-text:hsl(200, 60%, 99%); --color-1-bg: hsl(208, 51%, 48%); --color-1-text: hsl(204, 74%, 98%); --color-2-bg: hsl(107, 59%, 42%); --color-2-text: hsl(107, 67%, 98%); --color-3-bg: hsl(28, 84%, 56%); --color-3-text: hsl(28, 73%, 98%); --color-4-bg: hsl(3, 56%, 54%); --color-4-text: hsl(3, 56%, 98%); --color-5-bg: hsl(252, 51%, 62%); --color-5-text: hsl(252, 51%, 98%); --color-6-bg: hsl(195, 61%, 49%); --color-6-text: hsl(195, 61%, 98%); --color-7-bg: hsl(335, 54%, 62%); --color-7-text: hsl(335, 54%, 98%); --color-8-bg: hsl(240, 91%, 65%); --color-8-text: hsl(335, 54%, 98%); --color-9-bg: hsl(169, 56%, 44%); --color-9-text: hsl(335, 54%, 98%); --color-10-bg: hsl(295, 57%, 46%); --color-10-text: hsl(280, 67%, 96%); --color-orange-bg: hsl(40, 100%, 50%); --color-orange-text: hsl(40, 100%, 98%); --color-yellow-bg: hsl(50, 100%, 50%); --color-yellow-text: hsl(50, 100%, 2%); --shadow-1: hsl(210, 100%, 10%, 0.5); --picker-icon: invert(0); --input-border: var(--bg-400); &.dark { --h:210; --s:30%; --l-bg:12%; --l:calc( var(--l-bg) + 5% ); --text: hsl(216, 45%, 86%); --text-full: hsl(206, 100%, 100%); --text-muted: hsl(var(--h), 25%, 65% ); --text-muted-2: hsl(var(--h), 25%, 50% ); --a-h: 199; --a-s: 90%; --a-l: 45%; --a2-h: 24; --a2-s: 98%; --a2-l: 62%; --a: hsl(198, 63%, 67%); --a-hover: hsl( var(--a-h), var(--s), 85% ); --bg-500: hsl(var(--h), var(--s), calc( var(--l) + 0% ) ); --bg-450: hsl(var(--h), var(--s), calc(var(--l) + -1%)); --bg-400: hsl(var(--h), var(--s), calc( var(--l) + 4% ) ); --bg-300: hsl(var(--h), var(--s), calc( var(--l) + 8% ) ); --bg-200: hsl(var(--h), var(--s), calc( var(--l) + 12% ) ); --bg-100: hsl(var(--h), var(--s), calc( var(--l) + 16% ) ); --bg-50: hsl(var(--h), var(--s), calc( var(--l) + 20% ) ); --border-1: hsl(var(--h), var(--s), calc(var(--l) + 7%)); --aside-left-bg: #202931; --aside-bg-hover: #2c3841; --aside-right-bg: hsl(230, 22%, 23%); --aside-text: #d3dee9; --text-color-1: hsl(210, 60%, 80%); --picker-icon: invert(1); --color-orange-bg: hsl(33, 100%, 36%); --color-orange-text: hsl(40, 100%, 98%); } } :root { --unit: 1rem; --s-025: calc( var(--unit) * .25 ); --s-05: calc( var(--unit) * .5 ); --s-075: calc( var(--unit) * .75 ); --s-1: calc( var(--unit) * 1 ); --s-1-5: calc( var(--unit) * 1.5 ); --s-2: calc( var(--unit) * 2 ); --s-3: calc( var(--unit) * 3 ); --s-4: calc( var(--unit) * 4 ); --s-5: calc( var(--unit) * 5 ); --s-6: calc( var(--unit) * 6 ); --r-ss: var(--s-025); --r-s: var(--s-05); --r-base: var(--s-1); --r: 10px; --font-size-large:clamp(1.2rem, 6vw, 1.5rem); --font-size-base:1rem; --font-size-medium:clamp(.85rem, 4vw, .9rem); --font-size-small:clamp(.76rem, 2vw, .78rem); --font-size-small-2:clamp(.6rem, 2.5vw, .65rem); --font-size-big:1.2rem; --gap-05: clamp(var(--s-05), 2vw, var(--s-05)); --gap-1: clamp(var(--s-1), 3.5vw, calc( var(--s-1) + 5px ) ); --gap-2: clamp(var(--s-2), 7vw, calc( var(--s-2) + 5px ) ); --gap-3: clamp(var(--s-3), 10vw, calc( var(--s-3) + 5px ) ); } .apps_list { display:grid; grid-template-columns: repeat(3, 1fr); gap:var(--s-05); & > .item { --padd: var(--s-075); --gap: calc(var(--padd) / 1); --img-width: 45px; display:grid; grid-template-columns: 1fr auto; gap:var(--s-05); align-items: start; background-color: var(--bg-500); border:solid 1px var(--border-1); border-radius: var(--r-s); color:var(--text); &.labels { --img-width: 70px; } &:hover { background-color: var(--bg-400); } & > a { display:grid; grid-template-columns: var(--img-width) 1fr; align-items: start; color:var(--text); gap:var(--gap); padding:var(--padd); } & .ico { display:flex; justify-content: center; align-items: center; & img { width:var(--img-width); aspect-ratio: 1; border-radius:var(--s-05); border:solid 1px var(--bg-400); } & span { display:flex; justify-content: center; align-items: center; width:var(--img-width); aspect-ratio: 1; border-radius:var(--s-05); padding:var(--s-025); border:solid 1px var(--border-1); & svg { width: calc( var(--img-width) / 2 ); aspect-ratio: 1; fill:color-mix(in srgb, var(--text-muted) 30%, transparent); } } } & .info { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display:flex; flex-direction: column; gap:var(--s-025); & > div { display:flex; flex-direction: column; gap:var(--s-025); } & .title { display:flex; font-weight:500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } & .sub_info { display:flex; flex-direction: row; gap:var(--s-075); margin-top:var(--s-025); font-size:var(--font-size-small-2); color:var(--text-muted); line-height:1.1; & svg { fill:var(--text-muted); width:var(--font-size-small-2); } } } & .options { display:flex; gap:var(--s-075); align-self: center; padding:var(--s-075); } } &.download_history { & .item { & .info { display:grid; grid-template-columns: 1fr 100px 110px; align-items: center; gap:var(--s-05); & .labels { & span { display:block; max-width:100px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } } } } } @container main (width < 1000px) { .apps_list { grid-template-columns: 1fr 1fr; } } @container main (width < 600px) { .apps_list { grid-template-columns: 1fr; } } @container main (width < 700px) { .apps_list { &.download_history { & .item { & .info { grid-template-columns: 1fr; & .author_name { display:none; } } & .options { align-self: start; } } } } } .authors { display:flex; flex-direction: column; gap:var(--s-2); container: authors / inline-size; & .authors_list { display:grid; grid-template-columns: 1fr 1fr 1fr; flex-direction: column; gap:var(--gap-1); & > .author_item { --img-width: clamp( 45px, 10vw, 45px); display:grid; grid-template-columns: 1fr; background-color: var(--bg-500); border:solid 1px var(--border-1); border-radius:var(--r); &:hover { background-color: var(--bg-400); } & .top_row { display:grid; grid-template-columns: 66fr 34fr; align-items: center; justify-content: center; gap:var(--s-05); border-bottom:solid 1px var(--border-1); & .user_top { padding:var(--s-075); & [data-template-user] { gap:var(--s-05); & .user_info { gap:1px; } & .user_login { display:none; } } } & .builds { display:flex; flex-direction: column; align-items: center; justify-content: center; border-left: solid 1px var(--border-1); padding:var(--s-025); & .mark { display:flex; align-items: center; justify-content: center; gap:5px; color:var(--color-7-bg); font-size:2rem; line-height:1; } & .text { font-size:var(--font-size-small-2); color:var(--text_muted); } } } & > .cards { display:grid; grid-template-columns: repeat(2, 1fr); & > .item { display:flex; flex-direction: column; align-items: center; justify-content: center; padding:var(--s-025); background: linear-gradient( 135deg, color-mix(in srgb, var(--color-6-bg) 5%, transparent), color-mix(in srgb, var(--color-5-bg) 7%, transparent) ); border:solid 1px color-mix(in srgb, var(--color-6-bg) 10%, transparent); &:nth-child(1), &:nth-child(2) { border-right:solid 1px var(--border-1); } & .value { font-size:.8rem; font-weight:800; & svg { width: .8rem; } } & .name { font-size:var(--font-size-small-2); color:var(--text_muted); } } } } } } @container authors (width < 900px) { .authors { & .authors_list { grid-template-columns:1fr 1fr; } } } @container authors (width < 700px) { .authors { & .authors_list { grid-template-columns:1fr; } } } @layer app { .posts_list { --ava-width:50px; display:flex; flex-direction: column; gap:var(--gap-1); min-width:0; max-width:100%; & > .post_item { display:flex; flex-direction: column; gap:var(--gap-1); padding: var(--s-1); background-color: var(--bg-500); border-radius: var(--r-s); border: solid 1px var(--border-1); min-width:0; max-width:100%; & .post_head { display:grid; grid-template-columns: var(--ava-width) 1fr auto; align-items: center; gap:var(--s-075); min-width:0; max-width:100%; & .ava { display:flex; align-items: center; justify-content: center; width:var(--ava-width); aspect-ratio: 1; border-radius: 500px; background-color: var(--bg-300); border: solid 1px var(--border-1); & svg { width:calc( var(--ava-width) / 2.5 ); } & img { width:100%; aspect-ratio: 1; object-fit: cover; border-radius: 500px; } } & .name_date { display:flex; flex-direction: column; & .name { font-weight: 500; } & .date { color:var(--text-muted); font-size:var(--font-size-small); } } } & .post_body { display: flex; flex-direction: column; gap:var(--s-1); min-width:0; max-width:100%; & .labels { & span { font-size:.6rem; padding:var(--s-025) var(--s-05); background-color: var(--color-3-bg); border-top-left-radius: var(--r-s); border-top-right-radius: var(--r-s); border-bottom-left-radius: 0px; border-bottom-right-radius: var(--r-s); } } & .reply_to_meessage { display:flex; width:fit-content; flex-direction: column; font-size:var(--font-size-small-2); font-weight: 500; text-transform: uppercase; gap:var(--s-075); border-top-left-radius: 0px; border-top-right-radius: var(--r); border-bottom-left-radius: var(--r); border-bottom-right-radius: var(--r); border: solid 1px var(--color-5-bg); padding: var(--s-025) var(--s-1); } & .images { display: grid; gap: 4px; grid-template-columns: 1fr 1fr; max-width:100%; & .img_box:only-child { grid-column: span 2; } & .img_box:nth-child(3):last-child { grid-column: span 2; } & .img_box { max-width:100%; aspect-ratio: 16 / 9; background: var(--bg-400); border-radius: var(--r-s); border: solid 1px var(--border-1); overflow: hidden; } & img { display: block; max-width: 100%; max-height: 100%; object-fit: cover; } } & .text { width:100%; word-break: break-word; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; } &.is_full_topic .text { display: block; overflow: visible; -webkit-line-clamp: unset; } & .text_full { width:100%; word-break: break-word; } & .app_grid { --padd: var(--s-1); --color-1: var(--color-1-bg); --color-2: var(--color-5-bg); display:flex; flex-direction: column; width:100%; max-width:400px; background-color: var(--bg-400); border-radius: var(--r); border: solid 1px var(--border-1); padding: var(--s-05) var(--s-05); gap: var(--s-1); &:hover { background: color-mix(in srgb, var(--color-1) 10%, transparent ); } & .file_head { --img-width: 40px; display:grid; grid-template-columns: var(--img-width) 1fr 50px auto; align-items: center; gap: var(--s-05); & .ico { display:flex; align-self: start; margin-top:4px; width: var(--img-width); & img { width:100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--r-s); border: solid 1px var(--border-1); } } & .title { font-weight:600; font-size:var(--font-size-medium); } & .info { font-weight:600; } } & .download_div { display:flex; flex-direction: column; margin-left:auto; & .download_ico { display:flex; align-items: center; justify-content: center; gap: var(--s-05); background-color: var(--accent-20); border: solid 1px var(--accent-50); border-radius: 500px; width:30px; aspect-ratio: 1; & svg { width:.7rem; fill:var(--accent); } } } @container main (width < 800px) { flex-direction: column-reverse; & .btn { align-items: center; justify-content: center; width:100%; } } } } & .file_images { display:flex; gap: 4px; padding: var(--padd); & img { cursor: pointer; display: block; max-width: 200px; max-height: 200px; object-fit: cover; border-radius: var(--r-ss); } } & .text_full_show { display:flex; gap:var(--s-025); background-color: var(--bg-500); border-radius: 500px; padding: var(--s-025) var(--s-2); font-size:var(--font-size-medium); color:var(--text); border: solid 1px var(--accent); width:fit-content; &:hover { background-color: var(--bg-400); } } } & .post_foot { display:flex; align-items: center; gap:var(--s-05); width:100%; & .item { display:flex; align-items: center; gap:var(--s-05); color:var(--text-muted); font-size:var(--font-size-small); padding: var(--s-025) var(--s-05); & svg { fill:var(--text-muted); } &.likes { background-color: var(--bg-500); border: solid 1px var(--border-1); border-radius:500px; cursor: pointer; &:hover { background-color: var(--bg-300); } &.active { background-color: color-mix(in srgb, var(--accent2) 25%, transparent 100%); border:solid 1px color-mix(in srgb, var(--accent2) 35%, transparent 100%); color:var(--text); & svg { fill:var(--text); } } } } & .answer_link { margin-left:auto; display:flex; align-items: center; gap:var(--s-05); font-weight:bold; font-size:var(--font-size-small); cursor: pointer; text-transform: uppercase; color:var(--a); & svg { fill:var(--a); } } } } .answer_quote { display:flex; flex-direction: column; gap:var(--s-025); padding:var(--s-075) var(--s-1); margin:var(--s-05) 0; background-color: var(--bg-500); border-left: solid 2px var(--accent); border-radius: var(--r-ss); font-size: var(--font-size-small); color: var(--text-muted); & .aq_head { font-weight: bold; color: var(--text); } } } .comments_list { display:flex; width:100%; flex-direction: column; &.gap1 { gap:var(--s-1); } & > .item { --avatar-width:clamp(30px, 5vw, 40px); display:flex; align-items:center; gap:var(--s-1); padding:clamp(var(--s-1), 5vw, var(--s-1-5)) var(--s-1); background-color:var(--bg-500); border:solid 1px var(--bg-200); border-bottom:none; position: relative; height:auto; &:first-child { border-top-left-radius:var(--s-05); border-top-right-radius:var(--s-05); } &:last-child { border-bottom-left-radius:var(--s-05); border-bottom-right-radius:var(--s-05); border-bottom:solid 1px var(--bg-200); } & .left { flex-shrink:0; width:var(--avatar-width); position:sticky; top:calc( var(--header-height) + var(--s-1) ); align-self:flex-start; margin-top:2px; & .avatar { display:flex; align-items:center; justify-content:center; background-color:var(--bg-200); border-radius:50%; & svg, & img { width:100%; aspect-ratio: 1; object-fit: cover; background-color:var(--bg-400); border-radius:50%; border:solid 4px var(--bg-100); } & svg { fill:var(--text-muted); } } } & .right { display:flex; flex-direction:column; gap:var(--s-1); width: calc( 100% - var(--avatar-width) ); & .author_name { display:flex; align-items:center; justify-content:space-between; gap:var(--s-05); font-size:.8rem; font-weight:600; & a { color:var(--color-3); } & .moderate_status { display:flex; align-items:center; gap:var(--s-025); font-size:.7rem; color:var(--text); background-color:var(--info-neutral); color:var(--info-neutral-text); padding:var(--s-025) var(--s-05); line-height:1; border-radius:var(--s-2); & svg { width:.8rem; margin-top:.1px; fill:var(--info-neutral-text); } &.rejected { background-color:var(--error); color:var(--error-text); & svg { fill:var(--error-text); } } } } & .date { display:flex; align-items:center; justify-content:space-between; gap:var(--s-1); font-size:.8rem; line-height:1rem; color:var(--text-muted); } & .text { display:flex; flex-direction:column; gap:var(--s-1); & .answer { display:flex; align-items:center; gap:var(--s-05); font-size:.7rem; color:var(--text-color-1); } & span.answer { cursor:pointer; } } } & .form { padding:0px; border:none; & .row { border-radius:var(--s-05); padding:0px; border:none; } } } & a.all_comments_link { margin-left:auto; display:flex; width:fit-content; align-items:center; gap:var(--s-05); text-transform:uppercase; font-size:.7rem; padding:var(--s-05) var(--s-1); border-radius:var(--s-05); background-color:var(--bg-500); border:solid 1px var(--bg-200); &:hover { background-color:var(--bg-300); } } } @container main (width < 800px) { .comments_list { & > .item { & .right { font-size:.9rem; & .item { } } } } } .comment_reply { & > .item { border:none; gap:0px; border-left:4px solid var(--color-3); border-radius:0px; padding-top:0px ; padding-bottom:0px !important; &:last-child { border-bottom:none; } & .left { display:none; } & .right { padding:0px var(--s-1); width:100%; } } } .add_form_guest { padding:var(--s-1); border-left:solid 5px var(--error); } .comment_reply { display:flex; flex-direction: column; gap:var(--s-1); } .empty_comments { display:flex; width:100%; flex-direction: column; gap:var(--s-1); } .modal-content { & .comments_list { & > .item { display:flex; align-items:start; & .left { position:relative; top:0px; } } } } [data-surface] { background-color: var(--bg-500, var(--bg)); &.grad-1 { background-image: linear-gradient( 180deg, color-mix(in srgb, var(--bg-500) 100%, transparent) 0%, color-mix(in srgb, var(--bg-500) 92%, var(--text) 8%) 100% ); } &.grad-2 { background-image: linear-gradient( 180deg, color-mix(in srgb, var(--bg-500) 88%, var(--text) 12%) 0%, color-mix(in srgb, var(--bg-500) 96%, var(--text) 4%) 100% ); } &.grad-3 { background-image: radial-gradient( ellipse at 50% 0%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 60% ), linear-gradient( 180deg, var(--bg-500) 0%, color-mix(in srgb, var(--bg-500) 94%, var(--text) 6%) 100% ); } &.grad-4 { background-image: radial-gradient( ellipse at 50% 0%, color-mix(in srgb, var(--accent) 40%, transparent) 0%, transparent 60% ), linear-gradient( 180deg, var(--bg-500) 0%, color-mix(in srgb, var(--bg-500) 90%, var(--text) 10%) 100% ); } &.grad-5 { background-image: radial-gradient( ellipse at 50% 0%, color-mix(in srgb, var(--accent2) 20%, var(--bg-500)) 0%, transparent 60% ), linear-gradient( 180deg, var(--bg-500) 0%, color-mix(in srgb, var(--bg-500) 94%, var(--text) 6%) 100% ); } &.grad-6 { background-image: linear-gradient( 135deg, color-mix(in srgb, var(--bg-500) 88%, var(--text) 12%) 0%, var(--bg-500) 50%, color-mix(in srgb, var(--bg-500) 92%, var(--text) 8%) 100% ); } &.grad-7 { background-image: radial-gradient( ellipse at 20% 0%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 50% ), radial-gradient( ellipse at 80% 100%, color-mix(in srgb, var(--accent2) 15%, var(--bg-500)) 0%, transparent 50% ), linear-gradient( 180deg, var(--bg-500) 0%, color-mix(in srgb, var(--bg-500) 90%, var(--text) 10%) 100% ); } &.grad-8 { background-image: radial-gradient( ellipse at 50% 0%, color-mix(in srgb, var(--orange) 15%, var(--bg-500)) 0%, transparent 60% ), linear-gradient( 180deg, var(--bg-500) 0%, color-mix(in srgb, var(--bg-500) 94%, var(--text) 6%) 100% ); } &.grad-9 { background-image: radial-gradient( ellipse at 50% 0%, color-mix(in srgb, var(--green) 20%, transparent) 0%, transparent 60% ), linear-gradient( 180deg, var(--bg-500) 0%, color-mix(in srgb, var(--bg-500) 94%, var(--text) 6%) 100% ); } &.grad-10 { background-image: radial-gradient( ellipse at 50% 0%, color-mix(in srgb, var(--error) 20%, transparent) 0%, transparent 60% ), linear-gradient( 180deg, var(--bg-500) 0%, color-mix(in srgb, var(--bg-500) 94%, var(--text) 6%) 100% ); } &.grad-11 { background-color: var(--bg-500); background-image: repeating-linear-gradient( 45deg, transparent, transparent 12px, color-mix(in srgb, var(--text) 3%, transparent) 12px, color-mix(in srgb, var(--text) 3%, transparent) 24px ), linear-gradient( 180deg, color-mix(in srgb, var(--bg-500) 92%, var(--text) 8%) 0%, color-mix(in srgb, var(--bg-500) 98%, var(--text) 2%) 100% ); } &.grad-12 { background-image: linear-gradient( 180deg, color-mix(in srgb, var(--bg-500) 96%, #000 4%) 0%, color-mix(in srgb, var(--bg-500) 88%, #000 12%) 100% ); } &.hatch-1 { --n: 20px; background-image: repeating-linear-gradient( 45deg, transparent, transparent var(--n), color-mix(in srgb, var(--text) 2%, transparent) var(--n), color-mix(in srgb, var(--text) 2%, transparent) calc(var(--n) * 2) ); } &.hatch-2 { background-image: repeating-linear-gradient( 45deg, transparent, transparent 8px, color-mix(in srgb, var(--text) 3%, transparent) 8px, color-mix(in srgb, var(--text) 3%, transparent) 16px ); } &.hatch-3 { background-image: repeating-linear-gradient( 45deg, transparent, transparent 20px, color-mix(in srgb, var(--text) 3%, transparent) 20px, color-mix(in srgb, var(--text) 3%, transparent) 40px ); } &.hatch-4 { background-image: repeating-linear-gradient( -45deg, transparent, transparent 12px, color-mix(in srgb, var(--text) 3%, transparent) 12px, color-mix(in srgb, var(--text) 3%, transparent) 24px ); } &.hatch-5 { background-image: repeating-linear-gradient( 90deg, transparent, transparent 12px, color-mix(in srgb, var(--text) 3%, transparent) 12px, color-mix(in srgb, var(--text) 3%, transparent) 24px ); } &.hatch-accent { background-image: repeating-linear-gradient( 45deg, transparent, transparent 12px, color-mix(in srgb, var(--accent) 10%, transparent) 12px, color-mix(in srgb, var(--accent) 10%, transparent) 24px ); } &.hatch-accent2 { background-image: repeating-linear-gradient( 45deg, transparent, transparent 12px, color-mix(in srgb, var(--accent2) 8%, transparent) 12px, color-mix(in srgb, var(--accent2) 8%, transparent) 24px ); } &.hatch-hero { background-image: repeating-linear-gradient( 45deg, transparent, transparent 12px, color-mix(in srgb, var(--text) 2%, transparent) 12px, color-mix(in srgb, var(--text) 2%, transparent) 24px ), radial-gradient( ellipse at 20% 0%, color-mix(in srgb, var(--accent) 20%, transparent) 0%, transparent 50% ), linear-gradient( 180deg, var(--bg-500) 0%, color-mix(in srgb, var(--bg-500) 90%, var(--text) 10%) 100% ); } &.dots-1 { background-image: radial-gradient( circle, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px ); background-size: 16px 16px; } &.dots-2 { background-image: radial-gradient( circle, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px ); background-size: 8px 8px; } &.dots-3 { background-image: radial-gradient( circle, color-mix(in srgb, var(--text) 4%, transparent) 2px, transparent 2px ); background-size: 24px 24px; } &.dots-accent { background-image: radial-gradient( circle, color-mix(in srgb, var(--accent) 20%, transparent) 1.5px, transparent 1.5px ); background-size: 16px 16px; } &.dots-accent2 { background-image: radial-gradient( circle, color-mix(in srgb, var(--accent2) 15%, transparent) 1.5px, transparent 1.5px ); background-size: 16px 16px; } &.grid-1 { background-image: linear-gradient( to right, color-mix(in srgb, var(--text) 3%, transparent) 1px, transparent 1px ), linear-gradient( to bottom, color-mix(in srgb, var(--text) 3%, transparent) 1px, transparent 1px ); background-size: 20px 20px; } &.grid-2 { background-image: linear-gradient( to right, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px ), linear-gradient( to bottom, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px ); background-size: 40px 40px; } &.grid-3 { background-image: linear-gradient( to right, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px ), linear-gradient( to bottom, color-mix(in srgb, var(--text) 5%, transparent) 1px, transparent 1px ), linear-gradient( to right, color-mix(in srgb, var(--text) 8%, transparent) 1px, transparent 1px ), linear-gradient( to bottom, color-mix(in srgb, var(--text) 8%, transparent) 1px, transparent 1px ); background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px; } &.grid-accent { background-image: linear-gradient( to right, color-mix(in srgb, var(--accent) 10%, transparent) 1px, transparent 1px ), linear-gradient( to bottom, color-mix(in srgb, var(--accent) 10%, transparent) 1px, transparent 1px ); background-size: 24px 24px; } &.noise-1 { background-image: radial-gradient(circle at 20% 30%, color-mix(in srgb, var(--text) 3%, transparent) 0%, transparent 8%), radial-gradient(circle at 75% 60%, color-mix(in srgb, var(--text) 4%, transparent) 0%, transparent 6%), radial-gradient(circle at 40% 80%, color-mix(in srgb, var(--text) 3%, transparent) 0%, transparent 10%), radial-gradient(circle at 90% 15%, color-mix(in srgb, var(--text) 4%, transparent) 0%, transparent 7%), radial-gradient(circle at 10% 90%, color-mix(in srgb, var(--text) 3%, transparent) 0%, transparent 9%); background-size: 80px 80px; } &.noise-2 { background-image: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--text) 5%, transparent) 0%, transparent 12%), radial-gradient(circle at 80% 70%, color-mix(in srgb, var(--text) 4%, transparent) 0%, transparent 10%), radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--text) 3%, transparent) 0%, transparent 15%); background-size: 120px 120px; } &.waves-1 { background-image: repeating-radial-gradient( circle at 50% 100%, transparent, transparent 20px, color-mix(in srgb, var(--text) 3%, transparent) 20px, color-mix(in srgb, var(--text) 3%, transparent) 21px ); } &.waves-2 { background-image: repeating-radial-gradient( circle at 0% 0%, transparent, transparent 30px, color-mix(in srgb, var(--text) 3%, transparent) 30px, color-mix(in srgb, var(--text) 3%, transparent) 31px ); } &.waves-accent { background-image: repeating-radial-gradient( circle at 50% 100%, transparent, transparent 24px, color-mix(in srgb, var(--accent) 10%, transparent) 24px, color-mix(in srgb, var(--accent) 10%, transparent) 25px ); } &.hatch-glow-1 { background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, color-mix(in srgb, var(--text) 2%, transparent) 20px, color-mix(in srgb, var(--text) 2%, transparent) 40px), radial-gradient(ellipse at 50% 0%, var(--accent-20) 0%, transparent 60%), linear-gradient(180deg, var(--bg-500) 0%, var(--bg-450) 100%); } &.hatch-glow-2 { background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, color-mix(in srgb, var(--text) 2%, transparent) 20px, color-mix(in srgb, var(--text) 2%, transparent) 40px), radial-gradient(ellipse at 100% 0%, var(--accent-20) 0%, transparent 60%), linear-gradient(180deg, var(--bg-500) 0%, var(--bg-450) 100%); } &.hatch-glow-3 { background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, color-mix(in srgb, var(--text) 2%, transparent) 20px, color-mix(in srgb, var(--text) 2%, transparent) 40px), radial-gradient(ellipse at 100% 50%, var(--accent-20) 0%, transparent 60%), linear-gradient(180deg, var(--bg-500) 0%, var(--bg-450) 100%); } &.hatch-glow-4 { background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, color-mix(in srgb, var(--text) 2%, transparent) 20px, color-mix(in srgb, var(--text) 2%, transparent) 40px), radial-gradient(ellipse at 0% 0%, var(--accent-20) 0%, transparent 60%), linear-gradient(180deg, var(--bg-500) 0%, var(--bg-450) 100%); } &.hatch-glow-5 { background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, color-mix(in srgb, var(--text) 2%, transparent) 20px, color-mix(in srgb, var(--text) 2%, transparent) 40px), radial-gradient(ellipse at 0% 50%, var(--accent-20) 0%, transparent 60%), linear-gradient(180deg, var(--bg-500) 0%, var(--bg-450) 100%); } &.hatch-glow-6 { background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, color-mix(in srgb, var(--text) 2%, transparent) 20px, color-mix(in srgb, var(--text) 2%, transparent) 40px), radial-gradient(ellipse at 50% 50%, var(--accent-10) 0%, transparent 70%), linear-gradient(180deg, var(--bg-500) 0%, var(--bg-450) 100%); } &.hatch-glow-7 { background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, color-mix(in srgb, var(--text) 2%, transparent) 20px, color-mix(in srgb, var(--text) 2%, transparent) 40px), radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--accent2) 20%, transparent) 0%, transparent 60%), linear-gradient(180deg, var(--bg-500) 0%, var(--bg-450) 100%); } &.hatch-glow-8 { background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, color-mix(in srgb, var(--text) 2%, transparent) 20px, color-mix(in srgb, var(--text) 2%, transparent) 40px), radial-gradient(ellipse at 100% 0%, color-mix(in srgb, var(--accent2) 20%, transparent) 0%, transparent 60%), linear-gradient(180deg, var(--bg-500) 0%, var(--bg-450) 100%); } &.hatch-glow-9 { background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, color-mix(in srgb, var(--text) 2%, transparent) 20px, color-mix(in srgb, var(--text) 2%, transparent) 40px), radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--accent2) 20%, transparent) 0%, transparent 60%), linear-gradient(180deg, var(--bg-500) 0%, var(--bg-450) 100%); } &.hatch-glow-10 { background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, color-mix(in srgb, var(--text) 2%, transparent) 20px, color-mix(in srgb, var(--text) 2%, transparent) 40px), radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--lightblue) 20%, transparent) 0%, transparent 60%), linear-gradient(180deg, var(--bg-500) 0%, var(--bg-450) 100%); } &.hatch-glow-11 { background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, color-mix(in srgb, var(--text) 2%, transparent) 20px, color-mix(in srgb, var(--text) 2%, transparent) 40px), radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--orange) 18%, transparent) 0%, transparent 60%), linear-gradient(180deg, var(--bg-500) 0%, var(--bg-450) 100%); } &.hatch-glow-12 { background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, color-mix(in srgb, var(--text) 2%, transparent) 20px, color-mix(in srgb, var(--text) 2%, transparent) 40px), radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--success) 20%, transparent) 0%, transparent 60%), linear-gradient(180deg, var(--bg-500) 0%, var(--bg-450) 100%); } &.hatch-glow-13 { background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, color-mix(in srgb, var(--text) 2%, transparent) 20px, color-mix(in srgb, var(--text) 2%, transparent) 40px), radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--error) 18%, transparent) 0%, transparent 60%), linear-gradient(180deg, var(--bg-500) 0%, var(--bg-450) 100%); } &.hatch-glow-14 { background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, color-mix(in srgb, var(--text) 2%, transparent) 20px, color-mix(in srgb, var(--text) 2%, transparent) 40px), radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--color-yellow-bg) 18%, transparent) 0%, transparent 55%), linear-gradient(180deg, var(--bg-500) 0%, var(--bg-450) 100%); } &.hatch-glow-15 { background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, color-mix(in srgb, var(--text) 2%, transparent) 20px, color-mix(in srgb, var(--text) 2%, transparent) 40px), radial-gradient(ellipse at 100% 0%, var(--accent-20) 0%, transparent 55%), radial-gradient(ellipse at 0% 100%, color-mix(in srgb, var(--accent2) 15%, transparent) 0%, transparent 55%), linear-gradient(180deg, var(--bg-500) 0%, var(--bg-400) 100%); } &.hatch-glow-16 { background-image: repeating-linear-gradient(45deg, transparent, transparent 20px, color-mix(in srgb, var(--text) 2%, transparent) 20px, color-mix(in srgb, var(--text) 2%, transparent) 40px), radial-gradient(ellipse 80% 100% at 30% 0%, var(--accent-20) 0%, transparent 60%), radial-gradient(ellipse 80% 100% at 70% 0%, color-mix(in srgb, var(--accent2) 18%, transparent) 0%, transparent 60%), linear-gradient(180deg, var(--bg-500) 0%, var(--bg-400) 100%); } } [data-template-user] { --img-width: 75px; display:grid; grid-template-columns: var(--img-width) 1fr; gap:var(--s-1); align-items: center; width:100%; & .labels { > span { font-size:.47rem; padding:2px 5px; } } & .ava { display:flex; align-items: center; justify-content: center; gap:var(--s-05); width:var(--img-width); aspect-ratio: 1; border-radius: 500px; background-color: var(--bg-300); border: solid 1px var(--border-1); position:relative; & svg { width:calc( var(--img-width) / 2.5 ); } & img { width:var(--img-width); aspect-ratio: 1; object-fit: cover; border-radius: 500px; background-color: var(--bg-500); } .upload_ava { cursor: pointer; & input { display: none; } & .ico { display: flex; align-items: center; justify-content: center; width:var(--img-width); aspect-ratio: 1; margin: 0px auto; background-color: var(--bg); border-radius: 500px; border: solid 1px var(--border-1); & svg { width: 3rem; } & img { width: 100%; height: 100%; border-radius: 500px; } } } & .upload_photo { display:flex; align-items: center; justify-content: center; width:25px; aspect-ratio: 1; position:absolute; bottom:0px; right:0px; background-color: var(--accent); border-radius: 500px; padding:5px; & svg { width:10px; fill:var(--accent-text); } } } & .user_info { display: flex; flex-direction: column; width:99%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; & .user_name { display:flex; flex-direction: column; gap:var(--s-025); & .ellipsis { width:100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; & > div { width:100%; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } } & h1 { flex-shrink: 0; font-size: clamp(1.1rem, 4vw, 1.5rem); font-weight: 600; line-height: 1; } & > div { &:first-child { font-weight:bold; } } } } & .verify { display:flex; align-items: center; justify-content: center; background-color: var(--accent); color:var(--accent-text); aspect-ratio: 1; border-radius: 500px; line-height:1; width:20px; & svg { width:6px; fill:var(--accent-text); } } } h3 { text-transform: uppercase; font-weight: 500; font-size: .9rem; color: var(--a); } .items_list_holder { container: items_list_holder / inline-size; } .items_list { container: items_list / inline-size; &.posters, &.icons { display:flex; gap:var(--s-1); margin:0px calc( 0px - var(--main-padding) ); padding:0px var(--main-padding); & .wrap { flex-wrap: wrap; } & a.item { color:var(--text); background-color: var(--bg-500); border-radius:var(--s-05); border:solid 1px var(--bg-300); &:hover { background-color: var(--bg-400); } } } &.posters { & .item { flex-shrink: 0; display:flex; flex-direction: column; padding:var(--padding); width:400px; max-width:80%; & .poster { width:100%; font-size:.5rem; & img { background-color: var(--bg-400); width:100%; aspect-ratio: 9/5; object-fit: cover; border-top-left-radius:var(--s-05); border-top-right-radius:var(--s-05); } } & .sub { display:flex; gap:var(--s-05); align-items: center; padding:var(--s-1); & .ico { width:45px; aspect-ratio: 1; & img { width:100%; aspect-ratio: 1; background-color: var(--bg-400); border-radius:var(--s-05); object-fit: cover; } } & .text { display:flex; flex-direction: column; gap:var(--s-05); & .title { font-weight:400; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height:1; } & .info { display:flex; gap:var(--s-1); & .version{ font-size: .8rem; } & .rating { display:flex; gap:var(--s-05); font-size:.8rem; & svg { margin-top:-3px; } } } } } } } &.icons { gap:var(--s-05); &.no_scroll_css { flex-wrap:wrap; } & .item { flex-shrink:0; padding:var(--s-05); width:130px; display:flex; flex-direction: column; gap:var(--s-1); &:hover { & .ico { transition: transform 0.4s ease-in-out; transform: rotate(360deg); } } & .ico { width:100%; aspect-ratio: 1; font-size:.5rem; & img { width:100%; aspect-ratio: 1; background-color: var(--bg-400); border-radius:var(--s-05); border:solid 1px var(--bg-300); object-fit: cover; } } & .info { display:flex; flex-direction: column; gap:var(--s-05); height:100%; width:100%; & .title { font-size: .8rem; min-height:0; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } & .sub_info { display:flex; align-items: center; justify-content: space-between; margin-top:auto; & .version { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size:.75rem; width:50%; } & .rating { display:flex; font-size:.8rem; gap:var(--s-025); } } & .cat_title { display:flex; width:fit-content; background-color: var(--color-1); line-height:1; font-size:.7rem; padding:var(--s-025) var(--s-05); border-radius:var(--s-2); } } } } &.cards { display:grid; gap:var(--s-1); grid-template-columns: repeat(6, 1fr); & .item { min-width: 0; display:flex; flex-direction: column; gap:var(--s-1); background-color: var(--bg-500); padding:var(--s-05); border:solid 1px var(--bg-200); border-radius:var(--s-1); color:var(--text); position:relative; overflow:hidden; & .label { position:absolute; top:0px; left:calc( 0px - var(--s-2) ); background-color: var(--success); padding:var(--s-05) var(--s-2); color:var(--success-text); font-size:.8rem; font-weight:bold; transform: rotate(-45deg); } & svg { width:.82rem; fill: color-mix(in srgb, var(--text) 100%, transparent 70%) ; } & .ico { width:100px; aspect-ratio: 1; margin:0px auto; border-radius:var(--s-05); font-size:.01rem; & img { width:100%; aspect-ratio: 1; border-radius:var(--s-1); background-color: var(--bg-400); border:solid 1px var(--bg-300); object-fit: cover; } } &:hover { background-color: var(--bg-400); & .ico { transition: transform 0.4s ease-in-out; transform: rotate(360deg); } } & .info { display:flex; flex-direction: column; gap:var(--s-1); height:100%; & .titles { display:flex; flex-direction: column; gap:var(--s-05); & .title { font-size:.9rem; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } & .stitle { font-size:.8rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } } & .version, & .size, & .date { font-size:.75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; & .version_line { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } & .mini_info { margin-top:auto; } } } } } @container items_list_holder (width < 1150px) { .items_list{ &.cards { grid-template-columns: repeat(5, 1fr); } } } @container items_list_holder (width < 950px) { .items_list { &.cards { grid-template-columns: repeat(4, 1fr); } } } @container items_list_holder (width < 750px) { .items_list { &.cards { grid-template-columns: repeat(3, 1fr); } } } @container items_list_holder (width < 550px) { .items_list { &.icons { & .item { width:115px !important; & .info { & .cat_title { font-size:.65rem; } } } } &.cards { --ico-width:65px; grid-template-columns: 1fr; gap:var(--s-05); & .item { display:flex; gap:var(--s-05); flex-direction: row; border-radius:var(--s-05); & .ico { flex-shrink: 0; width:var(--ico-width); margin-top:1px; & img { border-radius:var(--s-05); } } & .info { flex:1; gap:var(--s-05); width:calc( 100% - var(--ico-width) - var(--s-1) ); & .titles { display:flex; flex-direction: column; gap:var(--s-025); & .title { font-weight:400; font-size:.8rem; } & .stitle { font-size:.7rem; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } } & .mini_info { display:flex; gap:var(--s-1); flex-direction: row; width:100%; overflow:hidden; margin-top: unset; & .version, & .size, & .date { font-size:.6rem; & span.version_name { display:none; } & > div { &:first-child { display:none; } } } & > div { flex-shrink: 0; } } } } } } } header { a.logo { background: linear-gradient(90deg, var(--accent), color-mix(in srgb, var(--accent) 100%, var(--bg) 30%)); padding:var(--s-025); border-radius:var(--s-5); & svg { fill:var(--accent-text); width:2rem; } } } .notification_dot { display:flex; align-items: center; justify-content: center; background-color: var(--error) !important; color:var(--error-text) !important; line-height:.5; padding:7px; width:auto; aspect-ratio: 1; font-size:.6rem; border-radius:500px; &.absolute { top:10px; right:10px; position:absolute; padding:6px; } } .search_holder { position: fixed; top: -130px; left:0; right:0; margin:0px auto; z-index: 10; background-color: var(--bg-500); border-radius:500px; padding:var(--s-1); border:solid 1px var(--border-1); box-shadow: 0px 0px 20px var(--shadow-1); width:90%; max-width:1000px; gap:var(--s-05); transition: all .5s; display:flex; opacity: 1; &.active { display:flex; opacity: 1; top: 30px; transform: scale(1); } & input { width:100%; background-color: var(--input-bg); border:solid 1px var(--border-1); border-radius:500px; padding:var(--s-1); outline:none; font-size:1rem; color:var(--text); } & .button { display:flex; align-items: center; justify-content: center; width:50px; aspect-ratio: 1; border-radius:50%; cursor:pointer; } } div.stars { display:flex; gap:var(--s-05); overflow-x:auto; margin:0px calc(0px - var(--main-padding)); padding:0px var(--main-padding); & > .item { display:flex; align-items: center; gap:var(--s-025); cursor:pointer; padding:var(--s-025) var(--s-1); border-radius:var(--s-05); border:solid 1px var(--border-1); &.small { font-size:.9rem; } &:hover { background-color:var(--bg-300); } & svg { fill:var(--stars); width:.9rem; } & span.svg_dance { display:flex; align-items: center; animation: svg_dance 2s infinite; } &.active { background-color:var(--accent); color:var(--accent-text); & svg { fill:var(--accent-text); } } } } @keyframes svg_dance { 0% { transform: rotate(0deg); } 25% { transform: rotate(10deg); } 50% { transform: rotate(0deg); } 75% { transform: rotate(-10deg); } 100% { transform: rotate(0deg); } } :root { --download-button-bg: linear-gradient(45deg, var(--accent) 0%, var(--color-5-bg) 100%); } .in { & .side_logo_holder { display:flex; align-items: center; gap:var(--s-05); font-size:var(--font-size-small); font-weight:600; text-transform: uppercase; & b { display:flex; align-items: center; justify-content: center; aspect-ratio: 1; padding:var(--s-05); background-color: var(--accent); background-size: 100% 200%; background-position-y: 100%; line-height:1; font-size:1.2rem; font-weight:normal; border-radius:var(--r-ss); color:var(--accent-text); text-transform:initial; & > span { margin-top:-4px; transform: rotate(-20deg); &:first-child { margin-left:-2px; } } } } } @layer app { .top_links { height: var(--header-height); & a { font-size: .60rem; text-transform: uppercase; & svg { width: 1rem; } &.add { display: flex; aspect-ratio: 1; align-items: center; justify-content: center; } &.active { background-color: var(--accent); color: var(--accent-text); & svg { fill: var(--accent-text); } } } } @container html (width < 800px) { html { & body { padding-bottom:var(--header-height); & header { backdrop-filter: none; & .top_links { gap:0px; position:fixed; left:0px; bottom:0px; width:100%; height:calc( var(--header-height)); background-color: var(--bg-500); border-top:solid 1px var(--bg-200); z-index:9; & a { flex:1; padding:var(--s-025); padding-top:var(--s-075); border-radius:0px; overflow:hidden; text-overflow: ellipsis; height:calc( var(--header-height)); & span { display:block; width:100%; text-align: center; white-space: nowrap; overflow:hidden; text-overflow: ellipsis; line-height:1.5; } & svg { } &.active { background-color: var(--accent); color:var(--accent-text); & svg { fill:var(--accent-text); } } } } } } } } }