Knah-Tsaeb/MyShaarli
Knah-Tsaeb/MyShaarli
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Update theme according personal website

Browse source
This commit is contained in:
Knah Tsaeb 2024-12-19 17:14:38 +01:00
parent d7dd0ba9df
commit 65bfdb051b
11 changed files with 1271 additions and 917 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
plugins/myShaarli/myShaarli.php
View file

@ -22,7 +22,7 @@ function myShaarli_init($conf) {
$conf->set('thumbnails.mode', 'none'); $conf->set('thumbnails.mode', 'none');
return array($error); return array($error);
} }
if ($conf->get('resource.theme') !== 'myShaarli' and $conf->get('resource.theme') !== 'myShaarli_Columns') { if (!in_array($conf->get('resource.theme'), ['myShaarli', 'myShaarli_Columns'])) {
$error = 'myShaarli plugin: ' . $error = 'myShaarli plugin: ' .
'This plugin need modification of template. Use myShaarli theme for test.'; 'This plugin need modification of template. Use myShaarli theme for test.';
$conf->set('thumbnails.mode', 'none'); $conf->set('thumbnails.mode', 'none');
@ -51,7 +51,7 @@ function hook_myShaarli_render_header($data) {
'attr' => [ 'attr' => [
'href' => $conf->get('plugins.WebSite_URL'), 'href' => $conf->get('plugins.WebSite_URL'),
], ],
'html' => '<i class="fa fa-home" aria-hidden="true"></i> Site', 'html' => 'Site',
]; ];
$data['buttons_toolbar'][] = $button; $data['buttons_toolbar'][] = $button;
} }

2
tpl/myShaarli/changetag.html
View file

@ -5,6 +5,7 @@
</head> </head>
<body> <body>
{include="page.header"} {include="page.header"}
<section>
<div class="pure-g"> <div class="pure-g">
<div class="pure-u-lg-1-3 pure-u-1-24"></div> <div class="pure-u-lg-1-3 pure-u-1-24"></div>
<div id="addlink-form" class="page-form page-form-light pure-u-lg-1-3 pure-u-22-24"> <div id="addlink-form" class="page-form page-form-light pure-u-lg-1-3 pure-u-22-24">
@ -59,6 +60,7 @@
</form> </form>
</div> </div>
</div> </div>
</section>
{include="page.footer"} {include="page.footer"}
</body> </body>
</html> </html>

183
tpl/myShaarli/css/myShaarli.css
View file

@ -2,10 +2,6 @@
--background-color: #171414; --background-color: #171414;
--text-color: #fffbfb; --text-color: #fffbfb;
--text-color-inverse: #171414; --text-color-inverse: #171414;
.linklist-pages {
color: var(--text-color);
}
} }
[data-theme="light"] { [data-theme="light"] {
@ -23,13 +19,27 @@
--dark-main-color: var(--primary-darken); --dark-main-color: var(--primary-darken);
} }
html {
scroll-behavior: smooth;
}
body { body {
background-color: var(--background-color); background-color: var(--background-color);
color: var(--text-color); color: var(--text-color);
width: 80vw;
margin: 0 auto;
min-height: 100vh;
min-height: 100dvh;
text-rendering: optimizeSpeed;
font-size: var(--font-size);
} }
a { a {
transition: all .2s linear, border .2s linear; transition: .2s linear, border .2s linear;
}
h1 {
font-size: calc(var(--font-size) * 1.6);
} }
.shaarli-menu { .shaarli-menu {
@ -47,8 +57,9 @@ a {
} }
.subheader-form { .subheader-form {
background-color: var(--background-color-lighten); padding: calc(var(--default-space)*6) 0;
padding: 1.1em 0; width: 80vw;
border: var(--default-space) solid var(--text-color);
} }
.subheader-form { .subheader-form {
@ -72,6 +83,11 @@ a {
color: var(--primary); color: var(--primary);
} }
.linklist-pages a:hover,
.daily-entry .daily-entry-title a {
color: var(--primary-darken);
}
.linkcount { .linkcount {
color: var(--text-color); color: var(--text-color);
} }
@ -81,8 +97,10 @@ a {
} }
.linklist-filters { .linklist-filters {
color: var(--text-color);
padding-left: .3em; padding-left: .3em;
margin: unset;
color: var(--primary);
font-size: unset;
} }
.linklist-filters a:hover { .linklist-filters a:hover {
@ -109,6 +127,7 @@ a {
height: auto; height: auto;
font-size: 1em; font-size: 1em;
width: 4em; width: 4em;
color: var(--secondary-text-contrast);
} }
.linklist-item.private::before { .linklist-item.private::before {
@ -143,11 +162,13 @@ a {
.linklist-item-infos { .linklist-item-infos {
padding: 8px 8px 5px 8px; padding: 8px 8px 5px 8px;
grid-area: footer;
background: var(--background-secondary-color);
} }
.linklist-item-title .label-private { .linklist-item-title .label-private {
border: solid 1px var(--warning); border: solid 1px var(--warning);
color: var(--warning); color: var(--warning-darken);
} }
.linklist-item-infos .label a { .linklist-item-infos .label a {
@ -176,6 +197,7 @@ a {
.footer-container { .footer-container {
margin: 0; margin: 0;
color: var(--text-color); color: var(--text-color);
margin: calc(var(--default-space) *4) 0 0 0;
} }
.footer-container a { .footer-container a {
@ -198,10 +220,6 @@ a {
grid-area: main; grid-area: main;
} }
.linklist-item-infos {
grid-area: footer;
}
.grid-container, .grid-container,
.linklist-item { .linklist-item {
display: grid; display: grid;
@ -215,10 +233,6 @@ a {
padding: 10px; padding: 10px;
} }
.linklist-item-title h2 {
line-height: auto;
}
.page-form select, .page-form select,
input[type="text"], input[type="text"],
input[type="checkbox"] { input[type="checkbox"] {
@ -312,7 +326,7 @@ button:hover {
} }
.container { .container {
margin-top: 55px; margin-top: 0;
} }
.header-search, .header-search,
@ -332,3 +346,136 @@ button:hover {
.pure-menu-link { .pure-menu-link {
display: inline-block; display: inline-block;
} }
header {
background-color: transparent;
}
header h1 img {
display: inline;
}
header h1 {
color: var(--primary);
}
header svg {
fill: var(--primary-lighten);
vertical-align: middle;
}
header a {
transition: 0.4s;
}
header h1 a {
text-decoration: none;
color: var(--primary);
text-decoration: underline transparent;
}
header a:hover {
color: var(--primary-lighten);
text-decoration: underline var(--primary);
text-decoration-thickness: var(--default-space);
}
nav {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
font-family: initial;
}
nav h1,
nav ul {
margin: 0;
}
nav h1 img {
vertical-align: middle;
}
nav ul {
display: flex;
gap: calc(var(--default-space) * 2);
flex-wrap: wrap;
padding: 0;
}
nav li {
margin: var(--default-space);
list-style: none;
font-size: calc(var(--font-size) * 1.2);
}
nav li a {
color: var(--primary-lighten);
text-decoration: underline transparent;
}
nav li a:hover,
nav .active {
text-decoration: underline var(--primary-darken);
text-decoration-thickness: var(--default-space);
}
nav .fa {
padding-right: var(--default-space);
}
.searchform-block input[type="text"]::placeholder,
.page-form input[type="text"]::placeholder {
color: var(--text-color);
}
.searchform-block input[type="text"],
.page-form input[type="text"] {
color: var(--secondary-text-contrast);
}
.paging,
.linklist-item,
.page-visitor,
#pageError,
.login-form-container,
#addlink-form,
.page-form {
background-color: var(--light-background-color);
border: 1px solid var(--background-color-darken);
border-radius: calc(var(--default-space) * 1.2);
box-shadow: var(--box-shadow-light);
}
.paging {
color: var(--primary-lighten);
margin: 0 0 calc(var(--default-space) *4) 0;
}
section .pure-g,
.pluginform-container {
margin: 0 0 calc(var(--default-space) *4) 0;
}
.linklist-item-infos-dateblock a {
color: var(--primary);
}
.linklist-item-infos-dateblock a:hover {
text-decoration: underline var(--primary-darken);
color: var(--primary-darken);
}
.pinned-link,
.linklist-item-title .label-sticky {
color: var(--info-darken) !important;
}
.linklist-item-title .label-sticky {
border: solid 1px var(--info-darken);
}

1314
tpl/myShaarli/css/shaarli.min.css vendored
View file

File diff suppressed because one or more lines are too long

18
tpl/myShaarli/linklist.html
View file

@ -51,10 +51,11 @@
</form> </form>
{/loop} {/loop}
{include="linklist.paging"}
<div id="linklist"> <div id="linklist">
<div id="link-count-block" class="pure-g link-count-block"> <div id="link-count-block" class="pure-g link-count-block">
<div class="pure-u-lg-2-24 pure-u-1-24"></div> <div id="link-count-content" >
<div id="link-count-content" class="pure-u-lg-20-24 pure-u-22-24">
<div class="linkcount pure-u-lg-0 center"> <div class="linkcount pure-u-lg-0 center">
{if="!empty($linkcount)"} {if="!empty($linkcount)"}
<span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"} <span class="strong">{$linkcount}</span> {function="t('shaare', 'shaares', $linkcount)"}
@ -64,8 +65,6 @@
{/if} {/if}
</div> </div>
{include="linklist.paging"}
<div id="plugin_zone_start_linklist" class="plugin_zone"> <div id="plugin_zone_start_linklist" class="plugin_zone">
{loop="$plugin_start_zone"} {loop="$plugin_start_zone"}
{$value} {$value}
@ -116,8 +115,7 @@
{/if} {/if}
<div id="linklist-loop-block" class="pure-g"> <div id="linklist-loop-block" class="pure-g">
<div class="pure-u-lg-2-24 pure-u-1-24"></div> <div id="linklist-loop-content">
<div id="linklist-loop-content" class="pure-u-lg-20-24 pure-u-22-24">
{ignore}Set translation here, for performances{/ignore} {ignore}Set translation here, for performances{/ignore}
{$strPrivate=t('Private')} {$strPrivate=t('Private')}
{$strEdit=t('Edit')} {$strEdit=t('Edit')}
@ -230,7 +228,6 @@
</div> </div>
{/if} {/if}
{/if} {/if}
<a href="{$base_path}/shaare/{$value.shorturl}" title="{$strPermalink}">
{if="!$hide_timestamps || $is_logged_in"} {if="!$hide_timestamps || $is_logged_in"}
{$updated=$value.updated_timestamp ? $strEdited. format_date($value.updated) : $strPermalink} {$updated=$value.updated_timestamp ? $strEdited. format_date($value.updated) : $strPermalink}
<span class="linkdate" title="{$updated}"> <span class="linkdate" title="{$updated}">
@ -240,10 +237,12 @@
&middot; &middot;
</span> </span>
{/if} {/if}
<a href="{$base_path}/shaare/{$value.shorturl}" title="{$strPermalink}">
{$strPermalinkLc} {$strPermalinkLc}
</a> </a>
{if="$is_logged_in && $value.private"} {if="$is_logged_in && $value.private"}
&middot;
<a href="{$base_path}/admin/shaare/private/{$value.shorturl}?token={$token}" title="{$strShaarePrivate}"> <a href="{$base_path}/admin/shaare/private/{$value.shorturl}?token={$token}" title="{$strShaarePrivate}">
<i class="fa fa-share-alt"></i> <i class="fa fa-share-alt"></i>
</a> </a>
@ -311,12 +310,7 @@
{/loop} {/loop}
</div> </div>
<div id="linklist-paging-bottom-block" class="pure-g link-count-block">
<div class="pure-u-lg-2-24 pure-u-1-24"></div>
<div id="linklist-paging-bottom-content" class="pure-u-lg-20-24 pure-u-22-24">
{include="linklist.paging"} {include="linklist.paging"}
</div>
</div>
{include="page.footer"} {include="page.footer"}
<script src="{$asset_path}/js/thumbnails.min.js?v={$version_hash}#"></script> <script src="{$asset_path}/js/thumbnails.min.js?v={$version_hash}#"></script>

4
tpl/myShaarli/linklist.paging.html
View file

@ -1,4 +1,3 @@
<div class="linklist-paging">
<div class="paging pure-g"> <div class="paging pure-g">
<div class="linklist-filters pure-u-1-3"> <div class="linklist-filters pure-u-1-3">
<span class="linklist-filters-text pure-u-0 pure-u-lg-visible"> <span class="linklist-filters-text pure-u-0 pure-u-lg-visible">
@ -37,7 +36,6 @@
{/if} {/if}
</div> </div>
<div class="linklist-pages pure-u-1-3"> <div class="linklist-pages pure-u-1-3">
{if="$next_page_url"} {if="$next_page_url"}
<a href="{$next_page_url}" class="paging_newer"> <a href="{$next_page_url}" class="paging_newer">
@ -50,7 +48,6 @@
<i class="fa fa-arrow-circle-right"></i> <i class="fa fa-arrow-circle-right"></i>
</a> </a>
{/if} {/if}
</div> </div>
<div class="linksperpage pure-u-1-3"> <div class="linksperpage pure-u-1-3">
@ -71,4 +68,3 @@
</a> </a>
</div> </div>
</div> </div>
</div>

90
tpl/myShaarli/page.header.html
View file

@ -1,28 +1,15 @@
<div class="shaarli-menu pure-g" id="shaarli-menu"> <header>
<div class="pure-u-lg-0 pure-u-1"> <nav>
<div class="pure-menu"> <h1>
<header role="banner"> <img src="{$asset_path}/img/favicon_128.png#" loading="lazy" height="120px" alt="logo" />
<a href="{$titleLink}" class="pure-menu-link shaarli-title" id="shaarli-title-mobile"> <a href="{$titleLink}">
<img src="{$asset_path}/img/favicon_32.png#" width="16" height="16" class="head-logo" alt="logo" />
{$shaarlititle} {$shaarlititle}
</a> </a>
</header> </h1>
<a href="#" class="menu-toggle" id="menu-toggle" aria-label="{'Menu'|t}"><s class="bar" aria-hidden="true"></s><s class="bar" aria-hidden="true"></s></a> <ul>
</div>
</div>
<div class="pure-u-1">
<div class="pure-menu menu-transform pure-menu-horizontal pure-g">
<ul class="pure-menu-list pure-u-lg-5-6 pure-u-1">
<li class="pure-menu-item pure-u-0 pure-u-lg-visible">
<img src="{$asset_path}/img/logo_myShaarli.png#" width="120" height="45" class="head-logo" alt="logo" />
<a href="{$titleLink}" class="pure-menu-link shaarli-title" id="shaarli-title-desktop">
{$shaarlititle}
</a>
</li>
{loop="$plugins_header.buttons_toolbar"} {loop="$plugins_header.buttons_toolbar"}
<li class="pure-menu-item shaarli-menu-plugin"> <li>
<a <a
{$value.attr.class=isset($value.class) ? $value.attr.class . ' pure-menu-link' : 'pure-menu-link'}
{loop="$value.attr"} {loop="$value.attr"}
{$key}="{$value}" {$key}="{$value}"
{/loop}> {/loop}>
@ -31,74 +18,59 @@
</li> </li>
{/loop} {/loop}
{if="$is_logged_in || $openshaarli"} {if="$is_logged_in || $openshaarli"}
<li class="pure-menu-item"> <li>
<a href="{$base_path}/admin/add-shaare" class="pure-menu-link" id="shaarli-menu-shaare"> <a href="{$base_path}/admin/add-shaare">
<i class="fa fa-plus" aria-hidden="true"></i> {'Shaare'|t} {'Shaare'|t}
</a> </a>
</li> </li>
<li class="pure-menu-item" id="shaarli-menu-tools"> <li>
<a href="{$base_path}/admin/tools" class="pure-menu-link"> <a href="{$base_path}/admin/tools">
<i class="fa fa-cog" aria-hidden="true"></i> {'Tools'|t} {'Tools'|t}
</a> </a>
</li> </li>
{/if} {/if}
<li class="pure-menu-item" id="shaarli-menu-tags"> <li>
<a href="{$base_path}/tags/cloud" class="pure-menu-link"> <a href="{$base_path}/tags/cloud">
<i class="fa fa-cloud" aria-hidden="true"></i> {'Tag cloud'|t} {'Tag cloud'|t}
</a> </a>
</li> </li>
{if="$thumbnails_enabled"} {if="$thumbnails_enabled"}
<li class="pure-menu-item" id="shaarli-menu-picwall"> <li>
<a href="{$base_path}/picture-wall?{function="ltrim($searchcrits, '&')"}" class="pure-menu-link"> <a href="{$base_path}/picture-wall?{function="ltrim($searchcrits, '&')"}">
<i class="fa fa-picture-o" aria-hidden="true"></i> {'Picture wall'|t} {'Picture wall'|t}
</a> </a>
</li> </li>
{/if} {/if}
<li class="pure-menu-item pure-u-lg-0 shaarli-menu-mobile" id="shaarli-menu-mobile-rss">
<a href="{$base_path}/feed/{$feed_type}?{$searchcrits}" class="pure-menu-link">{'RSS Feed'|t}</a>
</li>
{if="$is_logged_in"}
<li class="pure-menu-item pure-u-lg-0 shaarli-menu-mobile" id="shaarli-menu-mobile-logout">
<a href="{$base_path}/admin/logout" class="pure-menu-link">{'Logout'|t}</a>
</li>
{else}
<li class="pure-menu-item pure-u-lg-0 shaarli-menu-mobile" id="shaarli-menu-mobile-login">
<a href="{$base_path}/login" class="pure-menu-link">{'Login'|t}</a>
</li>
{/if}
</ul> </ul>
<div class="header-buttons pure-u-lg-1-6 pure-u-0 pure-u-lg-visible"> <ul>
<ul class="pure-menu-list"> <li>
<li class="pure-menu-item"> <a href="#" title="Toggle Dark/Light theme" aria-label="Toggle Dark/Light theme" onclick="switchTheme();">
<a href="#" class="pure-menu-link" title="Toggle Dark/Light theme" aria-label="Toggle Dark/Light theme" onclick="switchTheme();">
<i class="fa fa-moon-o" aria-hidden="true"></i> <i class="fa fa-moon-o" aria-hidden="true"></i>
</a> </a>
</li> </li>
<li class="pure-menu-item" id="shaarli-menu-desktop-rss"> <li>
<a href="{$base_path}/feed/{$feed_type}?{$searchcrits}" class="pure-menu-link" title="{'RSS Feed'|t}" aria-label="{'RSS Feed'|t}"> <a href="{$base_path}/feed/{$feed_type}?{$searchcrits}" title="{'RSS Feed'|t}" aria-label="{'RSS Feed'|t}">
<i class="fa fa-rss" aria-hidden="true"></i> <i class="fa fa-rss" aria-hidden="true"></i>
</a> </a>
</li> </li>
{if="!$is_logged_in"} {if="!$is_logged_in"}
<li class="pure-menu-item" id="shaarli-menu-desktop-login"> <li>
<a href="{$base_path}/login" class="pure-menu-link" <a href="{$base_path}/login"
data-open-id="header-login-form" data-open-id="header-login-form"
id="login-button" aria-label="{'Login'|t}" title="{'Login'|t}"> id="login-button" aria-label="{'Login'|t}" title="{'Login'|t}">
<i class="fa fa-user" aria-hidden="true"></i> <i class="fa fa-user" aria-hidden="true"></i>
</a> </a>
</li> </li>
{else} {else}
<li class="pure-menu-item" id="shaarli-menu-desktop-logout"> <li>
<a href="{$base_path}/admin/logout" class="pure-menu-link" aria-label="{'Logout'|t}" title="{'Logout'|t}"> <a href="{$base_path}/admin/logout" aria-label="{'Logout'|t}" title="{'Logout'|t}">
<i class="fa fa-sign-out" aria-hidden="true"></i> <i class="fa fa-sign-out" aria-hidden="true"></i>
</a> </a>
</li> </li>
{/if} {/if}
</ul> </ul>
</div> </nav>
</div> </header>
</div>
</div>
<main id="content" class="container" role="main" data-theme="dark"> <main id="content" class="container" role="main" data-theme="dark">
<div id="search" class="subheader-form searchform-block header-search"> <div id="search" class="subheader-form searchform-block header-search">

4
tpl/myShaarli/picwall.html
View file

@ -16,8 +16,7 @@
{/if} {/if}
<div class="pure-g"> <div class="pure-g">
<div class="pure-u-lg-1-6 pure-u-1-24"></div> <div class="page-form page-visitor">
<div class="pure-u-lg-2-3 pure-u-22-24 page-form page-visitor">
{$countPics=count($linksToDisplay)} {$countPics=count($linksToDisplay)}
<h2 class="window-title">{'Picture Wall'|t} - {$countPics} {'pics'|t}</h2> <h2 class="window-title">{'Picture Wall'|t} - {$countPics} {'pics'|t}</h2>
@ -50,7 +49,6 @@
{/loop} {/loop}
</div> </div>
</div> </div>
<div class="pure-u-lg-1-6 pure-u-1-24"></div>
</div> </div>
{include="page.footer"} {include="page.footer"}

2
tpl/myShaarli/pluginsadmin.html
View file

@ -127,7 +127,7 @@
<input type="hidden" name="token" value="{$token}"> <input type="hidden" name="token" value="{$token}">
</form> </form>
<form action="{$base_path}/admin/plugins" method="POST"> <form action="{$base_path}/admin/plugins" method="POST" class="pluginform-container">
<div class="pure-g"> <div class="pure-g">
<div class="pure-u-lg-1-8 pure-u-1-24"></div> <div class="pure-u-lg-1-8 pure-u-1-24"></div>
<div class="pure-u-lg-3-4 pure-u-22-24 page-form page-form-light"> <div class="pure-u-lg-3-4 pure-u-22-24 page-form page-form-light">

4
tpl/myShaarli/tag.cloud.html
View file

@ -9,8 +9,7 @@
{include="tag.sort"} {include="tag.sort"}
<div class="pure-g"> <div class="pure-g">
<div class="pure-u-lg-1-6 pure-u-1-24"></div> <div class="page-form page-visitor">
<div class="pure-u-lg-2-3 pure-u-22-24 page-form page-visitor">
{$countTags=count($tags)} {$countTags=count($tags)}
<h2 class="window-title">{'Tag cloud'|t} - {$countTags} {'tags'|t}</h2> <h2 class="window-title">{'Tag cloud'|t} - {$countTags} {'tags'|t}</h2>
{if="!empty($search_tags)"} {if="!empty($search_tags)"}
@ -69,4 +68,3 @@
{include="page.footer"} {include="page.footer"}
</body> </body>
</html> </html>

3
tpl/myShaarli/tools.html
View file

@ -6,6 +6,7 @@
<body> <body>
{include="page.header"} {include="page.header"}
<section>
<div class="pure-g"> <div class="pure-g">
<div class="pure-u-lg-1-3 pure-u-1-24"></div> <div class="pure-u-lg-1-3 pure-u-1-24"></div>
<div class="pure-u-lg-1-3 pure-u-22-24 page-form page-form-light"> <div class="pure-u-lg-1-3 pure-u-22-24 page-form page-form-light">
@ -130,6 +131,8 @@
</div> </div>
</div> </div>
</section>
{include="page.footer"} {include="page.footer"}
<input type="hidden" id="bookmarklet-alert" <input type="hidden" id="bookmarklet-alert"
value="{'Drag this link to your bookmarks toolbar, or right-click it and choose Bookmark This Link'|t}"> value="{'Drag this link to your bookmarks toolbar, or right-click it and choose Bookmark This Link'|t}">