blob: 7a4e7df2f2861ce0cff27e506a920667c69963aa (
plain) (
tree)
|
|
/* ==========================================================================
Sommaire
0 = Common
1 = Nav
2 = Side-nav
3 = Filters slider
4 = Cards
5 = Article
6 = Media queries
7 = Others
========================================================================== */
/* ==========================================================================
0 = Common
========================================================================== */
body {
display: flex;
min-height: 100vh;
flex-direction: column;
background: #f0f0f0;
}
#warning_message {
position: fixed;
background-color: #ff6347;
z-index: 1000;
bottom: 0;
left: 0;
width: 100%;
color: #000;
}
#warning_message a {
color: #555;
}
.border-bottom {
border-bottom: 1px solid #DDD;
}
nav, main, footer {
padding-left: 240px;
}
#main {
flex: 1 0 auto;
}
.results {
height: 1em;
line-height: 30px;
}
.results .nb-results, .results .pagination {
margin: 15px;
margin-bottom: 0;
}
.pagination li {
padding: 0;
}
.pagination a {
padding: 0px 10px;
height: 30px;
display: block;
}
.page-footer .footer-copyright p {
display: inline;
}
.hidden {
display: none;
}
.picker__date-display {
display: none;
}
/* ==========================================================================
1 = Nav
========================================================================== */
nav input {
color: #aaa;
}
.nav-wrapper .button-collapse {
padding: 0px 15px;
}
.nav-input {
display: none;
}
.nav-panels {
overflow: hidden;
}
.nav-panel-buttom li {
max-height: 64px;
}
.nav-panel-buttom {
float: right;
}
.nav-panels {
transition: background 0.2s ease;
}
.nav-panel-add .mdi-content-add,
.nav-panel-search .mdi-action-search,
.nav-panels .mdi-navigation-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 .mdi-navigation-close {
position: absolute;
top: 0;
right: 1rem;
color: transparent;
cursor: pointer;
font-size: 2rem;
transition: .3s color;
}
#button_filters {
display: none;
}
/* ==========================================================================
2 = Side-nav
========================================================================== */
.side-nav.fixed a {
font-size: 13px;
line-height: 44px;
height: 44px;
}
.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;
}
.side-nav li {
padding: 0px;
}
.side-nav a {
margin: 0px 1rem;
}
/* ==========================================================================
* 3 = Filters slider
* ========================================================================== */
#filters button {
padding: 0px;
width: 100%;
}
.side-nav.fixed.right-aligned {
right: -250px;
left: auto !important;
overflow-y: visible;
}
#filters div.with-checkbox {
height: 3rem;
margin-top: 0px;
}
/* ==========================================================================
4 = Cards
========================================================================== */
main #content {
padding: 0px 0.5rem;
}
main ul.row {
padding: 0px 0.75rem;
}
.data .card .card-body {
height: 22em;
overflow: hidden;
}
.card .card-content .card-title {
line-height: 32px;
}
.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 {
margin: 0;
}
.settings .div_tabs {
padding-bottom: 15px;
}
.card.sw {
max-width: 370px;
margin-left: auto;
margin-right: auto;
}
.mdi-card-close:before {
content: "\e8aa";
}
.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: 0px auto;
max-width: 40em;
}
.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:0px;
width: 100%;
height: 3px;
margin: 0;
z-index: 9999;
}
#article aside .link {
color: #000;
font-size: 0.6em;
text-decoration: none;
}
#article aside #list {
float: right;
margin-right: 15px;
}
#article aside span a {
background-color: #039be5;
color: #fff;
border-radius: 3px;
float: left;
font-size: 0.6em;
margin-left: 0.5em;
margin-bottom: 0.5em;
padding: 4px;
text-decoration: none;
}
/* ==========================================================================
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;
}
}
@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 = 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;
}
|