wallabag/app/Resources/static/themes/material/css/main.css
2017-03-28 14:20:14 +02:00

1024 lines
17 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
========================================================================== */
/**
*
* Material icons
*
*/
@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';
}
/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
/**
*
* Icomoon icons
*
*/
@font-face {
font-family: icomoon;
src: url("../fonts/IcoMoon-Free.ttf");
font-weight: normal;
font-style: normal;
}
[class^="icon-"]::before,
[class*=" icon-"]::before {
font-family: icomoon;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
background-size: 24px;
/* Enable Ligatures ================ */
letter-spacing: 0;
-webkit-font-feature-settings: "liga";
-moz-font-feature-settings: "liga=1";
-moz-font-feature-settings: "liga";
-ms-font-feature-settings: "liga" 1;
-o-font-feature-settings: "liga";
font-feature-settings: "liga";
/* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.icon-image {
background-size: 16px;
background-repeat: no-repeat;
padding-right: 1em !important;
padding-left: 1em !important;
}
.icon-eye::before {
content: "\e9ce";
}
.icon-no-eye::before {
content: "\e9d1";
}
.icon-calendar::before {
content: "\e953";
}
.icon-mail::before {
content: "\ea86";
}
.icon-time::before {
content: "\e952";
}
/* Carrot (http://carrot.org) */
.icon-image--carrot {
background-image: url("../../_global/img/icons/carrot-icon--black.png");
}
/* Diaspora */
.icon-image--diaspora {
background-image: url("../../_global/img/icons/diaspora-icon--black.png");
}
/* Unmark.it */
.icon-image--unmark {
background-image: url("../../_global/img/icons/unmark-icon--black.png");
}
/* Shaarli */
.icon-image--shaarli {
background-image: url("../../_global/img/icons/shaarli.png");
}
/* Scuttle */
.icon-image--scuttle {
background-image: url("../../_global/img/icons/scuttle.png");
}
body {
display: flex;
min-height: 100vh;
flex-direction: column;
background: #fafafa;
}
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;
}
.results .nb-results,
.results .pagination {
margin: 15px;
margin-bottom: 0;
}
.results .nb-results {
display: inline-flex;
}
.results a {
color: #444;
}
.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 {
min-width: 50px;
height: auto !important;
line-height: 1em !important;
}
.page-footer .footer-copyright p {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
}
.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 {
height: auto;
}
.nav-wrapper {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
min-height: 64px;
}
.nav-wrapper .button-collapse {
padding: 0 15px;
}
.nav-input {
display: none;
}
.nav-panel-buttom {
display: flex;
flex-grow: 1;
justify-content: flex-end;
}
.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,
.input-field.nav-panel-search label {
left: 1rem;
}
.input-field.nav-panel-add .close,
.input-field.nav-panel-search .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,
.input-field.nav-panel-search,
.input-field.nav-panel-search form {
display: flex;
flex: 1;
}
/* ==========================================================================
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;
}
nav ul a:hover {
background-color: initial;
}
/* ==========================================================================
* 3 = Filters slider
* ========================================================================== */
#filters button {
padding: 0;
width: 100%;
}
.side-nav.fixed.right-aligned {
right: -250px;
left: auto !important;
}
#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: 19em;
overflow: hidden;
}
.card .card-content .card-title,
.card .card-reveal .card-title {
line-height: 22.8px;
max-height: 80px;
font-size: 19px;
font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #313131;
}
.card .card-content .activator,
.card .card-reveal .activator {
cursor: pointer;
font-family: "Material Icons";
}
.card .card-content i.right,
.card .card-reveal i.right {
margin-left: 0;
}
.card .card-content .original {
line-height: 24px;
font-size: 15px;
}
a.original {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
display: block;
}
.card .card-entry-labels {
position: absolute;
top: 10px;
z-index: 90;
max-width: 50%;
}
.card .card-entry-labels li,
.card-tag-labels li {
margin: 10px 10px 10px auto;
padding: 5px 12px 5px 16px !important;
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: 2.5px auto;
}
.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-entry-labels-hidden li:first-child {
margin-left: 0;
}
.card-entry-tags a,
.card-entry-labels a,
.card-tag-labels a,
.card-entry-labels-hidden a,
#list .chip a {
text-decoration: none;
font-weight: normal;
color: #fff;
}
.card .card-content .estimatedTime {
margin-bottom: 10px;
}
.card .card-action {
padding: 10px 5px 10px 15px;
}
.card .card-action ul.links {
margin: 0;
font-size: 24px;
line-height: 24px;
}
.card .card-action ul.tools li a.tool {
margin-right: 5px !important;
}
.card-stacked:hover ul.tools-list {
display: block;
}
.card-stacked ul.tools-list {
display: none;
}
.card .card-action a {
color: #fff;
margin: 0;
}
.card .card-action a:hover {
color: #fff;
}
.card .card-action .reading-time {
display: inline-flex;
vertical-align: middle;
}
.quickstart .card .card-action a,
.quickstart .card .card-action a:hover {
color: #fff !important;
}
.settings .div_tabs {
padding-bottom: 15px;
}
.card.sw {
max-width: 370px;
margin-left: auto;
margin-right: auto;
}
.card .card-image {
height: 10em;
}
.card .card-fullimage {
height: 13.5em;
}
.card .card-image .preview,
.card .card-fullimage .preview {
height: 14em;
background-size: cover;
background-repeat: no-repeat;
background-position: 50%;
}
/* ==========================================================================
5 = Article
========================================================================== */
#article {
font-size: 20px;
margin: 0 auto;
max-width: 45em;
}
#article article {
color: #424242;
font-size: 18px;
line-height: 1.7em;
}
#article article h1,
#article article h2,
#article article h3,
#article article h4,
#article article h5,
#article article h6 {
color: #212121;
}
#article article h1 strong,
#article article h2 strong,
#article article h3 strong,
#article article h4 strong,
#article article h5 strong,
#article article h6 strong {
font-weight: 500;
}
#article article h6 {
font-size: 1.2rem;
}
#article article h5 {
font-size: 1.6rem;
}
#article article h4 {
font-size: 1.9rem;
}
#article article h3 {
font-size: 2.2rem;
}
#article article h2 {
font-size: 2.5rem;
}
#article article h1 {
font-size: 2.7rem;
}
#article img,
#article figure {
max-width: 100%;
height: auto;
}
#article article a {
border-bottom: 1px dotted #03a9f4;
text-decoration: none;
}
#article article a:hover {
border-bottom-style: solid;
}
#article article ul {
padding-left: 30px;
}
#article article ul,
#article article ul li {
list-style-type: disc;
}
#article article blockquote {
font-style: italic;
}
#article article strong {
font-weight: bold;
}
#article article pre {
box-sizing: border-box;
margin: 0 0 1.75em;
border: #e3f2fd 1px solid;
width: 100%;
padding: 10px;
font-family: monospace;
font-size: 0.8em;
white-space: pre;
overflow: auto;
background: #f5f5f5;
border-radius: 3px;
}
#article > header > h1 {
font-size: 2em;
margin: 2.1rem 0 0.68rem;
}
.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 .tools {
font-size: 0.8em;
display: flex;
flex-flow: row wrap;
margin: 0 auto;
}
article aside .tools li {
display: inline-flex;
vertical-align: middle;
}
#article aside .tools a {
color: #000;
text-decoration: none;
}
#article aside #list {
float: right;
margin: 0 15px 10px;
}
#article aside .chip {
background-color: rgba(0, 151, 167, 0.85);
padding: 0 15px 0 10px;
margin: auto 2px;
}
#article aside .chip a,
#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;
}
.nav-panels .action {
padding-right: 0.75rem;
}
.nav-panel-buttom {
justify-content: space-around;
}
#article {
max-width: 35em;
margin-left: auto;
margin-right: auto;
font-size: 18px;
}
#article > header > h1 {
font-size: 1.33em;
}
.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;
}
.drag-target + .drag-target {
height: 50%;
}
.drag-target + .drag-target + .drag-target {
top: 50%;
}
}
@media only screen and (min-width: 1200px) and (max-width: 1650px) {
.row .col.l3 {
width: 33.33333%;
margin-left: 0;
}
}
@media only screen and (min-width: 993px) and (max-width: 1200px) {
.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;
}
main ul.row {
padding: 0;
}
.row .col {
padding: 0;
}
}
/* ==========================================================================
7 = Font
========================================================================== */
.icon-google-plus2::before {
content: "\ea89";
}
.icon-facebook2::before {
content: "\ea8d";
}
.icon-twitter::before {
content: "\ea96";
}
.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;
}
nav .input-field input {
margin: 0;
}