Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-09-09 04:36:02 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Migrate to nested CSS

Browse Source
This commit is contained in:
Kalle
2026-03-28 16:30:28 +02:00
parent 0df6002c9a
commit dfa95bd92d
93 changed files with 1405 additions and 1337 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
AGENTS.md
View File

@@ -47,6 +47,7 @@
- clsx library is used for conditional class names
- prefer using [CSS variables](./app/styles/vars.css) for theming
- for simple styling, prefer [utility classes](./app/styles/utils.css) over creating a new class
- use CSS nesting with the `&` selector to group related selectors (pseudo-classes, pseudo-elements, child selectors, attribute selectors) under their parent instead of repeating the parent selector
## SQL

6
app/components/AbilitiesSelector.module.css
View File

@@ -27,8 +27,8 @@
border: var(--border-style);
border-radius: 50%;
background-color: var(--color-bg-ability);
}
.abilityButton.isDragging {
box-shadow: 0 0 100px inset rgb(255 255 255 / 25%);
&.isDragging {
box-shadow: 0 0 100px inset rgb(255 255 255 / 25%);
}
}

6
app/components/Avatar.module.css
View File

@@ -14,8 +14,8 @@
background-color: var(--color-bg-higher);
border-radius: var(--radius-avatar);
overflow: hidden;
}
.avatarWrapper img {
display: block;
& img {
display: block;
}
}

56
app/components/CustomThemeSelector.module.css
View File

@@ -55,30 +55,32 @@
align-items: center;
}
.hueSlider::-webkit-slider-runnable-track {
background: linear-gradient(
to right,
oklch(65% 0.15 0),
oklch(65% 0.15 60),
oklch(65% 0.15 120),
oklch(65% 0.15 180),
oklch(65% 0.15 240),
oklch(65% 0.15 300),
oklch(65% 0.15 360)
) !important;
}
.hueSlider {
&::-webkit-slider-runnable-track {
background: linear-gradient(
to right,
oklch(65% 0.15 0),
oklch(65% 0.15 60),
oklch(65% 0.15 120),
oklch(65% 0.15 180),
oklch(65% 0.15 240),
oklch(65% 0.15 300),
oklch(65% 0.15 360)
) !important;
}
.hueSlider::-moz-range-track {
background: linear-gradient(
to right,
oklch(65% 0.15 0),
oklch(65% 0.15 60),
oklch(65% 0.15 120),
oklch(65% 0.15 180),
oklch(65% 0.15 240),
oklch(65% 0.15 300),
oklch(65% 0.15 360)
) !important;
&::-moz-range-track {
background: linear-gradient(
to right,
oklch(65% 0.15 0),
oklch(65% 0.15 60),
oklch(65% 0.15 120),
oklch(65% 0.15 180),
oklch(65% 0.15 240),
oklch(65% 0.15 300),
oklch(65% 0.15 360)
) !important;
}
}
.chatColorPreview {
@@ -97,7 +99,9 @@
align-items: center;
}
.themeShareInput input {
flex: 1;
min-width: 0;
.themeShareInput {
& input {
flex: 1;
min-width: 0;
}
}

16
app/components/MapPoolSelector.module.css
View File

@@ -54,16 +54,16 @@
outline: var(--focus-ring);
outline-offset: 1px;
}
}
.modeButton.selected {
border: 2px solid transparent;
background-color: var(--color-bg-higher);
}
&.selected {
border: 2px solid transparent;
background-color: var(--color-bg-higher);
}
.modeButton.preselected {
border: var(--border-style-accent);
background-color: var(--color-bg-higher);
&.preselected {
border: var(--border-style-accent);
background-color: var(--color-bg-higher);
}
}
.mode:not(.selected, .preselected) {

83
app/components/MobileNav.module.css
View File

@@ -45,22 +45,22 @@
outline: var(--focus-ring);
outline-offset: -1px;
}
}
.tab:hover,
.tab[data-active="true"] {
color: var(--color-text-accent);
&:hover,
&[data-active="true"] {
color: var(--color-text-accent);
}
}
.tabIcon {
position: relative;
width: 24px;
height: 24px;
}
.tabIcon svg {
width: 24px;
height: 24px;
& svg {
width: 24px;
height: 24px;
}
}
.sideNavEmpty {
@@ -77,10 +77,10 @@
z-index: 18;
background-color: rgba(0, 0, 0, 0.25);
backdrop-filter: blur(10px);
}
.panelOverlay[data-entering] {
animation: fade-in 200ms ease-out;
&[data-entering] {
animation: fade-in 200ms ease-out;
}
}
@keyframes fade-in {
@@ -104,10 +104,10 @@
display: flex;
flex-direction: column;
padding-block-end: env(safe-area-inset-bottom);
}
.panel[data-entering] {
animation: slide-up 200ms ease-out;
&[data-entering] {
animation: slide-up 200ms ease-out;
}
}
@keyframes slide-up {
@@ -162,10 +162,10 @@
overflow-y: auto;
display: flex;
flex-direction: column;
}
.menuOverlay[data-entering] {
animation: fade-in 200ms ease-out;
&[data-entering] {
animation: fade-in 200ms ease-out;
}
}
.menuHeader {
@@ -205,9 +205,10 @@
aspect-ratio: 1 / 1;
border-radius: var(--radius-field);
margin-inline-start: auto;
}
.panelCloseButton:hover {
background-color: var(--color-bg-higher);
&:hover {
background-color: var(--color-bg-higher);
}
}
.panelIconContainer {
@@ -248,10 +249,10 @@
font-size: var(--font-xs);
font-weight: var(--weight-semi);
text-align: center;
}
.navItem:hover {
color: var(--color-text-accent);
&:hover {
color: var(--color-text-accent);
}
}
.navItemImage {
@@ -278,10 +279,10 @@
text-decoration: none;
color: var(--color-text);
border-radius: var(--radius-field);
}
.youPanelUser:hover {
background-color: var(--color-bg-high);
&:hover {
background-color: var(--color-bg-high);
}
}
.youPanelUsername {
@@ -298,16 +299,16 @@
border-radius: var(--radius-field);
height: var(--field-size);
aspect-ratio: 1 / 1;
}
.youPanelSettingsButton:hover {
background-color: var(--color-bg-high);
color: var(--color-text);
}
&:hover {
background-color: var(--color-bg-high);
color: var(--color-text);
}
.youPanelSettingsButton svg {
width: 18px;
height: 18px;
& svg {
width: 18px;
height: 18px;
}
}
.panelSectionLink {
@@ -329,11 +330,11 @@
& svg {
stroke-width: 3;
}
}
.panelSectionLink:hover {
color: var(--color-text);
background-color: var(--color-bg-higher);
&:hover {
color: var(--color-text);
background-color: var(--color-bg-higher);
}
}
.tabBadge {
@@ -354,8 +355,10 @@
line-height: 1;
}
.noAnimation[data-entering] {
animation: none;
.noAnimation {
&[data-entering] {
animation: none;
}
}
.ghostTabBar {

32
app/components/Pagination.module.css
View File

@@ -22,15 +22,15 @@
cursor: pointer;
border-radius: var(--radius-full);
transition: opacity 0.15s ease;
}
.arrow:hover:not(:disabled) {
opacity: 0.7;
}
&:hover:not(:disabled) {
opacity: 0.7;
}
.arrow:disabled {
opacity: 0.3;
cursor: not-allowed;
&:disabled {
opacity: 0.3;
cursor: not-allowed;
}
}
.page {
@@ -48,10 +48,10 @@
cursor: pointer;
border-radius: var(--radius-full);
transition: background-color 0.15s ease;
}
.page:hover:not(.pageActive) {
background-color: var(--color-bg-higher);
&:hover:not(.pageActive) {
background-color: var(--color-bg-higher);
}
}
.pageActive {
@@ -75,10 +75,10 @@
cursor: pointer;
border-radius: var(--radius-full);
transition: background-color 0.15s ease;
}
.ellipsisButton:hover {
background-color: var(--color-bg-higher);
&:hover {
background-color: var(--color-bg-higher);
}
}
.jumpToForm {
@@ -98,10 +98,10 @@
font-size: var(--font-sm);
font-weight: var(--weight-semi);
text-align: center;
}
.jumpToInput:focus {
outline: none;
&:focus {
outline: none;
}
}
@container (width < 580px) {

70
app/components/SideNav.module.css
View File

@@ -71,10 +71,10 @@
margin-left: calc(-1 * var(--s-1));
flex: 1;
min-width: 0;
}
.sideNavFooterUser:hover {
background-color: var(--color-bg-high);
&:hover {
background-color: var(--color-bg-high);
}
}
.sideNavFooterUsername {
@@ -101,21 +101,21 @@
border-radius: var(--radius-field);
color: var(--color-text-high);
cursor: pointer;
}
.sideNavFooterButton:hover {
background-color: var(--color-bg-high);
color: var(--color-text);
}
&:hover {
background-color: var(--color-bg-high);
color: var(--color-text);
}
.sideNavFooterButton:focus-visible {
outline: var(--focus-ring);
outline-offset: -2px;
}
&:focus-visible {
outline: var(--focus-ring);
outline-offset: -2px;
}
.sideNavFooterButton svg {
width: 18px;
height: 18px;
& svg {
width: 18px;
height: 18px;
}
}
.sideNavFooterNotification {
@@ -139,32 +139,36 @@
border-top: 1.5px solid var(--color-border);
border-bottom: 1.5px solid var(--color-border);
height: var(--layout-nav-height);
}
.sideNavHeader:first-child {
margin-block-start: calc(-1 * var(--s-1-5));
border-top: none;
}
&:first-child {
margin-block-start: calc(-1 * var(--s-1-5));
border-top: none;
}
.sideNavHeader h2 {
font-size: var(--font-xs);
font-weight: var(--weight-bold);
& h2 {
font-size: var(--font-xs);
font-weight: var(--weight-bold);
}
& svg {
width: 18px;
}
}
.sideNavHeaderAction {
margin-inline-start: auto;
font-size: var(--font-2xs);
font-weight: var(--weight-normal);
}
.sideNavHeaderAction a {
color: var(--color-text-high);
text-decoration: none;
}
& a {
color: var(--color-text-high);
text-decoration: none;
.sideNavHeaderAction a:hover {
color: var(--color-text);
text-decoration: underline;
&:hover {
color: var(--color-text);
text-decoration: underline;
}
}
}
.sideNavHeaderClose {
@@ -172,10 +176,6 @@
margin-inline-end: var(--s-1);
}
.sideNavHeader svg {
width: 18px;
}
.iconContainer {
background-color: var(--color-bg-high);
border-radius: var(--radius-field);

22
app/components/StreamListItems.module.css
View File

@@ -22,6 +22,13 @@
color: var(--color-text-high);
text-transform: uppercase;
letter-spacing: 0.05em;
&::before,
&::after {
content: "";
flex: 1;
border-top: 1px solid var(--color-border);
}
}
.badgeRow {
@@ -43,16 +50,9 @@
height: var(--selector-size-sm);
aspect-ratio: 1 / 1;
border-radius: var(--radius-selector);
}
.saveIconButton:hover {
color: var(--color-text);
background-color: var(--color-bg-higher);
}
.upcomingDivider::before,
.upcomingDivider::after {
content: "";
flex: 1;
border-top: 1px solid var(--color-border);
&:hover {
color: var(--color-text);
background-color: var(--color-bg-higher);
}
}

42
app/components/SubNav.module.css
View File

@@ -19,19 +19,10 @@
align-items: center;
color: var(--color-text);
gap: var(--s-1-5);
}
.linkContainer.active {
color: var(--color-text-accent);
}
.secondary .linkContainer {
max-width: none;
flex: none;
}
.secondary .linkContainer.active {
color: var(--color-text);
&.active {
color: var(--color-text-accent);
}
}
.link {
@@ -59,15 +50,6 @@
background-color: transparent;
}
.secondary .linkContainer.active .linkSecondary {
background-color: var(--color-bg-higher);
color: var(--color-text);
}
.container.compact .link {
padding: var(--s-1) var(--s-2);
}
.borderGuy {
width: 78%;
height: 3px;
@@ -81,10 +63,28 @@
background-color: var(--color-bg-high);
}
.container.compact .link {
padding: var(--s-1) var(--s-2);
}
.linkContainer.active > .borderGuy {
visibility: initial;
}
.secondary .linkContainer {
max-width: none;
flex: none;
}
.secondary .linkContainer.active {
color: var(--color-text);
}
.secondary .linkContainer.active .linkSecondary {
background-color: var(--color-bg-higher);
color: var(--color-text);
}
.secondary .borderGuy {
display: none;
}

