Mirroring/kaamelott-soundboard
1
0
Fork 0
mirror of https://github.com/2ec0b4/kaamelott-soundboard.git synced 2025-12-08 15:43:24 +00:00
Code Releases Activity

Améliore le style

Browse Source
This commit is contained in:
Antoine
2016-05-17 23:05:52 +02:00
parent 667e7f8148
commit ef244de496
1 changed files with 62 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

83
css/style.css
View File

@@ -25,6 +25,11 @@
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
box-sizing: border-box; box-sizing: border-box;
} }
html, body {
height: 100%;
margin: 0;
padding: 0;
}
html { html {
font-size: 16px; font-size: 16px;
} }
@@ -145,6 +150,7 @@ td {
*/ */
header h1 { header h1 {
font-size: 3em; font-size: 3em;
margin: 0.5em;
text-align: center; text-align: center;
} }
/** /**
@@ -312,6 +318,18 @@ header h1 {
* FORM * FORM
* ----------------------------------------------------------------------------- * -----------------------------------------------------------------------------
*/ */
::-webkit-input-placeholder {
color: #AEAEAE;
}
:-moz-placeholder {
color: #AEAEAE;
}
::-moz-placeholder {
color: #AEAEAE;
}
:-ms-input-placeholder {
color: #AEAEAE;
}
input[type="text"] { input[type="text"] {
background: #FFFFFF; background: #FFFFFF;
border: 1px solid #DEDEDE; border: 1px solid #DEDEDE;
@@ -349,7 +367,6 @@ a.btn, a.btn:hover, a.btn:focus {
.btn-play, .btn-play:hover, .btn-play:focus, .btn-play, .btn-play:hover, .btn-play:focus,
a.btn-play, a.btn-play:hover, a.btn-play:focus { a.btn-play, a.btn-play:hover, a.btn-play:focus {
background: #18AE90; background: #18AE90;
border: 1px solid #18AE90;
border-bottom: 3px solid #017F66; border-bottom: 3px solid #017F66;
padding: 10px 30px; padding: 10px 30px;
} }
@@ -380,8 +397,8 @@ noscript p {
text-align: center; text-align: center;
} }
#app { #app {
margin: 0 auto;
width: 90%; width: 90%;
margin: auto;
} }
#app .uil-ring-css { #app .uil-ring-css {
margin: 0 auto; margin: 0 auto;
@@ -408,9 +425,10 @@ noscript p {
} }
#list ul li { #list ul li {
display: inline-block; display: inline-block;
height: 2.3em; height: 43px;
line-height: 2.3em; line-height: 43px;
margin: 0 0 2em 0; margin: 0 0 1em;
overflow: hidden;
position: relative; position: relative;
} }
#list ul li a { #list ul li a {
@@ -422,22 +440,6 @@ noscript p {
* MEDIA QUERIES * MEDIA QUERIES
* ----------------------------------------------------------------------------- * -----------------------------------------------------------------------------
*/ */
@media only screen and (max-width:320px){
input[type="text"] {
width: 60%;
}
.btn, .btn:hover, .btn:focus,
a.btn, a.btn:hover, a.btn:focus {
width: 30%;
}
}
@media only screen and (max-width:767px){
#list ul li {
width: 95%;
margin-left: 2%;
margin-right: 2%;
}
}
@media only screen and (min-width:768px){ @media only screen and (min-width:768px){
#list ul li { #list ul li {
width: 46%; width: 46%;
@@ -450,3 +452,42 @@ noscript p {
width: 370px; width: 370px;
} }
} }
@media only screen and (max-width:767px){
header {
background: #3f3552;
left: 0;
position: fixed;
top: 0;
width: 100%;
z-index: 5;
}
header h1 {
font-size: 2.2em;
}
#app {
margin-bottom: 40px;
margin-top: 90px;
}
#list ul li {
width: 95%;
margin-left: 2%;
margin-right: 2%;
}
}
@media only screen and (max-width:400px){
header h1 {
font-size: 1.6em;
}
#app {
margin-top: 75px;
}
}
@media only screen and (max-width:320px){
input[type="text"] {
width: 60%;
}
.btn, .btn:hover, .btn:focus,
a.btn, a.btn:hover, a.btn:focus {
width: 30%;
}
}