/* ==========================================================================
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('../font/icomoon/icomoon.eot?yw303w');
src:url('../font/icomoon/icomoon.eot?yw303w#iefix') format('embedded-opentype'),
url('../font/icomoon/icomoon.ttf?yw303w') format('truetype'),
url('../font/icomoon/icomoon.woff?yw303w') format('woff'),
url('../font/icomoon/icomoon.svg?yw303w#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
[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;
}
.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: 0px 10px;
height: 30px;
display: block;
}
.pagination li.active span {
padding: 0px 10px;
height: 30px;
display: block;
color: #fff;
}
.pagination .disabled {
margin-right: 10px;
margin-left: 10px;
}
.page-footer .footer-copyright p {
display: inline;
}
.hidden {
display: none;
}
.picker__date-display {
display: none;
}
footer.page-footer {
margin-top: 10px;
padding-top: 10px;
}
footer .row {
margin-bottom: 10px;
}
/* ==========================================================================
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-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;
}
#button_export {
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;
}
#main .logo:hover {
background: transparent;
}
.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;
max-height: 64px;
display: block;
}
.card .card-content i.right, .card .card-reveal i.right {
margin-left: 0;
}
.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: #ffffff;
margin: 0;
}
.card .card-action a:hover {
color: #ffffff;
}
.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;
}
#article img,
#article figure {
max-width: 100%;
height: auto;
}
.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 .chip {
background-color: #039be5;
color: #ffffff;
}
#article aside .chip i {
color: #ffffff;
}
/* ==========================================================================
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: "\e800";
}
.icon-facebook2:before {
content: "\e801";
}
.icon-twitter:before {
content: "\e802";
}
.icon-apple:before {
content: "\e803";
}
.icon-android:before {
content: "\e804";
}
.icon-chrome:before {
content: "\e805";
}
.icon-firefox:before {
content: "\e806";
}
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;
}