aboutsummaryrefslogtreecommitdiffhomepage
path: root/assets/default/scss
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2019-07-08 23:10:00 +0200
committerArthurHoaro <arthur@hoa.ro>2019-07-08 23:20:56 +0200
commita5a0c0399bcfea518330c4bad186da77f89ace6e (patch)
tree3b8d80e19d3337bf5243eff63e10ab3bed4b5c67 /assets/default/scss
parentc03c90a13e1356ca9cf40cc664547c49305cb24b (diff)
downloadShaarli-a5a0c0399bcfea518330c4bad186da77f89ace6e.tar.gz
Shaarli-a5a0c0399bcfea518330c4bad186da77f89ace6e.tar.zst
Shaarli-a5a0c0399bcfea518330c4bad186da77f89ace6e.zip
WIP - Plugin to override default template colors
* Adds a new core plugin to override default template colors * Adds a new hook when plugin settings are saved (`save_plugin_parameters`) * Use CSS native variables for main colors instead of SASS variables * Disable SASS sort order rules due to a bug in the plugin Fixes #1312
Diffstat (limited to 'assets/default/scss')
-rw-r--r--assets/default/scss/shaarli.scss58
1 files changed, 32 insertions, 26 deletions
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;