mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-05-05 20:56:13 -05:00
More progress
This commit is contained in:
parent
d610ccb2a3
commit
ea24aba0e6
|
|
@ -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%);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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")}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -358,7 +358,7 @@ function WeaponImageSelector() {
|
|||
|
||||
return (
|
||||
<div
|
||||
className={clsx("plans__weapons-section", {
|
||||
className={clsx("plans__weapons-section scrollbar", {
|
||||
"plans__weapons-section__wide": isWide,
|
||||
})}
|
||||
>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@
|
|||
}
|
||||
|
||||
.badges__explanation {
|
||||
color: var(--color-accent);
|
||||
color: var(--color-text-accent);
|
||||
font-weight: var(--semi-bold);
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -230,7 +230,7 @@
|
|||
}
|
||||
|
||||
.u__placements:hover {
|
||||
background-color: var(--color-accent-low);
|
||||
background-color: var(--color-bg-higher);
|
||||
}
|
||||
|
||||
.u__placements__mode {
|
||||
|
|
|
|||
|
|
@ -522,8 +522,6 @@
|
|||
}
|
||||
|
||||
.scrollbar {
|
||||
scrollbar-gutter: stable;
|
||||
|
||||
@supports not selector(::-webkit-scrollbar) {
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: var(--color-bg-higher) transparent;
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user