aboutsummaryrefslogtreecommitdiffhomepage
path: root/app
diff options
context:
space:
mode:
authorThomas Citharel <tcit@tcit.fr>2016-07-01 13:59:30 +0200
committerThomas Citharel <tcit@tcit.fr>2016-07-01 13:59:30 +0200
commit1d4d9aaf2971e5b4d00a28f935c815e88bcf1487 (patch)
tree2f7f541c4af9882d60534742290ab4e1024a534a /app
parent9dbd3e93028630ca808042387e88304020c80c73 (diff)
downloadwallabag-1d4d9aaf2971e5b4d00a28f935c815e88bcf1487.tar.gz
wallabag-1d4d9aaf2971e5b4d00a28f935c815e88bcf1487.tar.zst
wallabag-1d4d9aaf2971e5b4d00a28f935c815e88bcf1487.zip
Bring tags on entries view to baggy
Also, a couple of UI improvement and CSS fixing
Diffstat (limited to 'app')
-rwxr-xr-xapp/Resources/static/themes/baggy/css/main.css113
-rwxr-xr-xapp/Resources/static/themes/material/css/main.css87
2 files changed, 126 insertions, 74 deletions
diff --git a/app/Resources/static/themes/baggy/css/main.css b/app/Resources/static/themes/baggy/css/main.css
index d46fae1a..7ffaa12c 100755
--- a/app/Resources/static/themes/baggy/css/main.css
+++ b/app/Resources/static/themes/baggy/css/main.css
@@ -84,7 +84,7 @@ a {
84} 84}
85 85
86a.nostyle { 86a.nostyle {
87 text-decoration: none; 87 text-decoration: none;
88} 88}
89 89
90a:hover, 90a:hover,
@@ -146,7 +146,6 @@ input[type="submit"] {
146 cursor: pointer; 146 cursor: pointer;
147 background-color: #000; 147 background-color: #000;
148 color: #fff; 148 color: #fff;
149 border: 0;
150 padding: 0.5em 1em; 149 padding: 0.5em 1em;
151 display: inline-block; 150 display: inline-block;
152 border: 1px solid #000; 151 border: 1px solid #000;
@@ -202,7 +201,7 @@ h2::after {
202} 201}
203 202
204#main { 203#main {
205 margin-left: 13em; 204 margin-left: 12em;
206 position: relative; 205 position: relative;
207 z-index: 10; 206 z-index: 10;
208 padding-right: 5%; 207 padding-right: 5%;
@@ -287,7 +286,6 @@ h2::after {
287 286
288#display-mode { 287#display-mode {
289 float: right; 288 float: right;
290 vertical-align: middle;
291 margin-top: 10px; 289 margin-top: 10px;
292 margin-bottom: 10px; 290 margin-bottom: 10px;
293 opacity: 0.5; 291 opacity: 0.5;
@@ -359,6 +357,46 @@ footer a {
359 margin-left: 0 !important; 357 margin-left: 0 !important;
360} 358}
361 359
360.card-entry-labels {
361 position: absolute;
362 top: 100px;
363 left: -1em;
364 z-index: 90;
365 max-width: 50%;
366 padding-left: 0;
367}
368
369.card-entry-labels li {
370 margin: 10px 10px 10px auto;
371 padding: 5px 12px 5px 25px;
372 background-color: rgba(0, 0, 0, 0.6);
373 border-radius: 0 3px 3px 0;
374 color: #fff;
375 cursor: default;
376 max-height: 2em;
377 overflow: hidden;
378 text-overflow: ellipsis;
379 white-space: nowrap;
380}
381
382.card-entry-tags {
383 max-height: 2em;
384 overflow-y: hidden;
385 padding: 0;
386}
387
388.card-entry-tags li {
389 display: inline-block;
390 margin: 0 5px;
391 padding: 5px 12px;
392 background-color: rgba(0, 0, 0, 0.6);
393 border-radius: 3px;
394 max-height: 2em;
395 overflow: hidden;
396 text-overflow: ellipsis;
397 color: #fff;
398}
399
362.list-entries + .results { 400.list-entries + .results {
363 margin-bottom: 2em; 401 margin-bottom: 2em;
364} 402}
@@ -383,10 +421,11 @@ footer a {
383 width: 32%; 421 width: 32%;
384 margin-bottom: 1.5em; 422 margin-bottom: 1.5em;
385 vertical-align: top; 423 vertical-align: top;
386 margin-left: 1.5%; 424 margin-right: 1%;
387 position: relative; 425 position: relative;
388 overflow: hidden; 426 overflow: hidden;
389 padding: 1.5em 1.5em 3em 1.5em; 427 padding: 1.5em 1.5em 3em;
428 height: 440px;
390} 429}
391 430
392.entry::before { 431.entry::before {
@@ -394,7 +433,7 @@ footer a {
394 width: 0; 433 width: 0;
395 height: 0; 434 height: 0;
396 border-style: solid; 435 border-style: solid;
397 border-color: transparent transparent #000 transparent; 436 border-color: transparent transparent #000;
398 border-width: 10px; 437 border-width: 10px;
399 position: absolute; 438 position: absolute;
400 bottom: 0.3em; 439 bottom: 0.3em;
@@ -442,6 +481,9 @@ footer a {
442 text-transform: none; 481 text-transform: none;
443 margin-bottom: 0; 482 margin-bottom: 0;
444 line-height: 1.2; 483 line-height: 1.2;
484 text-align: justify;
485 -moz-text-align-last: center;
486 text-align-last: center;
445} 487}
446 488
447.entry h2::after { 489.entry h2::after {
@@ -461,7 +503,9 @@ footer a {
461} 503}
462 504
463img.preview { 505img.preview {
464 max-width: 100%; 506 max-width: calc(100% + 3em);
507 left: -1.5em;
508 position: relative;
465} 509}
466 510
467.entry p { 511.entry p {
@@ -653,7 +697,7 @@ div.pagination ul .current {
653.add-to-wallabag-link-after { 697.add-to-wallabag-link-after {
654 background-color: #000; 698 background-color: #000;
655 color: #fff; 699 color: #fff;
656 padding: 0 3px 2px 3px; 700 padding: 0 3px 2px;
657} 701}
658 702
659a.add-to-wallabag-link-after { 703a.add-to-wallabag-link-after {
@@ -682,7 +726,7 @@ a.add-to-wallabag-link-after::after {
682} 726}
683 727
684.btn-clickable { 728.btn-clickable {
685 cursor: pointer; 729 cursor: pointer;
686} 730}
687 731
688/* ========================================================================== 732/* ==========================================================================
@@ -706,6 +750,7 @@ a.add-to-wallabag-link-after::after {
706 font-style: normal; 750 font-style: normal;
707 font-weight: 400; 751 font-weight: 400;
708 src: url(../fonts/MaterialIcons-Regular.eot); 752 src: url(../fonts/MaterialIcons-Regular.eot);
753
709 /* For IE6-8 */ 754 /* For IE6-8 */
710 src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/MaterialIcons-Regular.woff) format("woff"), url(../fonts/MaterialIcons-Regular.ttf) format("truetype"); 755 src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/MaterialIcons-Regular.woff) format("woff"), url(../fonts/MaterialIcons-Regular.ttf) format("truetype");
711} 756}
@@ -727,6 +772,7 @@ a.add-to-wallabag-link-after::after {
727 772
728 /* Support for all WebKit browsers. */ 773 /* Support for all WebKit browsers. */
729 -webkit-font-smoothing: antialiased; 774 -webkit-font-smoothing: antialiased;
775
730 /* Support for Safari and Chrome. */ 776 /* Support for Safari and Chrome. */
731 text-rendering: optimizeLegibility; 777 text-rendering: optimizeLegibility;
732 778
@@ -1045,30 +1091,30 @@ pre code {
1045} 1091}
1046 1092
1047#download-form { 1093#download-form {
1048 position: fixed; 1094 position: fixed;
1049 width: 10%; 1095 width: 10%;
1050 height: 100%; 1096 height: 100%;
1051 top: 0; 1097 top: 0;
1052 right: 0; 1098 right: 0;
1053 background-color: #fff; 1099 background-color: #fff;
1054 padding: 15px; 1100 padding: 15px;
1055 padding-right: 30px; 1101 padding-right: 30px;
1056 padding-top: 30px; 1102 padding-top: 30px;
1057 border-left: 1px #333 solid; 1103 border-left: 1px #333 solid;
1058 z-index: 12; 1104 z-index: 12;
1059 min-width: 200px; 1105 min-width: 200px;
1060} 1106}
1061 1107
1062#download-form li { 1108#download-form li {
1063 display: block; 1109 display: block;
1064 padding: .5em 2em .5em 1em; 1110 padding: 0.5em 2em 0.5em 1em;
1065 color: #fff; 1111 color: #fff;
1066 position: relative; 1112 position: relative;
1067 text-transform: uppercase; 1113 text-transform: uppercase;
1068 text-decoration: none; 1114 text-decoration: none;
1069 font-weight: 400; 1115 font-weight: 400;
1070 font-family: PT Sans,sans-serif; 1116 font-family: PT Sans, sans-serif;
1071 transition: all .5s ease; 1117 transition: all 0.5s ease;
1072} 1118}
1073 1119
1074/* ========================================================================== 1120/* ==========================================================================
@@ -1148,7 +1194,6 @@ pre code {
1148 } 1194 }
1149 1195
1150 .login .logo { 1196 .login .logo {
1151 width: auto;
1152 height: auto; 1197 height: auto;
1153 top: 0.5em; 1198 top: 0.5em;
1154 width: 75px; 1199 width: 75px;
@@ -1197,6 +1242,10 @@ pre code {
1197 margin-top: 3em; 1242 margin-top: 3em;
1198 } 1243 }
1199 1244
1245 .card-entry-labels {
1246 display: none;
1247 }
1248
1200 #article_toolbar .topPosF { 1249 #article_toolbar .topPosF {
1201 display: none; 1250 display: none;
1202 } 1251 }
diff --git a/app/Resources/static/themes/material/css/main.css b/app/Resources/static/themes/material/css/main.css
index 053dfd91..2ffe0b46 100755
--- a/app/Resources/static/themes/material/css/main.css
+++ b/app/Resources/static/themes/material/css/main.css
@@ -34,6 +34,7 @@
34 font-style: normal; 34 font-style: normal;
35 font-weight: 400; 35 font-weight: 400;
36 src: url(../fonts/MaterialIcons-Regular.eot); 36 src: url(../fonts/MaterialIcons-Regular.eot);
37
37 /* For IE6-8 */ 38 /* For IE6-8 */
38 src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/MaterialIcons-Regular.woff) format("woff"), url(../fonts/MaterialIcons-Regular.ttf) format("truetype"); 39 src: local("Material Icons"), local("MaterialIcons-Regular"), url(../fonts/MaterialIcons-Regular.woff2) format("woff2"), url(../fonts/MaterialIcons-Regular.woff) format("woff"), url(../fonts/MaterialIcons-Regular.ttf) format("truetype");
39} 40}
@@ -55,6 +56,7 @@
55 56
56 /* Support for all WebKit browsers. */ 57 /* Support for all WebKit browsers. */
57 -webkit-font-smoothing: antialiased; 58 -webkit-font-smoothing: antialiased;
59
58 /* Support for Safari and Chrome. */ 60 /* Support for Safari and Chrome. */
59 text-rendering: optimizeLegibility; 61 text-rendering: optimizeLegibility;
60 62
@@ -123,11 +125,11 @@ main,
123} 125}
124 126
125.pagination { 127.pagination {
126 float: right; 128 float: right;
127} 129}
128 130
129.pagination ul { 131.pagination ul {
130 margin: 0 !important; 132 margin: 0 !important;
131} 133}
132 134
133.pagination li { 135.pagination li {
@@ -141,8 +143,8 @@ main,
141} 143}
142 144
143.pagination .disabled { 145.pagination .disabled {
144 margin-right: 10px; 146 margin-right: 10px;
145 margin-left: 10px; 147 margin-left: 10px;
146} 148}
147 149
148div.pagination ul .prev.disabled, 150div.pagination ul .prev.disabled,
@@ -151,10 +153,10 @@ div.pagination ul .next.disabled {
151} 153}
152 154
153.pagination li.active span { 155.pagination li.active span {
154 padding: 0px 10px; 156 padding: 0 10px;
155 height: 30px; 157 height: 30px;
156 display: block; 158 display: block;
157 color: #fff; 159 color: #fff;
158} 160}
159 161
160.page-footer .footer-copyright p { 162.page-footer .footer-copyright p {
@@ -266,9 +268,9 @@ nav input {
266 268
267.side-nav .collapsible-header, 269.side-nav .collapsible-header,
268.side-nav.fixed .collapsible-header { 270.side-nav.fixed .collapsible-header {
269 height: 45px; 271 height: 45px;
270 line-height: 44px; 272 line-height: 44px;
271 padding: 0 20px; 273 padding: 0 20px;
272} 274}
273 275
274.bold > a { 276.bold > a {
@@ -343,41 +345,41 @@ main ul.row {
343} 345}
344 346
345.card .card-entry-labels { 347.card .card-entry-labels {
346 position: absolute; 348 position: absolute;
347 top:10px; 349 top: 10px;
348 z-index: 90; 350 z-index: 90;
349 max-width: 50%; 351 max-width: 50%;
350} 352}
351 353
352.card .card-entry-labels li { 354.card .card-entry-labels li {
353 margin: 10px 10px 10px auto; 355 margin: 10px 10px 10px auto;
354 padding: 5px 12px 5px 16px; 356 padding: 5px 12px 5px 16px;
355 background-color: rgba(0,151,167,0.85); 357 background-color: rgba(0, 151, 167, 0.85);
356 border-radius: 0 3px 3px 0; 358 border-radius: 0 3px 3px 0;
357 color: #fff; 359 color: #fff;
358 cursor: default; 360 cursor: default;
359 max-height: 2em; 361 max-height: 2em;
360 overflow: hidden; 362 overflow: hidden;
361 text-overflow: ellipsis; 363 text-overflow: ellipsis;
362 white-space: nowrap; 364 white-space: nowrap;
363} 365}
364 366
365.card .card-entry-labels-hidden { 367.card .card-entry-labels-hidden {
366 margin-top: 5px; 368 margin-top: 5px;
367} 369}
368 370
369.card .card-entry-labels-hidden li { 371.card .card-entry-labels-hidden li {
370 display: inline-block; 372 display: inline-block;
371 background-color: rgba(0,151,167,0.85); 373 background-color: rgba(0, 151, 167, 0.85);
372 margin: 0 5px; 374 margin: 0 5px;
373 padding: 5px 12px; 375 padding: 5px 12px;
374 border-radius: 3px; 376 border-radius: 3px;
375 color: #fff; 377 color: #fff;
376 max-height: 2em; 378 max-height: 2em;
377 max-width: calc(100% - 15px); 379 max-width: calc(100% - 15px);
378 overflow: hidden; 380 overflow: hidden;
379 text-overflow: ellipsis; 381 text-overflow: ellipsis;
380 white-space: nowrap; 382 white-space: nowrap;
381} 383}
382 384
383.card .card-content .estimatedTime { 385.card .card-content .estimatedTime {
@@ -491,7 +493,7 @@ main ul.row {
491} 493}
492 494
493#article aside .chip { 495#article aside .chip {
494 background-color: rgba(0,151,167,0.85); 496 background-color: rgba(0, 151, 167, 0.85);
495 color: #fff; 497 color: #fff;
496 padding: 0 15px 0 10px; 498 padding: 0 15px 0 10px;
497} 499}
@@ -517,7 +519,7 @@ main ul.row {
517 } 519 }
518 .pagination { 520 .pagination {
519 width: auto; 521 width: auto;
520 } 522 }
521 .reader-mode { 523 .reader-mode {
522 width: 240px !important; 524 width: 240px !important;
523 } 525 }
@@ -534,7 +536,8 @@ main ul.row {
534 .indicator { 536 .indicator {
535 display: none; 537 display: none;
536 } 538 }
537 .pagination li.prev, .pagination li.next { 539 .pagination li.prev,
540 .pagination li.next {
538 width: auto; 541 width: auto;
539 } 542 }
540} 543}
@@ -633,8 +636,8 @@ footer [class*=" icon-"] {
633 padding-right: 10px; 636 padding-right: 10px;
634} 637}
635 638
636footer [class^="icon-"]::hover, 639footer [class^="icon-"]:hover,
637footer [class*=" icon-"]::hover { 640footer [class*=" icon-"]:hover {
638 text-shadow: 0 0 10px rgba(0, 0, 0, 0.3); 641 text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
639} 642}
640 643