Merge pull request #61 from Silvus/master

Fixed #36 - Thème dark
This commit is contained in:
Nicolas Lœuillet 2013-04-19 22:41:02 -07:00
commit 4e97e6e8b9
20 changed files with 221 additions and 60 deletions

90
css/style-dark.css Normal file
View file

@ -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;
}

90
css/style-light.css Normal file
View file

@ -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;
}

View file

@ -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;
}

BIN
img/dark/checkmark-off.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 267 B

BIN
img/dark/checkmark-on.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 221 B

BIN
img/dark/down.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 223 B

BIN
img/dark/logo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 786 B

BIN
img/dark/remove.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 265 B

BIN
img/dark/star-off.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 330 B

BIN
img/dark/star-on.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 277 B

BIN
img/dark/up.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 225 B

View file

Before

Width:  |  Height:  |  Size: 277 B

After

Width:  |  Height:  |  Size: 277 B

View file

Before

Width:  |  Height:  |  Size: 235 B

After

Width:  |  Height:  |  Size: 235 B

View file

Before

Width:  |  Height:  |  Size: 252 B

After

Width:  |  Height:  |  Size: 252 B

View file

Before

Width:  |  Height:  |  Size: 314 B

After

Width:  |  Height:  |  Size: 314 B

View file

Before

Width:  |  Height:  |  Size: 281 B

After

Width:  |  Height:  |  Size: 281 B

View file

@ -27,4 +27,32 @@ function sort_links(view, sort) {
$.get('index.php', { view: view, sort: sort, full_head: 'no' }, function(data) {
$('#content').html(data);
});
}
}
// ---------- 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;
});

View file

@ -15,8 +15,12 @@
<link rel="apple-touch-icon-precomposed" href="./img/apple-touch-icon-precomposed.png">
<link rel="stylesheet" href="./css/knacss.css" media="all">
<link rel="stylesheet" href="./css/style.css" media="all">
<!-- Light Theme -->
<link rel="stylesheet" href="./css/style-light.css" media="all" title="light-style">
<!-- Dark Theme -->
<link rel="alternate stylesheet" href="./css/style-dark.css" media="all" title="dark-style">
</head>
<body>
<body class="light-style">
<header>
<h1><img src="./img/logo.png" alt="logo poche" />poche</h1>
</header>

View file

@ -2,6 +2,7 @@
<li><a href="index.php" {if="$view == 'index'"}class="current"{/if}>home</a></li>
<li><a href="?view=fav" {if="$view == 'fav'"}class="current"{/if}>favorites</a></li>
<li><a href="?view=archive" {if="$view == 'archive'"}class="current"{/if}>archive</a></li>
<li><a href="#" id="themeswitch">dark</a></li>
<li><a style="cursor: move" title="i am a bookmarklet, use me !" href="javascript:(function(){var%20url%20=%20location.href%20||%20url;window.open('{$poche_url}?action=add&url='%20+%20encodeURIComponent(url),'_self');})();">poche it !</a></li>
<li><a href="?logout" title="Logout">logout</a></li>
</ul>

View file

@ -15,8 +15,12 @@
<link rel="apple-touch-icon-precomposed" href="./img/apple-touch-icon-precomposed.png">
<link rel="stylesheet" href="./css/knacss.css" media="all">
<link rel="stylesheet" href="./css/style.css" media="all">
<!-- Light Theme -->
<link rel="stylesheet" href="./css/style-light.css" media="all" title="light-style">
<!-- Dark Theme -->
<link rel="alternate stylesheet" href="./css/style-dark.css" media="all" title="dark-style">
</head>
<body class="article">
<body class="article light-style">
<div id="article" class="w600p">
<div class="backhome">
<a href="index.php" title="back to home">&larr;</a>
@ -24,6 +28,7 @@
<div class="tools">
<ul>
<li><a title="toggle mark as read" class="tool archive {if="$is_read == '0'"}archive-off{/if}" onclick="toggle_archive(this, {$id})"><span></span></a></li>
<li><a href="#" id="themeswitch">dark</a></li>
<li><a title="toggle favorite" class="tool fav {if="$is_fav == '0'"}fav-off{/if}" onclick="toggle_favorite(this, {$id})"><span></span></a></li>
<li><form method="post" onsubmit="return confirm('Are you sure?')" style="display: inline;" action="index.php"><input type="hidden" name="token" id="token" value="<?php echo Session::getToken(); ?>" /><input type="hidden" id="view" name="view" value="index" /><input type="hidden" id="action" name="action" value="delete" /><input type="hidden" id="id" name="id" value="{$id}" /><input type="submit" class="delete" title="toggle delete" /></form></li>
<li><a href="?logout" title="Logout">logout</a></li>