aboutsummaryrefslogtreecommitdiffhomepage
path: root/tpl/default/css
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2016-02-21 20:30:36 +0100
committerArthurHoaro <arthur@hoa.ro>2016-08-07 12:17:36 +0200
commitdfb058c616a29cc712832e7e00a25e2f96eb44ce (patch)
treedce483cabe2d2ee886cf2187bac5079fb09ba271 /tpl/default/css
parent9fe38139b9bc9e9fb6736d8e539c217fb4e5b6f3 (diff)
downloadShaarli-dfb058c616a29cc712832e7e00a25e2f96eb44ce.tar.gz
Shaarli-dfb058c616a29cc712832e7e00a25e2f96eb44ce.tar.zst
Shaarli-dfb058c616a29cc712832e7e00a25e2f96eb44ce.zip
Shaarli header template
Diffstat (limited to 'tpl/default/css')
-rw-r--r--tpl/default/css/shaarli.css141
1 files changed, 104 insertions, 37 deletions
diff --git a/tpl/default/css/shaarli.css b/tpl/default/css/shaarli.css
index 7213c4a4..8deb008e 100644
--- a/tpl/default/css/shaarli.css
+++ b/tpl/default/css/shaarli.css
@@ -1,21 +1,64 @@
1/**
2 * General
3 */
1body { 4body {
2 background: url(../img/noise.png) #979797; 5
3} 6}
4 7
5header { 8.strong {
9 font-weight: bold;
10}
6 11
12.clear {
13 clear: both;
14}
15
16/**
17 * Extends Pure grids responsive to hide items.
18 * Use xx-0 to hide an item on xx screen.
19 * Display it at any level with xx-visible.
20 */
21.pure-u-0 { display: none !important; }
22@media screen and (min-width: 35.5em) {
23 .pure-u-sm-0 { display: none !important; }
24 .pure-u-sm-visible { display: inherit !important; }
25}
26@media screen and (min-width: 48em) {
27 .pure-u-md-0 { display: none !important; }
28 .pure-u-md-visible { display: inherit !important; }
29}
30@media screen and (min-width: 64em) {
31 .pure-u-lg-0 { display: none !important; }
32 .pure-u-lg-visible { display: inherit !important; }
33}
34@media screen and (min-width: 80em) {
35 .pure-u-xl-0 { display: none !important; }
36 .pure-u-xl-visible { display: inherit !important; }
7} 37}
8 38
9/** 39/**
10 * MENU 40 * MENU
11 **/ 41 **/
12.pure-menu { 42.shaarli-menu {
13 /*position: fixed;*/ 43 position: fixed;
14 background: #16a085; 44 top: 0;
45 width: 100%;
46 background: #1b926c;
47 -webkit-font-smoothing: antialiased;
48 /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
49 max-height: 2.1em;
50 transition: max-height 0.5s;
51 overflow: hidden;
52 z-index: 999;
53}
54
55.shaarli-menu.open {
56 max-height: 500px;
57 transition: max-height 0.75s;
15} 58}
16 59
17.pure-menu-selected { 60.pure-menu-selected {
18 background: #049372; 61 background: #1A694C;
19} 62}
20 63
21.pure-menu-link, 64.pure-menu-link,
@@ -27,24 +70,10 @@ header {
27 70
28.pure-menu-link:hover, 71.pure-menu-link:hover,
29.pure-menu-selected .pure-menu-link:hover { 72.pure-menu-selected .pure-menu-link:hover {
30 color: #fff; 73 color: #d1fff0;
31 background: transparent; 74 background: transparent;
32} 75}
33 76
34.shaarli-menu {
35 margin-bottom: 1em;
36 -webkit-font-smoothing: antialiased;
37 /* Hack to transition with auto height: http://stackoverflow.com/a/8331169/1484919 */
38 max-height: 2.1em;
39 transition: max-height 0.5s;
40 overflow: hidden;
41}
42
43.shaarli-menu.open {
44 max-height: 500px;
45 transition: max-height 0.75s;
46}
47
48.menu-toggle { 77.menu-toggle {
49 width: 34px; 78 width: 34px;
50 height: 34px; 79 height: 34px;
@@ -85,24 +114,62 @@ header {
85} 114}
86 115
87/** 116/**
88 * Extends Pure grids responsive to hide items. 117 * Header
89 * Use xx-0 to hide an item on xx screen.
90 * Display it at any level with xx-visible.
91 */ 118 */
92.pure-u-0 { display: none !important; } 119#header {
93@media screen and (min-width: 35.5em) { 120 width: 100%;
94 .pure-u-sm-0 { display: none !important; } 121 height: 150px;
95 .pure-u-sm-visible { display: inherit !important; } 122 background: url(../img/noise.png), #1fa67a url(../img/logo.png) no-repeat fixed center 2.5em;
96} 123}
97@media screen and (min-width: 48em) { 124
98 .pure-u-md-0 { display: none !important; } 125#header h1 {
99 .pure-u-md-visible { display: inherit !important; } 126 position: fixed;
127 float: left;
128 margin: 45px 0 0 0;
129 width: 44%;
130 height: 100px;
131 text-align: right;
100} 132}
101@media screen and (min-width: 64em) { 133
102 .pure-u-lg-0 { display: none !important; } 134#header h1 a, #header h1 a:visited {
103 .pure-u-lg-visible { display: inherit !important; } 135 /* https://css-tricks.com/centering-css-complete-guide/#vertical-inline-multiple */
136 display: -ms-flexbox;
137 display: flex;
138 flex-direction: column;
139 justify-content: center;
140
141 overflow: hidden;
142 height: 100px;
143 color: #b0ddce;
144 text-decoration: none;
145 z-index: 1;
146
147 /* TODO: font? */
104} 148}
105@media screen and (min-width: 80em) { 149
106 .pure-u-xl-0 { display: none !important; } 150#header h1 a:hover {
107 .pure-u-xl-visible { display: inherit !important; } 151 color: #d1fff0;
152}
153
154#linkcount {
155 position: fixed;
156 top: 40px;
157 right: 10px;
158 color: #b0ddce;
159 font-size: 0.8em;
160}
161
162#search {
163 position: fixed;
164 top: 55px;
165 right: 10px;
166 width: 44%;
167 text-align: right;
168}
169
170#content {
171 position: relative;
172 box-shadow: 0 -2px 1em #797979;
173 z-index: 2;
174 background: url(../img/noise.png) #979797;
108} \ No newline at end of file 175} \ No newline at end of file