*/
.markdown p{
- margin:0.75em 0;
+ margin: 0.75em 0;
}
.markdown img{
--- /dev/null
+/* Images */
+.pure-img-eliptical {
+ border-radius: 80%;
+}
+.pure-img-rounded {
+ border-radius: 3px;
+}
+.pure-img-bordered {
+ background-color: #FFFFFF;
+ border: 1px solid rgba(0, 0, 0, 0.2);
+ padding: 5px;
+}
+
+
+/* Thumbnails */
+.pure-thumbnails li {
+ text-align: center;
+ display: inline-block;
+ *display: inline;
+ /* IE7 inline-block hack */
+ *zoom: 1;
+ vertical-align: top;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+ padding: 0.5em;
+}
+.pure-thumbnails {
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+
+.pure-thumbnails a:focus {
+ outline: 0 none;
+}
+
+.pure-thumb {
+ display: block;
+ text-decoration: none;
+ color: inherit;
+}
+.pure-thumb img {
+ max-width: 100%;
+ margin-right: auto;
+ margin-left: auto;
+ vertical-align: middle; /* this will remove a thin line below the image */
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.pure-thumb-bordered {
+ border: 1px solid rgba(0, 0, 0, 0.2);
+}
+.pure-thumb .caption {
+ text-align: left;
+ display: block;
+ margin: 0 5px 6px;
+
+}
+.pure-thumb .caption p {
+ margin: 0.3em 0 0;
+ font-size: 75%;
+}
+.pure-thumb .caption .caption-head {
+ font-weight: bold;
+ margin-top: 0.3em;
+}
+
+.pure-thumb-eliptical img {
+ border-radius: 50%;
+}
+.pure-thumb-rounded img {
+ border-radius: 3px;
+}
+
+/* Badges/Pills */
+.pure-badge,
+.pure-badge-error,
+.pure-badge-warning,
+.pure-badge-success,
+.pure-badge-info,
+.pure-badge-inverse {
+ padding: 0.35em 0.9em 0.35em;
+ background-color: #9D988E;
+ color: #fff;
+ display: inline-block;
+ font-size: 11.844px;
+ font-weight: bold;
+ line-height: 1.2em;
+ vertical-align: baseline;
+ white-space: nowrap;
+ border-radius: 20px;
+ margin: 0.2em;
+}
+.pure-badge-error {
+ background-color: #D13C38;
+}
+.pure-badge-warning {
+ background-color: #E78C05;
+}
+.pure-badge-success {
+ background-color: rgb(83, 180, 79);
+}
+.pure-badge-info {
+ background-color: rgb(18, 169, 218);
+}
+.pure-badge-inverse {
+ background-color: #4D370C;
+}
+
+/* Alerts */
+.pure-alert {
+ position: relative;
+ margin-bottom: 1em;
+ padding: 1em;
+ background: #ccc;
+ border-radius: 3px;
+}
+
+.pure-alert label {
+ display: inline-block;
+ *display: inline;
+ /* IE7 inline-block hack */
+ *zoom: 1;
+ white-space: nowrap;
+}
+
+.pure-alert {
+ background-color: rgb(209, 235, 238);
+ color: rgb(102, 131, 145);
+}
+.pure-alert-error {
+ background-color: #D13C38;
+ color: #fff;
+}
+
+.pure-alert-warning {
+ background-color: rgb(250, 191, 103);
+ color: rgb(151, 96, 13);
+}
+
+.pure-alert-success {
+ background-color: rgb(83, 180, 79);
+ color: #fff;
+}
+
+
+/* Contextual Modals */
+
+.pure-popover {
+ position: relative;
+ width: 300px;
+ background-color: #f0f1f3;
+ color: #2f3034;
+ padding: 15px;
+ border: 1px solid #bfc0c8;
+ border-radius: 2px;
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+ box-padding: border-box;
+ -webkit-background-clip: padding-box;
+ -moz-background-clip: padding;
+ background-clip: padding-box;
+}
+
+.pure-arrow-border, .pure-arrow {
+ border-style: solid;
+ border-width: 10px;
+ height:0;
+ width:0;
+ position:absolute;
+}
+
+
+/* POPOVER ARROW POSITIONING BOTTOM */
+
+.pure-popover.bottom .pure-arrow-border {
+ border-color: #bfc0c8 transparent transparent transparent;
+ bottom: -20px;
+ left: 50%;
+}
+.pure-popover.bottom .pure-arrow {
+ border-color: #f0f1f3 transparent transparent transparent;
+ bottom:-19px;
+ left: 50%;
+}
+
+/* POPOVER ARROW POSITIONING TOP*/
+
+.pure-popover.top .pure-arrow-border {
+ border-color: transparent transparent #bfc0c8 transparent;
+ top: -21px;
+ left: 50%;
+}
+.pure-popover.top .pure-arrow {
+ border-color: transparent transparent #f0f1f3 transparent;
+ top:-20px;
+ left: 50%;
+}
+
+/* POPOVER ARROW POSITIONING RIGHT*/
+
+.pure-popover.right .pure-arrow-border {
+ border-color: transparent transparent transparent #bfc0c8;
+ top: 45%;
+ right: -21px;
+}
+.pure-popover.right .pure-arrow {
+ border-color: transparent transparent transparent #f0f1f3;
+ top:45%;
+ right: -20px;
+}
+
+
+/* POPOVER ARROW POSITIONING LEFT*/
+
+.pure-popover.left .pure-arrow-border {
+ border-color: transparent #bfc0c8 transparent transparent;
+ top: 45%;
+ left: -21px;
+}
+.pure-popover.left .pure-arrow {
+ border-color: transparent #f0f1f3 transparent transparent;
+ top:45%;
+ left: -20px;
+}
+
+
+/* BUTTON IMPROVEMENTS */
+.pure-button-block {
+ display: block;
+}
+.pure-button-small {
+ padding: .6em 2em .65em;
+ font-size:70%;
+}
+.pure-button-large {
+ padding: .8em 5em .9em;
+ font-size:110%;
+}
+.pure-button-selected {
+ background-color: #345fcb;
+ color: #fff;
+}
+.pure-button-secondary {
+ background: rgb(161, 195, 238);
+ color: rgb(26, 88, 122);
+}
+.pure-button-error {
+ background: rgb(214, 86, 75);
+ color: white;
+}
+.pure-button-success {
+ background: rgb(54, 197, 71);
+ color: white;
+}
+.pure-button-warning {
+ background: rgb(255, 163, 0);
+ color: white;
+}
+
border-radius: .25rem;
}
+pre {
+ max-width: 100%;
+}
+
@font-face {
font-family: 'Roboto Slab';
font-weight: 400;
.pure-u-xl-visible { display: inline-block !important; }
}
+/**
+ * Make pure-extras alert closable.
+ */
+.pure-alert-closable .fa-times {
+ float: right;
+}
+.pure-alert-close {
+ cursor: pointer;
+}
+
/**
* MENU
**/
color: #d1fff0;
}
+.header-buttons {
+ text-align: right;
+}
+
#linkcount {
/* position: fixed; */
position: absolute;
color: #b0ddce;
}
+/* because chrome */
+#search input[type="text"]::-webkit-input-placeholder {
+ color: #b0ddce;
+}
+
#search button {
background: transparent;
border: none;
color: #fff;
}
+#header-login-form {
+ display: none;
+ height: 30px;
+ padding: 5px 0;
+ text-align: center;
+ background: #1b926c;
+ box-shadow: 0 1px 1px 1px #797979;
+}
+
+#header-login-form input[type="text"], #header-login-form input[type="password"] {
+ margin: 0 0 5px 0;
+ padding: 5px 5px 3px 15px;
+ height: 20px;
+ width: 200px;
+ background: #1fa67a;
+ border: medium none currentColor;
+ border-radius: 25px;
+ box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
+ color: #b0ddce;
+}
+
+/* because chrome */
+#header-login-form input[type="text"]::-webkit-input-placeholder,
+#header-login-form input[type="password"]::-webkit-input-placeholder
+{
+ color: #b0ddce;
+}
+
+#header-login-form input[type="submit"] {
+ display: inline-block;
+ margin: 0 0 5px 0;
+ height: 25px;
+ width: 100px;
+ background: #0C7653;
+ border: medium none currentColor;
+ border-radius: 25px;
+ box-shadow: 1px 1px 2px #005C3E, -1px -1px 2px #005C3E;
+ color: #b0ddce;
+}
+
+.new-version-message {
+ text-align: center;
+}
+
+.new-version-message a {
+ color: rgb(151, 96, 13);
+ font-weight: bold;
+}
+
/**
* CONTENT - GENERAL
*/
/**
* CONTENT - LINKLIST PAGING
+ * 64em -> lg
*/
@media screen and (max-width: 64em) {
.linklist-paging {
.linklist-filters {
margin: 10px 0;
color: #252525;
-}
-
-.linklist-filters span {
- margin: 0 0 0 10px;
+ font-size: 0.9em;
}
.linklist-filters a {
margin: 10px 0;
text-align: right;
color: #252525;
+ font-size: 0.9em;
}
.linksperpage a {
.linksperpage input[type="text"] {
width: 28px;
- height: 20px;
- margin: 0 0 5px 0;
+ height: 16px;
+ margin: 0;
padding: 3px 5px 3px 8px;
background: #c8c8c8;
border: medium none currentColor;
- border-radius: 25px;
+ --border-radius: 25px;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.078), 0 1px 4px rgba(0, 0, 0, 0.298) inset;
color: #252525;
font-size: 0.8em;
color: #20b988;
}
+.linklist-item-thumbnail {
+ padding: 10px;
+ float: left;
+}
+
.linklist-item-infos {
- padding: 5px;
+ padding: 5px 5px 0 5px;
background: #ddd url(../img/noise.png);
border-top: 1px solid #989898;
box-shadow: 1px -1px 0.2em #989898;
color: #252525;
- font-size: 0.8em;
}
.linklist-item-infos a {
.linklist-item-tags {
margin: 0 0 5px 0;
+ font-size: 0.8em;
}
.linklist-item-infos .label-tag {
border: 1px solid #000;
}
+.linklist-item-infos-dateblock {
+ font-size: 0.9em;
+}
+
.linklist-plugin-icon {
width: 13px;
height: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
+ font-size: 0.8em;
+}
+
+/** 64em -> lg **/
+@media screen and (max-width: 64em) {
+ .linklist-item-infos-url {
+ text-align: left;
+ }
}
+/**
+ * Footer
+ */
+#footer {
+ margin: 20px 0;
+ padding: 5px;
+ text-align: center;
+ color: #252525;
+}
+
+#footer:before {
+ display: block;
+ content:"";
+ background: linear-gradient(to right, #949393, #252525, #949393);
+ height: 1px;
+ width: 80%;
+ margin: 10px auto;
+}
+
+#footer a {
+ color: #252525;
+}
/**
* CONTENT - LINKLIST ITEMS
*/
<link href="images/favicon.ico#" rel="shortcut icon" type="image/x-icon" />
<link type="text/css" rel="stylesheet" href="css/pure.min.css" />
<link type="text/css" rel="stylesheet" href="css/grids-responsive.min.css">
+<link type="text/css" rel="stylesheet" href="css/pure-extras.css">
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" />
<link type="text/css" rel="stylesheet" href="css/shaarli.css" />
<link type="text/css" rel="stylesheet" href="inc/awesomplete.css#" />
// Switch fold/expand - up = fold
if (event.target.classList.contains('fa-chevron-up')) {
-
event.target.title = 'Expand';
description.style.display = 'none';
}
event.target.classList.toggle('fa-chevron-down');
event.target.classList.toggle('fa-chevron-up');
});
-});
\ No newline at end of file
+});
+
+/**
+ * Confirmation message before deletion.
+ */
+var deleteLinks = document.querySelectorAll('.delete-link');
+[].forEach.call(deleteLinks, function(deleteLink) {
+ deleteLink.addEventListener('click', function(event) {
+ if(!confirm('Are you sure you want to delete this link ?')) {
+ event.preventDefault();
+ }
+ });
+});
+
+/**
+ * Close alerts
+ */
+var closeLinks = document.querySelectorAll('.pure-alert-close');
+[].forEach.call(closeLinks, function(closeLink) {
+ closeLink.addEventListener('click', function(event) {
+ var alert = getParentByClass(event.target, 'pure-alert-closable');
+ alert.style.display = 'none';
+ });
+});
+
+/**
+ * New version dismiss.
+ * Hide the message for one week using localStorage.
+ */
+var newVersionDismiss = document.getElementById('new-version-dismiss');
+var newVersionMessage = document.querySelector('.new-version-message');
+if (newVersionMessage != null
+ && localStorage.getItem('newVersionDismiss') != null
+ && parseInt(localStorage.getItem('newVersionDismiss')) + 7*24*60*60*1000 > (new Date()).getTime()
+) {
+ newVersionMessage.style.display = 'none';
+}
+if (newVersionDismiss != null) {
+ newVersionDismiss.addEventListener('click', function () {
+ localStorage.setItem('newVersionDismiss', (new Date()).getTime());
+ });
+}
+
+/**
+ * Login button
+ */
+var loginButton = document.getElementById('login-button');
+loginButton.addEventListener('click', function(event) {
+ event.preventDefault();
+ var loginBlock = document.getElementById('header-login-form');
+ loginBlock.style.display = 'block';
+ loginBlock.classList.toggle('open');
+ // Focus on login field.
+ loginBlock.firstElementChild.focus();
+ document.getElementById('content').style.boxShadow = 'none';
+});
<div class="linklist-item-editbuttons">
<a href="#" title="Fold" class="fold-button"><i class="fa fa-chevron-up"></i></a>
<a href="?edit_link={$value.linkdate}" title="Edit"><i class="fa fa-pencil-square-o"></i></a>
- <a href="?delete_link={$value.linkdate}&token={$token}" title="Delete"><i class="fa fa-trash"></i></a>
+ <a href="?delete_link={$value.linkdate}&token={$token}" title="Delete" class="delete-link">
+ <i class="fa fa-trash"></i>
+ </a>
</div>
{/if}
</h2>
</div>
- <div class="linklist-item-thumbnail">{$value.url|thumbnail}</div>
+ {$thumb=thumbnail($value.url)}
+ {if="$thumb!=false"}
+ <div class="linklist-item-thumbnail">{$thumb}</div>
+ {/if}
{if="$value.description"}
<div class="linklist-item-description">
</div>
{/if}
- <div class="linklist-item-infos">
+ <div class="linklist-item-infos clear">
{if="$value.tags"}
<div class="linklist-item-tags">
<i class="fa fa-tags"></i>
{/if}
<div class="pure-g">
- <div class="pure-u-lg-5-8 pure-u-sm-1">
+ <div class="linklist-item-infos-dateblock pure-u-lg-3-8 pure-u-sm-1">
<a href="?{$value.shorturl}" title="Permalink">
{if="!$GLOBALS['config']['HIDE_TIMESTAMPS'] || isLoggedIn()"}
<span class="linkdate">
{if="$link_plugin_counter - 1 != $counter"}·{/if}
{/loop}
</div>
- <div class="linklist-item-infos-url pure-u-lg-3-8 pure-u-sm-1">
+ <div class="linklist-item-infos-url pure-u-lg-5-8 pure-u-sm-1">
<a href="{$value.real_url}" title="{$value.title}">
<i class="fa fa-link"></i> {$value.url}
</a>
<div class="linklist-paging">
- <div class="paging pure-g">
- <div class="linklist-filters pure-u-1-3">
- {if="isLoggedIn() or !empty($action_plugin)"}
- <span class="linklist-filters-text">
- Filters
- </span>
- {if="isLoggedIn()"}
- <a href="?privateonly" title="Click to see all links"
- class={if="$privateonly"}"filter-on"{else}"filter-off"{/if}
- ><i class="fa fa-key"></i></a>
- {/if}
- {loop="$action_plugin"}
- <!-- FIXME! Plugin update to handle that. -->
- <a href="?privateonly" title="{$value.title}" class=
- {if="$value.on"}
- "filter-on"
- {else}
- "filter-off"
+ <div class="pure-g">
+ <div class="pure-u-2-24"></div>
+ <div class="pure-u-20-24">
+ <div class="paging pure-g">
+ <div class="linklist-filters pure-u-1-3">
+ {if="isLoggedIn() or !empty($action_plugin)"}
+ <span class="linklist-filters-text">
+ Filters
+ </span>
+ {if="isLoggedIn()"}
+ <a href="?privateonly" title="Click to see all links"
+ class={if="$privateonly"}"filter-on"{else}"filter-off"{/if}
+ ><i class="fa fa-key"></i></a>
{/if}
- >{$value.url}</a>
- {/loop}
- {/if}
- </div>
+ {loop="$action_plugin"}
+ <!-- FIXME! Plugin update to handle that. -->
+ <a href="?privateonly" title="{$value.title}" class=
+ {if="$value.on"}
+ "filter-on"
+ {else}
+ "filter-off"
+ {/if}
+ >{$value.url}</a>
+ {/loop}
+ {/if}
+ </div>
- <div class="linklist-pages pure-u-1-3">
- {if="$next_page_url"}
- <a href="{$next_page_url}" class="paging_newer">
- <i class="fa fa-arrow-circle-left"></i>
- </a>
- {/if}
- {if="$page_max>1"}<span class="strong">{$page_current} / {$page_max}</span>{/if}
- {if="$previous_page_url"}
- <a href="{$previous_page_url}" class="paging_older">
- <i class="fa fa-arrow-circle-right"></i>
- </a>
- {/if}
+
<div class="linklist-pages pure-u-1-3">
+ {if="$next_page_url"}
+
<a href="{$next_page_url}" class="paging_newer">
+ <i class="fa fa-arrow-circle-left"></i>
+ </a>
+ {/if}
+ {if="$page_max>1"}<span class="strong">{$page_current} / {$page_max}</span>{/if}
+ {if="$previous_page_url"}
+
<a href="{$previous_page_url}" class="paging_older">
+ <i class="fa fa-arrow-circle-right"></i>
+ </a>
+ {/if}
- </div>
+ </div>
- <div class="linksperpage pure-u-1-3">
- Links per page
- <a href="?linksperpage=20">20</a>
- <a href="?linksperpage=50">50</a>
- <a href="?linksperpage=100">100</a>
- <form method="GET">
- <input type="text" name="linksperpage" placeholder="133">
- </form>
+ <div class="linksperpage pure-u-1-3">
+ <div class="pure-u-0 pure-u-lg-visible">Links per page</div>
+ <a href="?linksperpage=20">20</a>
+ <a href="?linksperpage=50">50</a>
+ <a href="?linksperpage=100">100</a>
+ <form method="GET">
+ <input type="text" name="linksperpage" placeholder="133">
+ </form>
+ </div>
+ </div>
</div>
</div>
</div>
\ No newline at end of file
-<div id="footer">
- <b><a href="https://github.com/shaarli/Shaarli">Shaarli</a></b> - The personal, minimalist, super-fast, no-database delicious clone by the <a href="https://github.com/shaarli/Shaarli">Shaarli</a> community - <a href="doc/Home.html">Help/documentation</a>
- {loop="$plugins_footer.text"}
- {$value}
- {/loop}
+<div class="pure-g">
+ <div class="pure-u-2-24"></div>
+ <div id="footer" class="pure-u-20-24">
+ <strong><a href="https://github.com/shaarli/Shaarli">Shaarli</a></strong> -
+ The personal, minimalist, super-fast, database free, bookmarking service by the Shaarli community -
+ <a href="doc/Home.html" rel="nofollow">Help/documentation</a>
+ {loop="$plugins_footer.text"}
+ {$value}
+ {/loop}
+ </div>
+ <div class="pure-u-2-24"></div>
</div>
-
{loop="$plugins_footer.endofpage"}
{$value}
{/loop}
-{if="$newVersion"}
-<div id="newversion">
- <span id="version_id">●</span> Shaarli {$newVersion} is
- <a href="https://github.com/shaarli/Shaarli/releases">available</a>.
-</div>
-{/if}
-{if="$versionError"}
-<div id="newversion">
- Error: {$versionError}
-</div>
-{/if}
-{if="isLoggedIn()"}
-<script>function confirmDeleteLink() { var agree=confirm("Are you sure you want to delete this link ?"); if (agree) return true ; else return false ; }</script>
-{/if}
-
{loop="$plugins_footer.js_files"}
<script src="{$value}#"></script>
{/loop}
</li>
{/if}
</ul>
- <div class="pure-u-lg-1-12 pure-u-sm-0 pure-u-lg-visible">
- <!--<i class="fa fa-user"></i>-->
- <a href="?do=atom{$searchcrits}" class="pure-menu-link">
- <i class="fa fa-rss"></i>
- </a>
+ <div class="header-buttons pure-u-lg-1-12 pure-u-sm-0 pure-u-lg-visible">
+ <ul class="pure-menu-list">
+ {if="!isLoggedIn()"}
+ <li class="pure-menu-item">
+ <a href="?do=login" class="pure-menu-link" id="login-button">
+ <i class="fa fa-user"></i>
+ </a>
+ </li>
+ {/if}
+ <li class="pure-menu-item">
+ <a href="?do=atom{$searchcrits}" class="pure-menu-link">
+ <i class="fa fa-rss"></i>
+ </a>
+ </li>
+ </ul>
</div>
</div>
</div>
</div>
<div id="content">
+ <div id="header-login-form">
+ <input type="text" name="login" placeholder="Username">
+ <input type="password" name="password" placeholder="Password">
+ <input type="submit" value="Login">
+ </div>
+
+{if="!empty($newVersion) || !empty($versionError)"}
+ <div class="pure-g new-version-message pure-alert pure-alert-warning pure-alert-closable">
+ <div class="pure-u-2-24"></div>
+ {if="$newVersion"}
+ <div class="pure-u-20-24">
+ Shaarli {$newVersion} is
+ <a href="https://github.com/shaarli/Shaarli/releases">available</a>.
+ </div>
+ {/if}
+ {if="$versionError"}
+ <div class="pure-u-20-24">
+ Error: {$versionError}
+ </div>
+ {/if}
+ <div class="pure-u-2-24">
+ <i id="new-version-dismiss" class="fa fa-times pure-alert-close"></i>
+ </div>
+ </div>
+{/if}
{if="!empty($_GET['source']) && $_GET['source']=='bookmarklet'"}
projects / github / shaarli / Shaarli.git / commitdiff
