diff options
author | ArthurHoaro <arthur@hoa.ro> | 2019-07-20 09:36:39 +0200 |
---|---|---|
committer | GitHub <noreply@github.com> | 2019-07-20 09:36:39 +0200 |
commit | a9633359d10841d0d503d185e60a445b0da7b886 (patch) | |
tree | 6ae7bd751e126538ea35201bb73607e26d7caa76 /assets | |
parent | 01ba8a0700ea4730e6dc38c685cb6a9c0fbdcccd (diff) | |
parent | a8fb97a0c37b5008765fa73d30a678418011adc1 (diff) | |
download | Shaarli-a9633359d10841d0d503d185e60a445b0da7b886.tar.gz Shaarli-a9633359d10841d0d503d185e60a445b0da7b886.tar.zst Shaarli-a9633359d10841d0d503d185e60a445b0da7b886.zip |
Merge pull request #1317 from ArthurHoaro/feature/default-colors
Plugin to override default template colors
Diffstat (limited to 'assets')
-rw-r--r-- | assets/default/scss/shaarli.scss | 58 |
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 |
29 | body { | 35 | body { |
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; |