Updates all styles save for the tooltip and tracker, which are forthcoming. I just really wanted to commit all these changes.

This commit is contained in:
Chris Wilson
2020-11-30 21:15:47 -05:00
parent 7891c2761f
commit bd3b419de0
38 changed files with 300 additions and 131 deletions

View File

@@ -1,22 +1,22 @@
#uploads-wrapper{
#check-wrapper{
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
#uploads{
#check{
width: 620px;
height: 280px;
text-align: center;
}
#uploads-form-wrapper{
#check-form-wrapper{
width: 100%;
text-align: center;
margin-bottom: 1rem;
}
#upload-form{
#check-form{
display: none;
}

View File

@@ -0,0 +1,11 @@
#check-result-wrapper{
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
#check-result{
width: 540px;
text-align: center;
}

View File

@@ -12,6 +12,7 @@
font-family: HyliaSerif, sans-serif;
padding: 10px;
line-height: 2rem;
z-index: 9999;
}
#cloud-header #site-title img{

View File

@@ -0,0 +1,21 @@
#generate-game-wrapper{
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
#generate-game{
width: 660px;
text-align: center;
}
#generate-game-form-wrapper{
width: 100%;
text-align: center;
margin-bottom: 1rem;
}
#generate-game-form{
display: none;
}

View File

@@ -12,7 +12,6 @@ html{
body{
margin: 0;
padding-bottom: 62px;
}
button{
@@ -21,13 +20,24 @@ button{
border-radius: 4px;
}
h1, h2, h3{
h1, h2, h3, h4, h5, h6{
font-family: HyliaSerif, sans-serif;
font-size: 3rem;
font-weight: normal;
margin: 0;
}
h1{ font-size: 3rem; }
h2{ font-size: 2rem; }
h3{ font-size: 1.75rem; }
h4{
font-size: 1.5rem;
margin-bottom:0.5rem;
}
h5, h6{
font-size: 1.25rem;
margin-bottom: 0.5rem;
}
.grass-island{
background:
url('../static/backgrounds/cliffs/grass/cliff-top-left-corner.png') top left no-repeat,
@@ -49,7 +59,7 @@ h1, h2, h3{
20px 140px, /* bottom */
140px 20px, /* left */
140px 20px, /* right */
100px auto; /* center */
140px 140px; /* center */
min-width: 280px;
min-height: 280px;

View File

@@ -0,0 +1,25 @@
#host-game-wrapper{
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
#host-game{
width: 620px;
text-align: center;
}
#host-game.wider{
width: 980px;
}
#host-game-form-wrapper{
width: 100%;
text-align: center;
margin-bottom: 1rem;
}
#host-game-form{
display: none;
}

View File

@@ -0,0 +1,26 @@
html{
background-image: url('../static/backgrounds/dirt/dirt-0005-large.png');
background-repeat: repeat;
background-size: 900px 900px;
}
#host-room{
width: calc(100% - 5rem);
margin-left: auto;
margin-right: auto;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 8px;
padding: 1rem;
color: #ffe993;
}
#host-room a{
color: #ffffff;
}
#host-room input[type=text]{
width: 500px;
min-width: 370px;
padding: 0.125rem;
height: 1.5rem;
}

View File

@@ -1,5 +0,0 @@
#host-room input[type=text]{
width: calc(100% - 6px);
padding: 0.125rem;
height: 1.5rem;
}

View File

@@ -3,12 +3,11 @@
display: flex;
flex-direction: column;
justify-content: flex-end;
width: 100%;
height: 62px;
margin-top: 2rem;
width: calc(100% - 0.5rem);
height: 66px;
padding-left: 0.5rem;
line-height: 30px;
position: fixed;
left: 0;
position: absolute;
bottom: 0;
left: 0;
}

View File

