diff --git a/css/chess.css b/css/chess.css index f894fc1..7595438 100644 --- a/css/chess.css +++ b/css/chess.css @@ -324,19 +324,23 @@ button:disabled .silhouette { } #cb_board .cb-lt-piece { - left: -2.5%; + left: 0; + right: auto; } #cb_board .cb-dk-piece { - left: 47.5%; + left: auto; + right: 0; } #cb_board.cb-reversed .cb-lt-piece { - left: 47.5%; + left: auto; + right: 0 } #cb_board.cb-reversed .cb-dk-piece { - left: -2.5%; + left: 0; + right: auto; } #cb_board #cb_phantom .cb-dk-piece { @@ -503,15 +507,15 @@ button:disabled .silhouette { .game-tile-lt-name::before { content: ''; display: inline-block; - background-image: url(../svg/pacosako/kl.svg); + background-image: url(../svg/pacosako-theme.svg#light_king_left); background-size: contain; background-repeat: no-repeat; width: 1.2em; height: 1.2em; margin-left: 0; margin-top: 0; - margin-bottom: -0.1em; - margin-right: -0.15em; + margin-bottom: -0.2em; + margin-right: -0.4em; } /* extra space to keep the line centered */ @@ -520,9 +524,9 @@ button:disabled .silhouette { display: inline-block; width: 1.2em; height: 1.2em; - margin-left: -0.15em; + margin-left: -0.4em; margin-top: 0; - margin-bottom: -0.1em; + margin-bottom: -0.2em; margin-right: 0; } @@ -534,21 +538,21 @@ button:disabled .silhouette { height: 1.2em; margin-left: 0; margin-top: 0; - margin-bottom: -0.1em; - margin-right: -0.05em; + margin-bottom: -0.2em; + margin-right: -0.4em; } .game-tile-dk-name::after { content: ''; display: inline-block; - background-image: url(../svg/pacosako/kd.svg); + background-image: url(../svg/pacosako-theme.svg#dark_king_right); background-size: contain; background-repeat: no-repeat; width: 1.2em; height: 1.2em; - margin-left: -0.05em; + margin-left: -0.4em; margin-top: 0; - margin-bottom: -0.1em; + margin-bottom: -0.2em; margin-right: 0; } @@ -635,22 +639,30 @@ button:disabled .silhouette { } } -.cb-dk-piece.cb-king { content: url(../svg/Chess_kdt45.svg); } -.cb-dk-piece.cb-queen { content: url(../svg/Chess_qdt45.svg); } -.cb-dk-piece.cb-rook { content: url(../svg/Chess_rdt45.svg); } -.cb-dk-piece.cb-knight { content: url(../svg/Chess_ndt45.svg); } -.cb-dk-piece.cb-bishop { content: url(../svg/Chess_bdt45.svg); } -.cb-dk-piece.cb-pawn { content: url(../svg/Chess_pdt45.svg); } -.cb-lt-piece.cb-king { content: url(../svg/Chess_klt45.svg); } -.cb-lt-piece.cb-queen { content: url(../svg/Chess_qlt45.svg); } -.cb-lt-piece.cb-rook { content: url(../svg/Chess_rlt45.svg); } -.cb-lt-piece.cb-knight { content: url(../svg/Chess_nlt45.svg); } -.cb-lt-piece.cb-bishop { content: url(../svg/Chess_blt45.svg); } -.cb-lt-piece.cb-pawn { content: url(../svg/Chess_plt45.svg); } +.cb-dk-piece.cb-king { content: url(../svg/traditional-theme.svg#dark_king_right); } +.cb-dk-piece.cb-queen { content: url(../svg/traditional-theme.svg#dark_queen_right); } +.cb-dk-piece.cb-bishop { content: url(../svg/traditional-theme.svg#dark_bishop_right); } +.cb-dk-piece.cb-knight { content: url(../svg/traditional-theme.svg#dark_knight_right); } +.cb-dk-piece.cb-rook { content: url(../svg/traditional-theme.svg#dark_rook_right); } +.cb-dk-piece.cb-pawn { content: url(../svg/traditional-theme.svg#dark_pawn_right); } +.cb-lt-piece.cb-king { content: url(../svg/traditional-theme.svg#light_king_left); } +.cb-lt-piece.cb-queen { content: url(../svg/traditional-theme.svg#light_queen_left); } +.cb-lt-piece.cb-bishop { content: url(../svg/traditional-theme.svg#light_bishop_left); } +.cb-lt-piece.cb-knight { content: url(../svg/traditional-theme.svg#light_knight_left); } +.cb-lt-piece.cb-rook { content: url(../svg/traditional-theme.svg#light_rook_left); } +.cb-lt-piece.cb-pawn { content: url(../svg/traditional-theme.svg#light_pawn_left); } -#cb_board.cb-reversed .cb-piece { - -webkit-transform: scaleX(-1); - transform: scaleX(-1); -} +#cb_board.cb-reversed .cb-dk-piece.cb-king { content: url(../svg/traditional-theme.svg#dark_king_left); } +#cb_board.cb-reversed .cb-dk-piece.cb-queen { content: url(../svg/traditional-theme.svg#dark_queen_left); } +#cb_board.cb-reversed .cb-dk-piece.cb-bishop { content: url(../svg/traditional-theme.svg#dark_bishop_left); } +#cb_board.cb-reversed .cb-dk-piece.cb-knight { content: url(../svg/traditional-theme.svg#dark_knight_left); } +#cb_board.cb-reversed .cb-dk-piece.cb-rook { content: url(../svg/traditional-theme.svg#dark_rook_left); } +#cb_board.cb-reversed .cb-dk-piece.cb-pawn { content: url(../svg/traditional-theme.svg#dark_pawn_left); } +#cb_board.cb-reversed .cb-lt-piece.cb-king { content: url(../svg/traditional-theme.svg#light_king_right); } +#cb_board.cb-reversed .cb-lt-piece.cb-queen { content: url(../svg/traditional-theme.svg#light_queen_right); } +#cb_board.cb-reversed .cb-lt-piece.cb-bishop { content: url(../svg/traditional-theme.svg#light_bishop_right); } +#cb_board.cb-reversed .cb-lt-piece.cb-knight { content: url(../svg/traditional-theme.svg#light_knight_right); } +#cb_board.cb-reversed .cb-lt-piece.cb-rook { content: url(../svg/traditional-theme.svg#light_rook_right); } +#cb_board.cb-reversed .cb-lt-piece.cb-pawn { content: url(../svg/traditional-theme.svg#light_pawn_right); } /* vim: set expandtab sw=3 ts=8: */ diff --git a/css/theme/pacosako.css b/css/theme/pacosako.css index 63a910c..c4c1eb0 100644 --- a/css/theme/pacosako.css +++ b/css/theme/pacosako.css @@ -1,45 +1,55 @@ -.cb-theme-pacosako .cb-dk-piece.cb-king { content: url(../../svg/pacosako/kd.svg); } -.cb-theme-pacosako .cb-dk-piece.cb-queen { content: url(../../svg/pacosako/qd.svg); } -.cb-theme-pacosako .cb-dk-piece.cb-rook { content: url(../../svg/pacosako/rd.svg); } -.cb-theme-pacosako .cb-dk-piece.cb-knight { content: url(../../svg/pacosako/nd.svg); } -.cb-theme-pacosako .cb-dk-piece.cb-bishop { content: url(../../svg/pacosako/bd.svg); } -.cb-theme-pacosako .cb-dk-piece.cb-pawn { content: url(../../svg/pacosako/pd.svg); } -.cb-theme-pacosako .cb-lt-piece.cb-king { content: url(../../svg/pacosako/kl.svg); } -.cb-theme-pacosako .cb-lt-piece.cb-queen { content: url(../../svg/pacosako/ql.svg); } -.cb-theme-pacosako .cb-lt-piece.cb-rook { content: url(../../svg/pacosako/rl.svg); } -.cb-theme-pacosako .cb-lt-piece.cb-knight { content: url(../../svg/pacosako/nl.svg); } -.cb-theme-pacosako .cb-lt-piece.cb-bishop { content: url(../../svg/pacosako/bl.svg); } -.cb-theme-pacosako .cb-lt-piece.cb-pawn { content: url(../../svg/pacosako/pl.svg); } +.cb-theme-pacosako .cb-dk-piece.cb-king { content: url(../../svg/pacosako-theme.svg#dark_king_right); } +.cb-theme-pacosako .cb-dk-piece.cb-queen { content: url(../../svg/pacosako-theme.svg#dark_queen_right); } +.cb-theme-pacosako .cb-dk-piece.cb-bishop { content: url(../../svg/pacosako-theme.svg#dark_bishop_right); } +.cb-theme-pacosako .cb-dk-piece.cb-knight { content: url(../../svg/pacosako-theme.svg#dark_knight_right); } +.cb-theme-pacosako .cb-dk-piece.cb-rook { content: url(../../svg/pacosako-theme.svg#dark_rook_right); } +.cb-theme-pacosako .cb-dk-piece.cb-pawn { content: url(../../svg/pacosako-theme.svg#dark_pawn_right); } +.cb-theme-pacosako .cb-lt-piece.cb-king { content: url(../../svg/pacosako-theme.svg#light_king_left); } +.cb-theme-pacosako .cb-lt-piece.cb-queen { content: url(../../svg/pacosako-theme.svg#light_queen_left); } +.cb-theme-pacosako .cb-lt-piece.cb-bishop { content: url(../../svg/pacosako-theme.svg#light_bishop_left); } +.cb-theme-pacosako .cb-lt-piece.cb-knight { content: url(../../svg/pacosako-theme.svg#light_knight_left); } +.cb-theme-pacosako .cb-lt-piece.cb-rook { content: url(../../svg/pacosako-theme.svg#light_rook_left); } +.cb-theme-pacosako .cb-lt-piece.cb-pawn { content: url(../../svg/pacosako-theme.svg#light_pawn_left); } + +#cb_board.cb-theme-pacosako .cb-dk-piece.cb-king { content: url(../../svg/pacosako-theme.svg#dark_king_left); } +#cb_board.cb-theme-pacosako .cb-dk-piece.cb-queen { content: url(../../svg/pacosako-theme.svg#dark_queen_left); } +#cb_board.cb-theme-pacosako .cb-dk-piece.cb-bishop { content: url(../../svg/pacosako-theme.svg#dark_bishop_left); } +#cb_board.cb-theme-pacosako .cb-dk-piece.cb-knight { content: url(../../svg/pacosako-theme.svg#dark_knight_left); } +#cb_board.cb-theme-pacosako .cb-dk-piece.cb-rook { content: url(../../svg/pacosako-theme.svg#dark_rook_left); } +#cb_board.cb-theme-pacosako .cb-dk-piece.cb-pawn { content: url(../../svg/pacosako-theme.svg#dark_pawn_left); } +#cb_board.cb-theme-pacosako .cb-lt-piece.cb-king { content: url(../../svg/pacosako-theme.svg#light_king_right); } +#cb_board.cb-theme-pacosako .cb-lt-piece.cb-queen { content: url(../../svg/pacosako-theme.svg#light_queen_right); } +#cb_board.cb-theme-pacosako .cb-lt-piece.cb-bishop { content: url(../../svg/pacosako-theme.svg#light_bishop_right); } +#cb_board.cb-theme-pacosako .cb-lt-piece.cb-knight { content: url(../../svg/pacosako-theme.svg#light_knight_right); } +#cb_board.cb-theme-pacosako .cb-lt-piece.cb-rook { content: url(../../svg/pacosako-theme.svg#light_rook_right); } +#cb_board.cb-theme-pacosako .cb-lt-piece.cb-pawn { content: url(../../svg/pacosako-theme.svg#light_pawn_right); } .cb-theme-pacosako .cb-piece { position: absolute; - top: 10%; - width: calc(55% * 80 / 65); - height: 80%; -} - -#cb_board.cb-theme-pacosako .cb-lt-piece { - left: 0; + top: 0; + left: 0; right: auto; + bottom: auto; + width: 100%; + height: 100%; } -#cb_board.cb-theme-pacosako .cb-dk-piece { - left: auto; - right: 0; -} - +#cb_board.cb-theme-pacosako.cb-reversed .cb-lt-piece, #cb_board.cb-theme-pacosako.cb-reversed .cb-lt-piece { - right: 0; - left: auto; -} - -#cb_board.cb-theme-pacosako.cb-reversed .cb-dk-piece { - left: 0; + left: 0; right: auto; } -#cb_board.cb-theme-pacosako #cb_phantom .cb-piece { - top: 15%; - left: calc((100% - (55% * 80 / 65)) / 2); +#cb_board.cb-theme-pacosako #cb_phantom .cb-lt-piece, +#cb_board.cb-theme-pacosako.cb-reversed #cb_phantom .cb-dk-piece { + top: 5%; + left: 15%; right: auto; } + +#cb_board.cb-theme-pacosako #cb_phantom .cb-dk-piece, +#cb_board.cb-theme-pacosako.cb-reversed #cb_phantom .cb-lt-piece { + top: 5%; + left: auto; + right: 15%; +} diff --git a/index.html b/index.html index 2fdb6fd..4b60f93 100644 --- a/index.html +++ b/index.html @@ -258,18 +258,18 @@
diff --git a/svg/pacosako-theme.svg b/svg/pacosako-theme.svg new file mode 100644 index 0000000..6abaf7b --- /dev/null +++ b/svg/pacosako-theme.svg @@ -0,0 +1,217 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/svg/traditional-theme.svg b/svg/traditional-theme.svg new file mode 100644 index 0000000..5996bb8 --- /dev/null +++ b/svg/traditional-theme.svg @@ -0,0 +1,194 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/webpack.config.js b/webpack.config.js index 6d0ace9..65976f6 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -48,7 +48,21 @@ module.exports = { outputPath: 'assets/' } }, - { loader: "svgo-loader" } + { + loader: "svgo-loader", + options: { + plugins: [ + { + cleanupIDs: { + preserve_prefix: [ + "light_", + "dark_" + ] + } + } + ] + } + } ] }, {