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 +++++++++++++++++-------------------- public/theme/icons/all.svg | 32 +++++ public/theme/icons/close.svg | 28 ++++ public/theme/icons/configure.svg | 31 ++++ public/theme/icons/non-starred.svg | 32 +++++ public/theme/icons/read.svg | 31 ++++ public/theme/icons/refresh.svg | 31 ++++ public/theme/icons/search.svg | 32 +++++ public/theme/icons/starred.svg | 32 +++++ public/theme/icons/unread.svg | 30 ++++ public/theme/icons/website.svg | 33 +++++ public/theme/non-starred.svg | 32 ----- public/theme/read.svg | 31 ---- public/theme/read_mode.png | Bin 3543 -> 0 bytes public/theme/refresh.svg | 31 ---- public/theme/starred.svg | 32 ----- public/theme/unread.svg | 30 ---- public/theme/website.svg | 33 ----- 18 files changed, 441 insertions(+), 340 deletions(-) create mode 100644 public/theme/icons/all.svg create mode 100644 public/theme/icons/close.svg create mode 100644 public/theme/icons/configure.svg create mode 100644 public/theme/icons/non-starred.svg create mode 100644 public/theme/icons/read.svg create mode 100644 public/theme/icons/refresh.svg create mode 100644 public/theme/icons/search.svg create mode 100644 public/theme/icons/starred.svg create mode 100644 public/theme/icons/unread.svg create mode 100644 public/theme/icons/website.svg delete mode 100644 public/theme/non-starred.svg delete mode 100644 public/theme/read.svg delete mode 100644 public/theme/read_mode.png delete mode 100644 public/theme/refresh.svg delete mode 100644 public/theme/starred.svg delete mode 100644 public/theme/unread.svg delete mode 100644 public/theme/website.svg (limited to 'public/theme') 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; + } +} diff --git a/public/theme/icons/all.svg b/public/theme/icons/all.svg new file mode 100644 index 000000000..2180f7a4b --- /dev/null +++ b/public/theme/icons/all.svg @@ -0,0 +1,32 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + diff --git a/public/theme/icons/close.svg b/public/theme/icons/close.svg new file mode 100644 index 000000000..c0c786fd6 --- /dev/null +++ b/public/theme/icons/close.svg @@ -0,0 +1,28 @@ + + + + + Gnome Symbolic Icon Theme + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + + + diff --git a/public/theme/icons/configure.svg b/public/theme/icons/configure.svg new file mode 100644 index 000000000..52df8bca7 --- /dev/null +++ b/public/theme/icons/configure.svg @@ -0,0 +1,31 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + diff --git a/public/theme/icons/non-starred.svg b/public/theme/icons/non-starred.svg new file mode 100644 index 000000000..346717f78 --- /dev/null +++ b/public/theme/icons/non-starred.svg @@ -0,0 +1,32 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + diff --git a/public/theme/icons/read.svg b/public/theme/icons/read.svg new file mode 100644 index 000000000..932bfd860 --- /dev/null +++ b/public/theme/icons/read.svg @@ -0,0 +1,31 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + diff --git a/public/theme/icons/refresh.svg b/public/theme/icons/refresh.svg new file mode 100644 index 000000000..11728fc5d --- /dev/null +++ b/public/theme/icons/refresh.svg @@ -0,0 +1,31 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + diff --git a/public/theme/icons/search.svg b/public/theme/icons/search.svg new file mode 100644 index 000000000..acfb364cc --- /dev/null +++ b/public/theme/icons/search.svg @@ -0,0 +1,32 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + diff --git a/public/theme/icons/starred.svg b/public/theme/icons/starred.svg new file mode 100644 index 000000000..0944a7726 --- /dev/null +++ b/public/theme/icons/starred.svg @@ -0,0 +1,32 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + diff --git a/public/theme/icons/unread.svg b/public/theme/icons/unread.svg new file mode 100644 index 000000000..9219b5083 --- /dev/null +++ b/public/theme/icons/unread.svg @@ -0,0 +1,30 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + diff --git a/public/theme/icons/website.svg b/public/theme/icons/website.svg new file mode 100644 index 000000000..ddc8e0706 --- /dev/null +++ b/public/theme/icons/website.svg @@ -0,0 +1,33 @@ + + + + + + + + image/svg+xml + + Gnome Symbolic Icon Theme + + + + + + + Gnome Symbolic Icon Theme + + + + + + + + + + + + + + + + diff --git a/public/theme/non-starred.svg b/public/theme/non-starred.svg deleted file mode 100644 index 346717f78..000000000 --- a/public/theme/non-starred.svg +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - image/svg+xml - - Gnome Symbolic Icon Theme - - - - - - - Gnome Symbolic Icon Theme - - - - - - - - - - - - - - - diff --git a/public/theme/read.svg b/public/theme/read.svg deleted file mode 100644 index 932bfd860..000000000 --- a/public/theme/read.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - image/svg+xml - - Gnome Symbolic Icon Theme - - - - - - - Gnome Symbolic Icon Theme - - - - - - - - - - - - - - diff --git a/public/theme/read_mode.png b/public/theme/read_mode.png deleted file mode 100644 index 881399237..000000000 Binary files a/public/theme/read_mode.png and /dev/null differ diff --git a/public/theme/refresh.svg b/public/theme/refresh.svg deleted file mode 100644 index 11728fc5d..000000000 --- a/public/theme/refresh.svg +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - - image/svg+xml - - Gnome Symbolic Icon Theme - - - - - - - Gnome Symbolic Icon Theme - - - - - - - - - - - - - - diff --git a/public/theme/starred.svg b/public/theme/starred.svg deleted file mode 100644 index 0944a7726..000000000 --- a/public/theme/starred.svg +++ /dev/null @@ -1,32 +0,0 @@ - - - - - - - - image/svg+xml - - Gnome Symbolic Icon Theme - - - - - - - Gnome Symbolic Icon Theme - - - - - - - - - - - - - - - diff --git a/public/theme/unread.svg b/public/theme/unread.svg deleted file mode 100644 index 9219b5083..000000000 --- a/public/theme/unread.svg +++ /dev/null @@ -1,30 +0,0 @@ - - - - - - - - image/svg+xml - - Gnome Symbolic Icon Theme - - - - - - - Gnome Symbolic Icon Theme - - - - - - - - - - - - - diff --git a/public/theme/website.svg b/public/theme/website.svg deleted file mode 100644 index ddc8e0706..000000000 --- a/public/theme/website.svg +++ /dev/null @@ -1,33 +0,0 @@ - - - - - - - - image/svg+xml - - Gnome Symbolic Icon Theme - - - - - - - Gnome Symbolic Icon Theme - - - - - - - - - - - - - - - - -- cgit v1.2.3