From 6a361945eaf86a978b82bd6fb3442fe64428d9df Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Nicolas=20L=C5=93uillet?= Date: Mon, 5 Aug 2013 21:56:32 +0200 Subject: new design, pagination & more --- tpl/css/messages.css | 2 +- tpl/css/style-dark.css | 94 --------------------- tpl/css/style-light.css | 69 ++-------------- tpl/css/style.css | 215 ++++++++++++++++++++++++++++-------------------- 4 files changed, 132 insertions(+), 248 deletions(-) delete mode 100644 tpl/css/style-dark.css (limited to 'tpl/css') diff --git a/tpl/css/messages.css b/tpl/css/messages.css index 702fac49..9222bb88 100755 --- a/tpl/css/messages.css +++ b/tpl/css/messages.css @@ -1,4 +1,4 @@ -.messages { width: 100%; -moz-border-radius: 4px; border-radius: 4px; display: block; padding: 10px 0; margin: 10px auto 10px; clear: both; } +.messages { width: 400px; -moz-border-radius: 4px; border-radius: 4px; display: block; padding: 10px 0; margin: 10px auto 10px; clear: both; } .messages a.closeMessage { margin: -14px -8px 0 0; display:none; width: 16px; height: 16px; float: right; background: url(../img/messages/close.png) no-repeat; } /*.messages:hover a.closeMessage { visibility:visible; }*/ .messages p { margin: 3px 0 3px 10px !important; padding: 0 10px 0 23px !important; font-size: 14px; line-height: 16px; } diff --git a/tpl/css/style-dark.css b/tpl/css/style-dark.css deleted file mode 100644 index 49fe1011..00000000 --- a/tpl/css/style-dark.css +++ /dev/null @@ -1,94 +0,0 @@ -/*** GENERAL ***/ -body { - color: #fff; - background-color: #0d0d0d; -} - -a, a:hover, a:visited { - color: #fff; -} - -#main ul#links li a.current { - background-color: #000; - color: #fff; -} - -#links a:hover, .backhome a:hover, .support a:hover{ - background-color: #fff; - color: #000; -} - -input[type=submit].delete { - background : url('../img/dark/remove.png') no-repeat center center; - color : transparent; -} - -#main .entrie { - color: #fff; - background-color: #000; - border: 1px solid #fff; -} - -#main .entrie h2 a:hover { - color: #29B1E3; -} - -a.fav span { - background: url('../img/dark/star-on.png') no-repeat; -} - -a.fav span:hover { - background: url('../img/dark/star-off.png') no-repeat; -} - -a.fav-off span { - background: url('../img/dark/star-off.png') no-repeat; -} - -a.fav-off span:hover { - background: url('../img/dark/star-on.png') no-repeat; -} - -a.archive span { - background: url('../img/dark/checkmark-on.png') no-repeat; -} - -a.archive span:hover { - background: url('../img/dark/checkmark-off.png') no-repeat; -} - -a.archive-off span { - background: url('../img/dark/checkmark-off.png') no-repeat; -} - -a.archive-off span:hover { - background: url('../img/dark/checkmark-on.png') no-repeat; -} - -a.twitter span { - background: url('../img/dark/twitter.png') no-repeat; -} - -/*** ***/ -/*** ARTICLE PAGE ***/ - -body.article { - color: #fff; - background-color: #0d0d0d; -} - -#article header { - border-bottom: 1px solid #222222; -} - -#article article { - border-bottom: 1px solid #222222; -} - -.vieworiginal a { - color: #888888; -} - -.entrie { - background-color: #fff; -} diff --git a/tpl/css/style-light.css b/tpl/css/style-light.css index 5d584eb3..9ea7955a 100644 --- a/tpl/css/style-light.css +++ b/tpl/css/style-light.css @@ -1,47 +1,12 @@ -/*** GENERAL ***/ -body { - color: #222222; - background-color: #F1F1F1; -} - -a, a:hover, a:visited { - color: #000; -} - -.bouton { - background-color: #000; - color: #fff; - border: none; -} -.bouton:hover { - background-color: #222222; - color: #F1F1F1; -} -#main ul#links li a.current { - background-color: #000; - color: #fff; +a.back span { + background: url('../img/light/left.png') no-repeat; } -#links a:hover, .backhome a:hover, .support a:hover{ - background-color: #040707; - color: #F1F1F1; +a.top span { + background: url('../img/light/top.png') no-repeat; } -input[type=submit].delete { - background : url('../img/light/remove.png') no-repeat center center; - color : transparent; -} - -#main .entrie { - color: #2e2e2e; - background-color: #ffffff; - border: 1px solid #000; -} - -#main .entrie h2 a:hover { - color: #F5BE00; -} a.fav span { background: url('../img/light/star-on.png') no-repeat; @@ -83,26 +48,6 @@ a.email span { background: url('../img/light/envelop.png') no-repeat; } -/*** ***/ -/*** ARTICLE PAGE ***/ - -body.article { - color: #222222; - background-color: #F1F1F1; -} - -#article header { - border-bottom: 1px solid #222222; -} - -#article article { - border-bottom: 1px solid #222222; -} - -.vieworiginal a { - color: #888888; -} - -.entrie { - background-color: #fff; -} +a.delete span { + background: url('../img/light/remove.png') no-repeat; +} \ No newline at end of file diff --git a/tpl/css/style.css b/tpl/css/style.css index 333a0b77..8808b7ed 100644 --- a/tpl/css/style.css +++ b/tpl/css/style.css @@ -1,6 +1,6 @@ -/*** GENERAL ***/ body { - font: 20px/1.3em Palatino,Georgia,serif; + font-size: 16px; + font-family: 'Roboto', sans-serif; margin: 10px; } @@ -16,6 +16,10 @@ header h1 { border-radius: 2px; } +#main { + margin: 0 auto; +} + #main ul#links { padding: 0; list-style-type: none; @@ -36,6 +40,7 @@ header h1 { padding: 0; list-style-type: none; text-align: center; + opacity: 0.5; } #main ul#sort li { @@ -47,31 +52,16 @@ header h1 { cursor: pointer; } -ul#messages { - -} -#main, #article { - margin: 0 auto; -} - -#links a, .backhome a, .support a{ +#links a{ text-decoration: none; padding: 5px 10px; } -#links a:hover, .backhome a:hover, .support a:hover{ +#links a:hover{ -webkit-border-radius: 2px; border-radius: 2px; } -.support { - font-size: 14px; -} - -footer { - text-align: right; -} - /*** ***/ /*** LINKS DISPLAY ***/ @@ -80,33 +70,41 @@ footer { cursor: pointer; } -input[type=submit].delete { - width : 16px; - height :16px; - border : none; - cursor: pointer; - font-size : 0; -} - #main #content { margin-top: 20px; } -#main .entrie { - padding: 15px; - min-height: 8em; - border: 1px solid; +#main #content h2 { + font-size: 1.3em; + text-decoration: none; +} + +#main #content .entrie { + border-bottom: 1px solid #222222; } #main .entrie h2 a { text-decoration: none; } +#main .entrie ul.tools { + list-style-type: none; +} + +#main .entrie ul.tools li { + /*display: inline;*/ +} + .tools { float: right; text-align: right; + opacity: 0.5; } +.tools p { + font-size: 0.8em;} + +/* .tools ul { padding: 0; margin: 0; list-style-type: none; @@ -118,19 +116,7 @@ input[type=submit].delete { .tools a.tool { cursor: pointer; -} - -#article .tools { - position: relative; - display: inline; - top: 0px; - right: 0px; - width: 100%; -} - -#article .tools ul li{ - display: inline; -} +}*/ #main .entrie .tools a.tool span, #article .tools a.tool span { display: inline-block; @@ -146,10 +132,9 @@ input[type=submit].delete { /*** ***/ /*** ARTICLE PAGE ***/ -body.article { - font: 20px/1.3em Palatino,Georgia,serif; +#article { + margin: 0 auto; } - #article header { text-align: left; } @@ -158,58 +143,106 @@ body.article { text-decoration: none; } -.vieworiginal a { +.vieworiginal a, .vieworiginal a:hover, .vieworiginal a:visited { text-decoration: none; + color: #888888; } .backhome { display: inline; } +#article .tools { + position: relative; + display: inline; + top: 0px; + right: 0px; + width: 100%; +} + +#article .tools ul li{ + display: inline; +} + + +/*** GENERAL ***/ +body { + color: #000; +} + +a, a:hover, a:visited { + color: #000; +} + +.bouton { + background-color: #000; + color: #fff; + border: none; +} +.bouton:hover { + background-color: #222222; + color: #F1F1F1; +} + +#main ul#links li a.current { + background-color: #000; + color: #fff; +} + +#links a:hover{ + background-color: #040707; + color: #F1F1F1; +} + + /*** ***/ +/*** ARTICLE PAGE ***/ -#main -{ - max-width: 60em; /* 960 px */ - margin: 0 auto; +#article header, #article article { + border-bottom: 1px solid #222222; } -#content -{ - width: 103.125%; /* 990px */ - overflow: hidden; - margin-left: -1.562%; /* 15px */ - margin-bottom: -1.875em; /* 30px */ -} - -.entrie -{ - width: 30.303%; /* 300px */ - background-color: #fff; - float: left; - margin: 0 1.515% 1.875em; /* 15px 30px */ -} - -@media only screen and ( max-width: 40em ) /* 640px */ -{ - .entrie - { - width: 46.876%; /* 305px */ - margin-bottom: 0.938em; /* 15px */ - } -} - -@media only screen and ( max-width: 20em ) /* 320px */ -{ - #content - { - width: 100%; - margin-left: 0; - } - - .entrie - { - width: 100%; - margin-left: 0; - margin-right: 0; - } + + +/* Pagination */ +.pagination { + clear: both; + padding-bottom: 20px; + padding-top: 10px; + text-align: right; +} +.pagination a { + border: 1px solid #D5D5D5; + color: #333; + font-size: 11px; + font-weight: bold; + height: 25px; + padding: 4px 8px; + text-decoration: none; + margin:2px; +} +.pagination a:hover, .pagination a:active { + background:#efefef; +} +.pagination span.current { + background-color: #ccc; + border: 1px solid #D5D5D5; + color: #000; + font-size: 11px; + font-weight: bold; + height: 25px; + padding: 4px 8px; + text-decoration: none; + margin:2px; +} +.pagination span.disabled { + border: 1px solid #EEEEEE; + color: #DDDDDD; + margin:2px; + padding: 4px 8px; + font-size: 11px; + font-weight: bold; +} + +footer { + clear: both; } \ No newline at end of file -- cgit v1.2.3