nybble
/
paco_sako
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

add rounded corners and drop shadows for a more 2.5D look

This commit is contained in:
Jesse D. McDonald 2020-05-02 20:44:12 -05:00
parent 01620fc56a
commit 34911ab952
2 changed files with 31 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
css/chess.css
View File

@ -79,9 +79,13 @@ button:disabled .silhouette {
position: relative; position: relative;
width: 100%; width: 100%;
height: 100%; height: 100%;
border: 1px solid black;
border-collapse: collapse; border-collapse: collapse;
border-style: hidden;
padding-top: 100%; padding-top: 100%;
box-shadow: 0 0 0 1px black, 2px 2px 4px #00000080;
border-radius: 6pt;
overflow: hidden;
background-color: #FAEED2;
} }
#cb_board tr { #cb_board tr {
@ -105,6 +109,7 @@ button:disabled .silhouette {
width: 100%; width: 100%;
min-width: 24em; min-width: 24em;
max-height: calc(100vh - (8px + 2.8em)); max-height: calc(100vh - (8px + 2.8em));
padding-right: calc(3.25em + 10px);
} }
#cb_control_form { #cb_control_form {
@ -112,25 +117,29 @@ button:disabled .silhouette {
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
margin-right: auto; margin-right: auto;
border-radius: 6pt;
padding: 1.125em;
background-color: #FFFFF0;
box-shadow: 0 0 0 1px black, 2px 2px 4px #00000080;
}
#cb_controls, #cb_theme, #cb_names, #cb_navigate {
white-space: nowrap;
}
#cb_theme, #cb_names, #cb_navigate {
margin-top: 1.125em;
} }
#cb_scrollable { #cb_scrollable {
flex: 1 1000 auto; flex: 1 1000 auto;
padding-right: calc(8px + 3em); padding-bottom: 0.5em;
overflow: auto; overflow: auto;
} }
#cb_scrollable > *:last-child { #cb_message {
margin-bottom: 0.5em;
}
#cb_controls, #cb_theme, #cb_names, #cb_message, #cb_navigate {
margin-top: 0.5em; margin-top: 0.5em;
white-space: nowrap; margin-bottom: 1em;
}
#cb_controls, #cb_theme, #cb_names {
padding-right: calc(3.25em + 12px);
} }
#cb_theme { #cb_theme {
@ -378,8 +387,8 @@ button:disabled .silhouette {
.badges { .badges {
position: fixed; position: fixed;
bottom: 12px; bottom: 5px;
right: 12px; right: 5px;
margin: 0; margin: 0;
display: flex; display: flex;
flex-flow: column nowrap; flex-flow: column nowrap;
@ -423,11 +432,10 @@ button:disabled .silhouette {
align-items: center; align-items: center;
width: 14em; width: 14em;
height: 14em; height: 14em;
border: 1px solid black; box-shadow: 0 0 0 1px black, 5px 5px 3px #00000080;
box-shadow: 3px 3px 3px black;
margin: 1em; margin: 1em;
padding: 0.5em; padding: 0.5em;
border-radius: 5px; border-radius: 6pt;
background-color: #FFFFF0; background-color: #FFFFF0;
overflow: hidden; overflow: hidden;
background-image: background-image:
@ -440,11 +448,11 @@ button:disabled .silhouette {
} }
.game-tile:hover { .game-tile:hover {
box-shadow: 3px 3px 3px blue; box-shadow: 0 0 0 1px black, 5px 5px 3px #0000FF80;
} }
.game-tile.game-tile-selected { .game-tile.game-tile-selected {
box-shadow: 0 0 0 2px blue, 5px 5px 3px black; box-shadow: 0 0 0 2px blue, 5px 5px 3px #00000080;
} }
.game-tile.game-tile-selected:hover { .game-tile.game-tile-selected:hover {
@ -606,16 +614,13 @@ button:disabled .silhouette {
} }
#cb_control_container { #cb_control_container {
margin-top: 0.5em; margin-top: 1em;
margin-left: 8px; margin-left: 8px;
max-height: none; max-height: none;
overflow: visible; overflow: visible;
width: 100%; width: 100%;
max-width: calc(100vw - (8px + 24px)); max-width: calc(100vw - (8px + 24px));
} padding-right: 0;
#cb_scrollable {
padding-right: 8px;
} }
.badges { .badges {
@ -623,7 +628,7 @@ button:disabled .silhouette {
bottom: auto; bottom: auto;
right: auto; right: auto;
margin-left: auto; margin-left: auto;
margin-right: 8px; margin-right: 5px;
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
justify-content: flex-end; justify-content: flex-end;

2
index.html
View File

@ -218,8 +218,8 @@
<label for="cb_light_name">Players:</label> <label for="cb_light_name">Players:</label>
<input id="cb_light_name" placeholder="Light"> vs. <input id="cb_dark_name" placeholder="Dark"> <input id="cb_light_name" placeholder="Light"> vs. <input id="cb_dark_name" placeholder="Dark">
</div> </div>
<div id="cb_message"></div>
</form> </form>
<div id="cb_message"></div>
<div id="cb_scrollable"> <div id="cb_scrollable">
<div id="cb_history"> <div id="cb_history">
<span id="cb_history_past"></span><span id="cb_history_future"></span> <span id="cb_history_past"></span><span id="cb_history_future"></span>