From ab704b9c7b2502eecb3e2edf0b0d2644ecbf69d2 Mon Sep 17 00:00:00 2001 From: Jesse McDonald Date: Sun, 3 May 2020 22:36:31 -0500 Subject: [PATCH] update traditional theme to consistent 80pt square view boxes --- css/chess.css | 64 ++++----- css/theme/pacosako.css | 54 ++------ svg/traditional-theme.svg | 271 ++++++++++++++++++++------------------ 3 files changed, 185 insertions(+), 204 deletions(-) diff --git a/css/chess.css b/css/chess.css index 7595438..3adc897 100644 --- a/css/chess.css +++ b/css/chess.css @@ -318,39 +318,31 @@ button:disabled .silhouette { .cb-lt-piece, .cb-dk-piece { position: absolute; - top: 17.5%; - width: 55%; - height: 65%; -} - -#cb_board .cb-lt-piece { + top: 0; left: 0; + bottom: auto; right: auto; + width: 100%; + height: 100%; } -#cb_board .cb-dk-piece { - left: auto; - right: 0; +#cb_phantom .cb-lt-piece, +#cb_phantom .cb-dk-piece { + top: 5%; } -#cb_board.cb-reversed .cb-lt-piece { - left: auto; - right: 0 -} - -#cb_board.cb-reversed .cb-dk-piece { - left: 0; +#cb_board #cb_phantom .cb-lt-piece, +#cb_board.cb-reversed #cb_phantom .cb-dk-piece { + left: 15%; right: auto; + clip-path: inset(0 15% 0 0); } -#cb_board #cb_phantom .cb-dk-piece { - top: 22.5%; - left: 22.5%; -} - -#cb_board #cb_phantom .cb-lt-piece { - top: 22.5%; - left: 22.5%; +#cb_board #cb_phantom .cb-dk-piece, +#cb_board.cb-reversed #cb_phantom .cb-lt-piece { + left: auto; + right: 15%; + clip-path: inset(0 0 0 15%); } .noselect { @@ -652,17 +644,17 @@ button:disabled .silhouette { .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-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); } +.cb-reversed .cb-dk-piece.cb-king { content: url(../svg/traditional-theme.svg#dark_king_left); } +.cb-reversed .cb-dk-piece.cb-queen { content: url(../svg/traditional-theme.svg#dark_queen_left); } +.cb-reversed .cb-dk-piece.cb-bishop { content: url(../svg/traditional-theme.svg#dark_bishop_left); } +.cb-reversed .cb-dk-piece.cb-knight { content: url(../svg/traditional-theme.svg#dark_knight_left); } +.cb-reversed .cb-dk-piece.cb-rook { content: url(../svg/traditional-theme.svg#dark_rook_left); } +.cb-reversed .cb-dk-piece.cb-pawn { content: url(../svg/traditional-theme.svg#dark_pawn_left); } +.cb-reversed .cb-lt-piece.cb-king { content: url(../svg/traditional-theme.svg#light_king_right); } +.cb-reversed .cb-lt-piece.cb-queen { content: url(../svg/traditional-theme.svg#light_queen_right); } +.cb-reversed .cb-lt-piece.cb-bishop { content: url(../svg/traditional-theme.svg#light_bishop_right); } +.cb-reversed .cb-lt-piece.cb-knight { content: url(../svg/traditional-theme.svg#light_knight_right); } +.cb-reversed .cb-lt-piece.cb-rook { content: url(../svg/traditional-theme.svg#light_rook_right); } +.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 c4c1eb0..db94801 100644 --- a/css/theme/pacosako.css +++ b/css/theme/pacosako.css @@ -11,45 +11,15 @@ .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: 0; - left: 0; - right: auto; - bottom: auto; - width: 100%; - height: 100%; -} - -#cb_board.cb-theme-pacosako.cb-reversed .cb-lt-piece, -#cb_board.cb-theme-pacosako.cb-reversed .cb-lt-piece { - left: 0; - right: auto; -} - -#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%; -} +.cb-theme-pacosako.cb-reversed .cb-dk-piece.cb-king { content: url(../../svg/pacosako-theme.svg#dark_king_left); } +.cb-theme-pacosako.cb-reversed .cb-dk-piece.cb-queen { content: url(../../svg/pacosako-theme.svg#dark_queen_left); } +.cb-theme-pacosako.cb-reversed .cb-dk-piece.cb-bishop { content: url(../../svg/pacosako-theme.svg#dark_bishop_left); } +.cb-theme-pacosako.cb-reversed .cb-dk-piece.cb-knight { content: url(../../svg/pacosako-theme.svg#dark_knight_left); } +.cb-theme-pacosako.cb-reversed .cb-dk-piece.cb-rook { content: url(../../svg/pacosako-theme.svg#dark_rook_left); } +.cb-theme-pacosako.cb-reversed .cb-dk-piece.cb-pawn { content: url(../../svg/pacosako-theme.svg#dark_pawn_left); } +.cb-theme-pacosako.cb-reversed .cb-lt-piece.cb-king { content: url(../../svg/pacosako-theme.svg#light_king_right); } +.cb-theme-pacosako.cb-reversed .cb-lt-piece.cb-queen { content: url(../../svg/pacosako-theme.svg#light_queen_right); } +.cb-theme-pacosako.cb-reversed .cb-lt-piece.cb-bishop { content: url(../../svg/pacosako-theme.svg#light_bishop_right); } +.cb-theme-pacosako.cb-reversed .cb-lt-piece.cb-knight { content: url(../../svg/pacosako-theme.svg#light_knight_right); } +.cb-theme-pacosako.cb-reversed .cb-lt-piece.cb-rook { content: url(../../svg/pacosako-theme.svg#light_rook_right); } +.cb-theme-pacosako.cb-reversed .cb-lt-piece.cb-pawn { content: url(../../svg/pacosako-theme.svg#light_pawn_right); } diff --git a/svg/traditional-theme.svg b/svg/traditional-theme.svg index 5996bb8..dafeaca 100644 --- a/svg/traditional-theme.svg +++ b/svg/traditional-theme.svg @@ -1,170 +1,189 @@ - + - - - - - + + - - + + - - - - - - + + + + + + - + - - - + + + - + - - + + - - - - + + + + - - - - - - - + + + + + + + - - + + - - - - - - - - - - - - - - - - - + + + + + + + - - - - - - + + + + + + - - - - - + + + + + + + + + - - + + + + + + + - - - - - + + + + + + + - - - - - - + + + + + - + + + + + + + + + + + + + + - - - + + + - + - - + + - - - - + + + + - - - - - - - + + + + + + + - - + + - - - - - - - - - - - - - - - - - - + + + + + + + - - - - - - + + + + + + - - - - - + + + + + + + + + + + + + + + + + + + + + + + + +