aboutsummaryrefslogtreecommitdiffhomepage
path: root/tpl/default/css/pure-extras.css
diff options
context:
space:
mode:
authorArthurHoaro <arthur@hoa.ro>2017-01-14 15:52:17 +0100
committerArthurHoaro <arthur@hoa.ro>2017-02-27 20:01:54 +0100
commit402b03464812aaec76bc841ca7dacb775baf1e03 (patch)
tree5f5ce030a71ed1ac327f60911cb22f0ca87d21cd /tpl/default/css/pure-extras.css
parent009ce9358168cc06c76fc2f4162829e552e633a3 (diff)
downloadShaarli-402b03464812aaec76bc841ca7dacb775baf1e03.tar.gz
Shaarli-402b03464812aaec76bc841ca7dacb775baf1e03.tar.zst
Shaarli-402b03464812aaec76bc841ca7dacb775baf1e03.zip
Introduce the new default Shaarli template
Diffstat (limited to 'tpl/default/css/pure-extras.css')
-rw-r--r--tpl/default/css/pure-extras.css262
1 files changed, 262 insertions, 0 deletions
diff --git a/tpl/default/css/pure-extras.css b/tpl/default/css/pure-extras.css
new file mode 100644
index 00000000..d72fc94c
--- /dev/null
+++ b/tpl/default/css/pure-extras.css
@@ -0,0 +1,262 @@
1/* Images */
2.pure-img-eliptical {
3 border-radius: 80%;
4}
5.pure-img-rounded {
6 border-radius: 3px;
7}
8.pure-img-bordered {
9 background-color: #FFFFFF;
10 border: 1px solid rgba(0, 0, 0, 0.2);
11 padding: 5px;
12}
13
14
15/* Thumbnails */
16.pure-thumbnails li {
17 text-align: center;
18 display: inline-block;
19 *display: inline;
20 /* IE7 inline-block hack */
21 *zoom: 1;
22 vertical-align: top;
23 -webkit-box-sizing: border-box;
24 -moz-box-sizing: border-box;
25 box-sizing: border-box;
26 padding: 0.5em;
27}
28.pure-thumbnails {
29 list-style: none;
30 margin: 0;
31 padding: 0;
32}
33
34.pure-thumbnails a:focus {
35 outline: 0 none;
36}
37
38.pure-thumb {
39 display: block;
40 text-decoration: none;
41 color: inherit;
42}
43.pure-thumb img {
44 max-width: 100%;
45 margin-right: auto;
46 margin-left: auto;
47 vertical-align: middle; /* this will remove a thin line below the image */
48 -webkit-box-sizing: border-box;
49 -moz-box-sizing: border-box;
50 box-sizing: border-box;
51}
52
53.pure-thumb-bordered {
54 border: 1px solid rgba(0, 0, 0, 0.2);
55}
56.pure-thumb .caption {
57 text-align: left;
58 display: block;
59 margin: 0 5px 6px;
60
61}
62.pure-thumb .caption p {
63 margin: 0.3em 0 0;
64 font-size: 75%;
65}
66.pure-thumb .caption .caption-head {
67 font-weight: bold;
68 margin-top: 0.3em;
69}
70
71.pure-thumb-eliptical img {
72 border-radius: 50%;
73}
74.pure-thumb-rounded img {
75 border-radius: 3px;
76}
77
78/* Badges/Pills */
79.pure-badge,
80.pure-badge-error,
81.pure-badge-warning,
82.pure-badge-success,
83.pure-badge-info,
84.pure-badge-inverse {
85 padding: 0.35em 0.9em 0.35em;
86 background-color: #9D988E;
87 color: #fff;
88 display: inline-block;
89 font-size: 11.844px;
90 font-weight: bold;
91 line-height: 1.2em;
92 vertical-align: baseline;
93 white-space: nowrap;
94 border-radius: 20px;
95 margin: 0.2em;
96}
97.pure-badge-error {
98 background-color: #D13C38;
99}
100.pure-badge-warning {
101 background-color: #E78C05;
102}
103.pure-badge-success {
104 background-color: rgb(83, 180, 79);
105}
106.pure-badge-info {
107 background-color: rgb(18, 169, 218);
108}
109.pure-badge-inverse {
110 background-color: #4D370C;
111}
112
113/* Alerts */
114.pure-alert {
115 position: relative;
116 margin-bottom: 1em;
117 padding: 1em;
118 background: #ccc;
119 border-radius: 3px;
120}
121
122.pure-alert label {
123 display: inline-block;
124 *display: inline;
125 /* IE7 inline-block hack */
126 *zoom: 1;
127 white-space: nowrap;
128}
129
130.pure-alert {
131 background-color: rgb(209, 235, 238);
132 color: rgb(102, 131, 145);
133}
134.pure-alert-error {
135 background-color: #D13C38;
136 color: #fff;
137}
138
139.pure-alert-warning {
140 background-color: rgb(250, 191, 103);
141 color: rgb(151, 96, 13);
142}
143
144.pure-alert-success {
145 background-color: rgb(83, 180, 79);
146 color: #fff;
147}
148
149
150/* Contextual Modals */
151
152.pure-popover {
153 position: relative;
154 width: 300px;
155 background-color: #f0f1f3;
156 color: #2f3034;
157 padding: 15px;
158 border: 1px solid #bfc0c8;
159 border-radius: 2px;
160 box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
161 box-padding: border-box;
162 -webkit-background-clip: padding-box;
163 -moz-background-clip: padding;
164 background-clip: padding-box;
165}
166
167.pure-arrow-border, .pure-arrow {
168 border-style: solid;
169 border-width: 10px;
170 height:0;
171 width:0;
172 position:absolute;
173}
174
175
176/* POPOVER ARROW POSITIONING BOTTOM */
177
178.pure-popover.bottom .pure-arrow-border {
179 border-color: #bfc0c8 transparent transparent transparent;
180 bottom: -20px;
181 left: 50%;
182}
183.pure-popover.bottom .pure-arrow {
184 border-color: #f0f1f3 transparent transparent transparent;
185 bottom:-19px;
186 left: 50%;
187}
188
189/* POPOVER ARROW POSITIONING TOP*/
190
191.pure-popover.top .pure-arrow-border {
192 border-color: transparent transparent #bfc0c8 transparent;
193 top: -21px;
194 left: 50%;
195}
196.pure-popover.top .pure-arrow {
197 border-color: transparent transparent #f0f1f3 transparent;
198 top:-20px;
199 left: 50%;
200}
201
202/* POPOVER ARROW POSITIONING RIGHT*/
203
204.pure-popover.right .pure-arrow-border {
205 border-color: transparent transparent transparent #bfc0c8;
206 top: 45%;
207 right: -21px;
208}
209.pure-popover.right .pure-arrow {
210 border-color: transparent transparent transparent #f0f1f3;
211 top:45%;
212 right: -20px;
213}
214
215
216/* POPOVER ARROW POSITIONING LEFT*/
217
218.pure-popover.left .pure-arrow-border {
219 border-color: transparent #bfc0c8 transparent transparent;
220 top: 45%;
221 left: -21px;
222}
223.pure-popover.left .pure-arrow {
224 border-color: transparent #f0f1f3 transparent transparent;
225 top:45%;
226 left: -20px;
227}
228
229
230/* BUTTON IMPROVEMENTS */
231.pure-button-block {
232 display: block;
233}
234.pure-button-small {
235 padding: .6em 2em .65em;
236 font-size:70%;
237}
238.pure-button-large {
239 padding: .8em 5em .9em;
240 font-size:110%;
241}
242.pure-button-selected {
243 background-color: #345fcb;
244 color: #fff;
245}
246.pure-button-secondary {
247 background: rgb(161, 195, 238);
248 color: rgb(26, 88, 122);
249}
250.pure-button-error {
251 background: rgb(214, 86, 75);
252 color: white;
253}
254.pure-button-success {
255 background: rgb(54, 197, 71);
256 color: white;
257}
258.pure-button-warning {
259 background: rgb(255, 163, 0);
260 color: white;
261}
262