mirror of
https://github.com/lichess-org/lila.git
synced 2026-05-26 13:51:00 +00:00
track down <i> tags without snabbdom helper; style <icon>s
This commit is contained in:
Thibault Duplessis
@@ -8,7 +8,7 @@
|
||||
padding: 0.4em 0.8em;
|
||||
margin: 0;
|
||||
|
||||
i {
|
||||
icon {
|
||||
font-size: 1.5em;
|
||||
margin-right: 0.4em;
|
||||
}
|
||||
|
||||
@@ -50,7 +50,7 @@ $clock-height: 20px;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
i {
|
||||
icon {
|
||||
font-size: 0.7em;
|
||||
margin-inline-end: 0.4em;
|
||||
color: $c-accent;
|
||||
|
||||
@@ -44,7 +44,7 @@
|
||||
background: rgba(56, 147, 232, 1);
|
||||
}
|
||||
|
||||
.continue i::before {
|
||||
.continue icon::before {
|
||||
font-size: 2.5em;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
@@ -36,7 +36,7 @@
|
||||
&__side > div {
|
||||
display: flex;
|
||||
|
||||
i,
|
||||
icon,
|
||||
strong {
|
||||
flex: 0 1 6ch;
|
||||
text-align: center;
|
||||
|
||||
@@ -24,7 +24,7 @@
|
||||
border-bottom: $border;
|
||||
min-height: 3.5em;
|
||||
|
||||
i {
|
||||
icon {
|
||||
@extend %flex-center-center;
|
||||
|
||||
flex: 0 0 1.8em;
|
||||
@@ -37,7 +37,7 @@
|
||||
background: $c-primary;
|
||||
color: $c-over;
|
||||
|
||||
i {
|
||||
icon {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
@@ -50,12 +50,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
.todo i {
|
||||
.todo icon {
|
||||
background: $c-bad;
|
||||
color: $c-over;
|
||||
}
|
||||
|
||||
.done i {
|
||||
.done icon {
|
||||
background: $c-good;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
background: $c-primary;
|
||||
color: $c-over;
|
||||
|
||||
i {
|
||||
icon {
|
||||
flex: 0 0 3.5em;
|
||||
height: 3.5em;
|
||||
margin-inline-end: 0.6rem;
|
||||
|
||||
@@ -34,14 +34,14 @@ $c-study-button: $c-accent;
|
||||
padding: 0 0.4em;
|
||||
opacity: 0.8;
|
||||
|
||||
i::before {
|
||||
icon::before {
|
||||
font-size: 1.4em;
|
||||
content: $licon-X;
|
||||
color: $c-bad;
|
||||
margin-inline-end: 0.2rem;
|
||||
}
|
||||
|
||||
&.on i::before {
|
||||
&.on icon::before {
|
||||
content: $licon-Checkmark;
|
||||
color: $c-good;
|
||||
}
|
||||
|
||||
@@ -90,7 +90,7 @@ $top-height: 3.2rem;
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
i {
|
||||
icon {
|
||||
display: block;
|
||||
font-size: 180px;
|
||||
opacity: 0.4;
|
||||
|
||||
@@ -28,22 +28,22 @@
|
||||
transition: 2.5s;
|
||||
}
|
||||
|
||||
i {
|
||||
icon {
|
||||
font-size: 1.2em;
|
||||
opacity: 0.5;
|
||||
transition: 2.5s;
|
||||
}
|
||||
|
||||
.contrib i {
|
||||
.contrib icon {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.online i {
|
||||
.online icon {
|
||||
opacity: 0.8;
|
||||
color: $c-good;
|
||||
}
|
||||
|
||||
.online.contrib i {
|
||||
.online.contrib icon {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -66,7 +66,7 @@
|
||||
.status.active {
|
||||
transition: none;
|
||||
|
||||
i {
|
||||
icon {
|
||||
transition: none;
|
||||
opacity: 1;
|
||||
color: #fff;
|
||||
@@ -85,7 +85,7 @@
|
||||
.add {
|
||||
@extend %roboto;
|
||||
|
||||
&:hover i {
|
||||
&:hover icon {
|
||||
color: $c-link;
|
||||
opacity: 1;
|
||||
transition: none;
|
||||
|
||||
@@ -20,7 +20,7 @@
|
||||
h2 {
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
i {
|
||||
icon {
|
||||
font-size: 0.6em;
|
||||
|
||||
&,
|
||||
|
||||
@@ -171,7 +171,7 @@
|
||||
font-size: 1.1em;
|
||||
color: $c-font;
|
||||
|
||||
i {
|
||||
icon {
|
||||
margin-inline-start: auto;
|
||||
color: $c-font-dimmer;
|
||||
}
|
||||
|
||||
@@ -3,7 +3,7 @@ import type { VNode } from 'snabbdom';
|
||||
import perfIcons from 'lib/game/perfIcons';
|
||||
import { displayLocale, numberFormat } from 'lib/i18n';
|
||||
import * as licon from 'lib/licon';
|
||||
import { bind, dataIcon, type MaybeVNode, type LooseVNodes, hl } from 'lib/view';
|
||||
import { bind, dataIcon, type MaybeVNode, type LooseVNodes, hl, iconTag } from 'lib/view';
|
||||
|
||||
import type AnalyseCtrl from '../ctrl';
|
||||
import { view as renderConfig } from './explorerConfig';
|
||||
@@ -144,7 +144,7 @@ function showGameTable(ctrl: AnalyseCtrl, fen: FEN, title: string, games: Openin
|
||||
hl(
|
||||
'td',
|
||||
game.speed &&
|
||||
hl('i', { attrs: { title: ucfirst(game.speed), ...dataIcon(perfIcons[game.speed]) } }),
|
||||
hl('icon', { attrs: { title: ucfirst(game.speed), ...dataIcon(perfIcons[game.speed]) } }),
|
||||
),
|
||||
]);
|
||||
}),
|
||||
@@ -225,7 +225,7 @@ const showEmpty = (ctrl: AnalyseCtrl, data?: OpeningData): VNode => {
|
||||
const showGameEnd = (ctrl: AnalyseCtrl, title: string): VNode =>
|
||||
hl('div.data.empty', [
|
||||
hl('div.title', i18n.site.gameOver),
|
||||
hl('div.message', [hl('i', { attrs: dataIcon(licon.InfoCircle) }), hl('h3', title), closeButton(ctrl)]),
|
||||
hl('div.message', [iconTag(licon.InfoCircle), hl('h3', title), closeButton(ctrl)]),
|
||||
]);
|
||||
|
||||
const openingTitle = (ctrl: AnalyseCtrl, data?: OpeningData) => {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import * as licon from 'lib/licon';
|
||||
import type { TreeNode } from 'lib/tree/types';
|
||||
import { bind, dataIcon, hl, type VNode, spinnerVdom as spinner } from 'lib/view';
|
||||
import { bind, hl, type VNode, spinnerVdom as spinner, iconTag } from 'lib/view';
|
||||
|
||||
import type AnalyseCtrl from '../ctrl';
|
||||
import { renderIndexAndMove } from '../view/components';
|
||||
@@ -14,7 +14,7 @@ const skipOrViewSolution = (ctrl: RetroCtrl): VNode =>
|
||||
|
||||
const jumpToNext = (ctrl: RetroCtrl): VNode =>
|
||||
hl('a.half.continue', { hook: bind('click', ctrl.jumpToNext) }, [
|
||||
hl('i', { attrs: dataIcon(licon.PlayTriangle) }),
|
||||
iconTag(licon.PlayTriangle),
|
||||
i18n.site.next,
|
||||
]);
|
||||
|
||||
|
||||
@@ -606,7 +606,7 @@ function renderStreamerMenu(relay: RelayCtrl): VNode {
|
||||
relay.streams.map(([id, info]) =>
|
||||
hl('a.streamer.text', { attrs: { 'data-icon': licon.Mic, href: makeUrl(id) } }, [
|
||||
info.name,
|
||||
hl('i', info.lang),
|
||||
hl('icon', info.lang),
|
||||
]),
|
||||
),
|
||||
),
|
||||
|
||||
@@ -422,7 +422,7 @@ h1 {
|
||||
}
|
||||
}
|
||||
|
||||
.coords i {
|
||||
.coords icon {
|
||||
margin: 0 0.4em;
|
||||
|
||||
&::before {
|
||||
@@ -777,7 +777,7 @@ h1 {
|
||||
color: $c-font-dim;
|
||||
}
|
||||
|
||||
i {
|
||||
icon {
|
||||
font-size: 0.8em;
|
||||
color: $c-bad;
|
||||
text-align: center;
|
||||
|
||||
@@ -42,17 +42,17 @@
|
||||
transform: rotate(-45deg);
|
||||
}
|
||||
|
||||
i {
|
||||
icon {
|
||||
color: $c-brag;
|
||||
animation: 0.6s soft-hue ease-in-out infinite;
|
||||
text-shadow: 0 -0.5px 1px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
i:nth-child(2) {
|
||||
icon:nth-child(2) {
|
||||
animation-delay: 0.2s;
|
||||
}
|
||||
|
||||
i:nth-child(3) {
|
||||
icon:nth-child(3) {
|
||||
animation-delay: 0.4s;
|
||||
}
|
||||
|
||||
|
||||
@@ -5,11 +5,11 @@
|
||||
}
|
||||
|
||||
.patron-icon--shiny {
|
||||
i {
|
||||
icon {
|
||||
@extend %data-icon;
|
||||
}
|
||||
|
||||
i::before {
|
||||
icon::before {
|
||||
content: $licon-Wings !important;
|
||||
background-clip: text;
|
||||
color: transparent;
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
@each $id, $color in $patron-colors-dark {
|
||||
&--#{$id} {
|
||||
i::before {
|
||||
icon::before {
|
||||
@include dynamic-text-gradient($color);
|
||||
}
|
||||
}
|
||||
@@ -25,7 +25,7 @@
|
||||
|
||||
@each $id, $color in $patron-colors-light {
|
||||
html.light &--#{$id} {
|
||||
i::before {
|
||||
icon::before {
|
||||
@include dynamic-text-gradient($color);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -85,7 +85,7 @@
|
||||
min-height: 200px;
|
||||
padding: 1em 0;
|
||||
|
||||
> i {
|
||||
> icon {
|
||||
@include fluid-size('font-size', 40px, 120px);
|
||||
|
||||
margin: 0 0.4em;
|
||||
|
||||
@@ -43,7 +43,7 @@
|
||||
@include if-light {
|
||||
color: $c-font;
|
||||
|
||||
i {
|
||||
icon {
|
||||
filter: brightness(0.15);
|
||||
}
|
||||
}
|
||||
@@ -57,7 +57,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
icon {
|
||||
width: 70px;
|
||||
height: 70px;
|
||||
margin: 0 1em;
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
i.practice {
|
||||
icon.practice {
|
||||
background: url('../images/practice/help.svg');
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
@@ -115,7 +115,7 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
i {
|
||||
icon {
|
||||
font-size: 40px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
@@ -41,14 +41,14 @@
|
||||
.icon {
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
icon {
|
||||
font-size: 2em;
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
|
||||
.enterable {
|
||||
.icon i {
|
||||
.icon icon {
|
||||
color: $c-brag;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@@ -92,7 +92,7 @@
|
||||
margin-inline-end: 1rem;
|
||||
}
|
||||
|
||||
i::before {
|
||||
icon::before {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
|
||||
@@ -113,7 +113,7 @@ body:has(.base-view.setup-view) {
|
||||
}
|
||||
|
||||
button {
|
||||
i {
|
||||
icon {
|
||||
display: block;
|
||||
padding: 0;
|
||||
width: 64px;
|
||||
@@ -121,15 +121,15 @@ body:has(.base-view.setup-view) {
|
||||
background-size: 64px 64px;
|
||||
}
|
||||
|
||||
&.white i {
|
||||
&.white icon {
|
||||
background-image: url('../images/buttons/play-as-white.svg');
|
||||
}
|
||||
|
||||
&.black i {
|
||||
&.black icon {
|
||||
background-image: url('../images/buttons/play-as-black.svg');
|
||||
}
|
||||
|
||||
&.random i {
|
||||
&.random icon {
|
||||
background-image: url('../images/buttons/play-as-random.svg');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -143,7 +143,8 @@ const renderUser = (u: ChallengeUser | undefined, showRating: boolean): VNode =>
|
||||
: h('span', 'Open challenge');
|
||||
|
||||
const renderLag = (u?: ChallengeUser) =>
|
||||
u && h('signal', u.lag === undefined ? [] : [1, 2, 3, 4].map(i => h('i', { class: { off: u.lag! < i } })));
|
||||
u &&
|
||||
h('signal', u.lag === undefined ? [] : [1, 2, 3, 4].map(i => h('icon', { class: { off: u.lag! < i } })));
|
||||
|
||||
const empty = (): VNode => h('div.empty.text', { attrs: dataIcon(licon.InfoCircle) }, i18n.site.noChallenges);
|
||||
|
||||
|
||||
@@ -42,7 +42,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
icon {
|
||||
display: block;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
@@ -61,7 +61,7 @@
|
||||
&--color {
|
||||
flex-flow: row;
|
||||
|
||||
i {
|
||||
icon {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
@@ -78,15 +78,15 @@
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.color_white i {
|
||||
.color_white icon {
|
||||
background-image: url('../piece/cburnett/wK.svg');
|
||||
}
|
||||
|
||||
.color_random i {
|
||||
.color_random icon {
|
||||
background-image: url('../images/wbK.svg');
|
||||
}
|
||||
|
||||
.color_black i {
|
||||
.color_black icon {
|
||||
background-image: url('../piece/cburnett/bK.svg');
|
||||
}
|
||||
|
||||
|
||||
@@ -175,7 +175,7 @@ const configurationButtons = (ctrl: CoordinateTrainerCtrl): VNodes => [
|
||||
keyup: ctrl.onRadioInputKeyUp,
|
||||
},
|
||||
}),
|
||||
h(`label.color_${key}`, { attrs: { for: `coord_color_${key}`, title: name } }, h('i')),
|
||||
h(`label.color_${key}`, { attrs: { for: `coord_color_${key}`, title: name } }, h('icon')),
|
||||
]),
|
||||
),
|
||||
),
|
||||
@@ -256,7 +256,7 @@ const settings = (ctrl: CoordinateTrainerCtrl): VNode => {
|
||||
|
||||
const playingAs = (ctrl: CoordinateTrainerCtrl): VNode => {
|
||||
return h('div.box.current-status.current-status--color', [
|
||||
h(`label.color_${ctrl.orientation}`, h('i')),
|
||||
h(`label.color_${ctrl.orientation}`, h('icon')),
|
||||
h('em', i18n.site[ctrl.orientation === 'white' ? 'youPlayTheWhitePieces' : 'youPlayTheBlackPieces']),
|
||||
]);
|
||||
};
|
||||
|
||||
@@ -49,7 +49,7 @@ export class PingCtrl {
|
||||
signalBars(): VNode {
|
||||
const lagRating = !this.ping ? 0 : this.ping < 150 ? 4 : this.ping < 300 ? 3 : this.ping < 500 ? 2 : 1;
|
||||
const bars = [];
|
||||
for (let i = 1; i <= 4; i++) bars.push(h(i <= lagRating ? 'i' : 'i.off'));
|
||||
for (let i = 1; i <= 4; i++) bars.push(h(i <= lagRating ? 'icon' : 'icon.off'));
|
||||
return h('signal.q' + lagRating, bars);
|
||||
}
|
||||
|
||||
|
||||
@@ -94,7 +94,7 @@
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.broken i {
|
||||
.broken icon {
|
||||
font-size: 50px;
|
||||
}
|
||||
|
||||
@@ -117,7 +117,7 @@
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.chart.empty i {
|
||||
.chart.empty icon {
|
||||
margin-bottom: 30px;
|
||||
display: block;
|
||||
font-size: 200px;
|
||||
|
||||
@@ -67,7 +67,7 @@
|
||||
color: $c-font;
|
||||
|
||||
img,
|
||||
i {
|
||||
icon {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
opacity: 0.9;
|
||||
@@ -75,7 +75,7 @@
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
i::before {
|
||||
icon::before {
|
||||
font-size: 30px;
|
||||
}
|
||||
|
||||
|
||||
@@ -84,7 +84,7 @@
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.stars i {
|
||||
.stars icon {
|
||||
margin: 3px;
|
||||
animation: text-shadow-glow 1s 1;
|
||||
}
|
||||
@@ -168,7 +168,7 @@
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
.st3 i:first-child {
|
||||
.st3 icon:first-child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
@@ -63,8 +63,7 @@ p {
|
||||
unicode-bidi: plaintext;
|
||||
}
|
||||
|
||||
em,
|
||||
i {
|
||||
em {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
|
||||
@@ -38,7 +38,7 @@
|
||||
border: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
icon {
|
||||
@extend %roboto;
|
||||
|
||||
letter-spacing: -1px;
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
&:focus,
|
||||
&.complete-selected {
|
||||
&,
|
||||
& i {
|
||||
& icon {
|
||||
color: $c-font-clearer !important;
|
||||
}
|
||||
|
||||
|
||||
@@ -6,7 +6,7 @@ signal {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
signal > i {
|
||||
signal > icon {
|
||||
width: 20%;
|
||||
margin-inline-start: 1px;
|
||||
display: inline-block;
|
||||
@@ -14,26 +14,26 @@ signal > i {
|
||||
background-color: $m-secondary_dimmer--mix-82;
|
||||
}
|
||||
|
||||
signal > i:nth-child(2) {
|
||||
signal > icon:nth-child(2) {
|
||||
height: 60%;
|
||||
}
|
||||
|
||||
signal > i:nth-child(3) {
|
||||
signal > icon:nth-child(3) {
|
||||
height: 80%;
|
||||
}
|
||||
|
||||
signal > i:nth-child(4) {
|
||||
signal > icon:nth-child(4) {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
signal.q1 > i {
|
||||
signal.q1 > icon {
|
||||
background-color: $c-bad;
|
||||
}
|
||||
|
||||
signal.q2 > i {
|
||||
signal.q2 > icon {
|
||||
background-color: $c-warn;
|
||||
}
|
||||
|
||||
signal > i.off {
|
||||
signal > icon.off {
|
||||
background-color: $c-shade;
|
||||
}
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
background: $c-bg-zebra;
|
||||
|
||||
img,
|
||||
i {
|
||||
icon {
|
||||
flex: 1 1 50%;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -2,22 +2,22 @@
|
||||
--king-size: 32px;
|
||||
|
||||
&__button {
|
||||
i {
|
||||
icon {
|
||||
display: block;
|
||||
width: var(--king-size);
|
||||
height: var(--king-size);
|
||||
background-size: var(--king-size) var(--king-size);
|
||||
}
|
||||
|
||||
&.white i {
|
||||
&.white icon {
|
||||
background-image: url('../piece/cburnett/wK.svg');
|
||||
}
|
||||
|
||||
&.black i {
|
||||
&.black icon {
|
||||
background-image: url('../piece/cburnett/bK.svg');
|
||||
}
|
||||
|
||||
&.random i {
|
||||
&.random icon {
|
||||
background-image: url('../images/wbK.svg');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -170,7 +170,7 @@ export function renderCeval(ctrl: CevalHandler): VNode[] {
|
||||
pearl = hl('pearl', '#' + bestEv.mate);
|
||||
percent = 100;
|
||||
} else {
|
||||
if (!enabled) pearl = hl('pearl', hl('i'));
|
||||
if (!enabled) pearl = hl('pearl', hl('icon'));
|
||||
else if (node.outcome() || node.threefold) pearl = hl('pearl', '-');
|
||||
else if (ceval.state === CevalState.Failed) pearl = hl('pearl', iconTag(licon.CautionCircle, 'is-red'));
|
||||
else pearl = hl('pearl', hl('i.ddloader'));
|
||||
|
||||
@@ -28,7 +28,7 @@ export const colorButtons = (colorProp: ColorProp): VNode =>
|
||||
on: { change: () => colorProp(key) },
|
||||
}),
|
||||
hl(`label.card-radio`, { attrs: { for: `color-picker-${key}` } }, [
|
||||
hl('div.color-picker__button', { class: { [key]: true } }, hl('i')),
|
||||
hl('div.color-picker__button', { class: { [key]: true } }, hl('icon')),
|
||||
hl('span.text', name),
|
||||
]),
|
||||
]),
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
margin: 0 0.7em 0 0.4em;
|
||||
}
|
||||
|
||||
i.img::before {
|
||||
icon.img::before {
|
||||
color: #fff;
|
||||
font-size: 42px;
|
||||
|
||||
|
||||
@@ -15,12 +15,12 @@ $c-support: $c-brag;
|
||||
}
|
||||
|
||||
&:hover .lobby__support__text,
|
||||
&:hover i::before {
|
||||
&:hover icon::before {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
icon {
|
||||
flex: 0 0 auto;
|
||||
margin: 0 0.5em;
|
||||
|
||||
|
||||
@@ -18,7 +18,7 @@ export const ratingView = ({ opts, data, setupCtrl }: LobbyController): MaybeVNo
|
||||
return h(
|
||||
'div.ratings',
|
||||
!opts.showRatings
|
||||
? [h('i', perfIconAttrs), perfOrSpeed.name]
|
||||
? [h('icon', perfIconAttrs), perfOrSpeed.name]
|
||||
: [
|
||||
...i18n.site.yourRatingIsX.asArray(
|
||||
h('strong', perfIconAttrs, setupCtrl.myRating() + (setupCtrl.isProvisional() ? '?' : '')),
|
||||
|
||||
@@ -83,7 +83,7 @@
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.user_marks i {
|
||||
.user_marks icon {
|
||||
@include user-marks;
|
||||
}
|
||||
|
||||
|
||||
@@ -237,8 +237,8 @@ body.no-inquiry {
|
||||
}
|
||||
|
||||
.fbt.icon::before,
|
||||
.warn i::before,
|
||||
.alt i {
|
||||
.warn icon::before,
|
||||
.alt icon {
|
||||
font-size: 1.7em;
|
||||
}
|
||||
|
||||
@@ -286,7 +286,7 @@ body.no-inquiry {
|
||||
height: 100%;
|
||||
|
||||
> span,
|
||||
> i,
|
||||
> icon,
|
||||
.main {
|
||||
display: block;
|
||||
height: 100%;
|
||||
@@ -313,7 +313,7 @@ body.no-inquiry {
|
||||
|
||||
&:hover {
|
||||
> span,
|
||||
> i,
|
||||
> icon,
|
||||
.main {
|
||||
background: $c-bg-zebra2;
|
||||
}
|
||||
@@ -328,7 +328,7 @@ body.no-inquiry {
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
> i {
|
||||
> icon {
|
||||
line-height: 40px;
|
||||
}
|
||||
|
||||
|
||||
@@ -73,9 +73,9 @@
|
||||
}
|
||||
}
|
||||
|
||||
.mod-timeline__event:has(i.moderator) {
|
||||
.mod-timeline__event:has(icon.moderator) {
|
||||
.user-link,
|
||||
.user-link i.line {
|
||||
.user-link icon.line {
|
||||
color: $m-brag_font--mix-60;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -139,7 +139,7 @@ $c-report-high-over: white;
|
||||
border-inline-start: 4px solid $c-report-high;
|
||||
}
|
||||
|
||||
.user_marks i {
|
||||
.user_marks icon {
|
||||
@include user-marks;
|
||||
}
|
||||
|
||||
|
||||
@@ -169,7 +169,7 @@
|
||||
background: $m-brag_white--mix-80;
|
||||
}
|
||||
|
||||
i {
|
||||
icon {
|
||||
margin-inline-end: 0.3em;
|
||||
opacity: 0.5;
|
||||
}
|
||||
@@ -200,7 +200,7 @@
|
||||
background: #484541;
|
||||
border-radius: 4px 0 0 4px;
|
||||
|
||||
i {
|
||||
icon {
|
||||
display: block;
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
@@ -267,7 +267,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
icon {
|
||||
margin-inline-start: 0.5ch;
|
||||
}
|
||||
|
||||
@@ -327,14 +327,14 @@
|
||||
}
|
||||
}
|
||||
|
||||
.i {
|
||||
.icon {
|
||||
padding: 0;
|
||||
|
||||
&.recent {
|
||||
color: $c-brag;
|
||||
}
|
||||
|
||||
i {
|
||||
icon {
|
||||
margin: 0;
|
||||
|
||||
&::before {
|
||||
|
||||
@@ -109,7 +109,7 @@
|
||||
&:hover {
|
||||
background: $c-bg-zebra;
|
||||
|
||||
i {
|
||||
icon {
|
||||
color: $c-link;
|
||||
opacity: 0.9;
|
||||
}
|
||||
@@ -118,7 +118,7 @@
|
||||
&.new {
|
||||
background: $m-secondary_bg-popup--mix-27;
|
||||
|
||||
i {
|
||||
icon {
|
||||
color: $c-secondary;
|
||||
opacity: 0.7;
|
||||
}
|
||||
@@ -126,13 +126,13 @@
|
||||
&:hover {
|
||||
background: $m-secondary_bg-popup--mix-36;
|
||||
|
||||
i {
|
||||
icon {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
icon {
|
||||
font-size: 2em;
|
||||
opacity: 0.5;
|
||||
margin-inline-end: 1rem;
|
||||
|
||||
@@ -19,7 +19,7 @@
|
||||
background: $m-primary--lighten-10;
|
||||
}
|
||||
|
||||
i::before {
|
||||
icon::before {
|
||||
font-size: 2.5em;
|
||||
margin-inline-end: 10px;
|
||||
}
|
||||
|
||||
@@ -141,7 +141,7 @@
|
||||
box-shadow: none;
|
||||
opacity: 1;
|
||||
|
||||
i {
|
||||
icon {
|
||||
opacity: 1;
|
||||
color: $m-primary_bg--mix-70;
|
||||
position: absolute;
|
||||
@@ -156,7 +156,7 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
i {
|
||||
icon {
|
||||
font-size: 4em;
|
||||
opacity: 0.8;
|
||||
color: $c-over;
|
||||
@@ -223,7 +223,7 @@
|
||||
}
|
||||
|
||||
.puzzle-dashboard__metric--fix {
|
||||
i {
|
||||
icon {
|
||||
font-size: 1.6em;
|
||||
margin-inline-start: 0.3em;
|
||||
}
|
||||
|
||||
@@ -124,7 +124,7 @@
|
||||
&__color {
|
||||
margin-top: 1.5vh;
|
||||
|
||||
i {
|
||||
icon {
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
@@ -133,15 +133,15 @@
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.color-white i {
|
||||
.color-white icon {
|
||||
background-image: url('../piece/cburnett/wK.svg');
|
||||
}
|
||||
|
||||
.color-random i {
|
||||
.color-random icon {
|
||||
background-image: url('../images/wbK.svg');
|
||||
}
|
||||
|
||||
.color-black i {
|
||||
.color-black icon {
|
||||
background-image: url('../piece/cburnett/bK.svg');
|
||||
}
|
||||
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import * as licon from 'lib/licon';
|
||||
import { type VNode, type MaybeVNodes, bind, dataIcon, hl } from 'lib/view';
|
||||
import { type VNode, type MaybeVNodes, bind, hl, iconTag } from 'lib/view';
|
||||
|
||||
import type PuzzleCtrl from '../ctrl';
|
||||
|
||||
@@ -32,7 +32,7 @@ const renderStreak = (ctrl: PuzzleCtrl): MaybeVNodes => [
|
||||
hl('span', i18n.puzzle.yourStreakX.asArray(hl('strong', `${ctrl.streak?.data.index ?? 0}`))),
|
||||
]),
|
||||
hl('a.continue', { attrs: { href: ctrl.routerWithLang('/streak') } }, [
|
||||
hl('i', { attrs: dataIcon(licon.PlayTriangle) }),
|
||||
iconTag(licon.PlayTriangle),
|
||||
i18n.puzzle.newStreak,
|
||||
]),
|
||||
];
|
||||
@@ -48,7 +48,7 @@ export default function (ctrl: PuzzleCtrl): VNode {
|
||||
: [
|
||||
hl('div.complete', i18n.puzzle[win ? 'puzzleSuccess' : 'puzzleComplete']),
|
||||
hl('button.continue', { hook: bind('click', ctrl.nextPuzzle) }, [
|
||||
hl('i', { attrs: dataIcon(licon.PlayTriangle) }),
|
||||
iconTag(licon.PlayTriangle),
|
||||
i18n.puzzle[ctrl.streak ? 'continueTheStreak' : 'continueTraining'],
|
||||
]),
|
||||
hl('div.puzzle__more', [
|
||||
|
||||
@@ -229,7 +229,7 @@ export const renderColorForm = (ctrl: PuzzleCtrl): VNode =>
|
||||
{
|
||||
attrs: { href: `/training/${ctrl.data.angle.key}/${key}`, title: i18n.site[i18nKey] },
|
||||
},
|
||||
hl('i'),
|
||||
hl('icon'),
|
||||
),
|
||||
]),
|
||||
),
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import * as licon from 'lib/licon';
|
||||
import { type VNode, type MaybeVNode, bind, dataIcon, hl, type VNodeData } from 'lib/view';
|
||||
import { type VNode, type MaybeVNode, bind, hl, type VNodeData, iconTag } from 'lib/view';
|
||||
|
||||
import type PuzzleCtrl from '../ctrl';
|
||||
import type { ThemeKey, RoundThemes } from '../interfaces';
|
||||
@@ -86,7 +86,7 @@ const editor = (ctrl: PuzzleCtrl): VNode[] => {
|
||||
hl(
|
||||
'div.puzzle__themes__votes',
|
||||
allThemes.static.has(key)
|
||||
? [hl('div.puzzle__themes__lock', hl('i', { attrs: dataIcon(licon.Padlock) }))]
|
||||
? [hl('div.puzzle__themes__lock', iconTag(licon.Padlock))]
|
||||
: [
|
||||
hl('button.puzzle__themes__vote.vote-up', {
|
||||
class: { active: votedThemes[key] },
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
justify-content: stretch;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
icon {
|
||||
font-size: 15em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
@@ -205,7 +205,7 @@ body {
|
||||
gap: 3rem;
|
||||
padding: 0 2rem;
|
||||
|
||||
i {
|
||||
icon {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
@@ -223,7 +223,7 @@ body {
|
||||
.recap__slide--patron {
|
||||
gap: 2em;
|
||||
|
||||
i {
|
||||
icon {
|
||||
font-size: 3em;
|
||||
}
|
||||
|
||||
|
||||
@@ -83,7 +83,7 @@ export function userHtml(ctrl: RoundController, player: Player, position: TopOrB
|
||||
|
||||
const signalBars = (signal: number) => {
|
||||
const bars: VNode[] = [];
|
||||
for (let i = 1; i <= 4; i++) bars.push(hl(i <= signal ? 'i' : 'i.off'));
|
||||
for (let i = 1; i <= 4; i++) bars.push(hl(i <= signal ? 'icon' : 'icon.off'));
|
||||
return hl('signal.q' + signal, bars);
|
||||
};
|
||||
|
||||
|
||||
@@ -30,7 +30,7 @@ $chat-height: calc(90vh - 300px);
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
> i {
|
||||
> icon {
|
||||
font-size: 2.5em;
|
||||
margin-inline-end: 0.5em;
|
||||
}
|
||||
|
||||
@@ -31,7 +31,7 @@
|
||||
justify-content: stretch;
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
icon {
|
||||
font-size: 15em;
|
||||
line-height: 1.2em;
|
||||
}
|
||||
|
||||
@@ -59,7 +59,7 @@
|
||||
width: 1px;
|
||||
|
||||
/* helps keeping it as small as possible */
|
||||
i {
|
||||
icon {
|
||||
opacity: 0.4;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
@@ -17,7 +17,7 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
icon {
|
||||
flex: 0 0 2em;
|
||||
margin-inline-end: 2.5rem;
|
||||
text-align: center;
|
||||
@@ -101,7 +101,7 @@
|
||||
.icon {
|
||||
text-align: center;
|
||||
|
||||
i {
|
||||
icon {
|
||||
font-size: 2.5em;
|
||||
color: $c-brag;
|
||||
}
|
||||
|
||||
@@ -20,7 +20,7 @@ function playerTr(ctrl: SwissCtrl, player: Player) {
|
||||
h(
|
||||
'td.rank',
|
||||
player.absent && ctrl.data.status !== 'finished'
|
||||
? h('i', { attrs: { 'data-icon': licon.Pause, title: 'Absent' } })
|
||||
? h('icon', { attrs: { 'data-icon': licon.Pause, title: 'Absent' } })
|
||||
: [player.rank],
|
||||
),
|
||||
h('td.player', renderPlayer(player, false, ctrl.opts.showRatings)),
|
||||
|
||||
@@ -5,16 +5,16 @@
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
|
||||
.tour-shed-weekly & i::before {
|
||||
.tour-shed-weekly & icon::before {
|
||||
font-size: 35px;
|
||||
}
|
||||
|
||||
.tour-shed-monthly & i::before,
|
||||
.tour-shed-weekend & i::before {
|
||||
.tour-shed-monthly & icon::before,
|
||||
.tour-shed-weekend & icon::before {
|
||||
font-size: 40px;
|
||||
}
|
||||
|
||||
.tour-shed-yearly & i::before {
|
||||
.tour-shed-yearly & icon::before {
|
||||
font-size: 45px;
|
||||
}
|
||||
|
||||
|
||||
@@ -67,7 +67,7 @@
|
||||
width: 1px;
|
||||
|
||||
/* helps keeping it as small as possible */
|
||||
i {
|
||||
icon {
|
||||
opacity: 0.4;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
.mini-game__player {
|
||||
@extend %flex-center-nowrap;
|
||||
|
||||
& i.berserk {
|
||||
& icon.berserk {
|
||||
flex: 0 0 auto;
|
||||
|
||||
&::before {
|
||||
|
||||
@@ -23,7 +23,7 @@
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
i {
|
||||
icon {
|
||||
color: $c-brag;
|
||||
}
|
||||
}
|
||||
@@ -63,7 +63,7 @@
|
||||
.icon {
|
||||
width: 0;
|
||||
|
||||
i {
|
||||
icon {
|
||||
font-size: 3em;
|
||||
color: $c-brag;
|
||||
opacity: 0.8;
|
||||
|
||||
@@ -76,7 +76,7 @@
|
||||
&__top {
|
||||
@extend %flex-center-nowrap;
|
||||
|
||||
i {
|
||||
icon {
|
||||
@extend %page-text-shadow;
|
||||
|
||||
font-size: 4em;
|
||||
@@ -87,7 +87,7 @@
|
||||
&__title {
|
||||
@extend %flex-column;
|
||||
|
||||
i + & {
|
||||
icon + & {
|
||||
margin-top: 1em;
|
||||
}
|
||||
|
||||
|
||||
@@ -43,7 +43,7 @@ $c-tutor-concept: $c-good;
|
||||
color: $c-tutor-concept;
|
||||
}
|
||||
|
||||
i[data-icon] {
|
||||
icon {
|
||||
font-size: 6em;
|
||||
color: $c-tutor-concept;
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
|
||||
@extend %flex-center-nowrap;
|
||||
|
||||
i {
|
||||
icon {
|
||||
position: relative;
|
||||
font-size: 0.8em;
|
||||
margin-left: 1ch;
|
||||
|
||||
@@ -80,7 +80,7 @@
|
||||
margin: 20px;
|
||||
display: flex;
|
||||
|
||||
i {
|
||||
icon {
|
||||
font-size: 45px;
|
||||
margin-inline-end: 15px;
|
||||
}
|
||||
@@ -246,7 +246,7 @@
|
||||
vertical-align: bottom;
|
||||
color: $c-font-dim;
|
||||
|
||||
i {
|
||||
icon {
|
||||
font-size: 2em;
|
||||
display: block;
|
||||
}
|
||||
|
||||
@@ -41,7 +41,7 @@
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
> i {
|
||||
> icon {
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
font-size: 24px;
|
||||
|
||||
@@ -55,7 +55,7 @@
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
i {
|
||||
icon {
|
||||
font-size: 0.75em;
|
||||
opacity: 0.2;
|
||||
color: $c-font-dim;
|
||||
@@ -63,12 +63,12 @@
|
||||
@include transition;
|
||||
}
|
||||
|
||||
&:hover i {
|
||||
&:hover icon {
|
||||
color: $c-link;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
&.active i {
|
||||
&.active icon {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@@ -105,7 +105,7 @@
|
||||
padding: 0.3em;
|
||||
}
|
||||
|
||||
a > i,
|
||||
a > icon,
|
||||
h3,
|
||||
hr,
|
||||
rating .rp,
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
font-size: 1.1em;
|
||||
margin: 0.8em 10%;
|
||||
|
||||
i[data-icon]::before {
|
||||
icon[data-icon]::before {
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user