More progress

This commit is contained in:
hfcRed 2025-12-25 22:31:47 +01:00
parent d610ccb2a3
commit ea24aba0e6
23 changed files with 65 additions and 73 deletions

View File

@ -51,9 +51,9 @@
.modeButton {
padding: var(--s-1);
border: 2px solid var(--color-bg);
border: 2px solid var(--color-border);
border-radius: var(--rounded-full);
background-color: transparent;
background-color: var(--color-bg);
color: var(--color-accent);
opacity: 1 !important;
outline: initial;
@ -61,15 +61,14 @@
.modeButton.selected {
border: 2px solid transparent;
background-color: var(--color-accent-high);
background-color: var(--color-bg-higher);
}
.modeButton.preselected {
border: 2px solid var(--color-info);
background-color: var(--color-accent-high);
border: 2px solid var(--color-text-accent);
background-color: var(--color-bg-higher);
}
.mode:not(.selected, .preselected) {
filter: grayscale(100%) brightness(30%);
opacity: 0.6;
filter: grayscale(100%) brightness(50%);
}

View File

@ -32,7 +32,7 @@
.analyzer__ap-compare__bar {
height: 100%;
background-color: var(--color-accent);
background-color: var(--color-info);
}
.analyzer__ap-compare__bar.analyzer__better {
@ -100,7 +100,7 @@
}
.analyzer__details:has(.analyzer__stat-card-highlighted) .analyzer__summary {
background-color: var(--color-accent-low);
background-color: var(--color-bg-higher);
}
.analyzer__weapon-info-badge {
@ -151,7 +151,7 @@
}
.analyzer__stat-card-highlighted {
background-color: var(--color-accent-low);
background-color: var(--color-bg-higher);
}
.analyzer__stat-card__title-and-value-container {
@ -249,11 +249,11 @@
.analyzer__patch {
border-radius: var(--rounded);
background-color: var(--color-accent-low);
color: var(--color-text-high);
color: var(--color-accent-high);
font-size: var(--fonts-xxxs);
font-weight: var(--bold);
padding-block: var(--s-0-5);
padding-inline: var(--s-1);
padding-inline: var(--s-2);
}
@media screen and (max-width: 640px) {

View File

@ -85,7 +85,7 @@
.dayHeaderToday {
background-color: var(--color-bg-higher);
border: 2px solid var(--color-accent-low);
border: 2px solid var(--color-border-high);
}
.dayHeaderWeekday {
@ -109,7 +109,7 @@
.clockHeaderDivider {
width: 100%;
height: 3px;
background-color: var(--color-accent-low);
background-color: var(--color-bg-high);
border-radius: var(--rounded);
}

View File

@ -253,7 +253,7 @@ function AllTournamentsLinkCard() {
return (
<Link
to={CALENDAR_TOURNAMENTS_PAGE}
className={clsx(styles.tournamentCardsViewAllCard, "mt-4")}
className={clsx(styles.tournamentCardsViewAllCard)}
>
<Image path={navIconUrl("medal")} size={36} alt="" />
{t("front:showcase.viewAll")}

View File

@ -17,7 +17,7 @@
padding: 0;
border: none;
background-color: transparent;
color: var(--color-accent);
color: var(--color-text-accent);
font-size: var(--fonts-md);
font-weight: var(--bold);
outline: initial;

View File

@ -358,7 +358,7 @@ function WeaponImageSelector() {
return (
<div
className={clsx("plans__weapons-section", {
className={clsx("plans__weapons-section scrollbar", {
"plans__weapons-section__wide": isWide,
})}
>

View File

@ -83,7 +83,8 @@ button[data-state="closed"][aria-haspopup="dialog"] {
display: flex;
align-items: center;
padding: var(--s-3);
border: 1px solid var(--color-accent-low);
border: 2px solid var(--color-border);
border-top: transparent;
border-radius: 0 0 var(--rounded) var(--rounded);
background-color: var(--color-bg);
gap: var(--s-4);
@ -98,15 +99,16 @@ button[data-state="closed"][aria-haspopup="dialog"] {
}
.plans__outline-toggle > .plans__outline-toggle__button {
background-color: grey;
background-color: var(--color-bg-high);
color: var(--color-text);
font-size: var(--fonts-xs);
padding: var(--s-2);
color: var(--color-text-inverse);
width: 140px;
}
.plans__outline-toggle > .plans__outline-toggle__button__outlined {
background-color: var(--color-accent);
background-color: var(--color-text-accent);
color: var(--color-text-inverse);
}
.plans__weapons-section {
@ -115,7 +117,8 @@ button[data-state="closed"][aria-haspopup="dialog"] {
top: 15%;
width: 150px;
max-height: 85vh;
border: 1px solid var(--color-accent-low);
border: 2px solid var(--color-border);
border-left: transparent;
border-radius: 0 var(--rounded) var(--rounded) 0;
background: var(--color-bg);
gap: 2px;

View File

@ -1,7 +1,7 @@
.itemDivider {
margin-inline: var(--s-2-5);
border-width: 0.5px;
border-color: var(--color-border);
border-color: var(--color-bg-high);
}
.item {

View File

@ -39,20 +39,6 @@
}
}
.object-damage__grid::-webkit-scrollbar {
width: 4px;
height: 8px;
}
.object-damage__grid::-webkit-scrollbar-corner {
background-color: var(--color-bg-high);
}
.object-damage__grid::-webkit-scrollbar-thumb {
background-color: var(--color-accent-low);
border-radius: 4px;
}
.object-damage__hp {
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
@ -127,7 +113,7 @@
}
.object-damage__multiplier {
color: var(--color-accent);
color: var(--color-text-accent);
font-size: var(--fonts-xxs);
font-weight: var(--bold);
letter-spacing: 0.5px;
@ -144,9 +130,9 @@
.object-damage__patch {
border-radius: var(--rounded);
background-color: var(--color-accent-low);
color: var(--color-text-high);
color: var(--color-accent-high);
font-size: var(--fonts-xxxs);
font-weight: var(--bold);
padding-block: var(--s-0-5);
padding-inline: var(--s-1);
padding-inline: var(--s-2);
}

View File

@ -257,7 +257,7 @@ function DamageReceiversGrid({
return (
<div>
<div
className="object-damage__grid"
className="object-damage__grid scrollbar"
style={{
gridTemplateColumns: gridTemplateColumnsValue(
damagesToReceivers[0]?.damages.length ?? 0,

View File

@ -91,7 +91,7 @@
.expandButton {
background: none;
border: none;
color: var(--color-accent);
color: var(--color-text-accent);
cursor: pointer;
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
@ -113,7 +113,7 @@
}
.requestCard {
background-color: var(--color-accent-low);
background-color: var(--color-bg-higher);
}
.requestFooter {

View File

@ -46,7 +46,7 @@
.q-settings__summary svg {
width: 24px;
color: var(--color-accent);
color: var(--color-text-accent);
position: absolute;
right: 20px;
top: 14px;

View File

@ -40,7 +40,7 @@
}
.q__front-page-link:hover {
background-color: var(--color-accent-low);
background-color: var(--color-bg-higher);
}
.q__front-page-link__sub-text {
@ -121,7 +121,7 @@
font-size: var(--fonts-xxs);
font-weight: var(--semi-bold);
text-transform: uppercase;
color: var(--color-accent);
color: var(--color-text-accent);
display: flex;
align-items: center;
}
@ -131,7 +131,7 @@
flex: 1;
content: "";
padding: 2px;
background-color: var(--color-accent-low);
background-color: var(--color-bg-high);
margin: 5px;
border-radius: var(--rounded);
}
@ -293,7 +293,7 @@
.q__group-member__star {
min-width: 18px;
max-width: 18px;
color: var(--color-accent);
color: var(--color-text-accent);
stroke-width: 2;
}
@ -528,7 +528,7 @@
.q-info__container h2 {
font-size: var(--fonts-lg);
margin-block-end: var(--s-2);
color: var(--color-accent);
color: var(--color-text-accent);
}
.q-info__container h3 {

View File

@ -44,7 +44,7 @@
place-items: center;
font-size: var(--fonts-xl);
border-radius: 100%;
background-color: var(--color-accent-low);
background-color: var(--color-bg-high);
}
.team__banner {

View File

@ -37,7 +37,7 @@
}
a.placements__table__row:hover {
background-color: var(--color-accent-low);
background-color: var(--color-bg-higher);
}
.placements__table__row:first-of-type {

View File

@ -85,7 +85,7 @@ a.bracket__match:hover {
}
.bracket__match__seed {
color: var(--color-accent);
color: var(--color-text-accent);
margin-inline-end: var(--s-0-5);
min-width: 15px;
max-width: 15px;

View File

@ -127,7 +127,7 @@
display: flex;
flex: 1;
flex-direction: column;
border-inline-start: 2px solid var(--color-accent);
border-inline-start: 2px solid var(--color-text-accent);
font-size: var(--fonts-xs);
font-weight: var(--semi-bold);
gap: var(--s-2);
@ -203,7 +203,7 @@
.tournament__team-member-name__role {
position: absolute;
background-color: var(--color-accent);
background-color: var(--color-text-accent);
color: var(--color-text-inverse);
font-weight: var(--semi-bold);
width: 12px;
@ -250,16 +250,16 @@
.tournament__badge__ranked {
background-color: var(--color-info-low);
color: var(--color-info);
color: var(--color-info-high);
}
.tournament__badge__unranked {
background-color: var(--color-success-high);
color: var(--color-success);
background-color: var(--color-success-low);
color: var(--color-success-high);
}
.tournament__badge__modes {
background-color: var(--color-bg-higher);
background-color: var(--color-bg-high);
}
.tournament__info__icon {
@ -362,7 +362,8 @@
}
.tournament__missing-player__optional {
border: 2px dashed var(--color-accent-low);
border: 2px dashed var(--color-text-accent);
color: var(--color-text-accent);
}
.tournament__invite-container {

View File

@ -31,7 +31,7 @@
}
.badges__explanation {
color: var(--color-accent);
color: var(--color-text-accent);
font-weight: var(--semi-bold);
text-align: center;
}

View File

@ -110,6 +110,10 @@ input:not(.plain) {
outline: none;
}
input:not(.plain):hover {
border-color: var(--color-border-high);
}
input:user-invalid {
border-color: transparent;
outline: 2px solid var(--color-error);
@ -137,7 +141,7 @@ input:user-invalid {
input:not(.plain, .combobox-input):focus-within {
border-color: transparent;
outline: 2px solid var(--color-accent);
outline: 2px solid var(--color-text-accent);
}
input:not(.plain)::placeholder {
@ -311,7 +315,7 @@ td > input[type="checkbox"] {
}
hr {
border-color: var(--color-accent-low);
border: 1px solid var(--color-bg-high);
}
abbr:not([title]) {
@ -469,7 +473,7 @@ abbr[title] {
}
.articles-list__title {
color: var(--color-accent);
color: var(--color-text-accent);
font-size: var(--fonts-md);
}
@ -534,7 +538,7 @@ abbr[title] {
justify-content: center;
border-radius: var(--rounded);
background-color: var(--color-info-low);
color: var(--color-text);
color: var(--color-info-high);
font-size: var(--fonts-sm);
font-weight: var(--semi-bold);
gap: var(--s-2);
@ -880,7 +884,7 @@ abbr[title] {
.divider::before,
.divider::after {
flex: 1;
border-bottom: 2px solid var(--color-border);
border-bottom: 2px solid var(--color-bg-high);
content: "";
}
@ -1077,12 +1081,12 @@ html[dir="rtl"] .fix-rtl {
width: 0.6rem;
height: 0.6rem;
border-radius: 50%;
background-color: var(--color-accent-low);
background-color: var(--color-bg-higher);
transition: all 0.2s ease;
}
.pagination__dot__active {
background-color: var(--color-accent);
background-color: var(--color-text-accent);
}
.pagination__page-count {
@ -1429,13 +1433,13 @@ html[dir="rtl"] .fix-rtl {
}
.format-selector__count {
color: var(--color-accent);
color: var(--color-text-accent);
font-size: var(--fonts-sm);
white-space: nowrap;
}
.format-selector__divider {
background-color: var(--color-accent-low);
background-color: var(--color-text-accent);
width: 2px;
align-self: stretch;
}

View File

@ -192,6 +192,7 @@
min-width: 90px;
max-width: 90px;
border: 2.5px solid var(--color-bg-higher);
margin-top: calc((var(--s-2) * 2) + var(--s-2));
}
.tournamentCardsViewAllCard:hover {

View File

@ -150,7 +150,7 @@
justify-content: center;
padding: 0.5rem;
border: 2px solid;
border-color: var(--color-accent-low);
border-color: var(--color-text-accent);
border-radius: var(--rounded);
background-color: transparent;
color: inherit;

View File

@ -230,7 +230,7 @@
}
.u__placements:hover {
background-color: var(--color-accent-low);
background-color: var(--color-bg-higher);
}
.u__placements__mode {

View File

@ -522,8 +522,6 @@
}
.scrollbar {
scrollbar-gutter: stable;
@supports not selector(::-webkit-scrollbar) {
scrollbar-width: thin;
scrollbar-color: var(--color-bg-higher) transparent;