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

182 lines
2.8 KiB
CSS
Raw Normal View History

2020-04-06 20:22:10 +02:00
.content {
justify-content: center;
2020-04-07 11:31:28 +02:00
max-height: 100%;
2020-04-06 20:22:10 +02:00
}
.pointer {
align-items: center;
justify-content: center;
display: flex;
height: 100%;
width: 10%;
max-width: 150px;
}
.p_left {
margin: 5px;
2020-04-07 13:51:35 +02:00
height: 40%;
2020-04-06 20:22:10 +02:00
width: 100%;
clip-path: polygon(100% 0%, 50% 48%, 100% 100%, 50% 100%, 0% 50%, 50% 0);
2020-04-07 11:31:28 +02:00
background-color: #A35200;
2020-04-06 20:22:10 +02:00
}
.p_right {
margin: 5px;
2020-04-07 13:51:35 +02:00
height: 40%;
2020-04-06 20:22:10 +02:00
width: 100%;
2020-04-07 11:31:28 +02:00
background-color: #A35200;
2020-04-06 20:22:10 +02:00
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0% 100%, 50% 50%, 0% 0%);
}
.content_wrapper {
width: 70%;
height: 100%;
display: flex;
flex-direction: column;
}
.header {
width: 100%;
display: flex;
justify-content: space-between;
font-size: 2em;
font-weight: bolder;
}
.help_content_1 {
display: flex;
width: 80%;
justify-content: space-evenly;
margin: 0 auto;
}
.help_content_1_sub {
margin: 10px auto;
width: 60%;
height: 200px;
background-image: url(arrow.svg);
background-repeat: no-repeat;
background-size: contain;
background-position: center;
position: relative;
}
.help_content_1_sub>div {
position: absolute;
top: 100%;
left: 50%;
transform: translate(-50%, -120%);
2020-04-07 13:51:35 +02:00
color: antiquewhite;
2020-04-06 20:22:10 +02:00
font-size: 1.5em;
margin: auto;
}
2020-04-07 11:31:28 +02:00
.help_content {
overflow: auto;
height: 100%;
}
2020-04-06 20:22:10 +02:00
.boxed {
border: 3px #A35200 solid;
border-radius: 50px;
position: relative;
width: 30%;
}
.boxed:after {
content: "";
display: block;
padding-bottom: 100%;
}
.boxed>div {
margin: 0;
font-size: 1.7em;
text-align: center;
}
.centering {
position: relative;
}
.centering>div {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.help_content_1 {
2020-04-07 13:51:35 +02:00
color: antiquewhite;
2020-04-06 20:22:10 +02:00
}
.help_content_1>div {
margin: 10px;
}
2020-04-07 11:31:28 +02:00
.help_content_2 {
display: flex;
flex-direction: column;
width: 80%;
justify-content: space-evenly;
margin: 0 auto;
}
.help_content_2 h2 {
margin: 2px 0;
margin-top: 20px;
}
.help_content_2 em {
color: #A35200;
}
.help_content_2 h3 {
margin: 5px;
2020-04-07 13:51:35 +02:00
color: antiquewhite;
2020-04-07 11:31:28 +02:00
}
2020-04-06 20:22:10 +02:00
.arrow {
width: 20%;
background-color: #A35200;
clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
font-weight: bolder;
font-size: 1.5em;
}
.arrow>div {
text-align: center;
2020-04-07 11:31:28 +02:00
}
2020-04-07 11:38:30 +02:00
.content_wrapper ul {
2020-04-07 11:31:28 +02:00
margin: 10px inherit;
2020-04-07 13:51:35 +02:00
color: antiquewhite;
2020-04-07 11:31:28 +02:00
font-size: 1.5em;
}
2020-04-07 11:38:30 +02:00
.content_wrapper li {
2020-04-07 11:31:28 +02:00
margin: 10px 10px;
}
.help_content_1 h2 {
2020-04-07 13:51:35 +02:00
color: antiquewhite;
2020-04-07 11:31:28 +02:00
margin-top: 2em;
font-size: 1.7;
}
pre {
padding: 0;
margin-bottom: -20px;
}
pre code {
background-color: #333;
2020-04-07 13:51:35 +02:00
border: 1px solid antiquewhite;
2020-04-07 11:31:28 +02:00
display: block;
padding: 20px;
}
.commands {
font-size: 1.3em;
2020-04-06 20:22:10 +02:00
}