chris/main_web
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

yatzee styles

Browse Source
This commit is contained in:
HearMeWhisper 2022-01-02 15:03:20 -05:00
parent a55aff3250
commit bc7e2bbf9b
1 changed files with 130 additions and 133 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

263
yatzee/yatzee.css
View File

@ -1,202 +1,199 @@
body { body {
background-color: #42739e; background-color: #42739e;
cursor: default; cursor: default;
font-size: 130%; font-size: 130%;
font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
} }
#score { #score {
border: 2px solid black; border: 2px solid black;
background-color: rgb(46, 45, 45); background-color: rgb(46, 45, 45);
color: white; color: white;
border-radius: 15px; border-radius: 15px;
float: left; float: left;
border-collapse: collapse; border-collapse: collapse;
border-style: hidden; border-style: hidden;
width: 25%; width: 45%;
z-index: 0; z-index: 0;
margin-bottom: 7%; margin-bottom: 7%;
font-size: larger; font-size: larger;
margin-left: 5px; margin-left: 5px;
} }
.cells { .cells {
text-align: center; text-align: center;
border-bottom: 4px solid #33505d; border-bottom: 4px solid #33505d;
border-right: 2px solid gray; border-right: 2px solid gray;
padding-top: 4%; padding-top: 4%;
padding-bottom: 4%; padding-bottom: 4%;
width: 1000px; width: 1000px;
} }
.cells1 { .cells1 {
background-color: #d86e60; background-color: #d86e60;
text-align: center; text-align: center;
padding-top: 4%; padding-top: 4%;
padding-bottom: 4%; padding-bottom: 4%;
} }
#main { #main {
margin-top: 17%; margin-top: 10%;
} }
.dice { .dice {
border: 5px solid black; border: 5px solid black;
width: 80%; width: 80%;
background-color: #56667e; background-color: #56667e;
align-self: center; align-self: center;
margin-top: 7%; margin-top: 7%;
padding: 12px; padding: 12px;
} }
.dice_pic { .dice_pic {
height: 70px; height: 70px;
width: 70px; width: 70px;
display: flex; display: flex;
justify-self: start; justify-self: start;
} }
.dice_pic_hold { .dice_pic_hold {
height: 70px; height: 70px;
width: 70px; width: 70px;
float: right; float: right;
margin-right: 15px; /* margin-right: 15px; */
display: flex; display: flex;
} }
#center { #center {
text-align: center text-align: center;
} }
#highscore { #highscore {
color: white; color: white;
margin: auto; margin: auto;
text-align: center; text-align: center;
} }
#button_dice { #button_dice {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-evenly; justify-content: space-evenly;
margin-left: 10%; margin-left: 10%;
} }
#btn { #btn {
border-radius: 10px; border-radius: 10px;
background-color: #e9eb85; background-color: #e9eb85;
color: 23313d; color: 23313d;
text-align: center; text-align: center;
border: 2.5px solid black; border: 2.5px solid black;
height: 70px; height: 70px;
width: 100px; width: 100px;
align-self: center; align-self: center;
font-size: large; font-size: large;
} }
#full {
#full{ position: absolute;
position: absolute; top: 5px;
top: 5px; right: 0;
right: 0; z-index: 100;
z-index: 100; color: rgb(165, 162, 162);
color:rgb(165, 162, 162); font-size: 3rem;
font-size: 3rem; margin-right: 5px;
margin-right:5px; }
}
#how { #how {
margin-top: 10%; margin-top: 10%;
width: 5%; width: 5%;
margin-right: 3%; margin-right: 3%;
float: right; float: right;
} }
#how-div { #how-div {
border-radius: 10px; border-radius: 10px;
border: 2px black solid; border: 2px black solid;
background-color: white; background-color: white;
z-index: 3; z-index: 3;
display: none; display: none;
position: absolute; position: absolute;
top: 10%; top: 10%;
padding: 3%; left: 10%;
overflow: auto; padding: 3%;
height: 65%; overflow: auto;
width: 80%; height: 75%;
width: 80%;
} }
#cell13 { #cell13 {
color: #c6f2ff; color: #c6f2ff;
background-color: #181c28; background-color: #181c28;
} }
#cell31 { #cell31 {
color:#c6f2ff; color: #c6f2ff;
background-color: #181c28; background-color: #181c28;
border-radius: 15px; border-radius: 15px;
} }
#how:hover { #how:hover {
border: 3px black solid border: 3px black solid;
} }
#smX { #smX {
height: 35px; height: 35px;
width: 35px; width: 35px;
float: right; float: right;
} }
@media (max-device-width: 550px) { @media (max-device-width: 550px) {
.cells { .cells {
border-bottom: 4px solid #2E2E45; border-bottom: 4px solid #2e2e45;
border-right: 2px solid gray; border-right: 2px solid gray;
padding-top: 4%; padding-top: 4%;
padding-bottom: 4%; padding-bottom: 4%;
min-width: 55px; min-width: 55px;
font-size: medium; font-size: medium;
} }
.cells1 { .cells1 {
border-radius: 5px; border-radius: 5px;
background-color: #33505d; background-color: #33505d;
padding-top: 4%; padding-top: 4%;
padding-bottom: 4%; padding-bottom: 4%;
min-width: 55px; min-width: 55px;
font-size: medium; font-size: medium;
} }
.dice_pic { .dice_pic {
width: 50px; width: 50px;
height: 50px height: 50px;
} }
.dice_pic_hold { .dice_pic_hold {
width: 50px; width: 50px;
height: 50px height: 50px;
} }
.dice { .dice {
width: 70%; /* width: 70%; */
} }
} }
@media only screen and (min-width: 1200px) { @media only screen and (min-width: 1200px) {
#main { #main {
margin-top: 8%; margin-top: 8%;
} }
} }
/* Large devices (laptops/desktops, 992px and up) */ /* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) { @media only screen and (min-width: 992px) {
#main { #main {
margin-top: 8%; margin-top: 8%;
} }
} }
/* Medium devices (landscape tablets, 768px and up) */ /* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
#main { #main {
margin-top: 8%; margin-top: 8%;
} }
} }