CSS changes, and seperation
parent
c3dabd34aa
commit
a00fff3883
@ -0,0 +1,52 @@
|
||||
/* Form stuff */
|
||||
/* If I do a CSS framework, it'll need to have a reset too... */
|
||||
/* e.g. https://github.com/necolas/normalize.css/blob/master/normalize.css
|
||||
https://byby.dev/normalize-css#:~:text=css%23css%2Dresets-,Normalize.,experience%20for%20each%20web%20browser.
|
||||
https://www.joshwcomeau.com/css/custom-css-reset/
|
||||
*/
|
||||
form{
|
||||
border:1px solid;
|
||||
padding: 1rem;
|
||||
}
|
||||
input,select,textarea{
|
||||
font:1.2rem/1.62 sans-serif;color:#556;
|
||||
border:1px solid #CCC;
|
||||
}
|
||||
textarea{
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
input,select,textarea{
|
||||
background: #EEE;
|
||||
border: 2px solid #556;
|
||||
box-sizing: border-box;
|
||||
color: #556;
|
||||
display: block;
|
||||
line-height: 1;
|
||||
vertical-align: top;
|
||||
transition-duration:.2s;
|
||||
}
|
||||
input,textarea{
|
||||
width:100%;
|
||||
}
|
||||
input[type="checkbox"]{
|
||||
display:inline-block;
|
||||
}
|
||||
input:focus,select:focus,textarea:focus {
|
||||
border-color: #9CF;
|
||||
}
|
||||
@media(min-width:720px){
|
||||
input,select,textarea{
|
||||
display:inline-block;
|
||||
max-width:50%; /* so half it can be, with margins factored in... */
|
||||
max-width:346.8px;
|
||||
}
|
||||
input,textarea{
|
||||
width:auto;
|
||||
}
|
||||
}
|
||||
@media(prefers-color-scheme:dark){
|
||||
input,select,textarea{
|
||||
background:#CCC;border-color:#CCC;
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue