wcs/wcs/qommon/static/css/mobile.css

401 lines
7.4 KiB
CSS

@import url(qommon.css);
html {
background: white;
color: black;
}
html, body, ul, li {
margin: 0;
padding: 0;
list-style: none;
font-family: sans-serif;
font-size: 15px;
}
div#top {
position: relative;
height: 50px;
border-bottom: 1px solid #777;
background: #222;
background: linear-gradient(to bottom, #666, #222);
}
div#top h1 {
font-size: 20px;
}
a#menu {
position: absolute;
top: 0;
left: 0;
}
a#gear {
position: absolute;
top: 0;
right: 0;
}
#top h1 {
margin: 0;
text-align: center;
line-height: 50px;
}
#top h1 a {
text-decoration: none;
color: white;
}
#nav-site h3 { display: none; }
ul.catforms li a,
#nav-site li a,
#nav-user li a {
padding: 2ex;
display: block;
border-bottom: 1px solid #888;
text-decoration: none;
}
#nav-site li a:hover,
#nav-user li a:hover {
background: #eee;
}
ul#categories {
margin-top: 1ex;
}
ul#categories li {
width: 50%;
float: left;
height: 100px;
text-align: center;
vertical-align: bottom;
display: table;
background: transparent center center no-repeat;
}
ul#categories li a {
padding: 1ex;
}
ul#categories li a {
display: table-cell;
vertical-align: bottom;
}
div#main-content {
padding: 0 5px;
}
div#login form {
text-align: center;
}
div#login form input {
width: 80%;
}
form div.buttons {
clear: both;
margin-top: 1em;
}
form div.buttons input {
padding: 1ex;
font-family: sans-serif; /* makes sure buttons all go through the same code path in firefox */
width: 45%;
}
form div.buttons div.savedraft-button input {
width: 93%;
}
div.back-home-button a {
width: 90%;
display: block;
padding: 1ex;
text-align: center;
}
div.TextWidget textarea,
div.RankedItemsWidget input,
div.StringWidget input,
div.IntWidget input,
div.DateWidget input,
div.WcsExtraStringWidget input,
div.RegexStringWidget input,
div.EmailWidget input,
div.PasswordWidget input,
div.PrefillSelectionWidget input[type=text] {
width: 90%;
}
div.category h3 {
font-size: 150%;
}
#content > h2, div.category h3 {
margin: 0 -5px 1em -5px;
border-bottom: 1px solid black;
padding: 1ex;
text-align: center;
}
div.error {
text-align: left;
}
div#services h3 {
display: none;
}
div#services > ul > li {
width: 50%;
float: left;
height: 100px;
background: white;
text-align: center;
vertical-align: bottom;
display: table;
transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-webkit-transition: all .2s ease-in-out;
}
@media screen and (min-width: 361px) {
div#services > ul > li {
width: 33%;
}
}
@media screen and (min-width: 960px) {
div#services > ul > li {
width: 25%;
}
}
div#services > ul strong a {
text-decoration: none;
color: black;
}
div#services > ul strong a:focus {
outline: none;
}
div#services ul p, div#services ul ul {
display: none;
}
div#droite {
display: none;
}
li.required-authentication a {
background: url(../images/mobile/lock.png) no-repeat 20px;
}
li.required-authentication span {
display: none;
}
ul#categories {
margin: 0 -1ex;
}
div#services > ul > li,
ul#categories li {
background-color: #eee;
}
div#services > ul strong {
cursor: pointer;
}
div#services > ul strong a {
color: #008;
}
div#services ul strong {
display: table-cell;
vertical-align: bottom;
padding-bottom: 1ex;
border: 1px solid white;
background: transparent center center no-repeat;
}
div#services #category-emploi strong,
div#services #category-commerces-et-entreprises strong,
div#services #category-formalites-pour-les-entreprises strong {
background-image: url(../images/categories/icon_businessperson_1673.png);
}
div#services #category-eau-et-assainissement strong,
div#services #category-hygiene-salubrite-environnement strong {
background-image: url(../images/categories/icon_sanitation_4335.png);
}
div#services #category-vie-pratique strong {
background-image: url(../images/categories/icon_crosswalk_23557.png);
}
div#services #category-culture strong {
background-image: url(../images/categories/icon_culture_13644.png);
}
div#services #category-etat-civil strong {
background-image: url(../images/categories/icon_document_14004.png);
}
div#services #category-formalites-administratives strong {
background-image: url(../images/categories/icon_document_32231.png);
}
div#services #category-enfance strong,
div#services #category-enfance-et-jeunesse strong,
div#services #category-enfance-jeunesse strong,
div#services #category-vos-enfants strong {
background-image: url(../images/categories/icon_people_39826.png);
}
div#services #category-sports-et-loisirs strong,
div#services #category-sport strong {
background-image: url(../images/categories/icon_triathlon_10860.png);
}
div#services #category-telealarme strong {
background-image: url(../images/categories/icon_mobile-alarm_6412.png);
}
div#services #category-collecte-des-dechets-menagers strong {
background-image: url(../images/categories/icon_trash_207.png);
}
div#services #category-associations strong {
background-image: url(../images/categories/icon_association_64055.png);
}
div#services #category-evenementiel strong,
div#services #category-evenements strong,
div#services #category-evenement-et-manifestation strong {
background-image: url(../images/categories/icon_convention-center_64233.png);
}
div#services #category-tourisme strong {
background-image: url(../images/categories/icon_tourist_22637.png);
}
div#services #category-contact strong,
div#services #category-contacter-la-mairie strong,
div#services #category-contactez-nous strong,
div#services #category-contacts strong,
div#services #category-contacts-et-rendez-vous strong,
div#services #category-montpellier-mediterranee-metropole-vous-repond strong {
background-image: url(../images/categories/icon_email_12513.png);
}
div#services #category-consultations strong {
background-image: url(../images/categories/icon_consultation_40124.png);
}
div#services #category-cadre-de-vie strong {
background-image: url(../images/categories/icon_park_12246.png);
}
div#services #category-paiement-en-ligne strong {
background-image: url(../images/categories/icon_payment_168700.png);
}
div#services #category-autres-services-en-ligne strong,
div#services #category-les-services-de-la-metropole strong {
background-image: url(../images/categories/icon_misc_8686.png);
}
div#services > ul > li.active {
width: 100%;
}
div#services > ul > li.active > strong {
display: block;
height: 50px;
line-height: 50px;
background-position: 1ex 50%;
text-align: left;
padding-left: 58px;
font-size: 110%;
position: relative;
}
div#services > ul > li.active > strong a {
position: absolute;
bottom: 10px;
line-height: 100%;
}
div#services > ul > li.active > ul {
width: 100%;
text-align: left;
background: white;
display: block;
margin-top: 3px;
}
div#services > ul > li.active > ul a {
padding: 1ex;
padding-left: 55px;
padding-right: 25px;
display: block;
text-decoration: none;
border-bottom: 1px solid #aaa;
}
div#services > ul > li.active > ul li {
line-height: 160%;
}
div#services.active > ul {
height: 50px;
width: calc(100% - 10px);
}
div#services > ul {
position: absolute;
width: 98%;
}
div#services > ul > li.active {
position: absolute;
top: 51px;
display: inline-block;
left: 0px;
}
div#services.active {
text-align: center;
height: 50px;
overflow: hidden;
}
div#services > ul > li.inactive {
width: 50px;
height: 50px;
display: inline-block;
float: none;
}
div#services > ul > li.inactive strong {
width: 100%;
height: 100%;
display: block;
padding: 0;
}
div#services > ul > li.inactive strong {
text-indent: -10000px;
}