@@ -1,87 +1,99 @@
#game-settings{
margin-left: auto;
margin-right: auto;
html{
background-image: url('../static/backgrounds/dirt/dirt-0005-large.png');
background-repeat: repeat;
background-size: 900px 900px;
}
#game-settings code{
background-color: #dbe1bc;
#player-settings{
width: 60rem;
margin-left: auto;
margin-right: auto;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 8px;
padding: 1rem;
color: #ffe993;
}
#player-settings code{
background-color: #d9cd8e;
border-radius: 4px;
padding-left: 0.25rem;
padding-right: 0.25rem;
color: #000000;
}
#game-settings .instructions{
#player-settings .instructions{
text-align: left;
}
#game-settings #settings-wrapper .setting-wrapper{
#player-settings #settings-wrapper .setting-wrapper{
display: flex;
flex-direction: column;
justify-content: flex-start;
width: 100%;
}
#game-settings #settings-wrapper .setting-wrapper .title-span{
#player-settings #settings-wrapper .setting-wrapper .title-span{
font-weight: bold;
}
#game-settings #settings-wrapper{
#player-settings #settings-wrapper{
margin-top: 1.5rem;
}
#game-settings #settings-wrapper #sprite-picker{
#player-settings #settings-wrapper #sprite-picker{
margin-bottom: 2rem;
}
#game-settings #settings-wrapper #sprite-picker #sprite-picker-sprites{
#player-settings #settings-wrapper #sprite-picker #sprite-picker-sprites{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}
#game-settings #settings-wrapper #sprite-picker .sprite-img-wrapper{
#player-settings #settings-wrapper #sprite-picker .sprite-img-wrapper{
cursor: pointer;
margin: 10px;
}
/* Center tooltip text for sprite images */
#game-settings #settings-wrapper #sprite-picker .sprite-img-wrapper::after{
#player-settings #settings-wrapper #sprite-picker .sprite-img-wrapper::after{
text-align: center;
}
#game-settings #settings-wrapper #sprite-picker .sprite-img-wrapper img{
#player-settings #settings-wrapper #sprite-picker .sprite-img-wrapper img{
width: 32px;
height: 48px;
}
#game-settings table.option-set{
#player-settings table.option-set{
width: 100%;
margin-bottom: 1.5rem;
}
#game-settings table.option-set td.option-name{
#player-settings table.option-set td.option-name{
width: 150px;
font-weight: bold;
font-size: 1rem;
line-height: 2rem;
}
#game-settings table.option-set td.option-name .delete-button{
#player-settings table.option-set td.option-name .delete-button{
cursor: pointer;
}
#game-settings table.option-set td.option-value{
#player-settings table.option-set td.option-value{
line-height: 2rem;
}
#game-settings table.option-set td.option-value input[type=range]{
#player-settings table.option-set td.option-value input[type=range]{
width: 90%;
min-width: 300px;
vertical-align: middle;
}
#game-settings #game-settings-button-row{
#player-settings #player-settings-button-row{
display: flex;
flex-direction: row;
justify-content: space-between;

View File

@@ -19,7 +19,7 @@ table.dataTable thead .sorting, table.dataTable thead .sorting_asc, table.dataTa
}
table.dataTable thead{
background-color: #b0a77d;
/* background-color: #b0a77d; */
}
table.dataTable thead tr th{
@@ -32,5 +32,5 @@ table.dataTable tbody tr{
}
table.dataTable tbody tr:hover{
background-color: #e2eabb;
/* background-color: #e2eabb; */
}

View File

@@ -1,6 +1,21 @@
html{
background-image: url('../static/backgrounds/dirt/dirt-0005-large.png');
background-repeat: repeat;
background-size: 900px 900px;
}
#tutorial-wrapper{
width: 70rem;
margin-left: auto;
margin-right: auto;
background-color: rgba(0, 0, 0, 0.15);
border-radius: 8px;
padding: 1rem;
color: #ffe993;
}
#tutorial-wrapper a{
color: #ffffff;
}
#tutorial-wrapper h1{
@@ -9,6 +24,7 @@
border-bottom: 1px solid #9f916a;
cursor: pointer;
width: 100%;
margin-bottom: 0.5rem;
}
#tutorial-wrapper h2{
@@ -17,6 +33,7 @@
border-bottom: 1px solid #9f916a;
cursor: pointer;
width: 100%;
margin-bottom: 0.5rem;
}
#tutorial-wrapper h3{
@@ -25,12 +42,14 @@
text-align: left;
cursor: pointer;
width: 100%;
margin-bottom: 0.5rem;
}
#tutorial-wrapper h4{
font-size: 1.5rem;
font-weight: normal;
cursor: pointer;
margin-bottom: 0.5rem;
}
#tutorial-wrapper h5{
@@ -64,16 +83,18 @@
#tutorial-wrapper pre{
padding: 0.5rem 0.25rem;
background-color: #dce2bd;
background-color: #d9cd8e;
border: 1px solid #9f916a;
border-radius: 6px;
color: #000000;
}
#tutorial-wrapper code{
background-color: #dce2bd;
background-color: #d9cd8e;
border-radius: 4px;
padding-left: 0.25rem;
padding-right: 0.25rem;
color: #000000;
}
#tutorial-wrapper #tutorial-video-container{

View File

@@ -0,0 +1,26 @@
#view-seed-wrapper{
display: flex;
flex-direction: row;
justify-content: center;
flex-wrap: wrap;
}
#view-seed-wrapper table td{
vertical-align: top;
}
#view-seed{
width: 620px;
min-height: 360px;
text-align: center;
}
#view-seed h3{
margin-bottom: 0.5rem;
}
#view-seed table{
text-align: left;
margin-left: auto;
margin-right: auto;
}

View File

@@ -1,9 +0,0 @@
#view-seed-wrapper{
display: flex;
flex-direction: row;
justify-content: center;
}
#view-seed-wrapper table td{
vertical-align: top;
}