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 --------------------------------- 3 files changed, 180 insertions(+), 57 deletions(-) create mode 100644 css/style-dark.css create mode 100644 css/style-light.css (limited to 'css') 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; } -- cgit v1.2.3