Leahnaya/sendou.ink
1
0
Fork 0
mirror of https://github.com/Sendouc/sendou.ink.git synced 2026-10-01 15:48:23 -05:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Design refresh + a bunch of stuff (#2864)

Browse Source 
Co-authored-by: hfcRed <hfcred@gmx.net>
This commit is contained in:
Kalle
2026-03-19 17:51:42 +02:00
committed by GitHub
parent fcc5c5f273
commit fef1ffc955
830 changed files with 35854 additions and 16836 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,23 @@
.tabListContainer {
overflow-x: auto;
overflow-y: hidden;
}
.tabList {
display: flex;
flex-direction: row;
border-bottom: 2px solid var(--border);
border-bottom: 2px solid var(--color-border);
min-width: fit-content;
}
.fullWidth {
width: 100%;
min-width: 100%;
}
.fullWidth .tabContainer {
flex: 1;
min-width: 0;
}
.tabList svg {
@@ -23,38 +39,48 @@
padding-block-start: var(--s-4);
}
.disappearing:has(.tabList .tabButton:only-child).padded .tabPanel {
.disappearing:has(.tabList > div:only-child).padded .tabPanel {
padding-top: 0;
}
.disappearing .tabList:has(.tabButton:only-child) {
.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;
}
}
.tabButton {
background-color: transparent;
border: none;
font-size: var(--fonts-xs);
font-size: var(--font-xs);
border-radius: 0;
border-bottom: 2px solid transparent;
color: var(--text-lighter);
color: var(--color-text-high);
white-space: nowrap;
flex: 1;
transform: none !important;
}
.tabButton[data-selected] {
border-color: var(--theme);
color: var(--text);
.tabContainer[data-selected] .tabButton {
border-color: var(--color-text-accent);
color: var(--color-text);
}
.tabButton[data-focus-visible] {
color: var(--theme) !important;
.tabContainer[data-focus-visible] .tabButton {
color: var(--color-text-accent) !important;
outline: none;
}
.tabNumber {
color: var(--theme);
color: var(--color-text-accent);
margin-inline-start: var(--s-2);
}
@@ -62,5 +88,5 @@
position: sticky;
top: 47px;
z-index: 1;
background-color: var(--bg);
background-color: var(--color-bg);
}