From b4397510e75fe9c387bec4161769392906c81bd7 Mon Sep 17 00:00:00 2001 From: silvus Date: Fri, 19 Apr 2013 22:26:39 +0200 Subject: Add a dark theme and is very simple switch --- css/style-dark.css | 90 ++++++++++++++++++++++++++++++++++++++++++++ css/style-light.css | 90 ++++++++++++++++++++++++++++++++++++++++++++ css/style.css | 57 ---------------------------- img/checkmark-off.png | Bin 277 -> 0 bytes img/checkmark-on.png | Bin 235 -> 0 bytes img/dark/checkmark-off.png | Bin 0 -> 267 bytes img/dark/checkmark-on.png | Bin 0 -> 221 bytes img/dark/down.png | Bin 0 -> 223 bytes img/dark/logo.png | Bin 0 -> 786 bytes img/dark/remove.png | Bin 0 -> 265 bytes img/dark/star-off.png | Bin 0 -> 330 bytes img/dark/star-on.png | Bin 0 -> 277 bytes img/dark/up.png | Bin 0 -> 225 bytes img/light/checkmark-off.png | Bin 0 -> 277 bytes img/light/checkmark-on.png | Bin 0 -> 235 bytes img/light/remove.png | Bin 0 -> 252 bytes img/light/star-off.png | Bin 0 -> 314 bytes img/light/star-on.png | Bin 0 -> 281 bytes img/remove.png | Bin 252 -> 0 bytes img/star-off.png | Bin 314 -> 0 bytes img/star-on.png | Bin 281 -> 0 bytes js/poche.js | 30 ++++++++++++++- tpl/head.html | 6 ++- tpl/home.html | 1 + tpl/view.html | 7 +++- 25 files changed, 221 insertions(+), 60 deletions(-) create mode 100644 css/style-dark.css create mode 100644 css/style-light.css delete mode 100644 img/checkmark-off.png delete mode 100644 img/checkmark-on.png create mode 100644 img/dark/checkmark-off.png create mode 100644 img/dark/checkmark-on.png create mode 100644 img/dark/down.png create mode 100644 img/dark/logo.png create mode 100644 img/dark/remove.png create mode 100644 img/dark/star-off.png create mode 100644 img/dark/star-on.png create mode 100644 img/dark/up.png create mode 100644 img/light/checkmark-off.png create mode 100644 img/light/checkmark-on.png create mode 100644 img/light/remove.png create mode 100644 img/light/star-off.png create mode 100644 img/light/star-on.png delete mode 100644 img/remove.png delete mode 100644 img/star-off.png delete mode 100644 img/star-on.png diff --git a/css/style-dark.css b/css/style-dark.css new file mode 100644 index 00000000..813c291d --- /dev/null +++ b/css/style-dark.css @@ -0,0 +1,90 @@ +/*** 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{ + 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; +} + +/*** ***/ +/*** 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/css/style-light.css b/css/style-light.css new file mode 100644 index 00000000..5b9c6c11 --- /dev/null +++ b/css/style-light.css @@ -0,0 +1,90 @@ +/*** GENERAL ***/ +body { + color: #222222; + background-color: #F1F1F1; +} + +a, a:hover, a:visited { + color: #000; +} + +#main ul#links li a.current { + background-color: #000; + color: #fff; +} + +#links a:hover, .backhome a:hover{ + background-color: #040707; + color: #F1F1F1; +} + +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; +} + +a.fav span:hover { + background: url('../img/light/star-off.png') no-repeat; +} + +a.fav-off span { + background: url('../img/light/star-off.png') no-repeat; +} + +a.fav-off span:hover { + background: url('../img/light/star-on.png') no-repeat; +} + +a.archive span { + background: url('../img/light/checkmark-on.png') no-repeat; +} + +a.archive span:hover { + background: url('../img/light/checkmark-off.png') no-repeat; +} + +a.archive-off span { + background: url('../img/light/checkmark-off.png') no-repeat; +} + +a.archive-off span:hover { + background: url('../img/light/checkmark-on.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; +} diff --git a/css/style.css b/css/style.css index 29dca289..7fc8f056 100644 --- a/css/style.css +++ b/css/style.css @@ -1,16 +1,10 @@ /*** GENERAL ***/ body { - color: #222222; font: 20px/1.3em Palatino,Georgia,serif; - background-color: #F1F1F1; margin: 10px; } -a, a:hover, a:visited { - color: #000; -} - header { text-align: center; } @@ -28,8 +22,6 @@ header { #main ul#links li a.current { -webkit-border-radius: 2px; border-radius: 2px; - background-color: #040707; - color: #F1F1F1; } #main ul#sort { @@ -58,8 +50,6 @@ header { #links a:hover, .backhome a:hover{ -webkit-border-radius: 2px; border-radius: 2px; - background-color: #040707; - color: #F1F1F1; } footer { @@ -80,11 +70,9 @@ ul#login li { } input[type=submit].delete { - background : url('../img/remove.png') no-repeat center center; width : 16px; height :16px; border : none; - color : transparent; cursor: pointer; font-size : 0; } @@ -94,8 +82,6 @@ input[type=submit].delete { } #main .entrie { - color: rgb(46, 46, 46); - background-color: #ffffff; padding: 15px; min-height: 8em; border: 1px solid; @@ -105,10 +91,6 @@ input[type=submit].delete { text-decoration: none; } -#main .entrie h2 a:hover { - color: #F5BE00; -} - .tools { text-align: right; } @@ -145,62 +127,23 @@ input[type=submit].delete { height: 16px; } -a.fav span { - background: url('../img/star-on.png') no-repeat; -} - -a.fav span:hover { - background: url('../img/star-off.png') no-repeat; -} - -a.fav-off span { - background: url('../img/star-off.png') no-repeat; -} - -a.fav-off span:hover { - background: url('../img/star-on.png') no-repeat; -} - -a.archive span { - background: url('../img/checkmark-on.png') no-repeat; -} - -a.archive span:hover { - background: url('../img/checkmark-off.png') no-repeat; -} - -a.archive-off span { - background: url('../img/checkmark-off.png') no-repeat; -} - -a.archive-off span:hover { - background: url('../img/checkmark-on.png') no-repeat; -} /*** ***/ /*** ARTICLE PAGE ***/ body.article { - color: #222222; font: 20px/1.3em Palatino,Georgia,serif; - background-color: #F1F1F1; } #article header { text-align: left; - border-bottom: 1px solid #222222; } #article header a { text-decoration: none; } -#article article { - border-bottom: 1px solid #222222; -} - .vieworiginal a { - color: #888888; text-decoration: none; } diff --git a/img/checkmark-off.png b/img/checkmark-off.png deleted file mode 100644 index 3db5a06d..00000000 Binary files a/img/checkmark-off.png and /dev/null differ diff --git a/img/checkmark-on.png b/img/checkmark-on.png deleted file mode 100644 index cd3abb2c..00000000 Binary files a/img/checkmark-on.png and /dev/null differ diff --git a/img/dark/checkmark-off.png b/img/dark/checkmark-off.png new file mode 100644 index 00000000..efc3439f Binary files /dev/null and b/img/dark/checkmark-off.png differ diff --git a/img/dark/checkmark-on.png b/img/dark/checkmark-on.png new file mode 100644 index 00000000..24391c2e Binary files /dev/null and b/img/dark/checkmark-on.png differ diff --git a/img/dark/down.png b/img/dark/down.png new file mode 100644 index 00000000..41ea9604 Binary files /dev/null and b/img/dark/down.png differ diff --git a/img/dark/logo.png b/img/dark/logo.png new file mode 100644 index 00000000..9fba0642 Binary files /dev/null and b/img/dark/logo.png differ diff --git a/img/dark/remove.png b/img/dark/remove.png new file mode 100644 index 00000000..41786fd7 Binary files /dev/null and b/img/dark/remove.png differ diff --git a/img/dark/star-off.png b/img/dark/star-off.png new file mode 100644 index 00000000..90651b54 Binary files /dev/null and b/img/dark/star-off.png differ diff --git a/img/dark/star-on.png b/img/dark/star-on.png new file mode 100644 index 00000000..7fc14477 Binary files /dev/null and b/img/dark/star-on.png differ diff --git a/img/dark/up.png b/img/dark/up.png new file mode 100644 index 00000000..1679e18f Binary files /dev/null and b/img/dark/up.png differ diff --git a/img/light/checkmark-off.png b/img/light/checkmark-off.png new file mode 100644 index 00000000..3db5a06d Binary files /dev/null and b/img/light/checkmark-off.png differ diff --git a/img/light/checkmark-on.png b/img/light/checkmark-on.png new file mode 100644 index 00000000..cd3abb2c Binary files /dev/null and b/img/light/checkmark-on.png differ diff --git a/img/light/remove.png b/img/light/remove.png new file mode 100644 index 00000000..f8ad56a3 Binary files /dev/null and b/img/light/remove.png differ diff --git a/img/light/star-off.png b/img/light/star-off.png new file mode 100644 index 00000000..6a0133a7 Binary files /dev/null and b/img/light/star-off.png differ diff --git a/img/light/star-on.png b/img/light/star-on.png new file mode 100644 index 00000000..a9f96eaa Binary files /dev/null and b/img/light/star-on.png differ diff --git a/img/remove.png b/img/remove.png deleted file mode 100644 index f8ad56a3..00000000 Binary files a/img/remove.png and /dev/null differ diff --git a/img/star-off.png b/img/star-off.png deleted file mode 100644 index 6a0133a7..00000000 Binary files a/img/star-off.png and /dev/null differ diff --git a/img/star-on.png b/img/star-on.png deleted file mode 100644 index a9f96eaa..00000000 Binary files a/img/star-on.png and /dev/null differ diff --git a/js/poche.js b/js/poche.js index 6bc3c188..d27ecbba 100644 --- a/js/poche.js +++ b/js/poche.js @@ -27,4 +27,32 @@ function sort_links(view, sort) { $.get('index.php', { view: view, sort: sort, full_head: 'no' }, function(data) { $('#content').html(data); }); -} \ No newline at end of file +} + + +// ---------- Swith light or dark view +function setActiveStyleSheet(title) { + var i, a, main; + for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { + if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { + a.disabled = true; + if(a.getAttribute("title") == title) a.disabled = false; + } + } +} +$('#themeswitch').click(function() { + // we want the dark + if ($('body').hasClass('light-style')) { + setActiveStyleSheet('dark-style'); + $('body').addClass('dark-style'); + $('body').removeClass('light-style'); + $('#themeswitch').text('light'); + // we want the light + } else if ($('body').hasClass('dark-style')) { + setActiveStyleSheet('light-style'); + $('body').addClass('light-style'); + $('body').removeClass('dark-style'); + $('#themeswitch').text('dark'); + } + return false; +}); diff --git a/tpl/head.html b/tpl/head.html index 6fcf9741..66b6895d 100644 --- a/tpl/head.html +++ b/tpl/head.html @@ -15,8 +15,12 @@ + + + + - +

logo pochepoche

diff --git a/tpl/home.html b/tpl/home.html index 6fb9444c..62c77bd3 100644 --- a/tpl/home.html +++ b/tpl/home.html @@ -2,6 +2,7 @@
  • home
  • favorites
  • archive
    • +
  • dark
  • poche it !
  • logout
    • diff --git a/tpl/view.html b/tpl/view.html index 4b8ce60f..9ba5e208 100644 --- a/tpl/view.html +++ b/tpl/view.html @@ -15,8 +15,12 @@ + + + + - +
    ← @@ -24,6 +28,7 @@