tpl
/
obsidian-sample-plugin
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Изменение стилей

This commit is contained in:
Riffaells 2024-12-03 02:05:36 +05:00
parent 48d3491fc2
commit 1895391f40
2 changed files with 86 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/main.ts
View File

@ -43,6 +43,7 @@ export default class ChessMatePlugin extends Plugin {
}, },
}, },
}; };
PgnViewer(boardElement, viewerConfig); PgnViewer(boardElement, viewerConfig);

138
styles.css
View File

@ -1,9 +1,27 @@
.chessmate-container { .chessmate-container {
font-style: normal !important;
font-family: var(--font-text), sans-serif !important;
} }
:root { :root {
--board-color: #ffffff; --board-color: #f0d9b5;
--c-lpv-fbt-hover: var(--text-accent); /* Цвет фона кнопки при наведении */
--c-lpv-accent: var(--text-accent); /* Акцентный цвет */
--c-lpv-accent-over: white; /* Цвет акцента при наведении */
--c-lpv-bg-movelist: hsl(37, 5%, 18%); /* Цвет фона списка ходов */
--c-lpv-border: hsl(0, 0%, 25%); /* Цвет границы */
--c-lpv-bg-player: hsl(37, 5%, 18%); /* Цвет фона игрока */
--c-lpv-bg-pane: rgb(55.70322, 62.397225, 42.4422); /* Цвет фона панели */
--c-lpv-pgn-text: rgb(50.447466, 51.2240175, 43.25616); /* Цвет текста PGN */
--c-lpv-bg-controls: hsl(37, 5%, 18%); /* Цвет фона контролов */
--c-lpv-bg-variation: hsl(37, 5%, 15%); /* Цвет фона вариации */
--c-lpv-side-border: hsl(37, 5%, 13%); /* Цвет границы боковой панели */
--c-lpv-bg-inaccuracy-hover: rgb(58.4919, 85.98141, 100.6281); /* Цвет фона для неточностей при наведении */
--c-lpv-bg-mistake-hover: rgb(102.5865, 79.55235, 30.5235); /* Цвет фона для ошибок при наведении */
--c-lpv-bg-blunder-hover: rgb(100.7505, 57.29085, 55.3095); /* Цвет фона для грубых ошибок при наведении */
--c-lpv-bg-good-hover: rgb(61.6896, 99.41175, 64.9689); /* Цвет фона для хороших ходов при наведении */
--c-lpv-bg-brilliant-hover: rgb(43.71975, 91.3716, 47.839275); /* Цвет фона для блестящих ходов при наведении */
--c-lpv-bg-interesting-hover: rgb(105.6465, 67.69485, 98.1495); /* Цвет фона для интересных ходов при наведении */
} }
.cg-wrap { .cg-wrap {
@ -128,7 +146,6 @@ piece.fading {
display: flex; display: flex;
pointer-events: none; pointer-events: none;
opacity: .8; opacity: .8;
font-family: sans-serif;
font-size: 9px; font-size: 9px;
color: hsla(0, 0%, 100%, .8) color: hsla(0, 0%, 100%, .8)
} }
@ -198,7 +215,7 @@ cg-board square.premove-dest:hover {
} }
cg-board square.last-move { cg-board square.last-move {
background-color: rgba(155, 199, 0, 0.41) background-color: rgba(198, 255, 148, 0.75)
} }
cg-board square.selected { cg-board square.selected {
@ -265,7 +282,7 @@ cg-board square.current-premove {
background: none; background: none;
border: none; border: none;
outline: none; outline: none;
color: var(--c-lpv-font, #aaa); color: var(--text-normal, #fff);
align-items: normal; align-items: normal;
cursor: pointer; cursor: pointer;
text-transform: uppercase; text-transform: uppercase;
@ -276,14 +293,14 @@ cg-board square.current-premove {
@media (hover: hover) { @media (hover: hover) {
.lpv__fbt:hover:not(.disabled):not([disabled]) { .lpv__fbt:hover:not(.disabled):not([disabled]) {
background: var(--c-lpv-fbt-hover, lpv-fbt-hover); /*background: var(--c-lpv-fbt-hover, lpv-fbt-hover);*/
color: #fff /*color: var(--text-normal, #fff);*/
} }
} }
.lpv__fbt.active { .lpv__fbt.active {
background: var(--c-lpv-accent, hsl(88, 62%, 37%)) !important; background: var(--c-lpv-accent, hsl(88, 62%, 37%)) !important;
color: #fff color: var(--text-normal, #fff);
} }
.lpv__fbt.disabled, .lpv__fbt[disabled] { .lpv__fbt.disabled, .lpv__fbt[disabled] {
@ -296,7 +313,8 @@ cg-board square.current-premove {
display: block; display: block;
height: 0; height: 0;
padding-bottom: 100%; padding-bottom: 100%;
width: 100% width: 100%;
max-height: 700px;
} }
.lpv { .lpv {
@ -328,7 +346,7 @@ cg-board square.current-premove {
} }
.lpv--moves-bottom .lpv__controls { .lpv--moves-bottom .lpv__controls {
border-bottom: 1px solid var(--c-lpv-border, hsl(0, 0%, 25%)) /*border-bottom: 1px solid var(--c-lpv-border, hsl(0, 0%, 25%))*/
} }
.lpv--moves-auto { .lpv--moves-auto {
@ -361,7 +379,7 @@ cg-board square.current-premove {
} }
.lpv--players.lpv--moves-bottom .lpv__controls { .lpv--players.lpv--moves-bottom .lpv__controls {
border-bottom: 1px solid var(--c-lpv-border, hsl(0, 0%, 25%)) /*border-bottom: 1px solid var(--c-lpv-border, hsl(0, 0%, 25%))*/
} }
.lpv--players.lpv--moves-auto { .lpv--players.lpv--moves-auto {
@ -383,7 +401,11 @@ cg-board square.current-premove {
} }
.lpv__side { .lpv__side {
grid-area: side grid-area: side;
opacity: 0.6;
overflow: hidden;
display: flex;
flex-flow: column
} }
.lpv__player--top { .lpv__player--top {
@ -406,30 +428,23 @@ cg-board square.current-premove {
grid-area: 1/1/4/2 grid-area: 1/1/4/2
} }
.lpv__side {
overflow: hidden;
display: flex;
flex-flow: column
}
.lpv__moves { .lpv__moves {
position: relative; position: relative;
flex: 1 1 0; flex: 1 1 0;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
overflow-y: auto; overflow-y: auto;
background: var(--c-lpv-bg-movelist, hsl(37, 5%, 18%)); /*background: var(--c-lpv-bg-movelist, hsl(37, 5%, 18%));*/
align-items: center; align-items: center;
align-content: flex-start; align-content: flex-start;
will-change: scroll-position; will-change: scroll-position;
user-select: none; user-select: none;
line-height: 1.7;
min-width: 20ch min-width: 20ch
} }
.lpv__moves index { /*.lpv__moves index {*/
color: var(--c-lpv-font-shy, rgb(109.0975, 108.21775, 106.8025)) /* color: var(--c-lpv-font-shy, rgb(109, 108, 106))*/
} /*}*/
.lpv__moves > index { .lpv__moves > index {
flex: 0 0 15%; flex: 0 0 15%;
@ -442,13 +457,19 @@ cg-board square.current-premove {
border-radius: 3px; border-radius: 3px;
padding-left: 3%; padding-left: 3%;
font-weight: bold; font-weight: bold;
white-space: nowrap white-space: nowrap;
} }
.lpv__moves move.empty { variation move {
color: var(--c-lpv-font-shy, rgb(109.0975, 108.21775, 106.8025)) text-decoration: underline;
} }
/*.lpv__moves move.empty {*/
/* color: var(--c-lpv-font-shy, rgb(109, 108, 106))*/
/*}*/
.lpv__moves move:not(.empty):hover { .lpv__moves move:not(.empty):hover {
background: var(--c-lpv-move-hover, rgb(63.21144, 78.35895, 41.2794)); background: var(--c-lpv-move-hover, rgb(63.21144, 78.35895, 41.2794));
color: var(--c-lpv-accent-over, white); color: var(--c-lpv-accent-over, white);
@ -456,7 +477,7 @@ cg-board square.current-premove {
} }
.lpv__moves move.ancestor { .lpv__moves move.ancestor {
color: var(--c-lpv-past-moves, #aaa) /*color: var(--c-lpv-past-moves, #aaa)*/
} }
.lpv__moves move.current { .lpv__moves move.current {
@ -529,9 +550,8 @@ cg-board square.current-premove {
.lpv__moves > comment { .lpv__moves > comment {
flex: 1 1 100%; flex: 1 1 100%;
background: var(--c-lpv-bg-variation, hsl(37, 5%, 15%)); /*background: var(--c-lpv-bg-variation, hsl(37, 5%, 15%));*/
border: 1px solid var(--c-lpv-side-border, hsl(37, 5%, 13%)); /*border-width: 1px 0;*/
border-width: 1px 0;
padding: .4em 1em; padding: .4em 1em;
line-height: 1.4; line-height: 1.4;
overflow-wrap: break-word; overflow-wrap: break-word;
@ -546,11 +566,11 @@ cg-board square.current-premove {
flex: 1 1 100%; flex: 1 1 100%;
display: block; display: block;
overflow: hidden; overflow: hidden;
font-size: .8em; font-size: 1em;
background: var(--c-lpv-bg-variation, hsl(37, 5%, 15%)); scale: 0.9;
border: 1px solid var(--c-lpv-side-border, hsl(37, 5%, 13%)); /*background: var(--c-lpv-bg-variation, hsl(37, 5%, 15%));*/
border-width: 1px 0; /*border: 1px solid var(--c-lpv-side-border, hsl(37, 5%, 13%));*/
padding: 0em .6em padding: 0 .6em
} }
.lpv__moves > variation + variation { .lpv__moves > variation + variation {
@ -583,7 +603,7 @@ cg-board square.current-premove {
} }
.lpv__moves > variation paren { .lpv__moves > variation paren {
color: var(--c-lpv-font-shy, rgb(109.0975, 108.21775, 106.8025)) color: var(--list-marker-color, #fff)
} }
.lpv__moves > variation paren.open { .lpv__moves > variation paren.open {
@ -603,7 +623,7 @@ cg-board square.current-premove {
} }
.lpv__player--bottom { .lpv__player--bottom {
border-bottom: 1px solid var(--c-lpv-border, hsl(0, 0%, 25%)) /*border-bottom: 1px solid var(--c-lpv-border, hsl(0, 0%, 25%))*/
} }
.lpv--controls-false .lpv__player--bottom { .lpv--controls-false .lpv__player--bottom {
@ -616,7 +636,7 @@ cg-board square.current-premove {
flex-flow: row nowrap; flex-flow: row nowrap;
align-items: center; align-items: center;
gap: 1ch; gap: 1ch;
color: var(--c-lpv-font, #aaa); color: var(--text-normal, #fff);
text-decoration: none text-decoration: none
} }
@ -664,7 +684,7 @@ cg-board square.current-premove {
.lpv__pgn__text { .lpv__pgn__text {
flex: 1 1 auto; flex: 1 1 auto;
background: var(--c-lpv-pgn-text, rgb(50.447466, 51.2240175, 43.25616)); background: var(--c-lpv-pgn-text, rgb(50.447466, 51.2240175, 43.25616));
color: var(--c-lpv-font, #aaa); color: var(--text-normal, #fff);
padding: .8em 1.3em padding: .8em 1.3em
} }
@ -673,14 +693,14 @@ cg-board square.current-premove {
flex-flow: row nowrap; flex-flow: row nowrap;
align-items: stretch; align-items: stretch;
user-select: none; user-select: none;
background: var(--c-lpv-bg-controls, hsl(37, 5%, 18%)) /*background: var(--c-lpv-bg-controls, hsl(37, 5%, 18%))*/
} }
.lpv__controls .lpv__fbt { .lpv__controls .lpv__fbt {
flex: 1 1 auto; flex: 1 1 auto;
font-size: 1.4em; /*font-size: 1.4em;*/
padding: .4em .7em; /*padding: .4em .7em;*/
border-left: 1px solid var(--c-lpv-border, hsl(0, 0%, 25%)) /*border-left: 1px solid var(--c-lpv-border, hsl(0, 0%, 25%))*/
} }
.lpv__controls .lpv__fbt:first-child { .lpv__controls .lpv__fbt:first-child {
@ -688,9 +708,10 @@ cg-board square.current-premove {
} }
.lpv__controls__menu.lpv__fbt { .lpv__controls__menu.lpv__fbt {
border: none;
flex: 0 1 auto; flex: 0 1 auto;
width: 4em; width: 4em;
padding: .45em 1em .35em 1em; /*padding: .45em 1em .35em 1em;*/
font-size: 1.1em font-size: 1.1em
} }
@ -704,11 +725,11 @@ cg-board square.current-premove {
} }
.lpv *::-webkit-scrollbar-thumb { .lpv *::-webkit-scrollbar-thumb {
background: var(--c-lpv-font-bg, rgb(72.556, 71.1484, 68.884)) background: var(--c-lpv-font-bg, rgb(72, 71, 68))
} }
.lpv *::-webkit-scrollbar-thumb:hover, .lpv *::-webkit-scrollbar-thumb:active { .lpv *::-webkit-scrollbar-thumb:hover, .lpv *::-webkit-scrollbar-thumb:active {
background: var(--c-lpv-font-shy, rgb(109.0975, 108.21775, 106.8025)) background: var(--list-marker-color, rgb(109, 108, 106))
} }
@font-face { @font-face {
@ -717,7 +738,7 @@ cg-board square.current-premove {
} }
.lpv__icon:before { .lpv__icon:before {
font-family: "lpv-fontello"; font-family: "lpv-fontello", sans-serif;
font-size: 1.1em; font-size: 1.1em;
width: 1em; width: 1em;
text-align: center; text-align: center;
@ -746,11 +767,11 @@ cg-board square.current-premove {
} }
.lpv { .lpv {
border-radius: 5px; /*border-radius: 5px;*/
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12); /*box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .14), 0 3px 1px -2px rgba(0, 0, 0, .2), 0 1px 5px 0 rgba(0, 0, 0, .12);*/
overflow: hidden; overflow: hidden;
background: var(--c-lpv-bg, hsl(37, 5%, 18%)); /*background: var(--c-lpv-bg, hsl(37, 5%, 18%));*/
color: var(--c-lpv-font, #aaa); /*color: var(--c-lpv-font, #aaa);*/
box-sizing: border-box box-sizing: border-box
} }
@ -766,6 +787,17 @@ cg-board square.current-premove {
box-shadow: none box-shadow: none
} }
.lpv:focus { .lpv button {
outline: auto 2px var(--c-lpv-accent, hsl(88, 62%, 37%)) align-items: center;
background-position: 0 0;
background-color: transparent;
background-repeat: no-repeat;
border: none;
overflow: hidden;
outline: none;
cursor: pointer;
margin: 5px;
border-radius: 5px;
box-shadow: none;
} }