90
css/style-dark.css
Normal 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
@ -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;
|
||||
}
|
@ -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
After Width: | Height: | Size: 267 B |
BIN
img/dark/checkmark-on.png
Normal file
After Width: | Height: | Size: 221 B |
BIN
img/dark/down.png
Normal file
After Width: | Height: | Size: 223 B |
BIN
img/dark/logo.png
Normal file
After Width: | Height: | Size: 786 B |
BIN
img/dark/remove.png
Normal file
After Width: | Height: | Size: 265 B |
BIN
img/dark/star-off.png
Normal file
After Width: | Height: | Size: 330 B |
BIN
img/dark/star-on.png
Normal file
After Width: | Height: | Size: 277 B |
BIN
img/dark/up.png
Normal file
After Width: | Height: | Size: 225 B |
Before Width: | Height: | Size: 277 B After Width: | Height: | Size: 277 B |
Before Width: | Height: | Size: 235 B After Width: | Height: | Size: 235 B |
Before Width: | Height: | Size: 252 B After Width: | Height: | Size: 252 B |
Before Width: | Height: | Size: 314 B After Width: | Height: | Size: 314 B |
Before Width: | Height: | Size: 281 B After Width: | Height: | Size: 281 B |
30
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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// ---------- 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;
|
||||
});
|
||||
|
@ -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>
|
||||
|
@ -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>
|
||||
|
@ -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">←</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>
|
||||
|