44
app/components/elements/Button.module.css
View File

@@ -16,25 +16,25 @@
outline-color: var(--color-text-accent);
height: var(--field-size);
white-space: nowrap;
}
.button[data-focus-visible],
.button:focus-visible {
outline-style: solid;
outline-width: 2px;
outline-offset: 1px;
}
&[data-focus-visible],
&:focus-visible {
outline-style: solid;
outline-width: 2px;
outline-offset: 1px;
}
.button[data-pressed],
.button:active {
transform: translateY(1px);
}
&[data-pressed],
&:active {
transform: translateY(1px);
}
.button[data-disabled],
.button:disabled {
cursor: not-allowed;
opacity: 0.5;
transform: initial;
&[data-disabled],
&:disabled {
cursor: not-allowed;
opacity: 0.5;
transform: initial;
}
}
.outlined {
@@ -88,10 +88,10 @@
background-color: transparent;
color: var(--color-text-accent);
outline: initial;
}
.minimal[data-focus-visible] {
outline: var(--focus-ring);
&[data-focus-visible] {
outline: var(--focus-ring);
}
}
.minimalSuccess {
@@ -127,10 +127,10 @@
min-width: 20px;
max-width: 20px;
margin-inline-end: var(--s-1-5);
}
.buttonIcon.lonely {
margin-inline-end: 0 !important;
&.lonely {
margin-inline-end: 0 !important;
}
}
.buttonIconSmall {

30
app/components/elements/Calendar.module.css
View File

@@ -58,23 +58,23 @@
outline: var(--focus-ring);
outline-offset: 1px;
}
}
.cell[data-outside-month] {
display: none;
}
&[data-outside-month] {
display: none;
}
.cell[data-disabled] {
opacity: 0.5;
background-color: transparent !important;
}
&[data-disabled] {
opacity: 0.5;
background-color: transparent !important;
}
.cell[data-selected] {
background-color: var(--color-bg-high);
color: var(--color-text-accent);
}
&[data-selected] {
background-color: var(--color-bg-high);
color: var(--color-text-accent);
}
.cell:hover {
background-color: var(--color-bg-high);
outline: initial;
&:hover {
background-color: var(--color-bg-high);
outline: initial;
}
}

46
app/components/elements/ChipRadio.module.css
View File

