mirror of
https://github.com/Sendouc/sendou.ink.git
synced 2026-04-25 07:32:19 -05:00
1211 lines
18 KiB
CSS
1211 lines
18 KiB
CSS
.play-match__error {
|
|
padding: var(--s-4);
|
|
background-color: var(--bg-lighter);
|
|
border-radius: var(--rounded);
|
|
color: var(--theme-warning);
|
|
}
|
|
|
|
.play-match__waves {
|
|
padding: var(--s-8);
|
|
background: url("/svg/background-pattern.svg");
|
|
background-color: var(--bg-lighter);
|
|
border-radius: var(--rounded);
|
|
margin-block-start: var(--s-4);
|
|
}
|
|
|
|
.play-match__teams {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: var(--s-4);
|
|
}
|
|
|
|
.play-match__time {
|
|
display: flex;
|
|
justify-content: center;
|
|
color: var(--text-lighter);
|
|
font-size: var(--fonts-xs);
|
|
font-weight: var(--semi-bold);
|
|
margin-block-start: var(--s-2);
|
|
}
|
|
|
|
.play-match__waves-section {
|
|
padding: var(--s-4);
|
|
background-color: var(--bg-darker);
|
|
border-radius: var(--rounded);
|
|
font-size: var(--fonts-sm);
|
|
text-align: center;
|
|
}
|
|
|
|
.play-match__info {
|
|
margin-block-start: var(--s-8);
|
|
}
|
|
|
|
.play-match__played-map-list {
|
|
display: grid;
|
|
justify-content: center;
|
|
font-size: var(--fonts-sm);
|
|
font-weight: var(--semi-bold);
|
|
gap: var(--s-2);
|
|
grid-template-columns: 1fr max-content 1fr;
|
|
margin-block-start: var(--s-4);
|
|
text-align: center;
|
|
}
|
|
|
|
.play-match__checkmark {
|
|
display: grid;
|
|
width: 2rem;
|
|
color: var(--theme-success);
|
|
place-items: center;
|
|
}
|
|
|
|
.play-match__players-spacer {
|
|
display: none;
|
|
}
|
|
|
|
.play-match__teams-players {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--s-2);
|
|
grid-column: 1 / 4;
|
|
}
|
|
|
|
.play-match__player-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--s-2);
|
|
background-color: var(--bg-darker);
|
|
border-radius: var(--rounded);
|
|
}
|
|
|
|
.play-match__player-row__weapon {
|
|
width: 2rem;
|
|
margin-inline-end: var(--s-2);
|
|
}
|
|
|
|
.play-match__player-row__name {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-start;
|
|
line-height: 1rem;
|
|
}
|
|
|
|
.play-match__player-row__paint {
|
|
color: var(--text-lighter);
|
|
font-size: var(--fonts-xxs);
|
|
}
|
|
|
|
.play-match__player-row__splat-net-icons {
|
|
display: flex;
|
|
gap: var(--s-1);
|
|
margin-inline-start: auto;
|
|
}
|
|
|
|
.play-match__checkmark.left {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.play-match__played-stage {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: var(--s-1);
|
|
background-color: var(--bg-darker);
|
|
border-radius: var(--rounded);
|
|
font-weight: var(--bold);
|
|
padding-inline: var(--s-3);
|
|
}
|
|
|
|
.play-match__played-mode {
|
|
width: 1.5rem;
|
|
}
|
|
|
|
.play-match__stage-score {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: var(--fonts-sm);
|
|
font-weight: var(--body);
|
|
}
|
|
|
|
.play-match__clock {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
color: var(--text-lighter);
|
|
font-size: var(--fonts-xs);
|
|
font-weight: var(--body);
|
|
gap: var(--s-1);
|
|
margin-inline-start: var(--s-2);
|
|
}
|
|
|
|
.play-match__clock > svg {
|
|
width: 18px;
|
|
margin-block-start: -1px;
|
|
}
|
|
|
|
.play-match__team-info {
|
|
display: grid;
|
|
min-width: 16rem;
|
|
max-width: 16rem;
|
|
flex: 1;
|
|
gap: var(--s-4);
|
|
grid-template-columns: 1fr 1fr;
|
|
}
|
|
|
|
.play-match__player-name {
|
|
font-size: var(--fonts-xs);
|
|
font-weight: var(--semi-bold);
|
|
margin-block-start: 1px;
|
|
overflow-wrap: anywhere;
|
|
}
|
|
|
|
.play-match__weapons {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
gap: var(--s-2);
|
|
}
|
|
|
|
.play-match__weapon-img {
|
|
width: 1.75rem;
|
|
}
|
|
|
|
.play-match__player {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: var(--text);
|
|
font-size: var(--fonts-xs);
|
|
}
|
|
|
|
.play-match__player.row {
|
|
flex-direction: row;
|
|
color: var(--text-lighter);
|
|
gap: var(--s-1);
|
|
}
|
|
|
|
.play-match__player-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: center;
|
|
column-gap: var(--s-2);
|
|
grid-column: 1 / 3;
|
|
margin-block-start: auto;
|
|
}
|
|
|
|
.play-match__score {
|
|
display: grid;
|
|
height: 2rem;
|
|
border-radius: var(--rounded);
|
|
font-size: var(--fonts-lg);
|
|
font-weight: var(--bold);
|
|
grid-column: 1 / 3;
|
|
margin-block-start: auto;
|
|
place-items: center;
|
|
}
|
|
|
|
.play-match__play-again-container {
|
|
display: flex;
|
|
max-width: calc(28rem + var(--s-4));
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: var(--s-2);
|
|
margin-block-start: var(--s-4);
|
|
margin-inline: auto;
|
|
}
|
|
|
|
.play-match__play-again-button {
|
|
width: min-content;
|
|
grid-column: 1 / 3;
|
|
place-items: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.play-match__score.winner {
|
|
background-color: var(--theme-transparent);
|
|
}
|
|
|
|
.play-match__waves-button {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-block-start: var(--s-4);
|
|
}
|
|
|
|
.play-match__select {
|
|
width: 4rem;
|
|
margin-inline-end: var(--s-4);
|
|
}
|
|
|
|
.play-match__select-column-header {
|
|
width: 6rem;
|
|
padding: var(--s-1-5);
|
|
color: var(--theme);
|
|
font-size: var(--fonts-xs);
|
|
font-weight: var(--bold);
|
|
list-style: none;
|
|
text-align: center;
|
|
}
|
|
|
|
.play-match__stages {
|
|
max-width: max-content;
|
|
padding: var(--s-4);
|
|
margin: 0 auto;
|
|
background-color: var(--bg-lighter);
|
|
border-radius: var(--rounded);
|
|
font-size: var(--fonts-sm);
|
|
margin-block-start: var(--s-4);
|
|
}
|
|
|
|
.play-match__map-list-header {
|
|
background-color: var(--bg-darker);
|
|
border-radius: var(--rounded);
|
|
font-size: var(--fonts-sm);
|
|
font-weight: var(--semi-bold);
|
|
text-align: center;
|
|
}
|
|
|
|
.play-match__best-of {
|
|
color: var(--text-lighter);
|
|
font-size: var(--fonts-xs);
|
|
font-weight: var(--semi-bold);
|
|
text-align: center;
|
|
}
|
|
|
|
.play-match__mode {
|
|
width: 1.5rem;
|
|
margin-inline-end: var(--s-2);
|
|
}
|
|
|
|
.play-match__stage {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: var(--s-1-5);
|
|
}
|
|
|
|
.play-match__stage-name {
|
|
font-weight: var(--bold);
|
|
margin-inline: 4px;
|
|
text-overflow: clip;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.play-match__error-text {
|
|
color: var(--theme-warning);
|
|
margin-block-start: var(--s-4);
|
|
text-align: center;
|
|
}
|
|
|
|
.play-match__score-submit-button {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-block-start: var(--s-4);
|
|
}
|
|
|
|
@media screen and (min-width: 768px) {
|
|
.play-match__players-spacer {
|
|
display: block;
|
|
}
|
|
|
|
.play-match__teams-players {
|
|
grid-column: initial;
|
|
}
|
|
}
|
|
|
|
/* SplatnetIcon.tsx */
|
|
|
|
.splatnet-icon-container {
|
|
--main-bg-color: var(--theme);
|
|
--white-or-black: white;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
font-size: var(--fonts-sm);
|
|
font-weight: var(--bold);
|
|
}
|
|
|
|
.splatnet-icon-container.bravo {
|
|
--main-bg-color: var(--theme-secondary);
|
|
}
|
|
|
|
.splatnet-icon-text {
|
|
margin-block-start: -5px;
|
|
}
|
|
|
|
.splatnet-icon-x {
|
|
color: var(--text-lighter);
|
|
font-size: var(--fonts-xxs);
|
|
}
|
|
|
|
.splatnet-icon-smallCount {
|
|
font-size: var(--fonts-xxs);
|
|
}
|
|
|
|
.special-icon-svg,
|
|
.kill-icon-svg,
|
|
.killed-icon-svg {
|
|
width: 26px;
|
|
height: 26px;
|
|
}
|
|
|
|
.kill-icon-svg .bg1,
|
|
.killed-icon-svg .bg1 {
|
|
fill: var(--main-bg-color);
|
|
}
|
|
|
|
.kill-icon-svg .white,
|
|
.killed-icon-svg .white {
|
|
fill: var(--white-or-black);
|
|
}
|
|
|
|
.special-icon0-svg .bg1 {
|
|
fill: var(--main-bg-color);
|
|
}
|
|
|
|
.special-icon0-svg .area {
|
|
fill: none;
|
|
}
|
|
|
|
.special-icon0-svg .gr1 {
|
|
fill: url("#sp0-gr1");
|
|
}
|
|
|
|
.special-icon0-svg .gr2 {
|
|
fill: url("#sp0-gr2");
|
|
}
|
|
|
|
.special-icon0-svg .gr3 {
|
|
fill: url("#sp0-gr3");
|
|
}
|
|
|
|
.special-icon0-svg .gr4 {
|
|
fill: url("#sp0-gr4");
|
|
}
|
|
|
|
.special-icon0-svg .gr5 {
|
|
fill: url("#sp0-gr5");
|
|
}
|
|
|
|
.special-icon0-svg .gr6 {
|
|
fill: url("#sp0-gr6");
|
|
}
|
|
|
|
.special-icon0-svg .gr7 {
|
|
fill: url("#sp0-gr7");
|
|
}
|
|
|
|
.special-icon0-svg .gr8 {
|
|
fill: url("#sp0-gr8");
|
|
}
|
|
|
|
.special-icon0-svg .gr9 {
|
|
fill: url("#sp0-gr9");
|
|
}
|
|
|
|
.special-icon0-svg .gr10 {
|
|
fill: url("#sp0-gr10");
|
|
}
|
|
|
|
.special-icon0-svg .gr11 {
|
|
fill: url("#sp0-gr11");
|
|
}
|
|
|
|
.special-icon0-svg .gr12 {
|
|
fill: url("#sp0-gr12");
|
|
}
|
|
|
|
.special-icon1-svg .bg1 {
|
|
fill: var(--main-bg-color);
|
|
}
|
|
|
|
.special-icon1-svg .area {
|
|
fill: none;
|
|
}
|
|
|
|
.special-icon1-svg .white {
|
|
fill: #fff;
|
|
}
|
|
|
|
.special-icon10-svg .bg1 {
|
|
fill: var(--main-bg-color);
|
|
}
|
|
|
|
.special-icon10-svg .area {
|
|
fill: none;
|
|
}
|
|
|
|
.special-icon10-svg .gr1 {
|
|
fill: url("#sp10-gr1");
|
|
}
|
|
|
|
.special-icon10-svg .gr2 {
|
|
fill: url("#sp10-gr2");
|
|
}
|
|
|
|
.special-icon10-svg .gr3 {
|
|
fill: url("#sp10-gr3");
|
|
}
|
|
|
|
.special-icon10-svg .gr4 {
|
|
fill: url("#sp10-gr4");
|
|
}
|
|
|
|
.special-icon11-svg .bg1 {
|
|
fill: var(--main-bg-color);
|
|
}
|
|
|
|
.special-icon11-svg .area {
|
|
fill: none;
|
|
}
|
|
|
|
.special-icon11-svg .gr1-1 {
|
|
fill: url("#sp11-gr1-1");
|
|
}
|
|
|
|
.special-icon11-svg .mask1 {
|
|
mask: url("#mask1");
|
|
}
|
|
|
|
.special-icon11-svg .gr1-2 {
|
|
fill: url("#sp11-gr1-2");
|
|
}
|
|
|
|
.special-icon11-svg .gr1-3 {
|
|
fill: url("#sp11-gr1-3");
|
|
}
|
|
|
|
.special-icon11-svg .gr1-4 {
|
|
fill: url("#sp11-gr1-4");
|
|
}
|
|
|
|
.special-icon12-svg .bg1 {
|
|
fill: var(--main-bg-color);
|
|
}
|
|
|
|
.special-icon12-svg .area {
|
|
fill: none;
|
|
}
|
|
|
|
.special-icon12-svg .gr1 {
|
|
fill: url("#sp12-gr1");
|
|
}
|
|
|
|
.special-icon17-svg .bg1 {
|
|
fill: var(--main-bg-color);
|
|
}
|
|
|
|
.special-icon17-svg .area {
|
|
fill: none;
|
|
}
|
|
|
|
.special-icon17-svg .gr1 {
|
|
fill: url("#sp17-gr1");
|
|
}
|
|
|
|
.special-icon17-svg .gr2 {
|
|
fill: url("#sp17-gr2");
|
|
}
|
|
|
|
.special-icon17-svg .gr3 {
|
|
fill: url("#sp17-gr3");
|
|
}
|
|
|
|
.special-icon17-svg .gr4 {
|
|
fill: url("#sp17-gr4");
|
|
}
|
|
|
|
.special-icon17-svg .gr5 {
|
|
fill: url("#sp17-gr5");
|
|
}
|
|
|
|
.special-icon17-svg .gr6 {
|
|
fill: url("#sp17-gr6");
|
|
}
|
|
|
|
.special-icon17-svg .gr7 {
|
|
fill: url("#sp17-gr7");
|
|
}
|
|
|
|
.special-icon17-svg .gr8 {
|
|
fill: url("#sp17-gr8");
|
|
}
|
|
|
|
.special-icon17-svg .gr9 {
|
|
fill: url("#sp17-gr9");
|
|
}
|
|
|
|
.special-icon17-svg .gr10 {
|
|
fill: url("#sp17-gr10");
|
|
}
|
|
|
|
.special-icon17-svg .gr11 {
|
|
fill: url("#sp17-gr11");
|
|
}
|
|
|
|
.special-icon17-svg .gr12 {
|
|
fill: url("#sp17-gr12");
|
|
}
|
|
|
|
.special-icon17-svg .gr13 {
|
|
fill: url("#sp17-gr13");
|
|
}
|
|
|
|
.special-icon17-svg .gr14 {
|
|
fill: url("#sp17-gr14");
|
|
}
|
|
|
|
.special-icon17-svg .gr15 {
|
|
fill: url("#sp17-gr15");
|
|
}
|
|
|
|
.special-icon17-svg .gr16 {
|
|
fill: url("#sp17-gr16");
|
|
}
|
|
|
|
.special-icon17-svg .gr17 {
|
|
fill: url("#sp17-gr17");
|
|
}
|
|
|
|
.special-icon17-svg .mask {
|
|
mask: url("#mask17");
|
|
}
|
|
|
|
.special-icon18-svg .area {
|
|
fill: none;
|
|
}
|
|
|
|
.special-icon18-svg .bg1 {
|
|
fill: var(--main-bg-color);
|
|
}
|
|
|
|
.special-icon18-svg .gr1 {
|
|
fill: url("#sp18-gr1");
|
|
}
|
|
|
|
.special-icon18-svg .gr2 {
|
|
fill: url("#sp18-gr2");
|
|
}
|
|
|
|
.special-icon18-svg .gr3 {
|
|
fill: url("#sp18-gr3");
|
|
}
|
|
|
|
.special-icon18-svg .gr4 {
|
|
fill: url("#sp18-gr4");
|
|
}
|
|
|
|
.special-icon18-svg .gr5 {
|
|
fill: url("#sp18-gr5");
|
|
}
|
|
|
|
.special-icon18-svg .gr6 {
|
|
fill: url("#sp18-gr6");
|
|
}
|
|
|
|
.special-icon18-svg .gr7 {
|
|
fill: url("#sp18-gr7");
|
|
}
|
|
|
|
.special-icon18-svg .gr8 {
|
|
fill: url("#sp18-gr8");
|
|
}
|
|
|
|
.special-icon18-svg .gr9 {
|
|
fill: url("#sp18-gr9");
|
|
}
|
|
|
|
.special-icon18-svg .gr10 {
|
|
fill: url("#sp18-gr10");
|
|
}
|
|
|
|
.special-icon18-svg .gr11 {
|
|
fill: url("#sp18-gr11");
|
|
}
|
|
|
|
.special-icon18-svg .gr12 {
|
|
fill: url("#sp18-gr12");
|
|
}
|
|
|
|
.special-icon18-svg .gr13 {
|
|
fill: url("#sp18-gr13");
|
|
}
|
|
|
|
.special-icon18-svg .gr14 {
|
|
fill: url("#sp18-gr14");
|
|
}
|
|
|
|
.special-icon18-svg .gr15 {
|
|
fill: url("#sp18-gr15");
|
|
}
|
|
|
|
.special-icon18-svg .gr16 {
|
|
fill: url("#sp18-gr16");
|
|
}
|
|
|
|
.special-icon18-svg .gr17 {
|
|
fill: url("#sp18-gr17");
|
|
}
|
|
|
|
.special-icon18-svg .gr18 {
|
|
fill: url("#sp18-gr18");
|
|
}
|
|
|
|
.special-icon18-svg .gr19 {
|
|
fill: url("#sp18-gr19");
|
|
}
|
|
|
|
.special-icon18-svg .gr20 {
|
|
fill: url("#sp18-gr20");
|
|
}
|
|
|
|
.special-icon18-svg .gr21 {
|
|
fill: url("#sp18-gr21");
|
|
}
|
|
|
|
.special-icon18-svg .gr22 {
|
|
fill: url("#sp18-gr22");
|
|
}
|
|
|
|
.special-icon18-svg .gr23 {
|
|
fill: url("#sp18-gr23");
|
|
}
|
|
|
|
.special-icon18-svg .gr24 {
|
|
fill: url("#sp18-gr24");
|
|
}
|
|
|
|
.special-icon18-svg .gr25 {
|
|
fill: url("#sp18-gr25");
|
|
}
|
|
|
|
.special-icon18-svg .gr26 {
|
|
fill: url("#sp18-gr26");
|
|
}
|
|
|
|
.special-icon2-svg .bg1 {
|
|
fill: var(--main-bg-color);
|
|
}
|
|
|
|
.special-icon2-svg .area {
|
|
fill: none;
|
|
}
|
|
|
|
.special-icon2-svg .gr1 {
|
|
fill: url("#sp2-gr-352-9");
|
|
}
|
|
|
|
.special-icon2-svg .gr2 {
|
|
fill: url("#sp2-gr-18");
|
|
}
|
|
|
|
.special-icon2-svg .gr3 {
|
|
fill: url("#sp2-gr-18-20");
|
|
}
|
|
|
|
.special-icon2-svg .gr4 {
|
|
fill: url("#sp2-gr-18-2");
|
|
}
|
|
|
|
.special-icon2-svg .gr5 {
|
|
fill: url("#sp2-gr-18-3");
|
|
}
|
|
|
|
.special-icon2-svg .gr6 {
|
|
fill: url("#sp2-gr-352");
|
|
}
|
|
|
|
.special-icon2-svg .gr7 {
|
|
fill: url("#sp2-gr-18-4");
|
|
}
|
|
|
|
.special-icon2-svg .gr8 {
|
|
fill: url("#sp2-gr-18-5");
|
|
}
|
|
|
|
.special-icon2-svg .gr9 {
|
|
fill: url("#sp2-gr-352-2");
|
|
}
|
|
|
|
.special-icon2-svg .gr10 {
|
|
fill: url("#sp2-gr-18-6");
|
|
}
|
|
|
|
.special-icon2-svg .gr11 {
|
|
fill: url("#sp2-gr-18-7");
|
|
}
|
|
|
|
.special-icon2-svg .gr12 {
|
|
fill: url("#sp2-gr-352-3");
|
|
}
|
|
|
|
.special-icon2-svg .gr13 {
|
|
fill: url("#sp2-gr-18-8");
|
|
}
|
|
|
|
.special-icon2-svg .gr14 {
|
|
fill: url("#sp2-gr-18-9");
|
|
}
|
|
|
|
.special-icon2-svg .gr15 {
|
|
fill: url("#sp2-gr-18-10");
|
|
}
|
|
|
|
.special-icon2-svg .gr16 {
|
|
fill: url("#sp2-gr-352-4");
|
|
}
|
|
|
|
.special-icon2-svg .gr17 {
|
|
fill: url("#sp2-gr-18-11");
|
|
}
|
|
|
|
.special-icon2-svg .gr18 {
|
|
fill: url("#sp2-gr-18-12");
|
|
}
|
|
|
|
.special-icon2-svg .gr19 {
|
|
fill: url("#sp2-gr-352-5");
|
|
}
|
|
|
|
.special-icon2-svg .gr20 {
|
|
fill: url("#sp2-gr-18-13");
|
|
}
|
|
|
|
.special-icon2-svg .gr21 {
|
|
fill: url("#sp2-gr-18-14");
|
|
}
|
|
|
|
.special-icon2-svg .gr22 {
|
|
fill: url("#sp2-gr-352-6");
|
|
}
|
|
|
|
.special-icon2-svg .gr23 {
|
|
fill: url("#sp2-gr-18-15");
|
|
}
|
|
|
|
.special-icon2-svg .gr24 {
|
|
fill: url("#sp2-gr-18-16");
|
|
}
|
|
|
|
.special-icon2-svg .gr25 {
|
|
fill: url("#sp2-gr-18-17");
|
|
}
|
|
|
|
.special-icon2-svg .gr26 {
|
|
fill: url("#sp2-gr-352-7");
|
|
}
|
|
|
|
.special-icon2-svg .gr27 {
|
|
fill: url("#sp2-gr-18-18");
|
|
}
|
|
|
|
.special-icon2-svg .gr28 {
|
|
fill: url("#sp2-gr-18-19");
|
|
}
|
|
|
|
.special-icon2-svg .gr29 {
|
|
fill: url("#sp2-gr-352-8");
|
|
}
|
|
|
|
.special-icon2-svg .gr31 {
|
|
fill: url("#sp2-gr-18-21");
|
|
}
|
|
|
|
.special-icon3-svg .bg1 {
|
|
fill: var(--main-bg-color);
|
|
}
|
|
|
|
.special-icon3-svg .area {
|
|
fill: none;
|
|
}
|
|
|
|
.special-icon3-svg .gr2 {
|
|
fill: url("#sp3-gr-18");
|
|
}
|
|
|
|
.special-icon3-svg .gr3 {
|
|
fill: url("#sp3-gr-18-2");
|
|
}
|
|
|
|
.special-icon3-svg .gr4 {
|
|
fill: url("#sp3-gr-18-3");
|
|
}
|
|
|
|
.special-icon3-svg .gr6 {
|
|
fill: url("#sp3-gr-18-4");
|
|
}
|
|
|
|
.special-icon3-svg .gr7 {
|
|
fill: url("#sp3-gr-18-5");
|
|
}
|
|
|
|
.special-icon3-svg .gr8 {
|
|
fill: url("#sp3-gr-18-6");
|
|
}
|
|
|
|
.special-icon3-svg .gr9 {
|
|
fill: url("#sp3-gr-18-7");
|
|
}
|
|
|
|
.special-icon3-svg .gr10 {
|
|
fill: url("#sp3-gr-18-8");
|
|
}
|
|
|
|
.special-icon3-svg .gr11 {
|
|
fill: url("#sp3-gr-18-9");
|
|
}
|
|
|
|
.special-icon4-svg .bg1 {
|
|
fill: var(--main-bg-color);
|
|
}
|
|
|
|
.special-icon4-svg .area {
|
|
fill: none;
|
|
}
|
|
|
|
.special-icon4-svg .gr3 {
|
|
fill: url("#sp4-gr-1");
|
|
}
|
|
|
|
.special-icon4-svg .gr4 {
|
|
fill: url("#sp4-gr-2");
|
|
}
|
|
|
|
.special-icon4-svg .gr5 {
|
|
fill: url("#sp4-gr-3");
|
|
}
|
|
|
|
.special-icon4-svg .gr6 {
|
|
fill: url("#sp4-gr-4");
|
|
}
|
|
|
|
.special-icon4-svg .gr7 {
|
|
fill: url("#sp4-gr-5");
|
|
}
|
|
|
|
.special-icon4-svg .gr8 {
|
|
fill: url("#sp4-gr-6");
|
|
}
|
|
|
|
.special-icon4-svg .gr9 {
|
|
fill: url("#sp4-gr-7");
|
|
}
|
|
|
|
.special-icon4-svg .gr10 {
|
|
fill: url("#sp4-gr-8");
|
|
}
|
|
|
|
.special-icon4-svg .gr11 {
|
|
fill: url("#sp4-gr-9");
|
|
}
|
|
|
|
.special-icon4-svg .gr12 {
|
|
fill: url("#sp4-gr-10");
|
|
}
|
|
|
|
.special-icon4-svg .gr13 {
|
|
fill: url("#sp4-gr-11");
|
|
}
|
|
|
|
.special-icon4-svg .gr14 {
|
|
fill: url("#sp4-gr-12");
|
|
}
|
|
|
|
.special-icon5-svg .bg1 {
|
|
fill: var(--main-bg-color);
|
|
}
|
|
|
|
.special-icon5-svg .area {
|
|
fill: none;
|
|
}
|
|
|
|
.special-icon5-svg .gr-2 {
|
|
fill: url("#sp5-gr-1");
|
|
}
|
|
|
|
.special-icon5-svg .gr-3 {
|
|
fill: url("#sp5-gr-352");
|
|
}
|
|
|
|
.special-icon5-svg .gr-4 {
|
|
fill: url("#sp5-gr-48");
|
|
}
|
|
|
|
.special-icon5-svg .gr-6 {
|
|
fill: url("#sp5-gr-2");
|
|
}
|
|
|
|
.special-icon5-svg .gr-7 {
|
|
fill: url("#sp5-gr-352-2");
|
|
}
|
|
|
|
.special-icon5-svg .gr-8 {
|
|
fill: url("#sp5-gr-48-2");
|
|
}
|
|
|
|
.special-icon5-svg .gr-9 {
|
|
fill: url("#sp5-gr-3");
|
|
}
|
|
|
|
.special-icon5-svg .gr-10 {
|
|
fill: url("#sp5-gr-352-3");
|
|
}
|
|
|
|
.special-icon5-svg .gr-11 {
|
|
fill: url("#sp5-gr-48-3");
|
|
}
|
|
|
|
.special-icon6-svg .bg1 {
|
|
fill: var(--main-bg-color);
|
|
}
|
|
|
|
.special-icon6-svg .area {
|
|
fill: none;
|
|
}
|
|
|
|
.special-icon6-svg .gr1 {
|
|
fill: url("#sp6-gr1");
|
|
}
|
|
|
|
.special-icon6-svg .gr2 {
|
|
fill: url("#sp6-gr2");
|
|
}
|
|
|
|
.special-icon6-svg .gr3 {
|
|
fill: url("#sp6-gr3");
|
|
}
|
|
|
|
.special-icon6-svg .gr4 {
|
|
fill: url("#sp6-gr4");
|
|
}
|
|
|
|
.special-icon6-svg .gr5 {
|
|
fill: url("#sp6-gr5");
|
|
}
|
|
|
|
.special-icon6-svg .gr6 {
|
|
fill: url("#sp6-gr6");
|
|
}
|
|
|
|
.special-icon6-svg .gr7 {
|
|
fill: url("#sp6-gr7");
|
|
}
|
|
|
|
.special-icon6-svg .gr8 {
|
|
fill: url("#sp6-gr8");
|
|
}
|
|
|
|
.special-icon6-svg .gr9 {
|
|
fill: url("#sp6-gr9");
|
|
}
|
|
|
|
.special-icon6-svg .gr10 {
|
|
fill: url("#sp6-gr10");
|
|
}
|
|
|
|
.special-icon6-svg .gr11 {
|
|
fill: url("#sp6-gr11");
|
|
}
|
|
|
|
.special-icon6-svg .gr12 {
|
|
fill: url("#sp6-gr12");
|
|
}
|
|
|
|
.special-icon6-svg .gr13 {
|
|
fill: url("#sp6-gr13");
|
|
}
|
|
|
|
.special-icon6-svg .gr14 {
|
|
fill: url("#sp6-gr14");
|
|
}
|
|
|
|
.special-icon6-svg .gr15 {
|
|
fill: url("#sp6-gr15");
|
|
}
|
|
|
|
.special-icon6-svg .gr16 {
|
|
fill: url("#sp6-gr16");
|
|
}
|
|
|
|
.special-icon6-svg .gr17 {
|
|
fill: url("#sp6-gr17");
|
|
}
|
|
|
|
.special-icon6-svg .gr18 {
|
|
fill: url("#sp6-gr18");
|
|
}
|
|
|
|
.special-icon6-svg .gr19 {
|
|
fill: url("#sp6-gr19");
|
|
}
|
|
|
|
.special-icon6-svg .gr20 {
|
|
fill: url("#sp6-gr20");
|
|
}
|
|
|
|
.special-icon6-svg .gr21 {
|
|
fill: url("#sp6-gr21");
|
|
}
|
|
|
|
.special-icon6-svg .gr22 {
|
|
fill: url("#sp6-gr22");
|
|
}
|
|
|
|
.special-icon6-svg .gr23 {
|
|
fill: url("#sp6-gr23");
|
|
}
|
|
|
|
.special-icon6-svg .gr24 {
|
|
fill: url("#sp6-gr24");
|
|
}
|
|
|
|
.special-icon6-svg .gr25 {
|
|
fill: url("#sp6-gr25");
|
|
}
|
|
|
|
.special-icon6-svg .gr26 {
|
|
fill: url("#sp6-gr26");
|
|
}
|
|
|
|
.special-icon6-svg .gr27 {
|
|
fill: url("#sp6-gr27");
|
|
}
|
|
|
|
.special-icon6-svg .gr28 {
|
|
fill: url("#sp6-gr28");
|
|
}
|
|
|
|
.special-icon6-svg .gr29 {
|
|
fill: url("#sp6-gr29");
|
|
}
|
|
|
|
.special-icon6-svg .gr30 {
|
|
fill: url("#sp6-gr30");
|
|
}
|
|
|
|
.special-icon7-svg .bg1 {
|
|
fill: var(--main-bg-color);
|
|
}
|
|
|
|
.special-icon7-svg .area {
|
|
fill: none;
|
|
}
|
|
|
|
.special-icon7-svg .gr1 {
|
|
fill: url("#sp7-gr1");
|
|
}
|
|
|
|
.special-icon7-svg .gr2 {
|
|
fill: url("#sp7-gr2");
|
|
}
|
|
|
|
.special-icon7-svg .gr3 {
|
|
fill: url("#sp7-gr3");
|
|
}
|
|
|
|
.special-icon7-svg .gr4 {
|
|
fill: url("#sp7-gr4");
|
|
}
|
|
|
|
.special-icon7-svg .gr5 {
|
|
fill: url("#sp7-gr5");
|
|
}
|
|
|
|
.special-icon7-svg .gr6 {
|
|
fill: url("#sp7-gr6");
|
|
}
|
|
|
|
.special-icon7-svg .gr7 {
|
|
fill: url("#sp7-gr7");
|
|
}
|
|
|
|
.special-icon7-svg .gr8 {
|
|
fill: url("#sp7-gr8");
|
|
}
|
|
|
|
.special-icon7-svg .gr9 {
|
|
fill: url("#sp7-gr9");
|
|
}
|
|
|
|
.special-icon8-svg .bg1 {
|
|
fill: var(--main-bg-color);
|
|
}
|
|
|
|
.special-icon8-svg .area {
|
|
fill: none;
|
|
}
|
|
|
|
.special-icon8-svg .gr1 {
|
|
fill: url("#sp8-gr1");
|
|
}
|
|
|
|
.special-icon8-svg .gr2 {
|
|
fill: url("#sp8-gr2");
|
|
}
|
|
|
|
.special-icon8-svg .gr3 {
|
|
fill: url("#sp8-gr3");
|
|
}
|
|
|
|
.special-icon8-svg .gr4 {
|
|
fill: url("#sp8-gr4");
|
|
}
|
|
|
|
.special-icon8-svg .gr6 {
|
|
fill: url("#sp8-gr6");
|
|
}
|
|
|
|
.special-icon8-svg .gr7 {
|
|
fill: url("#sp8-gr7");
|
|
}
|
|
|
|
.special-icon8-svg .gr8 {
|
|
fill: url("#sp8-gr8");
|
|
}
|
|
|
|
.special-icon8-svg .gr9 {
|
|
fill: url("#sp8-gr9");
|
|
}
|
|
|
|
.special-icon8-svg .gr10 {
|
|
fill: url("#sp8-gr10");
|
|
}
|
|
|
|
.special-icon8-svg .mask {
|
|
mask: url("#mask");
|
|
}
|
|
|
|
.special-icon9-svg .bg1 {
|
|
fill: var(--main-bg-color);
|
|
}
|
|
|
|
.special-icon9-svg .area {
|
|
fill: none;
|
|
}
|
|
|
|
.special-icon9-svg .gr1 {
|
|
fill: url("#sp9-gr1");
|
|
}
|
|
|
|
.special-icon9-svg .gr2 {
|
|
fill: url("#sp9-gr2");
|
|
}
|
|
|
|
.special-icon9-svg .gr3 {
|
|
fill: url("#sp9-gr3");
|
|
}
|
|
|
|
.special-icon9-svg .gr4 {
|
|
fill: url("#sp9-gr4");
|
|
}
|
|
|
|
.special-icon9-svg .gr5 {
|
|
fill: url("#sp9-gr5");
|
|
}
|
|
|
|
.special-icon9-svg .gr6 {
|
|
fill: url("#sp9-gr6");
|
|
}
|
|
|
|
.special-icon9-svg .gr7 {
|
|
fill: url("#sp9-gr7");
|
|
}
|