aboutsummaryrefslogtreecommitdiffhomepage
path: root/css
diff options
context:
space:
mode:
authorsilvus <silvus@silvus.fr>2013-04-19 22:26:39 +0200
committersilvus <silvus@silvus.fr>2013-04-19 22:26:39 +0200
commitb4397510e75fe9c387bec4161769392906c81bd7 (patch)
tree1a8bfc93fad823c4b719165b2456780f64daa1fa /css
parentff4d8c8c1efca0759330906419cb5f36de86d156 (diff)
downloadwallabag-b4397510e75fe9c387bec4161769392906c81bd7.tar.gz
wallabag-b4397510e75fe9c387bec4161769392906c81bd7.tar.zst
wallabag-b4397510e75fe9c387bec4161769392906c81bd7.zip
Add a dark theme and is very simple switch
Diffstat (limited to 'css')
-rw-r--r--css/style-dark.css90
-rw-r--r--css/style-light.css90
-rw-r--r--css/style.css57
3 files changed, 180 insertions, 57 deletions
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 @@
1/*** GENERAL ***/
2body {
3 color: #fff;
4 background-color: #0d0d0d;
5}
6
7a, a:hover, a:visited {
8 color: #fff;
9}
10
11#main ul#links li a.current {
12 background-color: #000;
13 color: #fff;
14}
15
16#links a:hover, .backhome a:hover{
17 background-color: #fff;
18 color: #000;
19}
20
21input[type=submit].delete {
22 background : url('../img/dark/remove.png') no-repeat center center;
23 color : transparent;
24}
25
26#main .entrie {
27 color: #fff;
28 background-color: #000;
29 border: 1px solid #fff;
30}
31
32#main .entrie h2 a:hover {
33 color: #29B1E3;
34}
35
36a.fav span {
37 background: url('../img/dark/star-on.png') no-repeat;
38}
39
40a.fav span:hover {
41 background: url('../img/dark/star-off.png') no-repeat;
42}
43
44a.fav-off span {
45 background: url('../img/dark/star-off.png') no-repeat;
46}
47
48a.fav-off span:hover {
49 background: url('../img/dark/star-on.png') no-repeat;
50}
51
52a.archive span {
53 background: url('../img/dark/checkmark-on.png') no-repeat;
54}
55
56a.archive span:hover {
57 background: url('../img/dark/checkmark-off.png') no-repeat;
58}
59
60a.archive-off span {
61 background: url('../img/dark/checkmark-off.png') no-repeat;
62}
63
64a.archive-off span:hover {
65 background: url('../img/dark/checkmark-on.png') no-repeat;
66}
67
68/*** ***/
69/*** ARTICLE PAGE ***/
70
71body.article {
72 color: #fff;
73 background-color: #0d0d0d;
74}
75
76#article header {
77 border-bottom: 1px solid #222222;
78}
79
80#article article {
81 border-bottom: 1px solid #222222;
82}
83
84.vieworiginal a {
85 color: #888888;
86}
87
88.entrie {
89 background-color: #fff;
90}
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 @@
1/*** GENERAL ***/
2body {
3 color: #222222;
4 background-color: #F1F1F1;
5}
6
7a, a:hover, a:visited {
8 color: #000;
9}
10
11#main ul#links li a.current {
12 background-color: #000;
13 color: #fff;
14}
15
16#links a:hover, .backhome a:hover{
17 background-color: #040707;
18 color: #F1F1F1;
19}
20
21input[type=submit].delete {
22 background : url('../img/light/remove.png') no-repeat center center;
23 color : transparent;
24}
25
26#main .entrie {
27 color: #2e2e2e;
28 background-color: #ffffff;
29 border: 1px solid #000;
30}
31
32#main .entrie h2 a:hover {
33 color: #F5BE00;
34}
35
36a.fav span {
37 background: url('../img/light/star-on.png') no-repeat;
38}
39
40a.fav span:hover {
41 background: url('../img/light/star-off.png') no-repeat;
42}
43
44a.fav-off span {
45 background: url('../img/light/star-off.png') no-repeat;
46}
47
48a.fav-off span:hover {
49 background: url('../img/light/star-on.png') no-repeat;
50}
51
52a.archive span {
53 background: url('../img/light/checkmark-on.png') no-repeat;
54}
55
56a.archive span:hover {
57 background: url('../img/light/checkmark-off.png') no-repeat;
58}
59
60a.archive-off span {
61 background: url('../img/light/checkmark-off.png') no-repeat;
62}
63
64a.archive-off span:hover {
65 background: url('../img/light/checkmark-on.png') no-repeat;
66}
67
68/*** ***/
69/*** ARTICLE PAGE ***/
70
71body.article {
72 color: #222222;
73 background-color: #F1F1F1;
74}
75
76#article header {
77 border-bottom: 1px solid #222222;
78}
79
80#article article {
81 border-bottom: 1px solid #222222;
82}
83
84.vieworiginal a {
85 color: #888888;
86}
87
88.entrie {
89 background-color: #fff;
90}
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 @@
1/*** GENERAL ***/ 1/*** GENERAL ***/
2body { 2body {
3 color: #222222;
4 font: 20px/1.3em Palatino,Georgia,serif; 3 font: 20px/1.3em Palatino,Georgia,serif;
5 background-color: #F1F1F1;
6 margin: 10px; 4 margin: 10px;
7} 5}
8 6
9 7
10a, a:hover, a:visited {
11 color: #000;
12}
13
14header { 8header {
15 text-align: center; 9 text-align: center;
16} 10}
@@ -28,8 +22,6 @@ header {
28#main ul#links li a.current { 22#main ul#links li a.current {
29 -webkit-border-radius: 2px; 23 -webkit-border-radius: 2px;
30 border-radius: 2px; 24 border-radius: 2px;
31 background-color: #040707;
32 color: #F1F1F1;
33} 25}
34 26
35#main ul#sort { 27#main ul#sort {
@@ -58,8 +50,6 @@ header {
58#links a:hover, .backhome a:hover{ 50#links a:hover, .backhome a:hover{
59 -webkit-border-radius: 2px; 51 -webkit-border-radius: 2px;
60 border-radius: 2px; 52 border-radius: 2px;
61 background-color: #040707;
62 color: #F1F1F1;
63} 53}
64 54
65footer { 55footer {
@@ -80,11 +70,9 @@ ul#login li {
80} 70}
81 71
82input[type=submit].delete { 72input[type=submit].delete {
83 background : url('../img/remove.png') no-repeat center center;
84 width : 16px; 73 width : 16px;
85 height :16px; 74 height :16px;
86 border : none; 75 border : none;
87 color : transparent;
88 cursor: pointer; 76 cursor: pointer;
89 font-size : 0; 77 font-size : 0;
90} 78}
@@ -94,8 +82,6 @@ input[type=submit].delete {
94} 82}
95 83
96#main .entrie { 84#main .entrie {
97 color: rgb(46, 46, 46);
98 background-color: #ffffff;
99 padding: 15px; 85 padding: 15px;
100 min-height: 8em; 86 min-height: 8em;
101 border: 1px solid; 87 border: 1px solid;
@@ -105,10 +91,6 @@ input[type=submit].delete {
105 text-decoration: none; 91 text-decoration: none;
106} 92}
107 93
108#main .entrie h2 a:hover {
109 color: #F5BE00;
110}
111
112.tools { 94.tools {
113 text-align: right; 95 text-align: right;
114} 96}
@@ -145,62 +127,23 @@ input[type=submit].delete {
145 height: 16px; 127 height: 16px;
146} 128}
147 129
148a.fav span {
149 background: url('../img/star-on.png') no-repeat;
150}
151
152a.fav span:hover {
153 background: url('../img/star-off.png') no-repeat;
154}
155
156a.fav-off span {
157 background: url('../img/star-off.png') no-repeat;
158}
159
160a.fav-off span:hover {
161 background: url('../img/star-on.png') no-repeat;
162}
163
164a.archive span {
165 background: url('../img/checkmark-on.png') no-repeat;
166}
167
168a.archive span:hover {
169 background: url('../img/checkmark-off.png') no-repeat;
170}
171
172a.archive-off span {
173 background: url('../img/checkmark-off.png') no-repeat;
174}
175
176a.archive-off span:hover {
177 background: url('../img/checkmark-on.png') no-repeat;
178}
179 130
180/*** ***/ 131/*** ***/
181/*** ARTICLE PAGE ***/ 132/*** ARTICLE PAGE ***/
182 133
183body.article { 134body.article {
184 color: #222222;
185 font: 20px/1.3em Palatino,Georgia,serif; 135 font: 20px/1.3em Palatino,Georgia,serif;
186 background-color: #F1F1F1;
187} 136}
188 137
189#article header { 138#article header {
190 text-align: left; 139 text-align: left;
191 border-bottom: 1px solid #222222;
192} 140}
193 141
194#article header a { 142#article header a {
195 text-decoration: none; 143 text-decoration: none;
196} 144}
197 145
198#article article {
199 border-bottom: 1px solid #222222;
200}
201
202.vieworiginal a { 146.vieworiginal a {
203 color: #888888;
204 text-decoration: none; 147 text-decoration: none;
205} 148}
206 149