From f71995617db0b8da93bc9dd12323d9167df10fa8 Mon Sep 17 00:00:00 2001 From: sb domo Date: Tue, 3 Sep 2013 19:53:31 +0200 Subject: [PATCH] iphone.css simplified --- styles/style-iphone.css | 406 +++++----------------------------------- 1 file changed, 42 insertions(+), 364 deletions(-) diff --git a/styles/style-iphone.css b/styles/style-iphone.css index 709af4c..16cd226 100644 --- a/styles/style-iphone.css +++ b/styles/style-iphone.css @@ -1,182 +1,53 @@ -/* Global Box Sizing and Font-Smoothing */ -*, *:after, *:before { - box-sizing:border-box; - -webkit-box-sizing:border-box; - -moz-box-sizing:border-box; - -webkit-font-smoothing:antialiased; - -moz-font-smoothing:antialiased; - -o-font-smoothing:antialiased; - font-smoothing:antialiased; - text-rendering:optimizeLegibility; -} -/* reduction des tailles de police et taille fixe en px*/ -/*html { font-size: 100%; -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; }*/ +@import url("style-base.css"); -body { - font-family: 'Open Sans', sans-serif; - /*line-height:18px;*/ - font-size: 12px; - color: #1c1c1c; /* Lighter on the eyes than #000 Black */ - margin: 0px; background: #cccccc; background-size: cover; -} - -img { - border: 0px; - max-width: 100%; - height: auto; - width: auto\9; /* ie8 */ -} - -/* ========================================================================== - Typography stuff goes here +/* ============================================================================= + Main container stuff goes here and other globals ========================================================================== */ -h1,h2,h3,h4,h5,h6 { font-weight: bold; margin:0; padding:0;} -/*h1 see mediaqueries*/ + +/*iphone - reduction des tailles de police et taille fixe en px*/ +body { + font-size: 12px; +} + h2 {font-size: 13px;} h3 {font-size: 12px;} h4 {font-size: 12px;} h5 {font-size: 10px;} h6 {font-size: 10px;} - -a:hover, a:focus, a:active { outline: none; } -a { color: #000066; font-weight: 800; text-decoration: none;} -a:hover { color:#000; text-decoration: none; } -.frontpage a {display:block; } -.frontpage a:hover { width: 100%; background-color: #778899;} -.books:hover { width: 100%; background-color: #778899; } -.link a:hover { display:inline-block; width: 100%; background-color: #778899; /*Dirty IE Hack*/ zoom: 1; *display: inline;} - -.mfp-content .bookpopup { -/* Taille minimum du detail du livre en popup -pour que la pochette ne depasse pas -(pas seulemet pour iphone) */ - min-height: 210px; - position: relative; - background: #FFF; - padding: 20px; - width: auto; - max-width: 700px; - margin: 20px auto; + +/*iphone - Suppression des arrondis +.container { +border-radius:10px; } - -#email { -width: 300px; -} - -.filtered { -display: none; -} - -#filter { -clear:both; -} - -#filter ul { -margin: 0; -padding: 0; -list-style-type: none; -text-align: left; -text-transform:none; -} - -li { -display: inline-block; -padding: .2em 1em; -margin: 2px; -color: black; -background-color: white; -opacity: 0.5; -} - -.filter-include { - border-left:thick solid blue; - opacity: 1; -} - -.filter-exclude { - border-right:thick solid red; - opacity: 1; -} - - -img -{ -margin:0; -padding:0; -border:0; -} - -/* ============================================================================= - Main container stuff goes here and other globals - ========================================================================== */ -/*Suppression des arrondis*/ -.container{ - background: #414141; border:1px solid #000; /*border-radius:10px;*/ - max-width:800px;width:95%;margin:0 auto;position:relative; } +*/ /* ============================================================================= Header stuff goes here ========================================================================== */ -/*Suppression ombrage (bug avec formulaire recherche)*/ +/* header { - clear:both; - color:white; - text-align:center; - text-transform:uppercase; - display:block; - /*box-shadow:inset 0px -5px 8px #000000;*/ - min-height:70px; - /*border-radius: 10px 10px 0px 0px;*/ -} +iphone - Suppression ombrage (bug avec formulaire recherche) + box-shadow:inset 0px -5px 8px #000000; +iphone - Suppression des arrondis + border-radius: 10px 10px 0px 0px; +}*/ .hicon{ - display:inline-block; - color:lightgray; - text-align: center; - vertical-align: bottom; text-shadow: 2px 2px 2px black; } +/*iphone - icone trop bas */ +#tool .hicon32{ + margin-top: -5px; +} + .submit { - color: lightgray; - cursor: pointer; - background-color: transparent; - background-image: none; - border-color: transparent; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0; -webkit-box-shadow: none; -moz-box-shadow: none; - box-shadow: none; -} - -.hicon64{ - font-size: 64px; - line-height: 64px; - width: 64px; - height: 64px; -} - -.hicon32{ - font-size: 24px; - line-height: 32px; - width: 32px; - height: 32px; -} - -.headleft { - float: left; -} - -.headcenter -{ -float:none; -margin:auto; -text-align:center; -height:70px; -display:table; + box-shadow: none; } header h1{ @@ -184,238 +55,45 @@ header h1{ vertical-align: middle; text-align: center; line-height: 100%; - text-shadow: 0px 4px 3px rgba(0,0,0,0.4), - 0px 8px 13px rgba(0,0,0,0.1), - 0px 18px 23px rgba(0,0,0,0.1); -} - -.headright { - float: right; - /*for ios compatibility*/ - cursor: pointer; -} - -/* ============================================================================= - Section and Article stuff goes here - ========================================================================== */ -section { -clear:both; -background-color: #fff; -} - -article { -border-bottom: 1px solid black; -max-width:800px; -} - -/*-------------frontpage article-------------*/ - -.frontpage h2 { - padding: 5px 0 0 5px; -} - -.frontpage h4 { - padding: 5px 0 5px 20px; - font-style: italic; -} - -/*-------------books article-------------*/ -.books { - clear: both; - min-height: 90px; -} - -.books .cover { - float:left; - margin: 4px 10px 4px 4px; - width: 60px; - height: 82px; -} - -/*modification des marges*/ -.bookpopup .cover { - float:left; - margin: 27px 4px 4px 0px; - width: 100px; - height: 150px; -} - -.cover img { - max-width:100%; - max-height:100%; - color: white; -} - -/*bouton de donwload en haut dans book detail*/ -.download { - /*float: right;*/ - line-height:40px; - text-align: right; - /*margin: 6px;*/ -} - -.bookpopup .download { - margin: -12px 30px -2px 4px; -} -.books .download { - float: right; - margin: 6px; } .download a { border-radius: 6px; box-shadow:0 0 10px #000; - background: darkgray; background: radial-gradient(#666, black); - color: #EEE; - text-decoration : none; - font-weight: bold; - padding: 5px 10px 5px 10px; - text-align: center; } -.download img { - vertical-align:middle; +/*iphone - bouton de donwload en haut dans book detail +(manque de place en mode paysage)*/ +.bookpopup .download { + float: none; + margin: -12px 30px -2px 4px; +} +/*iphone - modification des marges pour cover dans detail*/ +.bookpopup .cover { + margin: 27px 4px 4px 0px; } -.books h4{ - display: inline; - font-style: italic; +.mfp-content .bookpopup { +/*iphone - Taille minimum du detail du livre en popup +pour que la pochette ne depasse pas +(pas seulement pour iphone) */ + min-height: 210px; } -/*-------------books popup article-------------*/ -.bookpopup h2{ - margin: 15px 15px; -} -.bookpopup h3{ - display:inline; /*Dirty IE Hack*/ zoom: 1; *display: inline; -} - -.bookpopup h4{ - border-top: 1px solid black; -} - -.fullclickpopup{ - display: block; -} - -section .bookpopup{ - padding: 8px 8px; -} - -/* ============================================================================= - Footer stuff goes here - ========================================================================== */ footer { -clear:both; -color:white; box-shadow:inset 0px 5px 8px #000000; -/*border-radius: 0px 0px 10px 10px;*/ -height:32px; +/*iphone - Suppression des arrondis +border-radius: 0px 0px 10px 10px;*/ } -.footleft -{ -float:left; -height:32px; -} - - -.footright -{ -float:right; -height:32px; -} - -.footcenter -{ -margin:auto; -text-align:center; -height:32px; -display:table; -font-weight: bold; -} - -.footcenter p, .footcenter a -{ -display: table-cell; -vertical-align: middle; -text-align: center; -line-height: 100%; -} - -/* ============================================================================= - Aside stuff goes here - ========================================================================== */ -#tool -{ -width:100%; -overflow: hidden; -} - - -/*-------------Search Aside-------------*/ -#tool input[type=search] -{ -vertical-align: middle; -width: 100%; -height: 20px; -/*margin: 3px;*/ -margin-left: 3px; -margin-bottom: 3px; -} - -#tool .hicon32{ - margin-top: -5px; -} - -.stop select -{ -vertical-align: middle; -margin: 4px; -} - -#sort -{ -cursor:pointer; -} - -.stop -{ -display: block; -overflow: hidden; -} /* ============================================================================= Mediaquerie stuff goes here ========================================================================== */ -/* 100px and greater */ -@media only screen and (min-width: 100px) { -h1 {font-size: 1em;} -.container { width:100%; } -} - -/* 320px and greater */ -@media only screen and (min-width: 320px) { -h1 {font-size: 1.2em;} -} - -/* 480px and greater */ -@media only screen and (min-width: 480px) { -h1 {font-size: 1.5em;} -body { /*font-size: 1em; 12px/16px */ - font-weight:450; /* Better supported than 'lighter' attribute */ - } -} - /* 768px and greater */ @media only screen and (min-width: 768px) { -h1 {font-size: 2em; line-height: 1em;} .container { box-shadow:0 0 20px #000; } -body { margin: 5px; - /*font-size: 0.85em; 12px/16px */ - font-weight:400; /* Better supported than 'lighter' attribute */ - } } \ No newline at end of file