]> git.immae.eu Git - github/wallabag/wallabag.git/blame - src/Wallabag/CoreBundle/Resources/views/themes/material/public/css/main.css
Fix calendar in chromium and reducing the size of the calendar
[github/wallabag/wallabag.git] / src / Wallabag / CoreBundle / Resources / views / themes / material / public / css / main.css
CommitLineData
53e12188
AD
1/* ==========================================================================
2 Sommaire
3
4 0 = Common
5 1 = Nav
6 2 = Side-nav
7
8 2 = Layout
9 3 = Pictos
10 4 = Messages
11 5 = Article
12
13 6 = Media queries
14
15 ========================================================================== */
16
17
18/* ==========================================================================
19 0 = Common
20 ========================================================================== */
21
22body {
23 display: flex;
24 min-height: 100vh;
25 flex-direction: column;
26 background: #f0f0f0;
27}
28
29.border-bottom {
30 border-bottom: 1px solid #DDD;
31}
32
33nav, main, footer {
34 padding-left: 240px;
35}
36
37#main {
38 flex: 1 0 auto;
39}
40
41.results {
42 height: 1em;
43 line-height: 30px;
44}
45
46.results .nb-results, .results .pagination {
47 margin: 15px;
48 margin-bottom: 0;
49}
50
d75a9fa3
AD
51.pagination li {
52 padding: 0;
53}
54
55.pagination a {
56 padding: 0px 10px;
57 height: 30px;
58 display: block;
59}
60
53e12188
AD
61.page-footer .footer-copyright p {
62 display: inline;
63}
64
65.hidden {
66 display: none;
67}
68
727b39a9
AD
69.picker__date-display {
70 display: none;
71}
72
53e12188
AD
73/* ==========================================================================
74 1 = Nav
75 ========================================================================== */
76
06fdfd02
AD
77nav input {
78 color: #aaa;
79}
80
53e12188
AD
81.nav-wrapper .button-collapse {
82 padding: 0px 15px;
83}
84
85.nav-input {
86 display: none;
87}
88
89.nav-panels {
342f0cc5 90 overflow: hidden;
53e12188
AD
91}
92
93.nav-panel-buttom li {
94 max-height: 64px;
95}
96
97.nav-panel-buttom {
98 float: right;
99}
100
768303a5
AD
101.nav-panels {
102 transition: background 0.2s ease;
103}
104
946d6a51
AD
105.nav-panel-add .mdi-content-add,
106.nav-panel-search .mdi-action-search,
107.nav-panels .mdi-navigation-close {
768303a5
AD
108 color: #444 !important;
109}
110
0e765068
AD
111.nav-panels .action {
112 padding-left: 0.75rem;
113 font-size: 2.1rem;
114 white-space: nowrap;
115}
116
8ba913d8 117.nav-panels .input-field input {
06fdfd02
AD
118 display: block;
119 line-height: inherit;
120 padding-left: 4rem !important;
121 width: calc(100% - 8rem);
122}
123
8ba913d8 124.nav-panels .input-field input:focus {
06fdfd02
AD
125 background-color: #fff;
126 border: 0;
127 box-shadow: none;
128 color: #444;
129}
130
131.input-field.nav-panel-add label {
132 left: 1rem;
133}
134
135.input-field.nav-panel-add .mdi-navigation-close {
136 position: absolute;
137 top: 0;
138 right: 1rem;
139 color: transparent;
140 cursor: pointer;
141 font-size: 2rem;
142 transition: .3s color;
143}
144
392f4a26
AD
145#button_filters {
146 display: none;
147}
148
53e12188
AD
149/* ==========================================================================
150 2 = Side-nav
151 ========================================================================== */
152
153.side-nav.fixed a {
154 font-size: 13px;
155 line-height: 44px;
156 height: 44px;
157}
158
159.bold > a {
160 font-weight: bold;
161}
162
163.side-nav > li.logo {
164 line-height: 0;
165 text-align: center;
166}
167
168#main .logo a {
169 height: 100pt;
170}
171
172#main .logo img {
173 height: 100pt;
174 width: 100pt;
175}
176
177.side-nav li {
178 padding: 0px;
179}
180
181.side-nav a {
182 margin: 0px 1rem;
183}
184
392f4a26
AD
185/* ==========================================================================
186 * 3 = Filters slider
187 * ========================================================================== */
188
189#filters button {
190 padding: 0px;
191 width: 100%;
192}
193
d75a9fa3
AD
194.side-nav.fixed.right-aligned {
195 right: -250px;
196 left: auto !important;
727b39a9 197 overflow-y: visible;
d75a9fa3
AD
198}
199
53e12188
AD
200/* ==========================================================================
201 3 = Cards
202 ========================================================================== */
203
204main #content {
205 padding: 0px 0.5rem;
206}
207
208main ul.row {
209 padding: 0px 0.75rem;
210}
211
b17874a7 212.data .card .card-content {
342f0cc5
AD
213 height: 22em;
214 overflow: hidden;
53e12188
AD
215}
216
217.card .card-content .card-title {
218 line-height: 32px;
219}
220
221.card .card-content .estimatedTime {
222 margin-bottom: 10px;
223}
224
225.card .card-action .original {
226 line-height: 24px;
227}
228
229.card .card-action ul.links {
230 margin: 0;
231 font-size: 24px;
232 line-height: 24px;
233}
234
9948d899
AD
235.card .card-action a {
236 margin: 0;
237}
238
239.settings .div_tabs {
240 padding-bottom: 15px;
53e12188
AD
241}
242
b17874a7
AD
243.card.sw {
244 max-width: 370px;
245 margin-left: auto;
246 margin-right: auto;
247}
248
53e12188
AD
249/* ==========================================================================
250 4 = Article
251 ========================================================================== */
252
253#article {
254 font-size: 20px;
255 margin: 0px auto;
b69fc062 256 max-width: 40em;
53e12188
AD
257}
258
259.reader-mode {
260 width: 95px !important;
261 transition: width 0.2s ease;
262}
263
264.reader-mode:hover {
265 width: 240px !important;
266}
267
6fd3d82c
AD
268.reader-mode .collapsible-body {
269 height: 0;
270 overflow: hidden;
271}
272
273.reader-mode:hover .collapsible-body {
274 height: auto;
275}
276
53e12188
AD
277.reader-mode span {
278 opacity: 0;
279 transition: opacity 0.2s ease;
280}
281
282.reader-mode:hover span {
283 opacity: 1;
284}
285
fcb3faf1
AD
286.progress {
287 position:fixed;
288 top:0px;
289 width: 100%;
290 height: 3px;
291 margin: 0;
292 z-index: 9999;
293}
53e12188
AD
294/* ==========================================================================
295 6 = Media queries
296 ========================================================================== */
297
298 @media only screen and (max-width : 992px) {
299 header, main, footer {
300 padding-left: 0;
301 }
b17874a7
AD
302 nav, main, footer {
303 padding-left: 0;
304 }
305 .pagination {
306 width: auto;
307 }
308 .reader-mode {
309 width: 240px !important;
310 }
311 .reader-mode span {
312 opacity: 1;
313 }
53e12188 314 }
9948d899
AD
315
316@media only screen and (min-width : 993px) and (max-width : 1180px) {
317 .row .col.l1 {
318 width: 25%;
319 margin-left: 0; }
320 .row .col.l2 {
321 width: 33.33333%;
322 margin-left: 0; }
323 .row .col.l3 {
324 width: 41.66667%;
325 margin-left: 0; }
326 .row .col.l4 {
327 width: 50%;
328 margin-left: 0; }
329 .row .col.l5 {
330 width: 58.33333%;
331 margin-left: 0; }
332 .row .col.l6 {
333 width: 66.66667%;
334 margin-left: 0; }
335 .row .col.l7 {
336 width: 75%;
337 margin-left: 0; }
338 .row .col.l8 {
339 width: 83.33333%;
340 margin-left: 0; }
341 .row .col.l9 {
342 width: 91.66667%;
343 margin-left: 0; }
344 .row .col.l10 {
345 width: 100%;
346 margin-left: 0; }
347}
348
9948d899
AD
349@media only screen and (max-width : 350px) {
350 .nb-results {
351 display: none;
352 }
b69fc062 353}