mirror of
https://github.com/wallabag/wallabag.git
synced 2024-05-28 22:18:05 +00:00
c146f6940a
* ES6 all the things ! * ESLint checks everything * CSS fixes (use stylelint) * Fix #2231
701 lines
11 KiB
CSS
Executable file
701 lines
11 KiB
CSS
Executable file
/* ==========================================================================
|
|
Sommaire
|
|
|
|
0 = Common
|
|
1 = Nav
|
|
2 = Side-nav
|
|
3 = Filters slider
|
|
4 = Cards
|
|
5 = Article
|
|
6 = Media queries
|
|
7 = Font
|
|
8 = Others
|
|
|
|
========================================================================== */
|
|
|
|
/* ==========================================================================
|
|
0 = Common
|
|
========================================================================== */
|
|
|
|
@font-face {
|
|
font-family: icomoon;
|
|
src: url("../fonts/icomoon.eot");
|
|
src:
|
|
url("../fonts/icomoon.eot#iefix") format("embedded-opentype"),
|
|
url("../fonts/icomoon.ttf") format("truetype"),
|
|
url("../fonts/icomoon.woff") format("woff"),
|
|
url("../fonts/icomoon.svg#icomoon") format("svg");
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
@font-face {
|
|
font-family: 'Material Icons';
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
src: url(../fonts/MaterialIcons-Regular.eot);
|
|
|
|
/* For IE6-8 */
|
|
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");
|
|
}
|
|
|
|
.material-icons {
|
|
font-family: 'Material Icons';
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
font-size: 24px; /* Preferred icon size */
|
|
width: 1em;
|
|
height: 1em;
|
|
display: inline-block;
|
|
line-height: 1;
|
|
text-transform: none;
|
|
letter-spacing: normal;
|
|
word-wrap: normal;
|
|
white-space: nowrap;
|
|
direction: ltr;
|
|
|
|
/* Support for all WebKit browsers. */
|
|
-webkit-font-smoothing: antialiased;
|
|
|
|
/* Support for Safari and Chrome. */
|
|
text-rendering: optimizeLegibility;
|
|
|
|
/* Support for Firefox. */
|
|
-moz-osx-font-smoothing: grayscale;
|
|
|
|
/* Support for IE. */
|
|
font-feature-settings: 'liga';
|
|
}
|
|
|
|
[class^="icon-"],
|
|
[class*=" icon-"] {
|
|
font-family: icomoon;
|
|
speak: none;
|
|
font-style: normal;
|
|
font-weight: normal;
|
|
font-variant: normal;
|
|
text-transform: none;
|
|
line-height: 1;
|
|
|
|
/* Better Font Rendering =========== */
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
min-height: 100vh;
|
|
flex-direction: column;
|
|
background: #f0f0f0;
|
|
}
|
|
|
|
body.login main {
|
|
padding: 0;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.border-bottom {
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
nav,
|
|
main,
|
|
footer {
|
|
padding-left: 240px;
|
|
}
|
|
|
|
main,
|
|
#content,
|
|
.valign-wrapper {
|
|
height: 100%;
|
|
}
|
|
|
|
#main {
|
|
flex: 1 0 auto;
|
|
}
|
|
|
|
.results {
|
|
height: 1em;
|
|
line-height: 30px;
|
|
}
|
|
|
|
.results .nb-results,
|
|
.results .pagination {
|
|
margin: 15px;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.pagination {
|
|
float: right;
|
|
}
|
|
|
|
.pagination ul {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.pagination li {
|
|
padding: 0;
|
|
}
|
|
|
|
.pagination a {
|
|
padding: 0 10px;
|
|
height: 30px;
|
|
display: block;
|
|
}
|
|
|
|
.pagination .disabled {
|
|
margin-right: 10px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
div.pagination ul .prev.disabled,
|
|
div.pagination ul .next.disabled {
|
|
display: none;
|
|
}
|
|
|
|
.pagination li.active span {
|
|
padding: 0 10px;
|
|
height: 30px;
|
|
display: block;
|
|
color: #fff;
|
|
}
|
|
|
|
.page-footer .footer-copyright p {
|
|
display: inline;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
.picker__date-display {
|
|
display: none;
|
|
}
|
|
|
|
footer.page-footer {
|
|
margin-top: 10px;
|
|
padding-top: 0;
|
|
}
|
|
|
|
footer .row {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
1 = Nav
|
|
========================================================================== */
|
|
|
|
nav input {
|
|
color: #aaa;
|
|
}
|
|
|
|
.nav-wrapper .button-collapse {
|
|
padding: 0 15px;
|
|
}
|
|
|
|
.nav-input {
|
|
display: none;
|
|
}
|
|
|
|
.nav-panels {
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nav-panel-buttom li {
|
|
max-height: 64px;
|
|
}
|
|
|
|
.nav-panels {
|
|
transition: background 0.2s ease;
|
|
}
|
|
|
|
.nav-panel-add .add,
|
|
.nav-panel-search .search,
|
|
.nav-panels .close {
|
|
color: #444 !important;
|
|
}
|
|
|
|
.nav-panels .action {
|
|
padding-left: 0.75rem;
|
|
font-size: 2.1rem;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.nav-panels .input-field input {
|
|
display: block;
|
|
line-height: inherit;
|
|
padding-left: 4rem !important;
|
|
width: calc(100% - 8rem);
|
|
}
|
|
|
|
.nav-panels .input-field input:focus {
|
|
background-color: #fff;
|
|
border: 0;
|
|
box-shadow: none;
|
|
color: #444;
|
|
}
|
|
|
|
.input-field.nav-panel-add label {
|
|
left: 1rem;
|
|
}
|
|
|
|
.input-field.nav-panel-add .close {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 1rem;
|
|
color: transparent;
|
|
cursor: pointer;
|
|
font-size: 2rem;
|
|
transition: 0.3s color;
|
|
}
|
|
|
|
#button_filters {
|
|
display: none;
|
|
}
|
|
|
|
#button_export {
|
|
display: none;
|
|
}
|
|
|
|
.input-field.nav-panel-add,
|
|
.input-field.nav-panel-add form {
|
|
height: 100%;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
2 = Side-nav
|
|
========================================================================== */
|
|
|
|
.side-nav.fixed a {
|
|
font-size: 13px;
|
|
line-height: 44px;
|
|
height: 44px;
|
|
}
|
|
|
|
.side-nav .collapsible-header,
|
|
.side-nav.fixed .collapsible-header {
|
|
height: 45px;
|
|
line-height: 44px;
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.bold > a {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.side-nav > li.logo {
|
|
line-height: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
#main .logo a {
|
|
height: 100pt;
|
|
}
|
|
|
|
#main .logo img {
|
|
height: 100pt;
|
|
width: 100pt;
|
|
}
|
|
|
|
#main .logo:hover {
|
|
background: transparent;
|
|
}
|
|
|
|
.side-nav li {
|
|
padding: 0;
|
|
}
|
|
|
|
.side-nav a {
|
|
margin: 0 1rem;
|
|
}
|
|
|
|
span.numberItems {
|
|
float: right;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
* 3 = Filters slider
|
|
* ========================================================================== */
|
|
|
|
#filters button {
|
|
padding: 0;
|
|
width: 100%;
|
|
}
|
|
|
|
.side-nav.fixed.right-aligned {
|
|
right: -250px;
|
|
left: auto !important;
|
|
overflow-y: visible;
|
|
}
|
|
|
|
#filters div.with-checkbox {
|
|
height: 3rem;
|
|
margin-top: 0;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
4 = Cards
|
|
========================================================================== */
|
|
|
|
main #content {
|
|
padding: 0 0.5rem;
|
|
}
|
|
|
|
main ul.row {
|
|
padding: 0 0.75rem;
|
|
}
|
|
|
|
.data .card .card-body {
|
|
height: 22em;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.card .card-content .card-title {
|
|
line-height: 32px;
|
|
max-height: 64px;
|
|
display: block;
|
|
}
|
|
|
|
.card .card-content i.right,
|
|
.card .card-reveal i.right {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.card .card-entry-labels {
|
|
position: absolute;
|
|
top: 10px;
|
|
z-index: 90;
|
|
max-width: 50%;
|
|
}
|
|
|
|
.card .card-entry-labels li {
|
|
margin: 10px 10px 10px auto;
|
|
padding: 5px 12px 5px 16px;
|
|
background-color: rgba(0, 151, 167, 0.85);
|
|
border-radius: 0 3px 3px 0;
|
|
color: #fff;
|
|
cursor: default;
|
|
max-height: 2em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.card .card-entry-labels-hidden {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.card .card-entry-labels-hidden li {
|
|
display: inline-block;
|
|
background-color: rgba(0, 151, 167, 0.85);
|
|
margin: 0 5px;
|
|
padding: 5px 12px;
|
|
border-radius: 3px;
|
|
color: #fff;
|
|
max-height: 2em;
|
|
max-width: calc(100% - 15px);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.card .card-content .estimatedTime {
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.card .card-action .original {
|
|
line-height: 24px;
|
|
}
|
|
|
|
.card .card-action ul.links {
|
|
margin: 0;
|
|
font-size: 24px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.card .card-action a {
|
|
color: #fff;
|
|
margin: 0;
|
|
}
|
|
|
|
.card .card-action a:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.settings .div_tabs {
|
|
padding-bottom: 15px;
|
|
}
|
|
|
|
.card.sw {
|
|
max-width: 370px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
|
|
.card .card-image {
|
|
height: 14em;
|
|
}
|
|
|
|
.card .card-image .preview {
|
|
height: 14em;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: 50%;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
5 = Article
|
|
========================================================================== */
|
|
|
|
#article {
|
|
font-size: 20px;
|
|
margin: 0 auto;
|
|
max-width: 40em;
|
|
}
|
|
|
|
#article img,
|
|
#article figure {
|
|
max-width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
#article > header > h1 {
|
|
font-size: 2em;
|
|
}
|
|
|
|
.reader-mode {
|
|
width: 95px !important;
|
|
transition: width 0.2s ease;
|
|
}
|
|
|
|
.reader-mode:hover {
|
|
width: 240px !important;
|
|
}
|
|
|
|
.reader-mode .collapsible-body {
|
|
height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.reader-mode:hover .collapsible-body {
|
|
height: auto;
|
|
}
|
|
|
|
.reader-mode span {
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.reader-mode:hover span {
|
|
opacity: 1;
|
|
}
|
|
|
|
.progress {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 3px;
|
|
margin: 0;
|
|
z-index: 9999;
|
|
}
|
|
|
|
#article aside .link {
|
|
color: #000;
|
|
font-size: 0.8em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#article aside #list {
|
|
float: right;
|
|
margin: 0 15px 10px;
|
|
}
|
|
|
|
#article aside .chip {
|
|
background-color: rgba(0, 151, 167, 0.85);
|
|
color: #fff;
|
|
padding: 0 15px 0 10px;
|
|
}
|
|
|
|
#article aside .chip i {
|
|
color: #fff;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
6 = Media queries
|
|
========================================================================== */
|
|
|
|
@media only screen and (max-width: 992px) {
|
|
header,
|
|
main,
|
|
footer {
|
|
padding-left: 0;
|
|
}
|
|
|
|
nav,
|
|
main,
|
|
footer {
|
|
padding-left: 0;
|
|
}
|
|
|
|
.pagination {
|
|
width: auto;
|
|
}
|
|
|
|
.reader-mode {
|
|
width: 240px !important;
|
|
}
|
|
|
|
.reader-mode span {
|
|
opacity: 1;
|
|
}
|
|
|
|
.tabs {
|
|
display: inline-block;
|
|
height: auto;
|
|
}
|
|
|
|
.tab {
|
|
min-width: 100%;
|
|
}
|
|
|
|
.indicator {
|
|
display: none;
|
|
}
|
|
|
|
.pagination li.prev,
|
|
.pagination li.next {
|
|
width: auto;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 400px) {
|
|
.nav-panel-buttom {
|
|
float: right;
|
|
}
|
|
}
|
|
|
|
@media only screen and (min-width: 993px) and (max-width: 1180px) {
|
|
.row .col.l1 {
|
|
width: 25%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.row .col.l2 {
|
|
width: 33.33333%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.row .col.l3 {
|
|
width: 41.66667%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.row .col.l4 {
|
|
width: 50%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.row .col.l5 {
|
|
width: 58.33333%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.row .col.l6 {
|
|
width: 66.66667%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.row .col.l7 {
|
|
width: 75%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.row .col.l8 {
|
|
width: 83.33333%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.row .col.l9 {
|
|
width: 91.66667%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.row .col.l10 {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 350px) {
|
|
.nb-results {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ==========================================================================
|
|
7 = Font
|
|
========================================================================== */
|
|
|
|
.icon-google-plus2::before {
|
|
content: "\ea89";
|
|
}
|
|
|
|
.icon-facebook2::before {
|
|
content: "\ea8d";
|
|
}
|
|
|
|
.icon-twitter::before {
|
|
content: "\ea91";
|
|
}
|
|
|
|
.icon-apple::before {
|
|
content: "\eabf";
|
|
}
|
|
|
|
.icon-android::before {
|
|
content: "\eac1";
|
|
}
|
|
|
|
.icon-chrome::before {
|
|
content: "\eae5";
|
|
}
|
|
|
|
.icon-firefox::before {
|
|
content: "\eae6";
|
|
}
|
|
|
|
.icon-link::before {
|
|
content: "\e9cb";
|
|
}
|
|
|
|
footer [class^="icon-"],
|
|
footer [class*=" icon-"] {
|
|
font-size: 2em;
|
|
transition: text-shadow 0.2s ease;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
footer [class^="icon-"]:hover,
|
|
footer [class*=" icon-"]:hover {
|
|
text-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* ==========================================================================
|
|
8 = Others
|
|
========================================================================== */
|
|
|
|
/* force height on non-input field in the settings page */
|
|
div.settings div.input-field div,
|
|
div.settings div.input-field ul {
|
|
margin-top: 40px;
|
|
}
|
|
|
|
/* but avoid to kill all file input */
|
|
div.settings div.file-field div {
|
|
margin-top: inherit;
|
|
}
|
|
|
|
.input-field label.active {
|
|
font-size: 1rem;
|
|
}
|