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

Améliore le style sur mobile

Browse Source
This commit is contained in:
Antoine
2016-04-20 22:15:22 +02:00
parent 04d28788f6
commit 3eeae4e9e2
1 changed files with 18 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
css/style.css
View File

@@ -312,25 +312,25 @@ header h1 {
* FORM * FORM
* ----------------------------------------------------------------------------- * -----------------------------------------------------------------------------
*/ */
input { input[type="text"] {
background: #FFFFFF; background: #FFFFFF;
border: 1px solid #DEDEDE; border: 1px solid #DEDEDE;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset; border-radius: 0;
box-shadow: none;
color: #555; color: #555;
display: inline-block; display: inline-block;
font-size: 14px; font-size: 14px;
height: 34px;
line-height: 1.42857; line-height: 1.42857;
padding: 6px 12px; padding: 6px 12px;
} }
input {
height: 34px;
}
.btn, .btn:hover, .btn:focus, .btn, .btn:hover, .btn:focus,
a.btn, a.btn:hover, a.btn:focus { a.btn, a.btn:hover, a.btn:focus {
-moz-user-select: none;
background-color: #CB4D59; background-color: #CB4D59;
background-image: none;
border: 0; border: 0;
border-bottom: 3px solid #8B121E; border-bottom: 3px solid #8B121E;
border-radius: 0;
color: #FEFDFD; color: #FEFDFD;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
@@ -343,6 +343,8 @@ a.btn, a.btn:hover, a.btn:focus {
text-decoration: none; text-decoration: none;
vertical-align: top; vertical-align: top;
white-space: nowrap; white-space: nowrap;
-moz-user-select: none;
-webkit-appearance: none;
} }
.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 {
@@ -383,6 +385,7 @@ a.btn:active {
overflow: hidden; overflow: hidden;
} }
#filter input + .btn { #filter input + .btn {
height: 34px;
left: -5px; left: -5px;
position: relative; position: relative;
} }
@@ -408,6 +411,15 @@ a.btn:active {
* 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){ @media only screen and (max-width:767px){
#list ul li { #list ul li {
width: 95%; width: 95%;