wallabag/app/Resources/static/themes/material/css/main.css
2016-10-05 14:06:55 +02:00

760 lines
12 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-Free.ttf");
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-"]::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");
}
/* Shaarli */
.icon-image--shaarli {
background-image: url("../../_global/img/icons/shaarli.png");
}
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;
}
.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-entry-tags a,
.card-entry-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 .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;
}
.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: 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: "\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;
}