SignUp/style_mobile.css

222 lines
3.8 KiB
CSS
Raw Normal View History

2019-08-08 13:40:15 +00:00
/**
* /style_mobile.css
* @version 1.2
* @desc fancy css even for mobile devices!
* @author Fándly Gergő Zoltán
* @copy 2017 Fándly Gergő Zoltán
*/
h1.title{
text-align: left;
background: rgba(31,73,125,0.8);
color: rgb(255,255,255);
margin: auto;
padding: 0.3em 1em;
}
button{
background: rgba(31,73,125,0.8);
color: rgb(255,255,255);
padding: 1em;
border-radius: 0.5em;
width: 100%;
font-size: 2em;
}
button:hover{
background: rgba(31,73,125,1);
}
form{
width: 100%;
}
fieldset{
border: 5px solid rgba(31,73,125,0.8);
background: rgb(220,220,220);
border-radius: 1em;
padding: 2em;
width: 90%;
text-align: left;
}
fieldset legend{
background: rgba(31,73,125,0.8);
color: rgb(255,255,255);
padding: 0.3em;
font-size: 2em;
border-radius: 0.5em;
box-shadow: 0 0 0 5px rgb(220,220,220);
text-align:left;
margin-left: 10%;
}
footer{
background: rgb(200,200,200);
border-radius: 1em;
width: 90%;
margin: auto;
font-size: 0.8em;
text-align: center;
padding: 0.3em;
}
hr.placeholder{
border: none;
height: 30px;
}
input{
border-radius: 5px;
padding: 0.5em;
border: 1px solid solid rgba(31,73,125,0.8);
font-size: 1.5em;
}
textarea{
border-radius: 5px;
padding: 0.5em;
border: 1px solid solid rgba(31,73,125,0.8);
font-size: 1.5em;
}
select{
border-radius: 5px;
padding: 0.5em;
border: 1px solid solid rgba(31,73,125,0.8);
font-size: 1.5em;
max-width: 90%;
}
div.message{
width: 90%;
padding: 1em;
border: 2px solid rgb(60, 255, 60);
border-radius: 10px;
margin: auto;
margin-top: 1.5em;
margin-bottom: 1.5em;
background: rgba(0, 255, 0, 0.5);
text-align: center;
font-size: 1.5em;
}
div.message.error{
border: 2px solid rgb(255, 60, 60);
background: rgba(255, 0, 0, 0.5);
}
ul.menu{
list-style:none;
margin: 0;
background: rgba(31,73,125,0.8);
display: flex;
justify-content: stretch;
flex-wrap: wrap;
font-size: 2em;
}
ul.menu li{
display: block;
padding: 1em;
color: rgb(255,255,255);
width; 95%;
}
ul.menu li:hover{
background: rgba(31,73,125,1);
}
ul.menu a{
text-decoration: none;
width: 95%;
}
td{
vertical-align: top;
}
span.password{
background: rgb(0,0,0);
font-family: Courier New;
}
span.password:hover{
background: inherit;
}
table:not(.table) td{
display: block;
}
label{
font-size: 1.5em;
}
table{
font-size: 1.5em;
}
p{
font-size: 1.5em;
}
div.overlay{
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
div.overlay.loading{
background: rgba(0,0,0,0.7);
}
div.overlay.loading img{
position: fixed;
max-width: 50%;
max-height: 50%;
top: 30%;
left: 40%;
padding: 1em;
}
div.overlay.messages{
height: 30%;
}
/* the world's fanciest checkbox */
div.checkbox{
width: 7em;
height: 2.5em;
background: rgb(140, 140, 140);
border-radius: 1.5em;
position: relative;
}
div.checkbox:before{
content: 'On';
position: absolute;
top: 30%;
left: 15%;
color: rgb(35, 200, 40);
font-size: 1em;
}
div.checkbox:after{
content: 'Off';
position: absolute;
top: 30%;
right: 15%;
color: rgb(15, 15, 15);
font-size: 1em;
}
div.checkbox label{
display: block;
width: 45%;
height: 55%;
border-radius: 1.5em;
transition: 0.5s;
cursor: pointer;
position: absolute;
top: 22.5%;
left: 10%;
z-index: 1;
background: rgb(220, 220, 220);
}
div.checkbox input[type=checkbox]:checked + label{
left: 45%;
background: rgb(35, 200, 40);
}
div.checkbox input[type=checkbox]{
display: none;
}