From c62ec2a14428b528e20896d4e62fa08891e1399c Mon Sep 17 00:00:00 2001 From: Marien Fressinaud Date: Tue, 12 Mar 2013 23:24:52 +0100 Subject: Grosse mise à jour du design, pas mal de trucs cassés au niveau du panneau de configuration MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/theme/base.css | 280 +++++++++++++++++++++++--------------------------- 1 file changed, 129 insertions(+), 151 deletions(-) (limited to 'public/theme/base.css') diff --git a/public/theme/base.css b/public/theme/base.css index b3e462353..80b8ca230 100644 --- a/public/theme/base.css +++ b/public/theme/base.css @@ -40,70 +40,14 @@ img { } /* FORMULAIRES */ -form { - width: 450px; - max-width: 100%; - margin: 20px auto; - padding: 20px; - background: #f0f0f0; - border: 1px solid #ddd; - border-radius: 3px; - box-shadow: 0 1px 3px #aaa; -} - label { - display: block; - margin: 20px 0 0; - padding: 0 20px 0 0; - font-weight: bold; - } - input:focus, textarea:focus { - color: #3366cc !important; - border: 1px solid #3366cc !important; - } - input[type="text"], input[type="url"], input[type="email"], input[type="number"], textarea { - display: block; - height: 30px; - width: 430px; - max-width: 95%; - margin: 5px 0 5px; - padding: 5px 10px; - background: #fff; - border: 1px solid #ccc; - border-radius: 5px; - font-size: 90%; - } - textarea { - min-height: 100px; - font-size: 110%; - line-height: 150%; - font-family: Monospace; - } - input[type="submit"], button { - display: block; - height: 40px; - width: 100%; - margin: 5px 0 5px; - padding: 5px 0; - } - select { - width: 100%; - padding: 5px; - } - .radio_group, .checkbox_group { - line-height: 35px; - } - .radio_group label, .checkbox_group label { - display: inline-block; - margin: 0; - padding: 0 0 0 5px; - font-weight: normal; - } .btn { display: inline-block; - height: 30px; + min-height: 30px; + min-width: 20px; padding: 5px 10px; + background: #fff; background: linear-gradient(#fff, #eee); - border-radius: 3px; + border-radius: 5px; border: 1px solid #ddd; border-bottom: 1px solid #aaa; border-right: 1px solid #aaa; @@ -113,20 +57,56 @@ form { vertical-align: middle; } .btn:hover { + background: #f4f4f4; background: linear-gradient(#fafafa, #f0f0f0); text-decoration: none; } + .btn.active, .btn:active { box-shadow: 0px 2px 4px #e0e0e0 inset, 0px 1px 2px #fafafa; + background: #eee; + } + + .btn.btn-important { + background: #0084CC; + background: linear-gradient(#0084CC, #0045CC); + color: #fff; + border: 1px solid #0062B7; + text-shadow: 0px 1px 1px #aaa; } + .btn.btn-important:hover { + background: linear-gradient(#0066CC, #0045CC); + } + .btn.btn-important:active { + background: #0044CB; + box-shadow: none; + } -/* *** */ -.refresh { +/* ICONES */ +.icon { display: inline-block; - width: 30px; - height: 30px; - background: url("refresh.svg") center center no-repeat; + width: 16px; + height: 16px; + vertical-align: middle; } + .icon.refresh { + background: url("icons/refresh.svg") center center no-repeat; + } + .icon.bookmark { + background: url("icons/starred.svg") center center no-repeat; + } + .icon.all { + background: url("icons/all.svg") center center no-repeat; + } + .icon.close { + background: url("icons/close.svg") center center no-repeat; + } + .icon.search { + background: url("icons/search.svg") center center no-repeat; + } + .icon.configure { + background: url("icons/configure.svg") center center no-repeat; + } /* STRUCTURE */ #global { @@ -135,88 +115,41 @@ form { height: 100%; background: #fafafa; } + .header { + display: table; + width: 100%; + background: #f4f4f4; + table-layout: fixed; + } + .header .item { + display: table-cell; + padding: 10px 0; + border-bottom: 1px solid #aaa; + vertical-align: middle; + text-align: center; + } + .header .item.title { + width: 250px; + } + .header .item.title h1 { + padding: 0; + } + .header .item.title a:hover { + text-decoration: none; + } + .header .item.configure { + width: 100px; + } .aside { display: table-cell; height: 100%; width: 250px; + padding: 10px 0; vertical-align: top; border-right: 1px solid #aaa; background: #fff; } - .aside ul { - margin: 0; - list-style: none; - } - .aside li { - width: 100%; - height: 50px; - overflow: hidden; - line-height: 50px; - } - .aside li > a, .aside li > span { - display: block; - width: 230px; - padding: 0 10px; - } - .aside li > a:hover, .aside li > span:hover { - text-decoration: none; - background: #fafafa; - } - .aside li.disable > span { - background: #fff; - } - .aside li > a > span { - float: right; - padding: 0 5px; - font-size: 80%; - } - .aside li.active > a { - background: #0062BE; - color: #fff; - } - .aside li > h2 { - height: 50px; - padding: 0; - text-align: center; - background: #eee; - line-height: 50px; - } - - .aside form { - display: table; - width: 250px; - margin: 0; - padding: 0; - background: #f0f0f0; - border: none; - border-bottom: 1px solid #aaa; - border-radius: 0; - box-shadow: none; - } - .aside form input { - display: inline-block; - height: 48px; - line-height: 48px; - } - .aside form input[type="url"] { - width: 200px; - margin: 0; - padding: 0; - border: none !important; - border-radius: 0; - } - .aside form input[type="submit"] { - width: 50px; - margin: 0; - padding: 0; - border: none; - border-radius: 0; - } - #categories { - height: 69%; - overflow: auto; - border-top: 1px solid #aaa; - } + #main { display: table-cell; height: 100%; @@ -248,6 +181,48 @@ form { text-align: center; } +.categories { + margin: 0; + padding: 0; + text-align: center; + list-style: none; +} + .categories .feeds .feed, + .categories .category { + display: block; + width: 200px; + margin: 5px auto; + text-align: left; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + .categories .feeds { + width: 200px; + margin: 0 auto; + list-style: none; + } + .categories .feeds .feed { + display: inline-block; + margin: 0; + width: 170px; + line-height: 35px; + font-size: 90%; + vertical-align: middle; + } + .categories .notRead { + padding: 5px; + background: #bbb; + color: #fff; + font-size: 90%; + border: 1px solid #bbb; + border-right: 1px solid #999; + border-bottom: 1px solid #999; + border-radius: 5px; + box-shadow: 0 3px 3px #999 inset; + text-shadow: 0 0 1px #aaa; + } + .post { } .post.flux { @@ -327,27 +302,27 @@ form { display: inline-block; width: 25px; height: 25px; - background: url("read.svg") center center no-repeat; + background: url("icons/read.svg") center center no-repeat; vertical-align: middle; } .flux_header .item.manage .read:hover { text-decoration: none; } .post.flux.not_read .flux_header .item.manage .read { - background: url("unread.svg") center center no-repeat; + background: url("icons/unread.svg") center center no-repeat; } .flux_header .item.manage .bookmark { display: inline-block; width: 25px; height: 25px; - background: url("non-starred.svg") center center no-repeat; + background: url("icons/non-starred.svg") center center no-repeat; vertical-align: middle; } .flux_header .item.manage .bookmark:hover { text-decoration: none; } .post.flux.favorite .flux_header .item.manage .bookmark { - background: url("starred.svg") center center no-repeat; + background: url("icons/starred.svg") center center no-repeat; } .flux_header .item.website { width: 200px; @@ -439,25 +414,23 @@ form { } .notification a.close { display: inline-block; - width: 25px; - height: 25px; + width: 16px; + height: 16px; float: right; margin: -10px -60px 0 0; + padding: 5px; background: #fff; border-radius: 50px; border: 1px solid #aaa; - line-height: 25px; - color: #666; + line-height: 16px; } - .notification a.close:hover { - text-decoration: none; - } @media(max-width: 840px) { #global { table-layout: fixed; } - #main_aside { + .header, + .aside { display: none; } #main { @@ -485,3 +458,8 @@ form { display: none; } } +@media(max-width: 450px) { + #top { + display: none; + } +} -- cgit v1.2.3