planet-wars/backend/static/style/mapbuilder.css

273 lines
4 KiB
CSS
Raw Normal View History

2020-03-27 10:31:56 +01:00
.content {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
background: black;
color: #ff7f00;
line-height: 1.5rem;
overflow: hidden;
align-items: center;
}
.hidden {
display: none;
}
.grid {
width: 120vh;
height: 95vh;
display: flex;
flex-wrap: wrap;
}
.controls {
padding-left: 3rem;
display: flex;
flex-direction: column;
}
.boxed {
display: flex;
flex-direction: column;
margin-top: 50px;
}
.row {
width: 100%;
height: 4.75%;
display: flex;
flex-wrap: wrap;
}
.row:nth-child(even) {
position: relative;
margin-left: 2.5%;
margin-right: -2.5%;
}
.row:nth-child(even) .square:nth-child(even) {
opacity: 0.9;
}
.row:nth-child(even) .square:nth-child(odd) {
opacity: 0.8;
}
.row:nth-child(odd) .square:nth-child(even) {
opacity: 0.7;
}
.row:nth-child(odd) .square:nth-child(odd) {
opacity: 1;
}
.square {
clip-path: polygon( 50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
background: #804000;
width: calc(4.75% - 2px);
height: 130%;
}
.square:hover {
filter: brightness(80%);
}
/* Customize the label (the container) */
.colourButtonContainer {
position: relative;
padding-left: 35px;
}
/* Hide the browser's default radio button */
.colourButtonContainer input {
opacity: 0;
height: 0;
width: 0;
margin: 1rem 0rem;
}
/* Create a custom radio button */
.colourButtonCheckmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
}
.colourButton_gray {
background-color: lightgray;
}
.colourButton_blue {
background-color: blue;
}
.colourButton_cyan {
background-color: cyan;
}
.colourButton_green {
background-color: green;
}
.colourButton_yellow {
background-color: yellow;
}
.colourButton_orange {
background-color: orange;
}
.colourButton_red {
background-color: red;
}
.colourButton_pink {
background-color: pink;
}
.colourButton_purple {
background-color: purple;
}
.planet_gray {
background-color: lightgray;
}
.planet_blue {
background-color: blue;
}
.planet_cyan {
background-color: cyan;
}
.planet_green {
background-color: green;
}
.planet_yellow {
background-color: yellow;
}
.planet_orange {
background-color: orange;
}
.planet_red {
background-color: red;
}
.planet_pink {
background-color: pink;
}
.planet_purple {
background-color: purple;
}
/* On mouse-over, add a gray background color */
.colourButtonContainer:hover input~.colourButtonCheckmark {
opacity: 0.7;
}
/* When the radio button is checked, add a blue background */
.colourButtonContainer input:checked~.colourButtonCheckmark {
border: 1px solid blue;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.colourButtonCheckmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.colourButtonContainer input:checked~.colourButtonCheckmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.colourButtonContainer .colourButtonCheckmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
label {
font-size: 1.2rem;
}
input,
textarea {
border: 1px solid #804000;
color: #804000;
padding: 0.5rem;
margin: 0.5rem 0;
background: black;
font-size: 0.8rem;
}
.input_container {
display: flex;
width: 100%;
align-items: center;
}
.input_container label {
width: 140px;
font-size: normal;
}
.input_container input {
width: 100%;
font-size: small;
}
.output {
height: 100%;
margin-bottom: 20px;
}
button {
background-color: #E67300;
/* Green */
border: none;
color: black;
padding: 10px;
margin: 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
flex-grow: 1;
}
.buttons {
display: flex;
flex-direction: row;
width: 100%;
justify-content: center;
}