@@ -2,23 +2,11 @@
display: flex;
gap: var(--s-1);
width: max-content;
}
.group[data-orientation="vertical"] {
flex-direction: column;
align-items: stretch;
}
.radio {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
&[data-orientation="vertical"] {
flex-direction: column;
align-items: stretch;
}
}
.label {
@@ -36,12 +24,24 @@
justify-content: center;
}
.radio:focus-visible + .label {
outline: var(--focus-ring);
outline-offset: 2px;
}
.radio {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
.radio:checked + .label {
background-color: var(--color-text-accent);
color: var(--color-text-inverse);
&:focus-visible + .label {
outline: var(--focus-ring);
outline-offset: 2px;
}
&:checked + .label {
background-color: var(--color-text-accent);
color: var(--color-text-inverse);
}
}

26
app/components/elements/DatePicker.module.css
View File

@@ -13,24 +13,28 @@
cursor: pointer;
}
.root[data-open] .group {
border-color: transparent;
outline: var(--focus-ring);
.root {
&[data-open] .group {
border-color: transparent;
outline: var(--focus-ring);
}
}
.dateInput {
display: flex;
}
.segment:not([data-type="literal"]) {
padding: 0 var(--s-0-5);
border-radius: 5px;
}
.segment {
&:not([data-type="literal"]) {
padding: 0 var(--s-0-5);
border-radius: 5px;
}
.segment:focus-visible {
background-color: var(--color-bg-high);
color: var(--color-text-accent);
outline: none;
&:focus-visible {
background-color: var(--color-bg-high);
color: var(--color-text-accent);
outline: none;
}
}
.button {

16
app/components/elements/Dialog.module.css
View File

@@ -11,6 +11,10 @@
padding: 1rem;
text-align: center;
backdrop-filter: blur(10px); /* Adjust blur value as needed */
&[data-entering] {
animation: fade-in 300ms ease-out;
}
}
.fullScreenOverlay {
@@ -18,10 +22,6 @@
display: initial;
}
.overlay[data-entering] {
animation: fade-in 300ms ease-out;
}
@keyframes fade-in {
from {
opacity: 0;
@@ -46,6 +46,10 @@
box-shadow:
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
&[data-entering] {
animation: zoom-in-95 300ms ease-out;
}
}
:global(html[data-fuse="true"]) .modal {
@@ -60,10 +64,6 @@
padding-block-end: var(--s-32);
}
.modal[data-entering] {
animation: zoom-in-95 300ms ease-out;
}
@keyframes zoom-in-95 {
from {
opacity: 0;

6
app/components/elements/Menu.module.css
View File

@@ -44,10 +44,10 @@
justify-content: flex-start;
transition: background-color 0.15s;
cursor: pointer;
}
.item[data-focused] {
background-color: var(--color-bg-higher);
&[data-focused] {
background-color: var(--color-bg-higher);
}
}
.itemDisabled {

38
app/components/elements/Select.module.css
View File

@@ -34,10 +34,10 @@
white-space: nowrap;
min-width: 0;
color: var(--color-text);
}
.selectValue[data-placeholder] {
color: var(--color-text-high);
&[data-placeholder] {
color: var(--color-text-high);
}
}
.icon {
@@ -71,10 +71,10 @@
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.item[data-disabled] {
color: var(--color-text-high);
&[data-disabled] {
color: var(--color-text-high);
}
}
.itemFocused {
@@ -108,14 +108,14 @@
font-weight: var(--weight-semi);
letter-spacing: 0.5px;
flex: 1;
}
.searchInput::-webkit-search-cancel-button {
display: none;
}
&::-webkit-search-cancel-button {
display: none;
}
.searchInput::placeholder {
color: var(--color-text-high);
&::placeholder {
color: var(--color-text-high);
}
}
.searchClearButton {
@@ -171,6 +171,13 @@
padding-block-end: var(--s-1);
padding-inline: var(--s-1-5);
white-space: nowrap;
& img {
border-radius: 100%;
background-color: var(--color-bg-higher);
padding: var(--s-1);
min-width: 28px;
}
}
.categoryDivider {
@@ -179,10 +186,3 @@
height: 2px;
margin-block: var(--s-2);
}
.categoryHeading img {
border-radius: 100%;
background-color: var(--color-bg-higher);
padding: var(--s-1);
min-width: 28px;
}

68
app/components/elements/Switch.module.css
View File

@@ -1,18 +1,3 @@
.root {
--height: var(--selector-size-sm);
cursor: pointer;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 0.571rem;
color: var(--text-color);
forced-color-adjust: none;
font-size: var(--font-xs);
font-weight: var(--weight-bold);
margin-block-end: 0;
}
.indicator {
width: calc(var(--height) * 1.75);
height: var(--height);
@@ -36,25 +21,40 @@
}
}
.root[data-selected] .indicator {
background: var(--color-text-accent);
border-color: var(--color-text-accent);
grid-template-columns: 1fr 1fr 0fr;
.root {
--height: var(--selector-size-sm);
&:before {
background: var(--color-text-inverse);
cursor: pointer;
display: grid;
grid-template-columns: auto 1fr;
align-items: center;
gap: 0.571rem;
color: var(--text-color);
forced-color-adjust: none;
font-size: var(--font-xs);
font-weight: var(--weight-bold);
margin-block-end: 0;
&[data-selected] .indicator {
background: var(--color-text-accent);
border-color: var(--color-text-accent);
grid-template-columns: 1fr 1fr 0fr;
&:before {
background: var(--color-text-inverse);
}
}
&[data-focus-visible] .indicator {
outline: var(--focus-ring);
outline-offset: 1px;
}
&[data-disabled] {
cursor: not-allowed;
& .indicator {
opacity: 0.65;
}
}
}
.root[data-focus-visible] .indicator {
outline: var(--focus-ring);
outline-offset: 1px;
}
.root[data-disabled] .indicator {
opacity: 0.65;
}
.root[data-disabled] {
cursor: not-allowed;
}

106
app/components/elements/Tabs.module.css
View File

@@ -8,55 +8,17 @@
flex-direction: row;
border-bottom: 2px solid var(--color-border);
min-width: fit-content;
}
.fullWidth {
width: 100%;
min-width: 100%;
}
.tabList svg {
--icon-size: 16px;
min-width: var(--icon-size);
min-height: var(--icon-size);
max-width: var(--icon-size);
max-height: var(--icon-size);
margin-inline-end: var(--s-1-5);
}
.tabButton img {
min-width: 16px;
min-height: 16px;
margin-inline-end: var(--s-1-5);
}
.padded .tabPanel {
padding-block-start: var(--s-4);
}
.disappearing:has(.tabList > div:only-child).padded .tabPanel {
padding-top: 0;
}
.disappearing .tabList:has(> div:only-child) {
display: none;
}
.tabContainer {
min-width: fit-content;
margin-bottom: -2px;
&:focus-visible {
outline: var(--focus-ring);
outline-offset: -2px;
& svg {
--icon-size: 16px;
min-width: var(--icon-size);
min-height: var(--icon-size);
max-width: var(--icon-size);
max-height: var(--icon-size);
margin-inline-end: var(--s-1-5);
}
}
.fullWidth .tabContainer {
flex: 1;
min-width: 0;
}
.tabButton {
background-color: transparent;
border: none;
@@ -67,16 +29,58 @@
white-space: nowrap;
flex: 1;
transform: none !important;
& img {
min-width: 16px;
min-height: 16px;
margin-inline-end: var(--s-1-5);
}
}
.tabContainer[data-selected] .tabButton {
border-color: var(--color-text-accent);
color: var(--color-text);
.tabContainer {
min-width: fit-content;
margin-bottom: -2px;
&:focus-visible {
outline: var(--focus-ring);
outline-offset: -2px;
}
&[data-selected] .tabButton {
border-color: var(--color-text-accent);
color: var(--color-text);
}
&[data-focus-visible] .tabButton {
color: var(--color-text-accent) !important;
outline: none;
}
}
.tabContainer[data-focus-visible] .tabButton {
color: var(--color-text-accent) !important;
outline: none;
.fullWidth {
width: 100%;
min-width: 100%;
& .tabContainer {
flex: 1;
min-width: 0;
}
}
.padded {
& .tabPanel {
padding-block-start: var(--s-4);
}
}
.disappearing {
&:has(.tabList > div:only-child).padded .tabPanel {
padding-top: 0;
}
& .tabList:has(> div:only-child) {
display: none;
}
}
.tabNumber {

6
app/components/elements/Toast.module.css
View File

@@ -74,10 +74,10 @@
.closeButton {
margin-inline-start: auto;
outline-color: var(--color-text) !important;
}
.closeButton svg {
width: 1rem;
& svg {
width: 1rem;
}
}
.alertIcon {

14
app/components/elements/TournamentSearch.module.css
View File

@@ -18,14 +18,14 @@
.itemTextsContainer {
line-height: 1.1;
}
.itemTextsContainer span {
max-width: 175px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
& span {
max-width: 175px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
}
}
.selectValue {

20
app/components/layout/ChatSidebar.module.css
View File

@@ -50,10 +50,10 @@
@media screen and (min-width: 600px) {
height: var(--field-size-sm);
}
}
.closeButton:hover {
background-color: var(--color-bg-higher);
&:hover {
background-color: var(--color-bg-higher);
}
}
.roomList {
@@ -116,6 +116,10 @@
height: var(--field-size-sm);
aspect-ratio: 1 / 1;
border-radius: var(--radius-field);
&:hover {
background-color: var(--color-bg-higher);
}
}
.backButtonBadge {
@@ -135,10 +139,6 @@
line-height: 1;
}
.backButton:hover {
background-color: var(--color-bg-higher);
}
.chatHeaderInfo {
display: flex;
flex-direction: column;
@@ -157,10 +157,10 @@
color: inherit;
border-radius: var(--radius-field);
transition: background-color 0.15s;
}
.chatHeaderLink:hover {
background-color: var(--color-bg-higher);
&:hover {
background-color: var(--color-bg-higher);
}
}
.chatHeaderTitle {

36
app/components/layout/Footer.module.css
View File

@@ -20,6 +20,11 @@
gap: var(--s-2);
}
.socialIcon {
height: 2.25rem;
transition: transform 0.25s ease-in-out;
}
.socialLink {
display: flex;
max-width: 10rem;
@@ -33,23 +38,18 @@
background-color: var(--color-bg-higher);
cursor: pointer;
font-size: var(--font-lg);
}
.socialIcon {
height: 2.25rem;
transition: transform 0.25s ease-in-out;
}
.socialLink:hover > .socialIcon {
transform: translateY(-0.3rem);
&:hover > .socialIcon {
transform: translateY(-0.3rem);
}
}
.socialHeader {
text-align: center;
}
.socialHeader > p {
font-size: var(--font-2xs);
& > p {
font-size: var(--font-2xs);
}
}
.patronTitle {
@@ -98,6 +98,10 @@
.socialLink {
max-width: initial;
flex-direction: row;
&:hover > .socialIcon {
transform: translateX(-0.3rem);
}
}
.socialHeader {
@@ -105,17 +109,13 @@
align-items: center;
gap: var(--s-2);
text-align: initial;
}
.socialHeader > p {
margin-block-start: var(--s-1);
& > p {
margin-block-start: var(--s-1);
}
}
.socialIcon {
height: 1.75rem;
}
.socialLink:hover > .socialIcon {
transform: translateX(-0.3rem);
}
}

50
app/components/layout/GlobalSearch.module.css
View File

@@ -11,15 +11,15 @@
cursor: pointer;
height: var(--field-size-sm);
transition: background-color 0.15s;
}
.searchButton:hover {
background-color: var(--color-bg-high);
}
&:hover {
background-color: var(--color-bg-high);
}
.searchButton:focus-visible {
outline: var(--focus-ring);
outline-offset: 1px;
&:focus-visible {
outline: var(--focus-ring);
outline-offset: 1px;
}
}
.searchIcon {
@@ -52,10 +52,10 @@
backdrop-filter: blur(10px);
padding: var(--layout-main-padding);
padding-top: 15vh;
}
.overlay[data-entering] {
animation: fade-in 200ms ease-out;
&[data-entering] {
animation: fade-in 200ms ease-out;
}
}
@keyframes fade-in {
@@ -77,10 +77,10 @@
0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
overflow: hidden;
}
.modal[data-entering] {
animation: zoom-in-95 200ms ease-out;
&[data-entering] {
animation: zoom-in-95 200ms ease-out;
}
}
@keyframes zoom-in-95 {
@@ -139,18 +139,18 @@
outline: none;
color: inherit;
text-decoration: none;
}
.listBoxItem[data-hovered] {
background-color: var(--color-bg-high);
}
&[data-hovered] {
background-color: var(--color-bg-high);
}
.listBoxItem[data-focused] {
background-color: var(--color-bg-high);
}
&[data-focused] {
background-color: var(--color-bg-high);
}
.listBoxItem[data-selected] {
background-color: var(--color-accent-low);
&[data-selected] {
background-color: var(--color-accent-low);
}
}
.searchTypeContainer {
@@ -262,10 +262,10 @@
color: var(--color-text-high);
cursor: pointer;
transition: background-color 0.15s;
}
.backButton:hover {
background-color: var(--color-bg-high);
&:hover {
background-color: var(--color-bg-high);
}
}
.selectedWeaponName {

16
app/components/layout/NotificationPopover.module.css
View File

@@ -2,10 +2,10 @@
min-width: 300px;
padding: 0;
background-color: var(--color-bg);
}
.popoverContainer svg {
width: 16px;
& svg {
width: 16px;
}
}
.noNotificationsContainer {
@@ -62,6 +62,11 @@
& svg {
stroke-width: 3;
}
&:hover {
color: var(--color-text);
background-color: var(--color-bg-higher);
}
}
@media screen and (max-width: 599px) {
@@ -69,8 +74,3 @@
margin-top: var(--s-4);
}
}
.viewAllLink:hover {
color: var(--color-text);
background-color: var(--color-bg-higher);
}

8
app/components/layout/TopNavMenus.module.css
View File

@@ -20,11 +20,11 @@
font-weight: var(--weight-semi);
cursor: pointer;
white-space: nowrap;
}
.menuButton:focus-visible {
outline: var(--focus-ring);
outline-offset: 1px;
&:focus-visible {
outline: var(--focus-ring);
outline-offset: 1px;
}
}
.menuPopover {

6
app/components/layout/UserItem.module.css
View File

@@ -1,8 +1,8 @@
.userItem {
outline-offset: 1px;
border-radius: var(--radius-avatar);
}
.userItem:focus-visible {
outline: var(--focus-ring);
&:focus-visible {
outline: var(--focus-ring);
}
}

18
app/components/layout/index.module.css
View File

@@ -52,6 +52,11 @@
flex-shrink: 0;
transition: background-color 0.2s;
line-height: 1;
&:focus-visible {
outline: var(--focus-ring);
outline-offset: 1px;
}
}
.siteLogoS {
@@ -66,11 +71,6 @@
bottom: -4px;
}
.siteLogo:focus-visible {
outline: var(--focus-ring);
outline-offset: 1px;
}
.separator {
font-size: var(--font-xs);
color: var(--color-text-high);
@@ -110,11 +110,11 @@
align-items: center;
text-decoration: none;
border-radius: var(--radius-field);
}
.breadcrumbLink:focus-visible {
outline: var(--focus-ring);
outline-offset: 1px;
&:focus-visible {
outline: var(--focus-ring);
outline-offset: 1px;
}
}
.pageName {

36
app/features/badges/badges.module.css
View File

@@ -50,14 +50,14 @@
padding: 0;
font-size: var(--font-sm);
gap: var(--s-1-5);
}
.owners > li {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1.1;
list-style: none;
& > li {
display: flex;
flex-direction: column;
align-items: center;
line-height: 1.1;
list-style: none;
}
}
.count {
@@ -65,13 +65,6 @@
font-size: var(--font-xs);
}
.editUsersList > li {
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
}
.editUsersList {
display: flex;
flex-direction: column;
@@ -80,6 +73,13 @@
font-weight: var(--weight-semi);
gap: var(--s-2);
padding-block-end: var(--s-3);
& > li {
display: flex;
align-items: center;
justify-content: space-between;
list-style: none;
}
}
.editNumberInput {
@@ -94,11 +94,11 @@
padding: 0;
font-size: var(--font-xs);
list-style: none;
}
.editDifferences > li::before {
content: "-";
padding-inline-end: 5px;
& > li::before {
content: "-";
padding-inline-end: 5px;
}
}
.searchInput {

6
app/features/build-analyzer/routes/analyzer.module.css
View File

@@ -43,10 +43,10 @@
.apCompareBar {
height: 100%;
background-color: var(--color-info);
}
.apCompareBar.better {
background-color: var(--color-success);
&.better {
background-color: var(--color-success);
}
}
.effectsSelector {

6
app/features/calendar/calendar-event.module.css
View File

@@ -7,10 +7,10 @@
column-gap: var(--s-1-5);
font-weight: var(--weight-semi);
grid-template-columns: max-content 1fr;
}
.times > time {
height: 1.25rem;
& > time {
height: 1.25rem;
}
}
.mapPoolSection {

52
app/features/calendar/components/TournamentCard.module.css
View File

@@ -12,6 +12,10 @@
height: 100%;
}
.avatarImg {
border-radius: var(--radius-avatar);
}
.card {
background-color: var(--color-bg-high);
border-radius: var(--radius-box);
@@ -20,6 +24,10 @@
height: 100%;
min-width: var(--card-width);
max-width: var(--card-width);
&:hover .avatarImg {
outline: 6px solid var(--color-bg-higher);
}
}
.imgContainer {
@@ -30,26 +38,18 @@
margin-top: -10px;
}
.avatarImg {
border-radius: var(--radius-avatar);
}
.card:hover .avatarImg {
outline: 6px solid var(--color-bg-higher);
}
.org {
display: flex;
gap: var(--s-1);
font-size: var(--font-2xs);
color: var(--color-text-high);
}
.org span {
max-width: 165px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
& span {
max-width: 165px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
}
.time {
@@ -92,11 +92,11 @@
display: flex;
align-items: center;
gap: var(--s-1);
}
.teamCount svg {
width: var(--tournament-card-icon-size);
height: var(--tournament-card-icon-size);
& svg {
width: var(--tournament-card-icon-size);
height: var(--tournament-card-icon-size);
}
}
.modesPillContainer {
@@ -120,11 +120,11 @@
justify-content: end;
padding-inline-end: 12px;
width: 100%;
}
.pillsContainer.lonely {
padding-inline-end: 0px;
padding-inline-start: 12px;
&.lonely {
padding-inline-end: 0px;
padding-inline-start: 12px;
}
}
.pill {
@@ -140,11 +140,11 @@
.pillRanked {
background-color: var(--color-info-low);
color: var(--color-text-accent);
}
.pillRanked svg {
width: var(--tournament-card-icon-size);
height: var(--tournament-card-icon-size);
& svg {
width: var(--tournament-card-icon-size);
height: var(--tournament-card-icon-size);
}
}
.firstPlacers {

40
app/features/calendar/routes/calendar.module.css
View File

@@ -24,10 +24,20 @@
padding: var(--s-1) var(--s-2);
font-size: var(--font-xs);
flex: 1 1 0;
}
.navigateButton:focus-visible {
outline: var(--focus-ring);
&:focus-visible {
outline: var(--focus-ring);
}
&:not(.navigateArrowButton) {
justify-content: center;
}
& svg {
max-width: 1.75rem;
min-width: 1.75rem;
max-height: 1.75rem;
}
}
@container (width >= 640px) {
@@ -40,18 +50,10 @@
}
}
.navigateButton:not(.navigateArrowButton) {
justify-content: center;
}
.navigateButton svg {
max-width: 1.75rem;
min-width: 1.75rem;
max-height: 1.75rem;
}
.navigateArrowButton svg {
margin-inline-start: -5px;
.navigateArrowButton {
& svg {
margin-inline-start: -5px;
}
}
.columnsContainer {
@@ -101,9 +103,11 @@
border-radius: var(--radius-box);
}
.hiddenEventsButton svg {
width: 1rem;
height: 1rem;
.hiddenEventsButton {
& svg {
width: 1rem;
height: 1rem;
}
}
.calendar {

22
app/features/chat/components/Chat.module.css
View File

@@ -31,9 +31,11 @@
flex-shrink: 0;
}
.avatarWrapperStaff img {
border: var(--border-style-accent);
border-radius: var(--radius-avatar);
.avatarWrapperStaff {
& img {
border: var(--border-style-accent);
border-radius: var(--radius-avatar);
}
}
.avatarBadge {
@@ -78,11 +80,11 @@
.inputContainer {
margin-top: auto;
position: relative;
}
.inputContainer > form {
padding: var(--s-2);
border-top: 1.5px solid var(--color-border);
& > form {
padding: var(--s-2);
border-top: 1.5px solid var(--color-border);
}
}
.sendButton.sendButton {
@@ -90,10 +92,10 @@
background-color: var(--color-text-accent);
color: var(--color-text-inverse);
flex-shrink: 0;
}
.sendButton.sendButton:disabled {
opacity: 0.4;
&:disabled {
opacity: 0.4;
}
}
.messageContents {

64
app/features/comp-analyzer/components/DamageComboBar.module.css
View File

@@ -20,10 +20,10 @@
color: var(--color-text);
width: 100%;
text-align: left;
}
.header:hover {
background: var(--color-bg-high);
&:hover {
background: var(--color-bg-high);
}
}
.headerTitle {
@@ -75,6 +75,22 @@
padding: 0 var(--s-2);
color: var(--color-text-inverse);
font-weight: var(--weight-semi);
&[data-slot-color="yellow"] {
background-color: #f5d742;
}
&[data-slot-color="pink"] {
background-color: #f5b8d0;
}
&[data-slot-color="green"] {
background-color: #90e8a8;
}
&[data-slot-color="blue"] {
background-color: #8cd4f5;
}
}
.damageTypeLabel {
@@ -89,10 +105,10 @@
border: 1px solid transparent;
border-radius: var(--radius-selector);
cursor: pointer;
}
.damageTypeLabel:hover {
text-decoration: line-through;
&:hover {
text-decoration: line-through;
}
}
.damageValue {
@@ -107,22 +123,6 @@
margin-left: var(--s-0-5);
}
.segment[data-slot-color="yellow"] {
background-color: #f5d742;
}
.segment[data-slot-color="pink"] {
background-color: #f5b8d0;
}
.segment[data-slot-color="green"] {
background-color: #90e8a8;
}
.segment[data-slot-color="blue"] {
background-color: #8cd4f5;
}
.weaponIcon {
min-width: 24px;
min-height: 24px;
@@ -184,15 +184,15 @@
color: var(--color-text);
cursor: pointer;
transition: background-color 0.15s ease;
}
.filterControlButton:hover:not(:disabled) {
background: var(--color-bg-high);
}
&:hover:not(:disabled) {
background: var(--color-bg-high);
}
.filterControlButton:disabled {
opacity: 0.5;
cursor: not-allowed;
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
}
.filteredItemsRow {
@@ -216,10 +216,10 @@
color: var(--color-text-high);
cursor: pointer;
transition: background-color 0.15s ease;
}
.filteredItem:hover {
background: var(--color-bg-high);
&:hover {
background: var(--color-bg-high);
}
}
.slidersContainer {

6
app/features/comp-analyzer/components/RangeVisualization.module.css
View File

@@ -20,10 +20,10 @@
color: var(--color-text);
width: 100%;
text-align: left;
}
.header:hover {
background: var(--color-bg-high);
&:hover {
background: var(--color-bg-high);
}
}
.headerTitle {

6
app/features/comp-analyzer/components/SelectedWeapons.module.css
View File

@@ -94,10 +94,10 @@
line-height: 1;
color: var(--color-text-high);
flex-shrink: 0;
}
.removeButton:hover {
color: var(--color-error);
&:hover {
color: var(--color-error);
}
}
.subSpecialContainer {

6
app/features/comp-analyzer/components/WeaponCategories.module.css
View File

@@ -39,10 +39,10 @@
padding: var(--s-1) var(--s-4);
border-left: 1.5px solid var(--color-border);
flex-shrink: 0;
}
.categoryItem[data-first="true"] {
border-left: none;
&[data-first="true"] {
border-left: none;
}
}
.categoryName {

20
app/features/comp-analyzer/components/WeaponGrid.module.css
View File

@@ -83,19 +83,19 @@
border-radius: var(--radius-box);
cursor: pointer;
transition: border-color 0.1s;
}
.weaponButton:hover {
border-color: var(--color-text-accent);
}
&:hover {
border-color: var(--color-text-accent);
}
.weaponButton:disabled {
opacity: 0.6;
cursor: not-allowed;
}
&:disabled {
opacity: 0.6;
cursor: not-allowed;
.weaponButton:disabled:hover {
border-color: transparent;
&:hover {
border-color: transparent;
}
}
}
.weaponButtonSelected {

6
app/features/components-showcase/components-showcase.module.css
View File

@@ -9,10 +9,10 @@
align-items: center;
grid-template-columns: 200px 1fr;
gap: var(--s-4);
}
.componentRow:last-child {
border-bottom: none;
&:last-child {
border-bottom: none;
}
}
.componentLabel {

8
app/features/front-page/components/SplatoonRotations.module.css
View File

@@ -12,11 +12,11 @@
.rotationsCredit {
font-size: var(--font-2xs);
}
.rotationsCredit a {
color: var(--color-text-high);
text-decoration: underline;
& a {
color: var(--color-text-high);
text-decoration: underline;
}
}
.rotationsScroll {

18
app/features/lfg/components/LFGPost.module.css
View File

@@ -4,12 +4,12 @@
align-items: flex-start;
column-gap: var(--s-6);
row-gap: var(--s-2);
}
.wideLayout .leftRow {
display: flex;
gap: var(--s-2);
flex-direction: column;
& .leftRow {
display: flex;
gap: var(--s-2);
flex-direction: column;
}
}
@container (width >= 640px) {
@@ -111,11 +111,11 @@
display: flex;
align-items: center;
gap: var(--s-1);
}
.editButton > svg {
width: 14px;
height: 14px;
& > svg {
width: 14px;
height: 14px;
}
}
.tier {

6
app/features/map-planner/components/Planner.module.css
View File

@@ -167,10 +167,10 @@
background: transparent;
cursor: grab;
touch-action: none;
}
.draggableButton:hover {
background-color: var(--color-bg-high);
&:hover {
background-color: var(--color-bg-high);
}
}
.weaponDragging {

50
app/features/notifications/components/NotificationList.module.css
View File

@@ -4,27 +4,6 @@
border-color: var(--color-bg-high);
}
.item {
padding: var(--s-1) var(--s-3);
display: grid;
grid-template-areas: "image header" "image timestamp";
grid-template-columns: 30px 1fr;
column-gap: var(--s-2);
padding-block: var(--s-3);
color: var(--color-text);
}
.unseenDot {
background-color: var(--color-text-accent);
border-radius: 100%;
width: 8px;
height: 8px;
position: absolute;
top: -1px;
left: -1px;
outline: 2px solid var(--color-bg);
}
.imageContainer {
place-self: center;
grid-area: image;
@@ -37,12 +16,33 @@
position: relative;
}
.item:hover .imageContainer {
outline: 3px solid var(--color-bg-higher);
.item {
padding: var(--s-1) var(--s-3);
display: grid;
grid-template-areas: "image header" "image timestamp";
grid-template-columns: 30px 1fr;
column-gap: var(--s-2);
padding-block: var(--s-3);
color: var(--color-text);
&:hover .imageContainer {
outline: 3px solid var(--color-bg-higher);
}
&:focus-within .imageContainer {
outline: 3px solid var(--color-accent-low);
}
}
.item:focus-within .imageContainer {
outline: 3px solid var(--color-accent-low);
.unseenDot {
background-color: var(--color-text-accent);
border-radius: 100%;
width: 8px;
height: 8px;
position: absolute;
top: -1px;
left: -1px;
outline: 2px solid var(--color-bg);
}
.itemImage {

6
app/features/notifications/routes/notifications.module.css
View File

@@ -2,8 +2,8 @@
display: flex;
align-items: center;
gap: var(--s-3);
}
.header svg {
width: 24px;
& svg {
width: 24px;
}
}

8
app/features/object-damage-calculator/routes/object-damage-calculator.module.css
View File

@@ -71,11 +71,11 @@
border-radius: var(--radius-field);
width: var(--field-size);
height: var(--field-size);
}
.receiverButton:focus-visible {
outline: var(--focus-ring);
outline-offset: 1px;
&:focus-visible {
outline: var(--focus-ring);
outline-offset: 1px;
}
}
.receiverImage {

8
app/features/plus-suggestions/plus.module.css
View File

@@ -113,11 +113,11 @@
margin-inline: auto;
padding-block: var(--s-1);
padding-inline: var(--s-3) var(--s-4);
}
.votingAlert > svg {
height: 1.75rem;
fill: var(--color-success);
& > svg {
height: 1.75rem;
fill: var(--color-success);
}
}
.votingBioHeader {

26
app/features/plus-voting/plus-voting-results.module.css
View File

@@ -22,22 +22,22 @@
display: flex;
flex-direction: row;
color: var(--color-text-accent);
}
.tierHeader::before,
.tierHeader::after {
flex: 1 1;
border-bottom: 3px solid var(--color-bg-high);
margin: auto;
content: "";
}
&::before,
&::after {
flex: 1 1;
border-bottom: 3px solid var(--color-bg-high);
margin: auto;
content: "";
}
.tierHeader::before {
margin-right: 10px;
}
&::before {
margin-right: 10px;
}
.tierHeader::after {
margin-left: 10px;
&::after {
margin-left: 10px;
}
}
.passedInfoContainer {

12
app/features/scrims/components/ScrimCard.module.css
View File

@@ -97,10 +97,10 @@
padding: 0;
text-align: left;
text-decoration: underline;
}
.expandButton:hover {
opacity: 0.8;
&:hover {
opacity: 0.8;
}
}
.footer {
@@ -135,8 +135,10 @@
gap: var(--s-0-5);
}
.strikethrough button {
text-decoration: line-through;
.strikethrough {
& button {
text-decoration: line-through;
}
}
.canceledLabel {

32
app/features/scrims/routes/scrims.$id.module.css
View File

@@ -49,16 +49,20 @@
display: flex;
align-items: center;
gap: var(--s-1);
& svg {
color: var(--color-success);
}
}
.screenBanImageWrapper {
position: relative;
display: inline-block;
line-height: 0;
}
.screenBanImageWrapper picture {
flex-shrink: 0;
& picture {
flex-shrink: 0;
}
}
.screenBanIconOverlay {
@@ -72,18 +76,16 @@
display: flex;
align-items: center;
justify-content: center;
& svg {
width: 14px;
height: 14px;
color: var(--color-bg);
}
}
.screenBanIconOverlay svg {
width: 14px;
height: 14px;
color: var(--color-bg);
}
.screenBanIndicator svg {
color: var(--color-success);
}
.screenBanIndicatorWarning svg {
color: var(--color-error);
.screenBanIndicatorWarning {
& svg {
color: var(--color-error);
}
}

6
app/features/scrims/routes/scrims.module.css
View File

@@ -12,8 +12,8 @@
display: flex;
gap: var(--s-6);
align-items: center;
}
.filterButtons button:not(.active) {
color: var(--color-text-high);
& button:not(.active) {
color: var(--color-text-high);
}
}

26
app/features/sendouq-match/routes/q.match.$id.module.css
View File

@@ -8,21 +8,21 @@
text-decoration-style: dotted;
font-weight: var(--weight-body);
height: 19.8281px;
}
.stagePopoverButton:focus {
outline: none;
color: var(--color-text-accent);
&:focus {
outline: none;
color: var(--color-text-accent);
}
}
.modePopoverButton {
background-color: transparent;
padding: 0;
border: none;
}
.modePopoverButton:focus {
outline: none;
&:focus {
outline: none;
}
}
.container {
@@ -97,16 +97,18 @@
letter-spacing: 1px;
}
.screenLegality svg {
width: 24px;
.screenLegality {
& svg {
width: 24px;
}
}
.screenLegalityButton {
width: 100%;
}
.screenLegalityButton:focus-visible {
outline: none !important;
&:focus-visible {
outline: none !important;
}
}
.preferenceEmoji {

18
app/features/sendouq-settings/components/ModeMapPoolPicker.module.css
View File

@@ -36,6 +36,10 @@
filter,
opacity 0.2s;
border-radius: var(--radius-box);
&:active {
transform: none;
}
}
@keyframes wiggle {
@@ -61,10 +65,6 @@
animation-iteration-count: 1;
}
.mapButton:active {
transform: none;
}
.mapButtonGreyedOut {
filter: grayscale(100%) !important;
opacity: 0.4 !important;
@@ -98,15 +98,15 @@
text-align: center;
}
.divider::before,
.divider::after {
border-bottom: 2px dotted var(--color-bg-higher);
}
.divider {
font-size: var(--font-xs);
font-weight: var(--weight-semi);
text-transform: uppercase;
display: flex;
gap: var(--s-2);
&::before,
&::after {
border-bottom: 2px dotted var(--color-bg-higher);
}
}

6
app/features/sendouq-settings/components/PreferenceRadioGroup.module.css
View File

@@ -20,10 +20,10 @@
.checked {
color: var(--color-text);
outline: 2px solid var(--color-bg-higher);
}
.checked .emoji {
filter: grayscale(0%);
& .emoji {
filter: grayscale(0%);
}
}
.focusVisible {

20
app/features/sendouq-settings/routes/q.settings.module.css
View File

@@ -6,18 +6,18 @@
font-weight: var(--weight-bold);
margin-block-end: var(--s-4);
position: relative;
}
.summary > div {
display: inline-flex;
}
& > div {
display: inline-flex;
}
.summary svg {
width: 24px;
color: var(--color-text-accent);
position: absolute;
right: 20px;
top: 14px;
& svg {
width: 24px;
color: var(--color-text-accent);
position: absolute;
right: 20px;
top: 14px;
}
}
.volumeSliderIcon {

6
app/features/sendouq-streams/routes/q.streams.module.css
View File

@@ -14,10 +14,10 @@
align-items: center;
margin-block-start: -5px;
color: var(--color-text-high);
}
.viewerCount > svg {
width: 0.75rem;
& > svg {
width: 0.75rem;
}
}
.infoCircle {

8
app/features/sendouq/components/GroupCard.module.css
View File

@@ -107,11 +107,11 @@
white-space: nowrap;
height: 100%;
border-radius: var(--radius-selector);
}
.addNoteButton > svg {
width: 18px;
height: 18px;
& > svg {
width: 18px;
height: 18px;
}
}
.noteTextarea {

60
app/features/sendouq/routes/q.info.module.css
View File

@@ -3,38 +3,40 @@
flex-direction: column;
gap: var(--s-4);
font-size: var(--font-md);
& h2 {
font-size: var(--font-lg);
margin-block-end: var(--s-2);
color: var(--color-text-accent);
}
& h3 {
font-size: var(--font-md);
margin-block-end: var(--s-3);
}
& p {
margin-block: var(--s-2);
}
}
.container h2 {
font-size: var(--font-lg);
margin-block-end: var(--s-2);
color: var(--color-text-accent);
}
.tableOfContents {
& ul {
padding-left: 0;
}
.container h3 {
font-size: var(--font-md);
margin-block-end: var(--s-3);
}
& li {
list-style: none;
font-size: var(--font-sm);
font-weight: var(--weight-semi);
}
.container p {
margin-block: var(--s-2);
}
& li:has(button) {
margin-block-start: var(--s-2);
}
.tableOfContents ul {
padding-left: 0;
}
.tableOfContents li {
list-style: none;
font-size: var(--font-sm);
font-weight: var(--weight-semi);
}
.tableOfContents li:has(button) {
margin-block-start: var(--s-2);
}
.tableOfContents li:not(:has(button)) {
margin-inline-start: var(--s-2);
font-size: var(--font-xs);
& li:not(:has(button)) {
margin-inline-start: var(--s-2);
font-size: var(--font-xs);
}
}

18
app/features/sendouq/routes/q.looking.module.css
View File

@@ -23,14 +23,14 @@
color: var(--color-text-accent);
display: flex;
align-items: center;
}
.header::before,
.header::after {
flex: 1;
content: "";
padding: 2px;
background-color: var(--color-bg-high);
margin: 5px;
border-radius: var(--radius-box);
&::before,
&::after {
flex: 1;
content: "";
padding: 2px;
background-color: var(--color-bg-high);
margin: 5px;
border-radius: var(--radius-box);
}
}

6
app/features/sendouq/routes/q.module.css
View File

@@ -32,10 +32,10 @@
align-items: center;
gap: var(--s-3);
transition: background-color 0.2s;
}
.frontPageLink:hover {
background-color: var(--color-bg-higher);
&:hover {
background-color: var(--color-bg-higher);
}
}
.linkSubText {

46
app/features/team/team.module.css
View File

@@ -52,29 +52,33 @@
width: 24.4px;
display: grid;
place-items: center;
}
.bskyLink > svg {
width: 0.9rem;
}
& > svg {
width: 0.9rem;
}
.bskyLink path {
fill: #1285fe;
& path {
fill: #1285fe;
}
}
.bannerAvatar {
grid-area: avatar;
align-self: flex-end;
margin-bottom: -110px;
}
.bannerAvatar > div {
padding: var(--s-2);
background-color: var(--color-bg);
border-radius: var(--radius-avatar);
display: grid;
place-items: center;
width: 7rem;
& > div {
padding: var(--s-2);
background-color: var(--color-bg);
border-radius: var(--radius-avatar);
display: grid;
place-items: center;
width: 7rem;
}
& img {
border-radius: var(--radius-avatar);
}
}
.bannerAvatarSpacer {
@@ -116,10 +120,6 @@
margin-block: var(--s-1);
}
.bannerAvatar img {
border-radius: var(--radius-avatar);
}
.actionButtons {
display: flex;
justify-content: center;
@@ -146,12 +146,12 @@
list-style: none;
display: flex;
gap: var(--s-4);
}
.resultsPlacements > li {
display: flex;
align-items: center;
gap: var(--s-1);
& > li {
display: flex;
align-items: center;
gap: var(--s-1);
}
}
.member {

12
app/features/tier-list-maker/components/TierListItemImage.module.css
View File

@@ -1,8 +1,10 @@
.imageWrapper img {
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
.imageWrapper {
& img {
pointer-events: none;
user-select: none;
-webkit-user-select: none;
-webkit-touch-callout: none;
}
}
.modeOverlay {

32
app/features/tier-list-maker/components/TierRow.module.css
View File

@@ -17,10 +17,10 @@
cursor: pointer;
transition: opacity 0.2s;
border: none;
}
.tierLabel:hover {
opacity: 0.9;
&:hover {
opacity: 0.9;
}
}
.tierName {
@@ -91,6 +91,15 @@
border: none;
cursor: pointer;
transition: opacity 0.2s;
&:hover:not(:disabled) {
opacity: 0.8;
}
&:disabled {
opacity: 0.3;
cursor: not-allowed;
}
}
.arrowButtonUpper {
@@ -101,15 +110,6 @@
border-radius: 0 0 var(--radius-field) 0;
}
.arrowButton:hover:not(:disabled) {
opacity: 0.8;
}
.arrowButton:disabled {
opacity: 0.3;
cursor: not-allowed;
}
.arrowIcon {
width: 20px;
height: 20px;
@@ -137,11 +137,11 @@
cursor: pointer;
transition: all 0.2s;
padding: 0;
}
.colorButton:hover {
transform: scale(1.1);
border-color: var(--color-text-high);
&:hover {
transform: scale(1.1);
border-color: var(--color-text-high);
}
}
.colorButtonSelected {

14
app/features/tier-list-maker/routes/tier-list-maker.module.css
View File

@@ -41,15 +41,15 @@
border: none;
color: var(--color-text);
outline: none;
}
.titleInput::placeholder {
color: var(--color-text-high);
opacity: 0.3;
}
&::placeholder {
color: var(--color-text-high);
opacity: 0.3;
}
.titleInput:focus::placeholder {
opacity: 0.5;
&:focus::placeholder {
opacity: 0.5;
}
}
.authorSection {

24
app/features/top-search/top-search.module.css
View File

@@ -35,24 +35,24 @@
color: var(--color-text);
transition: 0.1s ease-in-out background-color;
border-radius: 0;
&:first-of-type {
border-radius: var(--radius-box) var(--radius-box) 0 0;
}
&:last-of-type {
border-radius: 0 0 var(--radius-box) var(--radius-box);
}
&:only-child {
border-radius: var(--radius-box);
}
}
a.tableRow:hover {
background-color: var(--color-bg-higher);
}
.tableRow:first-of-type {
border-radius: var(--radius-box) var(--radius-box) 0 0;
}
.tableRow:last-of-type {
border-radius: 0 0 var(--radius-box) var(--radius-box);
}
.tableRow:only-child {
border-radius: var(--radius-box);
}
.tableRowQualification {
font-size: var(--font-xs);
font-weight: var(--weight-semi);

62
app/features/tournament-bracket/components/Bracket/bracket.module.css
View File

@@ -250,30 +250,30 @@ a.match:hover {
min-width: max-content;
overflow-x: auto;
max-width: 600px;
}
.rrPlacementsTable thead {
color: var(--color-text-high);
}
& thead {
color: var(--color-text-high);
}
.rrPlacementsTable th {
text-align: left;
}
& th {
text-align: left;
.rrPlacementsTable th abbr {
padding-inline: var(--s-2);
}
& abbr {
padding-inline: var(--s-2);
}
}
.rrPlacementsTable td span {
padding-inline: var(--s-2);
}
& td span {
padding-inline: var(--s-2);
}
.rrPlacementsTable tbody tr:nth-child(odd) {
background-color: var(--color-bg-high);
}
& tbody tr:nth-child(odd) {
background-color: var(--color-bg-high);
}
.rrPlacementsTable tbody tr:nth-child(even) {
background-color: var(--color-bg-higher);
& tbody tr:nth-child(even) {
background-color: var(--color-bg-higher);
}
}
.standingsDividerRow {
@@ -303,18 +303,22 @@ a.match:hover {
white-space: nowrap;
}
.standingsDividerQualified .standingsDividerLine {
background-color: var(--color-success);
.standingsDividerQualified {
& .standingsDividerLine {
background-color: var(--color-success);
}
& .standingsDividerText {
color: var(--color-success);
}
}
.standingsDividerQualified .standingsDividerText {
color: var(--color-success);
}
.standingsDividerEliminated {
& .standingsDividerLine {
background-color: var(--color-error);
}
.standingsDividerEliminated .standingsDividerLine {
background-color: var(--color-error);
}
.standingsDividerEliminated .standingsDividerText {
color: var(--color-error);
& .standingsDividerText {
color: var(--color-error);
}
}

30
app/features/tournament-bracket/components/BracketMapListDialog.module.css
View File

@@ -36,25 +36,25 @@
font-weight: var(--weight-semi);
cursor: pointer;
transition: background-color 0.2s ease;
}
.roundButton:hover:not(:disabled):not(.roundButtonActive) {
background-color: var(--color-bg-higher);
}
&:hover:not(:disabled):not(.roundButtonActive) {
background-color: var(--color-bg-higher);
}
.roundButton:disabled {
opacity: 0.5;
cursor: not-allowed;
}
&:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.roundButton:focus-visible {
outline: var(--focus-ring);
outline-offset: 1px;
}
&:focus-visible {
outline: var(--focus-ring);
outline-offset: 1px;
}
.roundButton svg {
width: 1rem;
height: 1rem;
& svg {
width: 1rem;
height: 1rem;
}
}
.roundButtonActive {

16
app/features/tournament-bracket/components/MatchActionsBanPicker.module.css
View File

@@ -3,17 +3,17 @@
--map-height: 50px;
}
.divider::before,
.divider::after {
border-bottom: 2px dotted var(--color-bg-higher);
}
.divider {
font-size: var(--font-xs);
font-weight: var(--weight-semi);
text-transform: uppercase;
display: flex;
gap: var(--s-2);
&::before,
&::after {
border-bottom: 2px dotted var(--color-bg-higher);
}
}
.mapButton {
@@ -27,10 +27,10 @@
filter,
opacity 0.2s;
border-radius: var(--radius-box);
}
.mapButton:active {
transform: none;
&:active {
transform: none;
}
}
.mapButtonGreyedOut {

6
app/features/tournament-bracket/components/MatchTimer.module.css
View File

@@ -58,6 +58,8 @@
text-shadow: 0 0 3px var(--color-text-inverse);
}
.gameMarkerHidden .gameMarkerText {
visibility: hidden;
.gameMarkerHidden {
& .gameMarkerText {
visibility: hidden;
}
}

22
app/features/tournament-bracket/routes/to.$id.divisions.module.css
View File

@@ -13,20 +13,20 @@
width: 100%;
white-space: nowrap;
border: var(--border-style);
}
.link:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 3px;
&:focus-visible {
outline: 3px solid var(--color-accent);
outline-offset: 3px;
}
}
.participant {
outline: 3px solid var(--color-bg-higher);
outline-offset: 3px;
}
.participant svg {
fill: var(--color-accent);
& svg {
fill: var(--color-accent);
}
}
.participantCounts {
@@ -37,9 +37,9 @@
font-size: var(--fonts-sm);
gap: var(--s-2);
margin-block-end: var(--s-1);
}
.participantCounts > svg {
width: 1rem;
margin-block-end: 1px;
& > svg {
width: 1rem;
margin-block-end: 1px;
}
}

118
app/features/tournament-bracket/tournament-bracket.module.css
View File

@@ -20,8 +20,10 @@
letter-spacing: 0.3px;
}
.infosValue > button {
font-size: var(--font-2xs);
.infosValue {
& > button {
font-size: var(--font-2xs);
}
}
.lockedBanner {
@@ -86,9 +88,11 @@
bottom: 8px;
}
.stageBanner:has(.stageBannerEndSetButton)
.stageBannerUndoButton:not(.stageBannerEndSetButton) {
right: 72px;
.stageBanner {
&:has(.stageBannerEndSetButton)
.stageBannerUndoButton:not(.stageBannerEndSetButton) {
right: 72px;
}
}
.deadlinePopover {
@@ -154,15 +158,17 @@
.noScreen {
display: flex;
gap: var(--s-0-5);
& > svg {
width: 24px;
color: var(--color-success);
}
}
.noScreen > svg {
width: 24px;
color: var(--color-success);
}
.noScreenBanned > svg {
color: var(--color-error);
.noScreenBanned {
& > svg {
color: var(--color-error);
}
}
.duringMatchActions {
@@ -229,15 +235,13 @@
display: flex;
align-items: center;
flex: 1;
}
.duringMatchActionsCheckboxName:not(:global(.disabled-opaque)):not(
:global(.presentational)
):hover {
border-radius: var(--radius-box);
cursor: pointer;
outline: 2px solid var(--color-accent-high);
outline-offset: 2px;
&:not(:global(.disabled-opaque)):not(:global(.presentational)):hover {
border-radius: var(--radius-box);
cursor: pointer;
outline: 2px solid var(--color-accent-high);
outline-offset: 2px;
}
}
.duringMatchActionsCheckbox:not(#_) {
@@ -336,11 +340,11 @@
font-size: var(--font-xs);
font-weight: var(--weight-semi);
flex-direction: column;
}
.rosters ul {
padding: 0;
list-style: none;
& ul {
padding: 0;
list-style: none;
}
}
.rostersSpacedHeader {
@@ -382,11 +386,11 @@
padding: var(--s-3);
outline: 2px solid var(--color-bg-higher);
min-width: 40px;
}
.modeProgressImage > svg {
width: 20px;
height: 20px;
& > svg {
width: 20px;
height: 20px;
}
}
.modeProgressImageNotable {
@@ -410,10 +414,10 @@
.modeProgressImageBanned {
outline: 2px solid var(--color-error);
background-color: var(--color-bg-high);
}
.modeProgressImageBanned > img {
filter: grayscale(100%);
& > img {
filter: grayscale(100%);
}
}
.modeProgressImageBannedPopoverTrigger:focus-visible {
@@ -509,14 +513,16 @@
width: 280px;
}
.actionSectionWrapper [class*="tabPanel"] {
background-color: var(--color-bg-high);
border-radius: 0 0 var(--radius-box) var(--radius-box);
padding: var(--s-4);
}
.actionSectionWrapper {
& [class*="tabPanel"] {
background-color: var(--color-bg-high);
border-radius: 0 0 var(--radius-box) var(--radius-box);
padding: var(--s-4);
.actionSectionWrapper [class*="tabPanel"]:has([class*="chatContainer"]) {
padding: var(--s-1) var(--s-4);
&:has([class*="chatContainer"]) {
padding: var(--s-1) var(--s-4);
}
}
}
.bracketNavLink {
@@ -525,30 +531,30 @@
border-color: var(--color-bg-higher);
background-color: var(--color-bg);
border-radius: 0;
&:active {
transform: translateY(0px);
}
&:first-of-type {
border-start-start-radius: var(--radius-box);
border-end-start-radius: var(--radius-box);
}
&:not(&:first-of-type) {
margin-left: -2px;
}
&:last-of-type {
border-start-end-radius: var(--radius-box);
border-end-end-radius: var(--radius-box);
}
}
.bracketNavLinkBig {
font-size: var(--font-lg);
}
.bracketNavLink:active {
transform: translateY(0px);
}
.bracketNavLink:first-of-type {
border-start-start-radius: var(--radius-box);
border-end-start-radius: var(--radius-box);
}
.bracketNavLink:not(.bracketNavLink:first-of-type) {
margin-left: -2px;
}
.bracketNavLink:last-of-type {
border-start-end-radius: var(--radius-box);
border-end-end-radius: var(--radius-box);
}
.bracketNavLinkSelected {
color: var(--color-text);
background-color: var(--color-bg-high);

24
app/features/tournament-lfg/routes/to.$id.looking.module.css
View File

@@ -23,16 +23,16 @@
color: var(--color-text-accent);
display: flex;
align-items: center;
}
.header::before,
.header::after {
flex: 1;
content: "";
padding: 2px;
background-color: var(--color-bg-high);
margin: 5px;
border-radius: var(--radius-box);
&::before,
&::after {
flex: 1;
content: "";
padding: 2px;
background-color: var(--color-bg-high);
margin: 5px;
border-radius: var(--radius-box);
}
}
.subsContainer {
@@ -84,10 +84,10 @@
display: flex;
align-items: center;
gap: var(--s-0-5);
}
.subsInfoVc > svg {
width: 18px;
& > svg {
width: 18px;
}
}
.subsSectionMessage {

6
app/features/tournament-organization/components/BannedPlayersList.module.css
View File

@@ -26,10 +26,10 @@
padding: 0;
text-align: left;
text-decoration: underline;
}
.expandButton:hover {
opacity: 0.8;
&:hover {
opacity: 0.8;
}
}
.banPlayerButton {

56
app/features/tournament-organization/tournament-organization.module.css
View File

@@ -82,15 +82,15 @@
justify-content: space-between;
gap: var(--s-2);
font-weight: var(--weight-bold);
}
.calendarMonthSelector a {
font-size: var(--font-xl);
}
& a {
font-size: var(--font-xl);
}
.calendarMonthSelector > div {
font-size: var(--font-lg);
margin-block-start: var(--s-1);
& > div {
font-size: var(--font-lg);
margin-block-start: var(--s-1);
}
}
.sectionDivider {
@@ -130,10 +130,10 @@
font-weight: var(--weight-semi);
color: var(--color-text);
width: max-content;
}
.eventInfo img {
border-radius: var(--radius-avatar);
& img {
border-radius: var(--radius-avatar);
}
}
.eventInfoTime {
@@ -146,13 +146,13 @@
display: flex;
gap: var(--s-4);
flex-direction: column;
}
.leaderboardList li::marker {
font-size: var(--font-lg);
font-weight: var(--weight-bold);
color: var(--color-accent);
padding-inline-end: var(--s-2);
& li::marker {
font-size: var(--font-lg);
font-weight: var(--weight-bold);
color: var(--color-accent);
padding-inline-end: var(--s-2);
}
}
.leaderboardListRow {
@@ -169,10 +169,10 @@
gap: var(--s-2);
align-items: center;
max-width: max-content;
}
.socialLink svg {
width: 18px;
& svg {
width: 18px;
}
}
.socialLinkIconContainer {
@@ -183,14 +183,20 @@
padding: var(--s-2);
}
.socialLinkTwitch svg {
fill: #9146ff;
.socialLinkTwitch {
& svg {
fill: #9146ff;
}
}
.socialLinkYoutube svg {
fill: #f00;
.socialLinkYoutube {
& svg {
fill: #f00;
}
}
.socialLinkBsky path {
fill: #1285fe;
.socialLinkBsky {
& path {
fill: #1285fe;
}
}

28
app/features/tournament/routes/to.$id.seeds.module.css
View File

@@ -89,19 +89,19 @@
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
.dragHandle:hover {
color: var(--color-text);
}
&:hover {
color: var(--color-text);
}
.dragHandle:active:not(:disabled) {
cursor: grabbing;
}
&:active:not(:disabled) {
cursor: grabbing;
}
.dragHandle:disabled {
cursor: not-allowed;
opacity: 0.5;
&:disabled {
cursor: not-allowed;
opacity: 0.5;
}
}
.seedInput {
@@ -112,11 +112,11 @@
background-color: var(--color-bg);
color: var(--color-text);
font-size: var(--font-xs);
}
.seedInput:focus {
outline: var(--focus-ring);
outline-offset: 1px;
&:focus {
outline: var(--focus-ring);
outline-offset: 1px;
}
}
.teamNameContainer {

68
app/features/tournament/tournament.module.css
View File

@@ -171,34 +171,34 @@
.infoDescription {
white-space: pre-wrap;
}
.infoDescription > :is(h1, h2, h3, h4, h5, h6) {
margin-block-end: var(--s-6);
}
& > :is(h1, h2, h3, h4, h5, h6) {
margin-block-end: var(--s-6);
}
.infoDescription > :is(h2, h3, h4, h5, h6) {
margin-block-start: var(--s-6);
}
& > :is(h2, h3, h4, h5, h6) {
margin-block-start: var(--s-6);
}
.infoDescription > :first-child {
margin-block-start: 0;
}
& > :first-child {
margin-block-start: 0;
}
.infoDescription > h1 {
font-size: var(--font-xl);
}
& > h1 {
font-size: var(--font-xl);
}
.infoDescription > :is(h2, h3, h4, h5, h6) {
font-size: var(--font-lg);
}
& > :is(h2, h3, h4, h5, h6) {
font-size: var(--font-lg);
}
.infoDescription > :is(h3, h4, h5, h6) {
font-size: var(--font-md);
}
& > :is(h3, h4, h5, h6) {
font-size: var(--font-md);
}
.infoDescription > ul:has(+ p) {
margin-block-end: var(--s-6);
& > ul:has(+ p) {
margin-block-end: var(--s-6);
}
}
.by {
@@ -283,10 +283,10 @@
align-items: center;
margin-block-start: -5px;
color: var(--color-text-high);
}
.streamViewerCount > svg {
width: 0.75rem;
& > svg {
width: 0.75rem;
}
}
.teamStats {
@@ -315,11 +315,11 @@
.teamStatMain {
font-size: var(--font-xl);
font-weight: var(--weight-semi);
}
.teamStatMain sup {
font-size: var(--font-sm);
font-weight: var(--weight-semi);
& sup {
font-size: var(--font-sm);
font-weight: var(--weight-semi);
}
}
.teamStatSub {
@@ -449,13 +449,13 @@
align-items: center;
color: var(--color-accent);
font-size: var(--font-lg);
}
.overlapDivider::before,
.overlapDivider::after {
flex: 1;
border-bottom: 2px solid var(--color-bg-higher);
content: "";
&::before,
&::after {
flex: 1;
border-bottom: 2px solid var(--color-bg-higher);
content: "";
}
}
.standingsMatchResultSquare {

14
app/features/user-page/components/GameBadgeSelectField.module.css
View File

@@ -23,15 +23,15 @@
border-radius: var(--rounded-sm);
padding: var(--s-0-5);
transition: background-color 0.15s;
}
.badgeButton:hover {
background-color: var(--bg-lightest);
}
&:hover {
background-color: var(--bg-lightest);
}
.badgeButton:focus-visible {
outline: 2px solid var(--theme);
outline-offset: 2px;
&:focus-visible {
outline: 2px solid var(--theme);
outline-offset: 2px;
}
}
.badgeImage {

6
app/features/user-page/components/MutualFriends.module.css
View File

@@ -15,10 +15,10 @@
.stackedAvatar {
border-radius: 50%;
border: 2px solid var(--color-bg);
}
.stackedAvatar:not(:first-child) {
margin-inline-start: -8px;
&:not(:first-child) {
margin-inline-start: -8px;
}
}
.overflow {

12
app/features/user-page/components/SubPageHeader.module.css
View File

@@ -31,14 +31,14 @@
border: 2px solid var(--color-bg-higher);
color: var(--color-text);
transition: all 0.2s;
}
.backButton svg {
min-width: 30px;
}
& svg {
min-width: 30px;
}
.backButton:hover {
background-color: var(--color-bg-higher);
&:hover {
background-color: var(--color-bg-higher);
}
}
.backIcon {

22
app/features/user-page/components/UserPageIconNav.module.css
View File

@@ -22,20 +22,20 @@
color: var(--color-text);
transition: all 0.2s;
cursor: pointer;
}
.iconNavItem:hover {
background-color: var(--color-bg-higher);
}
&:hover {
background-color: var(--color-bg-higher);
}
.iconNavItem:focus-visible {
outline: 2px solid var(--color-text-second);
outline-offset: 2px;
}
&:focus-visible {
outline: 2px solid var(--color-text-second);
outline-offset: 2px;
}
.iconNavItem.active {
border-color: var(--color-text-second);
background-color: var(--color-bg-higher);
&.active {
border-color: var(--color-text-second);
background-color: var(--color-bg-higher);
}
}
@container (width >= 720px) {

60
app/features/user-page/components/Widget.module.css
View File

@@ -125,14 +125,14 @@
gap: var(--s-1);
max-width: 100%;
overflow: hidden;
}
.tournamentName a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
max-width: 175px;
& a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
max-width: 175px;
}
}
.resultDate {
@@ -179,10 +179,10 @@
padding: var(--s-2);
transition: background-color 0.2s;
background-color: var(--color-bg-high);
}
.lfgPost:hover {
background-color: var(--color-bg-higher);
&:hover {
background-color: var(--color-bg-higher);
}
}
.xRankPeaks {
@@ -267,10 +267,10 @@
align-items: center;
word-break: break-all;
overflow-wrap: break-word;
}
.socialLink svg {
width: 18px;
& svg {
width: 18px;
}
}
.socialLinkIconContainer {
@@ -280,28 +280,28 @@
border-radius: var(--radius-box);
padding: var(--s-2);
flex-shrink: 0;
}
.socialLinkIconContainer svg {
width: 18px;
height: 18px;
fill: var(--color-text);
}
& svg {
width: 18px;
height: 18px;
fill: var(--color-text);
}
.socialLinkIconContainer.twitch svg {
fill: #9146ff;
}
&.twitch svg {
fill: #9146ff;
}
.socialLinkIconContainer.youtube svg {
fill: #f00;
}
&.youtube svg {
fill: #f00;
}
.socialLinkIconContainer.bsky path {
fill: #1285fe;
}
&.bsky path {
fill: #1285fe;
}
.socialLinkIconContainer.discord svg {
fill: #5865f2;
&.discord svg {
fill: #5865f2;
}
}
.socialLinksIcons {

38
app/features/user-page/routes/u.$identifier.edit-widgets.module.css
View File

@@ -13,11 +13,11 @@
margin-bottom: var(--s-6);
flex-wrap: wrap;
gap: var(--s-4);
}
.header h1 {
font-size: var(--font-xl);
font-weight: var(--weight-bold);
& h1 {
font-size: var(--font-xl);
font-weight: var(--weight-bold);
}
}
.actions {
@@ -166,6 +166,21 @@
border-radius: var(--radius-box);
background-color: var(--color-bg-high);
transition: opacity 0.2s;
& .widgetName {
cursor: grab;
user-select: none;
-webkit-user-select: none;
touch-action: none;
&:active {
cursor: grabbing;
}
}
&.isDragging {
opacity: 0.5;
}
}
.widgetSettings {
@@ -175,21 +190,6 @@
border-radius: var(--radius-box);
}
.draggableWidget .widgetName {
cursor: grab;
user-select: none;
-webkit-user-select: none;
touch-action: none;
}
.draggableWidget .widgetName:active {
cursor: grabbing;
}
.draggableWidget.isDragging {
opacity: 0.5;
}
.selectedWidgetsList {
display: flex;
flex-direction: column;

8
app/features/user-page/routes/u.$identifier.module.css
View File

@@ -62,11 +62,11 @@
gap: var(--s-4);
padding-block: var(--s-2);
scroll-snap-type: x mandatory;
}
.sideCarousel > * {
flex: 0 0 280px;
scroll-snap-align: start;
& > * {
flex: 0 0 280px;
scroll-snap-align: start;
}
}
.mainStack {

88
app/features/user-page/user-page.module.css
View File

@@ -48,39 +48,43 @@
border-radius: 50%;
}
.extraInfoHeading > svg {
width: 0.8rem;
.extraInfoHeading {
& > svg {
width: 0.8rem;
}
}
.socialLink > svg {
width: 0.9rem;
.socialLink {
& > svg {
width: 0.9rem;
}
}
.socialLinkYoutube {
border-color: #f00;
background-color: #ff00002f;
}
.socialLinkYoutube > svg {
fill: #f00;
& > svg {
fill: #f00;
}
}
.socialLinkTwitch {
border-color: #9146ff;
background-color: #9146ff2f;
}
.socialLinkTwitch > svg {
fill: #9146ff;
& > svg {
fill: #9146ff;
}
}
.socialLinkBattlefy {
border-color: #de4c5e;
background-color: #de4c5e2f;
}
.socialLinkBattlefy > svg {
fill: #de4c5e;
& > svg {
fill: #de4c5e;
}
}
.socialLinkBsky {
@@ -88,10 +92,10 @@
background-color: #1285fe2f;
display: grid;
place-items: center;
}
.socialLinkBsky path {
fill: #1285fe;
& path {
fill: #1285fe;
}
}
.extraInfos {
@@ -125,11 +129,11 @@
.resultsTableHighlights {
border: var(--s-2) solid var(--color-bg-high);
padding-inline: 0 !important;
}
.resultsTableHighlights > legend {
margin-inline-start: var(--s-2);
padding-inline: var(--s-1);
& > legend {
margin-inline-start: var(--s-2);
padding-inline: var(--s-1);
}
}
.resultsPlayers {
@@ -162,10 +166,10 @@
color: var(--color-text);
gap: var(--s-6);
transition: 0.1s ease-in-out background-color;
}
.placements:hover {
background-color: var(--color-bg-higher);
&:hover {
background-color: var(--color-bg-higher);
}
}
.placementsMode {
@@ -257,6 +261,10 @@
display: flex;
flex-direction: column;
gap: var(--s-4);
&:hover {
background-color: var(--color-bg-higher);
}
}
.seasonMatchWithSubSection {
@@ -275,10 +283,6 @@
padding-block: var(--s-0-5);
}
.seasonMatch:hover {
background-color: var(--color-bg-higher);
}
.seasonMatchUser {
display: flex;
flex-direction: column;
@@ -307,23 +311,23 @@
flex-direction: row;
margin: 0 auto;
padding: 0;
}
.seasonMatchSetResults li {
width: 28px;
height: 28px;
display: grid;
place-items: center;
font-size: var(--font-xs);
font-weight: var(--weight-semi);
border: 3px solid var(--color-accent);
border-radius: var(--radius-field);
color: var(--color-text);
border-color: var(--color-error);
}
& li {
width: 28px;
height: 28px;
display: grid;
place-items: center;
font-size: var(--font-xs);
font-weight: var(--weight-semi);
border: 3px solid var(--color-accent);
border-radius: var(--radius-field);
color: var(--color-text);
border-color: var(--color-error);
.seasonMatchSetResults li[data-is-win="true"] {
border-color: var(--color-success);
&[data-is-win="true"] {
border-color: var(--color-success);
}
}
}
.seasonInfoContainer {

6
app/features/vods/routes/vods.$id.module.css
View File

@@ -38,8 +38,8 @@
position: absolute;
top: -15px;
right: -15px;
}
.matchMode.cast {
right: -8px;
&.cast {
right: -8px;
}
}

16
app/form/fields/FormFieldWrapper.module.css
View File

@@ -1,12 +1,12 @@
.root {
width: 100%;
}
.root input:not([type="radio"], [type="checkbox"]),
.root textarea,
.root select,
.root .react-aria-Group,
.root .react-aria-Select button,
.root .react-aria-DatePicker {
width: 100%;
& input:not([type="radio"], [type="checkbox"]),
& textarea,
& select,
& .react-aria-Group,
& .react-aria-Select button,
& .react-aria-DatePicker {
width: 100%;
}
}

6
app/form/fields/StageSelectFormField.module.css
View File

@@ -1,3 +1,5 @@
.root button[class] {
width: 100%;
.root {
& button[class] {
width: 100%;
}
}

6
app/form/fields/UserSearchFormField.module.css
View File

@@ -1,7 +1,7 @@
.root {
width: 100%;
}
.root button[class] {
width: 100%;
& button[class] {
width: 100%;
}
}

12
app/form/fields/WeaponPoolFormField.module.css
View File

@@ -17,10 +17,10 @@
border-radius: var(--radius-box);
background-color: var(--color-bg-high);
transition: opacity 0.2s;
}
.item.isDragging {
opacity: 0.5;
&.isDragging {
opacity: 0.5;
}
}
.dragHandle {
@@ -33,10 +33,10 @@
border: none;
padding: 0;
flex-shrink: 0;
}
.dragHandle:active {
cursor: grabbing;
&:active {
cursor: grabbing;
}
}
.weaponName {

6
app/form/fields/WeaponSelectFormField.module.css
View File

@@ -1,3 +1,5 @@
.root button[class] {
width: 100%;
.root {
& button[class] {
width: 100%;
}
}

202
app/styles/common.css
View File

@@ -66,10 +66,12 @@
color: inherit;
}
details summary {
cursor: pointer;
user-select: none;
-webkit-user-select: none;
details {
& summary {
cursor: pointer;
user-select: none;
-webkit-user-select: none;
}
}
a {
@@ -109,11 +111,11 @@
height: var(--field-size);
font-size: var(--font-sm);
outline: none;
}
.input-container:focus-within {
outline: var(--focus-ring);
outline-offset: 1px;
&:focus-within {
outline: var(--focus-ring);
outline-offset: 1px;
}
}
.in-container {
@@ -436,16 +438,16 @@
input[type="color"] {
padding: calc(var(--field-size) / 8) var(--field-padding);
}
input[type="color"]::-webkit-color-swatch {
border: 0;
border-radius: var(--radius-field);
}
&::-webkit-color-swatch {
border: 0;
border-radius: var(--radius-field);
}
input[type="color"]::-moz-color-swatch {
border: 0;
border-radius: var(--radius-field);
&::-moz-color-swatch {
border: 0;
border-radius: var(--radius-field);
}
}
input[type="file"] {
@@ -454,14 +456,14 @@
font-size: var(--font-sm);
color: var(--color-text-high);
overflow: hidden;
}
input[type="file"]::file-selector-button {
height: 100%;
border: none;
background-color: var(--color-bg-higher);
white-space: nowrap;
margin-right: var(--s-2);
&::file-selector-button {
height: 100%;
border: none;
background-color: var(--color-bg-higher);
white-space: nowrap;
margin-right: var(--s-2);
}
}
input[type="range"] {
@@ -482,54 +484,54 @@
--track-color: var(--color-bg-higher);
--thumb-color: var(--color-text-accent);
}
}
input[type="range"]::-webkit-slider-runnable-track {
width: 100%;
height: calc(var(--selector-size) / 4);
background-color: var(--track-color);
border-radius: var(--radius-full);
transition: 100ms background-color;
}
&::-webkit-slider-runnable-track {
width: 100%;
height: calc(var(--selector-size) / 4);
background-color: var(--track-color);
border-radius: var(--radius-full);
transition: 100ms background-color;
}
input[type="range"]::-moz-range-track {
width: 100%;
height: calc(var(--selector-size) / 4);
background-color: var(--track-color);
border-radius: var(--radius-full);
transition: 100ms background-color;
}
&::-moz-range-track {
width: 100%;
height: calc(var(--selector-size) / 4);
background-color: var(--track-color);
border-radius: var(--radius-full);
transition: 100ms background-color;
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: var(--selector-size);
height: var(--selector-size);
margin-top: calc(
(calc(var(--selector-size) / 4) - var(--selector-size)) /
2
);
background-color: var(--thumb-color);
border: 2px solid var(--color-bg);
border-radius: var(--radius-full);
cursor: pointer;
transition: 100ms background-color;
}
&::-webkit-slider-thumb {
-webkit-appearance: none;
appearance: none;
width: var(--selector-size);
height: var(--selector-size);
margin-top: calc(
(calc(var(--selector-size) / 4) - var(--selector-size)) /
2
);
background-color: var(--thumb-color);
border: 2px solid var(--color-bg);
border-radius: var(--radius-full);
cursor: pointer;
transition: 100ms background-color;
}
input[type="range"]::-moz-range-thumb {
-webkit-appearance: none;
appearance: none;
width: var(--selector-size);
height: var(--selector-size);
margin-top: calc(
(calc(var(--selector-size) / 4) - var(--selector-size)) /
2
);
background-color: var(--thumb-color);
border: 2px solid var(--color-bg);
border-radius: var(--radius-full);
cursor: pointer;
transition: 100ms background-color;
&::-moz-range-thumb {
-webkit-appearance: none;
appearance: none;
width: var(--selector-size);
height: var(--selector-size);
margin-top: calc(
(calc(var(--selector-size) / 4) - var(--selector-size)) /
2
);
background-color: var(--thumb-color);
border: 2px solid var(--color-bg);
border-radius: var(--radius-full);
cursor: pointer;
transition: 100ms background-color;
}
}
progress {
@@ -545,20 +547,20 @@
background-color: var(--color-bg-high);
color: var(--color-text-accent);
vertical-align: baseline;
}
progress::-webkit-progress-bar {
border-radius: var(--radius-full);
background: 0 0;
}
&::-webkit-progress-bar {
border-radius: var(--radius-full);
background: 0 0;
}
progress::-moz-progress-bar {
background-color: var(--color-text-accent);
}
&::-moz-progress-bar {
background-color: var(--color-text-accent);
}
progress[value]::-webkit-progress-value {
background-color: var(--color-text-accent);
transition: inline-size 0.2s ease;
&[value]::-webkit-progress-value {
background-color: var(--color-text-accent);
transition: inline-size 0.2s ease;
}
}
td > input[type="checkbox"] {
@@ -569,20 +571,24 @@
border: 1px solid var(--color-bg-high);
}
abbr:not([title]) {
text-decoration: none;
abbr {
&:not([title]) {
text-decoration: none;
}
&[title] {
cursor: help;
}
}
abbr[title] {
cursor: help;
}
.article {
& > p {
padding-block: var(--s-3);
}
.article > p {
padding-block: var(--s-3);
}
.article img {
height: auto;
& img {
height: auto;
}
}
/* Hack to deal with Safari bug when the image is loading. See: https://stackoverflow.com/a/73466877 */
@@ -593,16 +599,18 @@
}
}
#nprogress .bar {
background: var(--color-text-accent) !important;
}
#nprogress {
& .bar {
background: var(--color-text-accent) !important;
}
#nprogress .spinner {
display: none !important;
}
& .spinner {
display: none !important;
}
#nprogress .peg {
display: none !important;
& .peg {
display: none !important;
}
}
.top-leaderboard {

78
app/styles/front.module.css
View File

@@ -21,10 +21,10 @@
font-size: var(--font-xs);
border-radius: 100%;
color: var(--color-text-high);
}
.changeLogIconButton:hover {
color: var(--color-text-accent);
&:hover {
color: var(--color-text-accent);
}
}
.externalLinkIcon {
@@ -56,10 +56,10 @@
border: var(--border-style-high);
transition: --l 0.2s ease-out;
margin-block-start: var(--s-6);
}
.seasonBanner:hover {
--l: 75%;
&:hover {
--l: 75%;
}
}
.seasonBannerHeader {
@@ -90,11 +90,15 @@
display: flex;
gap: var(--s-2);
align-items: center;
}
.seasonBannerLink svg {
width: 24px;
transition: all 0.2s ease-out;
& svg {
width: 24px;
transition: all 0.2s ease-out;
}
&:hover svg {
translate: 2px;
}
}
.seasonBannerMobileOnly {
@@ -121,10 +125,6 @@
}
}
.seasonBannerLink:hover svg {
translate: 2px;
}
.tournamentCardsSpacer {
display: flex;
gap: var(--s-2);
@@ -140,15 +140,15 @@
display: flex;
gap: var(--s-2);
padding: var(--s-2);
}
.resultHighlights > div {
flex: 3 1 0;
width: 100%;
}
& > div {
flex: 3 1 0;
width: 100%;
}
.resultHighlights > .seasonCardDesktopOnly {
flex: 2 1 0;
& > .seasonCardDesktopOnly {
flex: 2 1 0;
}
}
.resultHighlightsTop {
@@ -186,10 +186,10 @@
color: var(--color-text);
overflow: hidden;
transition: --l 0.2s ease-out;
}
.seasonCard:hover {
--l: 75%;
&:hover {
--l: 75%;
}
}
.seasonCardHeader {
@@ -284,10 +284,10 @@
border-radius: var(--radius-full);
padding: var(--s-1);
transition: background-color 0.15s ease-out;
}
.weaponPill:hover {
background-color: var(--color-bg-high);
&:hover {
background-color: var(--color-bg-high);
}
}
.discoverGrid {
@@ -303,6 +303,15 @@
}
}
.discoverGridItemImage {
width: var(--field-size-lg);
aspect-ratio: 1 / 1;
border-radius: var(--radius-field);
background-color: var(--color-bg-higher);
display: grid;
place-items: center;
}
.discoverGridItem {
display: flex;
flex-direction: column;
@@ -313,17 +322,8 @@
font-size: var(--font-xs);
font-weight: var(--weight-semi);
text-align: center;
}
.discoverGridItemImage {
width: var(--field-size-lg);
aspect-ratio: 1 / 1;
border-radius: var(--radius-field);
background-color: var(--color-bg-higher);
display: grid;
place-items: center;
}
.discoverGridItem:hover .discoverGridItemImage {
background-color: var(--color-bg-high);
&:hover .discoverGridItemImage {
background-color: var(--color-bg-high);
}
}

92
app/styles/utils.css
View File

@@ -467,9 +467,11 @@
all: unset;
}
.focus-text-decoration:focus-visible {
outline: none;
text-decoration: underline;
.focus-text-decoration {
&:focus-visible {
outline: none;
text-decoration: underline;
}
}
.label-no-spacing {
@@ -535,62 +537,62 @@
.stack {
display: flex;
flex-direction: column;
}
.stack.xxxs {
gap: var(--s-0-5);
}
&.xxxs {
gap: var(--s-0-5);
}
.stack.xxs {
gap: var(--s-1);
}
&.xxs {
gap: var(--s-1);
}
.stack.xs {
gap: var(--s-1-5);
}
&.xs {
gap: var(--s-1-5);
}
.stack.sm {
gap: var(--s-2);
}
&.sm {
gap: var(--s-2);
}
.stack.sm-column {
column-gap: var(--s-2);
}
&.sm-column {
column-gap: var(--s-2);
}
.stack.sm-plus {
gap: var(--s-3);
}
&.sm-plus {
gap: var(--s-3);
}
.stack.md {
gap: var(--s-4);
}
&.md {
gap: var(--s-4);
}
.stack.md-plus {
gap: var(--s-6);
}
&.md-plus {
gap: var(--s-6);
}
.stack.lg {
gap: var(--s-8);
}
&.lg {
gap: var(--s-8);
}
.stack.xs-row {
row-gap: var(--s-1-5);
}
&.xs-row {
row-gap: var(--s-1-5);
}
.stack.lg-row {
row-gap: var(--s-8);
}
&.lg-row {
row-gap: var(--s-8);
}
.stack.xl {
gap: var(--s-12);
}
&.xl {
gap: var(--s-12);
}
.stack.xxl {
gap: var(--s-16);
}
&.xxl {
gap: var(--s-16);
}
.stack.horizontal {
flex-direction: row;
&.horizontal {
flex-direction: row;
}
}
.flex-same-size {