Improve css code

parent 349b4fd4
Pipeline #1513 passed with stage
in 45 seconds
/* General */
html {
box-sizing: border-box;
}
......@@ -72,45 +74,6 @@ html[lang="fr"] #frButton {
cursor: default;
}
@media (min-width: 992px) {
nav {
flex-direction: column;
width: 7vw;
min-height: 100vh;
font-size: 3vw;
}
nav > * {
width: 7vw;
height: 7vw;
border-bottom: 1px solid #3b68b0;
border-left: initial !important;
}
nav > :nth-child(1) > img {
height: initial;
}
nav > *:not(:nth-child(1)) {
padding-top: 2vw;
}
#inputs {
width: 50%;
margin-left: 7vw;
}
#inputs > * {
padding-left: 10%;
padding-right: 10%;
}
}
@media (max-width: 991px) {
#langPicker {
display: none;
}
}
nav > .active-tab {
background-color: #3b68b0;
......@@ -187,38 +150,6 @@ a {
border: 3px solid transparent;
}
@media (max-width: 991px) {
.colorpicker, .iconpicker {
flex-wrap: nowrap !important;
overflow-x: auto;
}
.colorpicker label, .iconpicker label {
flex-shrink: 0;
}
.iconpicker {
height: 110px;
overflow-y: hidden !important;
}
#inputs > div > h2 {
margin-left: 10px;
}
}
@media (max-width: 600px) {
.iconpicker {
height: 60px;
}
.iconpicker > label {
width: 50px !important;
height: 50px !important;
}
}
div[id^="step"] {
display: none;
}
......@@ -247,84 +178,6 @@ body, form {
flex-direction: row;
}
@media (max-width: 991px) {
#credits {
display: none;
}
body, form {
flex-direction: column;
}
#inputs {
margin-top: 16.66vw;
padding-bottom: 20px;
}
.randomize-button-container {
display: none !important;
}
.navButtons {
display: none;
}
textarea, input[type="text"] {
width: 90% !important;
margin-left: 5% !important;
}
textarea {
height: 3.5em;
}
main > div:nth-child(2) {
margin: auto;
}
h2.title-big {
display: none;
}
div#step3 > .fontpicker {
max-height: 150px;
overflow-x: auto;
}
}
@media (max-width: 600px) {
main > div:nth-child(2) > a {
padding-left: 1.5em;
padding-right: 1.5em;
}
main > div:nth-child(2) button > .text {
display: none;
}
.colorpicker > label {
width: 60px !important;
height: 60px !important;
padding: .5em !important;
}
}
@media (min-width: 992px) {
main {
min-height: 100vh;
padding-left: 40px;
}
input#step2value {
height: 200px;
}
h2.title-small, main .randomize {
display: none;
}
}
main > div:nth-child(2) {
text-align: right;
width: 600px;
......@@ -339,12 +192,6 @@ main > #credits {
margin-top: 50px;
}
@media (min-width: 992px) {
a#save-image {
margin-top: 2em;
}
}
.iconpicker {
max-height: 500px;
overflow-y: auto;
......@@ -394,6 +241,138 @@ textarea, input[type="text"] {
resize: none;
}
/* big devices >= 992px */
@media (min-width: 992px) {
nav {
flex-direction: column;
width: 7vw;
min-height: 100vh;
font-size: 3vw;
}
nav > * {
width: 7vw;
height: 7vw;
border-bottom: 1px solid #3b68b0;
border-left: initial !important;
}
nav > :nth-child(1) > img {
height: initial;
}
nav > *:not(:nth-child(1)) {
padding-top: 2vw;
}
#inputs {
width: 50%;
margin-left: 7vw;
}
#inputs > * {
padding-left: 10%;
padding-right: 10%;
}
main {
min-height: 100vh;
padding-left: 40px;
}
input#step2value {
height: 200px;
}
h2.title-small, main .randomize {
display: none;
}
}
/* small/medium devices < 991px */
@media (max-width: 991px) {
#langPicker, #credits, .randomize-button-container, .navButtons, h2.title-big {
display: none !important;
}
a#save-image {
margin-top: 2em;
}
body, form {
flex-direction: column;
}
#inputs {
margin-top: 16.66vw;
padding-bottom: 20px;
}
textarea, input[type="text"] {
width: 90% !important;
margin-left: 5% !important;
}
textarea {
height: 3.5em;
}
main > div:nth-child(2) {
margin: auto;
}
div#step3 > .fontpicker {
max-height: 150px;
overflow-x: auto;
}
.colorpicker, .iconpicker {
flex-wrap: nowrap !important;
overflow-x: auto;
}
.colorpicker label, .iconpicker label {
flex-shrink: 0;
}
.iconpicker {
height: 110px;
overflow-y: hidden !important;
}
#inputs > div > h2 {
margin-left: 10px;
}
}
/* very small devices < 600px */
@media (max-width: 600px) {
main > div:nth-child(2) > a {
padding-left: 1.5em;
padding-right: 1.5em;
}
main > div:nth-child(2) button > .text {
display: none;
}
.colorpicker > label {
width: 60px !important;
height: 60px !important;
padding: .5em !important;
}
.iconpicker {
height: 60px;
}
.iconpicker > label {
width: 50px !important;
height: 50px !important;
}
}
/* Fonts */
@font-face {
font-family: 'FiraSans';
src: url('https://fonts.lqdn.fr/collections/Fira_Sans/FiraSans-Regular.woff2') format('woff2');
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment