aboutsummaryrefslogtreecommitdiffhomepage
diff options
context:
space:
mode:
-rw-r--r--.dev/.sasslintrc8
-rw-r--r--.gitignore1
-rw-r--r--assets/default/scss/shaarli.scss58
-rw-r--r--index.php1
-rw-r--r--plugins/default_colors/default_colors.css.template3
-rw-r--r--plugins/default_colors/default_colors.meta5
-rw-r--r--plugins/default_colors/default_colors.php68
7 files changed, 115 insertions, 29 deletions
diff --git a/.dev/.sasslintrc b/.dev/.sasslintrc
index ac406d7b..47c3145d 100644
--- a/.dev/.sasslintrc
+++ b/.dev/.sasslintrc
@@ -2,9 +2,11 @@ options:
2 max-warnings: 0 2 max-warnings: 0
3rules: 3rules:
4 property-sort-order: 4 property-sort-order:
5 - 1 5 - 0
6 - 6# Sort order rule does not work with CSS variables: https://github.com/sasstools/sass-lint/issues/1161
7 order: 'concentric' 7# - 1
8# -
9# order: 'concentric'
8 no-important: 10 no-important:
9 - 0 11 - 0
10 no-vendor-prefixes: 12 no-vendor-prefixes:
diff --git a/.gitignore b/.gitignore
index c54d9b69..b21d2118 100644
--- a/.gitignore
+++ b/.gitignore
@@ -28,6 +28,7 @@ phpdoc.xml
28 28
29# User plugin configuration 29# User plugin configuration
30plugins/*/config.php 30plugins/*/config.php
31plugins/default_colors/default_colors.css
31 32
32# HTML documentation 33# HTML documentation
33doc/html/ 34doc/html/
diff --git a/assets/default/scss/shaarli.scss b/assets/default/scss/shaarli.scss
index 9e5464a0..1d89f998 100644
--- a/assets/default/scss/shaarli.scss
+++ b/assets/default/scss/shaarli.scss
@@ -25,9 +25,15 @@ $warning-text: #97600d;
25$form-input-border: #d8d8d8; 25$form-input-border: #d8d8d8;
26$form-input-background: #eee; 26$form-input-background: #eee;
27 27
28:root {
29 --main-color: #{$main-green};
30 --background-color: #{$background-color};
31 --dark-main-color: #{$dark-green};
32}
33
28// General 34// General
29body { 35body {
30 background: $background-color; 36 background: var(--background-color);
31} 37}
32 38
33.strong { 39.strong {
@@ -143,7 +149,7 @@ body,
143} 149}
144 150
145.pure-alert-success { 151.pure-alert-success {
146 background-color: $main-green; 152 background-color: var(--main-color);
147} 153}
148 154
149.pure-alert-warning { 155.pure-alert-warning {
@@ -169,7 +175,7 @@ body,
169 top: 0; 175 top: 0;
170 transition: max-height .5s; 176 transition: max-height .5s;
171 z-index: 999; 177 z-index: 999;
172 background: $main-green; 178 background: var(--main-color);
173 width: 100%; 179 width: 100%;
174 // Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 180 // Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919
175 max-height: 45px; 181 max-height: 45px;
@@ -322,7 +328,7 @@ body,
322 button { 328 button {
323 border: 0; 329 border: 0;
324 border-radius: 2px; 330 border-radius: 2px;
325 background-color: $main-green; 331 background-color: var(--main-color);
326 padding: 4px 8px 6px; 332 padding: 4px 8px 6px;
327 color: $almost-white; 333 color: $almost-white;
328 } 334 }
@@ -358,7 +364,7 @@ body,
358.search-tagcloud { 364.search-tagcloud {
359 button { 365 button {
360 &:hover { 366 &:hover {
361 color: $background-color; 367 color: var(--background-color);
362 } 368 }
363 } 369 }
364} 370}
@@ -389,7 +395,7 @@ body,
389 position: fixed; 395 position: fixed;
390 visibility: hidden; 396 visibility: hidden;
391 z-index: 999; 397 z-index: 999;
392 background: $main-green; 398 background: var(--main-color);
393 padding: 5px 0; 399 padding: 5px 0;
394 width: 100%; 400 width: 100%;
395 height: 30px; 401 height: 30px;
@@ -411,7 +417,7 @@ body,
411 margin: 0 0 5px; 417 margin: 0 0 5px;
412 border: 1px solid $almost-white; 418 border: 1px solid $almost-white;
413 border-radius: 2px; 419 border-radius: 2px;
414 background: $main-green; 420 background: var(--main-color);
415 padding: 4px 0; 421 padding: 4px 0;
416 width: 100px; 422 width: 100px;
417 height: 28px; 423 height: 28px;
@@ -419,7 +425,7 @@ body,
419 425
420 &:hover { 426 &:hover {
421 background: $almost-white; 427 background: $almost-white;
422 color: $main-green; 428 color: var(--main-color);
423 } 429 }
424 } 430 }
425 431
@@ -558,7 +564,7 @@ body,
558 } 564 }
559 565
560 .filter-on { 566 .filter-on {
561 background: $main-green; 567 background: var(--main-color);
562 color: $light-green; 568 color: $light-green;
563 } 569 }
564 570
@@ -697,7 +703,7 @@ body,
697 703
698 &:visited { 704 &:visited {
699 .linklist-link { 705 .linklist-link {
700 color: $dark-green; 706 color: var(--dark-main-color);
701 } 707 }
702 } 708 }
703 709
@@ -708,7 +714,7 @@ body,
708 } 714 }
709 715
710 .linklist-link { 716 .linklist-link {
711 color: $main-green; 717 color: var(--main-color);
712 font-size: 1.1em; 718 font-size: 1.1em;
713 719
714 &:hover { 720 &:hover {
@@ -783,14 +789,14 @@ body,
783 789
784 a { 790 a {
785 text-decoration: none; 791 text-decoration: none;
786 color: $main-green; 792 color: var(--main-color);
787 793
788 &:hover { 794 &:hover {
789 color: $dark-grey; 795 color: $dark-grey;
790 } 796 }
791 797
792 &:visited { 798 &:visited {
793 color: $dark-green; 799 color: var(--dark-main-color);
794 } 800 }
795 } 801 }
796} 802}
@@ -888,7 +894,7 @@ body,
888 &::before { 894 &::before {
889 display: block; 895 display: block;
890 margin: 10px auto; 896 margin: 10px auto;
891 background: linear-gradient(to right, $background-color, $dark-grey, $background-color); 897 background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
892 width: 80%; 898 width: 80%;
893 height: 1px; 899 height: 1px;
894 content: ''; 900 content: '';
@@ -917,7 +923,7 @@ body,
917 margin: 15px 5px; 923 margin: 15px 5px;
918 border: 0; 924 border: 0;
919 box-shadow: 1px 1px 1px $form-input-border, -1px -1px 6px $form-input-border, -1px 1px 2px $form-input-border, 1px -1px 2px $form-input-border; 925 box-shadow: 1px 1px 1px $form-input-border, -1px -1px 6px $form-input-border, -1px 1px 2px $form-input-border, 1px -1px 2px $form-input-border;
920 background: $main-green; 926 background: var(--main-color);
921 min-width: 150px; 927 min-width: 150px;
922 height: 35px; 928 height: 35px;
923 vertical-align: center; 929 vertical-align: center;
@@ -941,7 +947,7 @@ body,
941 padding: 10px 0; 947 padding: 10px 0;
942 width: 100%; 948 width: 100%;
943 text-align: center; 949 text-align: center;
944 color: $main-green; 950 color: var(--main-color);
945 } 951 }
946 952
947 .window-subtitle { 953 .window-subtitle {
@@ -950,7 +956,7 @@ body,
950 956
951 a { 957 a {
952 text-decoration: none; 958 text-decoration: none;
953 color: $main-green; 959 color: var(--main-color);
954 font-weight: bold; 960 font-weight: bold;
955 961
956 &.button { 962 &.button {
@@ -1278,7 +1284,7 @@ form {
1278 1284
1279 .pure-button { 1285 .pure-button {
1280 &:hover { 1286 &:hover {
1281 background-color: $main-green; 1287 background-color: var(--main-color);
1282 background-image: none; 1288 background-image: none;
1283 color: $almost-white; 1289 color: $almost-white;
1284 } 1290 }
@@ -1362,7 +1368,7 @@ form {
1362 } 1368 }
1363 1369
1364 .validate-rename-tag { 1370 .validate-rename-tag {
1365 color: $main-green; 1371 color: var(--main-color);
1366 } 1372 }
1367} 1373}
1368 1374
@@ -1458,7 +1464,7 @@ form {
1458 &::after { 1464 &::after {
1459 display: block; 1465 display: block;
1460 margin: 10px auto; 1466 margin: 10px auto;
1461 background: linear-gradient(to right, $background-color, $dark-grey, $background-color); 1467 background: linear-gradient(to right, var(--background-color), $dark-grey, var(--background-color));
1462 width: 90%; 1468 width: 90%;
1463 height: 1px; 1469 height: 1px;
1464 content: ''; 1470 content: '';
@@ -1508,14 +1514,14 @@ form {
1508.daily-entry-description { 1514.daily-entry-description {
1509 a { 1515 a {
1510 text-decoration: none; 1516 text-decoration: none;
1511 color: $main-green; 1517 color: var(--main-color);
1512 1518
1513 &:hover { 1519 &:hover {
1514 text-shadow: 1px 1px $background-linklist-info; 1520 text-shadow: 1px 1px $background-linklist-info;
1515 } 1521 }
1516 1522
1517 &:visited { 1523 &:visited {
1518 color: $dark-green; 1524 color: var(--dark-main-color);
1519 } 1525 }
1520 } 1526 }
1521} 1527}
@@ -1572,12 +1578,12 @@ form {
1572} 1578}
1573 1579
1574.pure-button-shaarli { 1580.pure-button-shaarli {
1575 background-color: $main-green; 1581 background-color: var(--main-color);
1576} 1582}
1577 1583
1578.progressbar { 1584.progressbar {
1579 border-radius: 6px; 1585 border-radius: 6px;
1580 background-color: $main-green; 1586 background-color: var(--main-color);
1581 padding: 1px; 1587 padding: 1px;
1582 1588
1583 > div { 1589 > div {
@@ -1586,8 +1592,8 @@ form {
1586 -45deg, 1592 -45deg,
1587 $almost-white, 1593 $almost-white,
1588 $almost-white 6px, 1594 $almost-white 6px,
1589 $background-color 6px, 1595 var(--background-color) 6px,
1590 $background-color 12px 1596 var(--background-color) 12px
1591 ); 1597 );
1592 width: 0%; 1598 width: 0%;
1593 height: 10px; 1599 height: 10px;
diff --git a/index.php b/index.php
index 957d8d9a..f0f71dbb 100644
--- a/index.php
+++ b/index.php
@@ -1567,6 +1567,7 @@ function renderPage($conf, $pluginManager, $LINKSDB, $history, $sessionManager,
1567 if ($targetPage == Router::$PAGE_SAVE_PLUGINSADMIN) { 1567 if ($targetPage == Router::$PAGE_SAVE_PLUGINSADMIN) {
1568 try { 1568 try {
1569 if (isset($_POST['parameters_form'])) { 1569 if (isset($_POST['parameters_form'])) {
1570 $pluginManager->executeHooks('save_plugin_parameters', $_POST);
1570 unset($_POST['parameters_form']); 1571 unset($_POST['parameters_form']);
1571 foreach ($_POST as $param => $value) { 1572 foreach ($_POST as $param => $value) {
1572 $conf->set('plugins.'. $param, escape($value)); 1573 $conf->set('plugins.'. $param, escape($value));
diff --git a/plugins/default_colors/default_colors.css.template b/plugins/default_colors/default_colors.css.template
new file mode 100644
index 00000000..4b269baf
--- /dev/null
+++ b/plugins/default_colors/default_colors.css.template
@@ -0,0 +1,3 @@
1:root {
2 %s
3}
diff --git a/plugins/default_colors/default_colors.meta b/plugins/default_colors/default_colors.meta
new file mode 100644
index 00000000..108962c6
--- /dev/null
+++ b/plugins/default_colors/default_colors.meta
@@ -0,0 +1,5 @@
1description="Override default theme colors. Use any CSS valid color."
2parameters="DEFAULT_COLORS_MAIN;DEFAULT_COLORS_BACKGROUND;DEFAULT_COLORS_DARK_MAIN"
3parameter.DEFAULT_COLORS_MAIN="Main color (navbar green)"
4parameter.DEFAULT_COLORS_BACKGROUND="Background color (light grey)"
5parameter.DEFAULT_COLORS_DARK_MAIN="Dark main color (e.g. visited links)"
diff --git a/plugins/default_colors/default_colors.php b/plugins/default_colors/default_colors.php
new file mode 100644
index 00000000..b898814b
--- /dev/null
+++ b/plugins/default_colors/default_colors.php
@@ -0,0 +1,68 @@
1<?php
2
3/**
4 * Plugin default_colors.
5 *
6 * Allow users to easily overrides colors of the default theme.
7 */
8
9use Shaarli\Plugin\PluginManager;
10
11const DEFAULT_COLORS_PLACEHOLDERS = [
12 'DEFAULT_COLORS_MAIN',
13 'DEFAULT_COLORS_BACKGROUND',
14 'DEFAULT_COLORS_DARK_MAIN',
15];
16
17/**
18 * When plugin parameters are saved
19 */
20function hook_default_colors_save_plugin_parameters($data)
21{
22 $file = PluginManager::$PLUGINS_PATH . '/default_colors/default_colors.css';
23 $template = file_get_contents(PluginManager::$PLUGINS_PATH . '/default_colors/default_colors.css.template');
24 $content = '';
25 foreach (DEFAULT_COLORS_PLACEHOLDERS as $rule) {
26 $content .= ! empty($data[$rule])
27 ? default_colors_format_css_rule($data, $rule) .';'. PHP_EOL
28 : '';
29 }
30 file_put_contents($file, sprintf($template, $content));
31 return $data;
32}
33
34/**
35 * When linklist is displayed, include isso CSS file.
36 *
37 * @param array $data - header data.
38 *
39 * @return mixed - header data with isso CSS file added.
40 */
41function hook_default_colors_render_includes($data)
42{
43 $file = PluginManager::$PLUGINS_PATH . '/default_colors/default_colors.css';
44 if (file_exists($file )) {
45 $data['css_files'][] = $file ;
46 }
47
48 return $data;
49}
50
51/**
52 * This function is never called, but contains translation calls for GNU gettext extraction.
53 */
54function default_colors_translation()
55{
56 // meta
57 t('Override default theme colors. Use any CSS valid color.');
58 t('Main color (navbar green)');
59 t('Background color (light grey)');
60 t('Dark main color (e.g. visited links)');
61}
62
63function default_colors_format_css_rule($data, $parameter)
64{
65 $key = str_replace('DEFAULT_COLORS_', '', $parameter);
66 $key = str_replace('_', '-', strtolower($key)) .'-color';
67 return ' --'. $key .': '. $data[$parameter];
68}