mirror of
https://github.com/wallabag/wallabag.git
synced 2025-09-15 18:57:05 +00:00
Rename css folder to scss
This commit is contained in:
Yassine Guedidi
parent
e96e920b73
commit
a4f02aec76
19 changed files with 2 additions and 2 deletions
277
assets/scss/_article.scss
Normal file
277
assets/scss/_article.scss
Normal file
|
|
@ -0,0 +1,277 @@
|
|||
@use "variables";
|
||||
|
||||
/* ==========================================================================
|
||||
Article
|
||||
========================================================================== */
|
||||
|
||||
#article, #preview-article {
|
||||
font-size: 20px;
|
||||
margin: 0 auto;
|
||||
max-width: 45em;
|
||||
padding: 5px 20px;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 0 10px #ccc;
|
||||
|
||||
article {
|
||||
color: #424242;
|
||||
font-size: 18px;
|
||||
line-height: 1.7em;
|
||||
overflow-wrap: break-word;
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
color: #212121;
|
||||
|
||||
strong {
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
|
||||
h6 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
h5 {
|
||||
font-size: 1.6rem;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 1.9rem;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 2.2rem;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 2.5rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 2.7rem;
|
||||
}
|
||||
|
||||
a {
|
||||
border-bottom: 1px dotted variables.$blue-accent-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
border-bottom-style: solid;
|
||||
}
|
||||
|
||||
ul {
|
||||
padding-left: 30px;
|
||||
}
|
||||
|
||||
ul,
|
||||
ul li {
|
||||
list-style-type: disc;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
img,
|
||||
figure {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
> header > h1 {
|
||||
font-size: 2em;
|
||||
margin: 2.1rem 0 0.68rem;
|
||||
}
|
||||
|
||||
.entry-info {
|
||||
.tools {
|
||||
display: flex;
|
||||
margin: 8px 5px 5px;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.stats {
|
||||
margin: 0;
|
||||
font-size: 0.7em;
|
||||
|
||||
li {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
margin: 3px 5px;
|
||||
|
||||
i.material-icons {
|
||||
color: #3e3e3e;
|
||||
margin-right: 3px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
color: #000;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.chip {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 25px;
|
||||
line-height: 25px;
|
||||
align-items: center;
|
||||
background-color: transparent;
|
||||
|
||||
a,
|
||||
i {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
i.material-icons {
|
||||
font-size: 16px;
|
||||
vertical-align: sub;
|
||||
}
|
||||
}
|
||||
|
||||
.chip-label {
|
||||
padding-left: 10px;
|
||||
padding-right: 5px;
|
||||
background-color: #9e9e9e;
|
||||
border-radius: 6px 0 0 6px;
|
||||
}
|
||||
|
||||
.chip-action {
|
||||
padding: 0 5px;
|
||||
background-color: #868686;
|
||||
border-radius: 0 6px 6px 0;
|
||||
}
|
||||
|
||||
.chip-label,
|
||||
.chip-action {
|
||||
min-width: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.chip-label:hover,
|
||||
.chip-label:active,
|
||||
.chip-label:focus,
|
||||
.chip-action:hover,
|
||||
.chip-action:active,
|
||||
.chip-action:focus {
|
||||
background-color: #5e5e5e;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.entry-info {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.reader-mode {
|
||||
width: 70px !important;
|
||||
transition: width 0.2s ease;
|
||||
|
||||
.collapsible-body {
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
span {
|
||||
opacity: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
width: 260px !important;
|
||||
|
||||
span {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.collapsible-body {
|
||||
height: auto;
|
||||
|
||||
li a i.material-icons {
|
||||
margin: auto 5px auto -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.progress {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 3px;
|
||||
margin: 0;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.tags-add-form {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 640px) {
|
||||
.entry-info {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
#article .entry-info .tools {
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
#article .entry-info .tools .tags {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
#article .entry-info .chip {
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
}
|
||||
|
||||
#article .entry-info .chip-label,
|
||||
#article .entry-info .chip-action {
|
||||
min-width: 40px;
|
||||
}
|
||||
|
||||
.tags-add-form {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.tags-add-form-submit {
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
355
assets/scss/_cards.scss
Normal file
355
assets/scss/_cards.scss
Normal file
|
|
@ -0,0 +1,355 @@
|
|||
@use "variables";
|
||||
|
||||
/* ==========================================================================
|
||||
Cards
|
||||
========================================================================== */
|
||||
|
||||
main {
|
||||
div#content {
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin mixin-reading-time {
|
||||
.reading-time {
|
||||
display: inline-flex;
|
||||
vertical-align: middle;
|
||||
|
||||
.card-reading-time,
|
||||
.card-created-at {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
span {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
.card {
|
||||
.card-content {
|
||||
padding-bottom: 12px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.card-content .card-title,
|
||||
.card-reveal .card-title {
|
||||
line-height: 22.8px;
|
||||
max-height: 80px;
|
||||
font-size: 19px;
|
||||
font-family: roberto, "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
.card-stacked .card-content .card-title {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.card-content .activator,
|
||||
.card-reveal .activator {
|
||||
cursor: pointer;
|
||||
font-family: "Material Icons";
|
||||
}
|
||||
|
||||
.card-content i.right,
|
||||
.card-reveal i.right {
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.card-content .original {
|
||||
line-height: 24px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.card-entry-labels {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
z-index: 90;
|
||||
max-width: 50%;
|
||||
}
|
||||
|
||||
.card-entry-labels-hidden {
|
||||
margin: 2.5px auto;
|
||||
}
|
||||
|
||||
.card-entry-labels-hidden li {
|
||||
display: inline-block;
|
||||
background-color: variables.$blue-accent-color;
|
||||
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-action {
|
||||
padding: 10px 10px 10px 15px;
|
||||
|
||||
ul.links {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.tool {
|
||||
display: flex;
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
@include mixin-reading-time;
|
||||
}
|
||||
|
||||
.card-image {
|
||||
height: 10em;
|
||||
}
|
||||
|
||||
.card-fullimage {
|
||||
height: 13.5em;
|
||||
}
|
||||
|
||||
&.sw {
|
||||
max-width: 370px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.card-body {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
a.original:not(.waves-effect) {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.card .card-image .preview,
|
||||
.card .card-fullimage .preview,
|
||||
.card-stacked .preview {
|
||||
height: 100%;
|
||||
background: no-repeat 50%/cover;
|
||||
background-color: #efefef;
|
||||
display: block;
|
||||
|
||||
&--default {
|
||||
background-size: contain;
|
||||
}
|
||||
}
|
||||
|
||||
.card-entry-labels li,
|
||||
.card-tag-labels li {
|
||||
margin: 10px 10px 10px auto;
|
||||
padding: 5px 12px 5px 16px !important;
|
||||
background-color: variables.$blue-accent-color;
|
||||
border-radius: 3px;
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.card-entry-labels li {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
border-radius: 0 3px 3px 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-tag-labels li {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.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-tag-link {
|
||||
width: calc(100% - 24px);
|
||||
line-height: 1.3;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-tag-form {
|
||||
display: flex;
|
||||
min-width: 100px;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.card-tag-form input {
|
||||
margin-bottom: 0;
|
||||
height: 1.8rem;
|
||||
}
|
||||
|
||||
.card-tag-icon {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.card-tag-delete {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.card-tag-labels {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
|
||||
}
|
||||
|
||||
.card-tag-labels li {
|
||||
margin: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.card-stacked {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
|
||||
&:hover ul.tools-list {
|
||||
display: inline;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.card-preview {
|
||||
max-width: 100px;
|
||||
max-height: 50px;
|
||||
margin-right: 10px;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
div.metadata {
|
||||
overflow: hidden;
|
||||
height: 1.5em;
|
||||
display: flex;
|
||||
|
||||
ul.tags {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.chip {
|
||||
background-color: variables.$blue-accent-color;
|
||||
padding: 0 7px;
|
||||
margin: auto 1px;
|
||||
border-radius: 6px;
|
||||
line-height: 22px;
|
||||
height: 22px;
|
||||
|
||||
a,
|
||||
i {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
i.material-icons {
|
||||
float: right;
|
||||
font-size: 20px;
|
||||
line-height: 32px;
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@include mixin-reading-time {
|
||||
& {
|
||||
padding: 0 5px;
|
||||
flex-wrap: wrap;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
i.material-icons {
|
||||
font-size: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.card-content {
|
||||
flex: 4;
|
||||
}
|
||||
|
||||
ul.tools-list {
|
||||
flex: 1;
|
||||
display: none;
|
||||
flex-basis: 5em;
|
||||
align-self: flex-end;
|
||||
float: right;
|
||||
max-width: 8em;
|
||||
}
|
||||
|
||||
.tags {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.card.archived,
|
||||
.card-stacked.archived {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
#content .collection .collection-item {
|
||||
min-height: 65px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.quickstart .card .card-action a,
|
||||
.quickstart .card .card-action a:hover {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.settings .tabs-container {
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.settings .settings-checkbox-col {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.settings .settings-checkbox-label {
|
||||
margin-bottom: 20px;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.settings .settings-range-label {
|
||||
position: absolute;
|
||||
top: -14px;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
|
||||
.entries-row {
|
||||
display: grid;
|
||||
margin: 0.4rem 0 0;
|
||||
padding: 0 0.75rem;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.entry-card {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
.tools {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
149
assets/scss/_dark_theme.scss
Normal file
149
assets/scss/_dark_theme.scss
Normal file
|
|
@ -0,0 +1,149 @@
|
|||
.dark-theme {
|
||||
body {
|
||||
background-color: #101010;
|
||||
}
|
||||
|
||||
#article,
|
||||
.card,
|
||||
.card-panel,
|
||||
.card .card-reveal,
|
||||
.card-stacked .preview:not(.preview--default),
|
||||
.card .preview:not(.preview--default),
|
||||
.collapsible-header,
|
||||
.collection,
|
||||
.dropdown-content,
|
||||
.side-nav,
|
||||
.side-nav .collapsible-body,
|
||||
.side-nav.fixed .collapsible-body,
|
||||
.tabs {
|
||||
background-color: #131716;
|
||||
}
|
||||
|
||||
table.striped > tbody > tr:nth-child(2n+1),
|
||||
.dropdown-content li {
|
||||
background-color: #232323;
|
||||
}
|
||||
|
||||
.dropdown-content li:hover,
|
||||
.dropdown-content li.active,
|
||||
.dropdown-content li.selected,
|
||||
.pagination li:not(.active) a:hover,
|
||||
.pagination li:not(.active) a:active,
|
||||
.pagination li:not(.active) a:focus {
|
||||
background-color: #2c2c2c;
|
||||
}
|
||||
|
||||
.dropdown-content .divider {
|
||||
background-color: #383838;
|
||||
}
|
||||
|
||||
.collection {
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.collection .collection-item {
|
||||
border-color: #121212;
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
.collection .collection-item:hover {
|
||||
background-color: #272727;
|
||||
}
|
||||
|
||||
#content,
|
||||
#article article,
|
||||
#article article h1,
|
||||
#article article h2,
|
||||
#article article h3,
|
||||
#article article h4,
|
||||
#article article h5,
|
||||
#article article h6,
|
||||
.dropdown-content li > a,
|
||||
.nav-panels .input-field input:focus,
|
||||
.results-item,
|
||||
.side-nav li > a,
|
||||
.side-nav li > a > i.material-icons {
|
||||
color: #dfdfdf;
|
||||
}
|
||||
|
||||
.cyan,
|
||||
.cyan.darken-1,
|
||||
.cyan.darken-2,
|
||||
.nav-panel-add,
|
||||
.nav-panel-search {
|
||||
background-color: #1d1d1d !important;
|
||||
}
|
||||
|
||||
.grey-text.text-darken-4,
|
||||
.nav-panel-item .add,
|
||||
.nav-panel-item .search,
|
||||
.nav-panels .close {
|
||||
color: #dfdfdf !important;
|
||||
}
|
||||
|
||||
.side-nav li.active {
|
||||
background-color: #2f2f2f;
|
||||
}
|
||||
|
||||
.mass-action-tags .mass-action-tags-input.mass-action-tags-input,
|
||||
.side-nav li:not(.logo) > a:hover,
|
||||
.side-nav .collapsible-header:hover,
|
||||
.side-nav.fixed .collapsible-header:hover {
|
||||
background-color: #1d1d1d;
|
||||
}
|
||||
|
||||
#article {
|
||||
box-shadow: 0 0 10px #1d1d1d;
|
||||
}
|
||||
|
||||
.card,
|
||||
.collection .collection-item {
|
||||
background-color: #1d1d1d;
|
||||
}
|
||||
|
||||
.card-action {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.logo img,
|
||||
.preview.preview--default,
|
||||
.typo-logo {
|
||||
filter: invert(100%);
|
||||
}
|
||||
|
||||
.border-bottom,
|
||||
.collapsible,
|
||||
.collapsible-body,
|
||||
.collapsible-header {
|
||||
border-color: #222;
|
||||
}
|
||||
|
||||
.pagination li.active {
|
||||
background-color: #666;
|
||||
}
|
||||
|
||||
.hljs,
|
||||
#article pre {
|
||||
color: #abb2bf;
|
||||
background-color: #282c34;
|
||||
}
|
||||
|
||||
nav input {
|
||||
color: #abb2bf;
|
||||
}
|
||||
|
||||
input[type="url"]:not(.browser-default):disabled {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
|
||||
.input-field.nav-panel-add.disabled,
|
||||
.input-field.nav-panel-add.disabled input {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
#article {
|
||||
background-color: #101010;
|
||||
}
|
||||
}
|
||||
}
|
||||
232
assets/scss/_entries.scss
Normal file
232
assets/scss/_entries.scss
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
@use "variables";
|
||||
|
||||
/* ==========================================================================
|
||||
* Entries
|
||||
* ========================================================================== */
|
||||
|
||||
.mass-action-toggle {
|
||||
display: inline-flex;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.mass-action {
|
||||
margin: 20px 5px 10px 20px;
|
||||
}
|
||||
|
||||
.mass-action-group {
|
||||
display: flex;
|
||||
padding: 3px;
|
||||
align-items: center;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.mass-action-button {
|
||||
height: 36px;
|
||||
line-height: 36px;
|
||||
padding: 0 0.7rem;
|
||||
|
||||
i {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
.mass-action-button--tags {
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
|
||||
.card-stacked .entry-checkbox {
|
||||
margin: 10px 15px 10px 5px;
|
||||
}
|
||||
|
||||
.card .entry-checkbox {
|
||||
position: absolute;
|
||||
display: flex;
|
||||
padding: 10px;
|
||||
inset: 0;
|
||||
justify-content: flex-end;
|
||||
align-items: start;
|
||||
background-color: rgb(0 172 193 / 20%);
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.entries .entry-checkbox-input,
|
||||
.mass-action .entry-checkbox-input {
|
||||
position: relative;
|
||||
width: 20px;
|
||||
min-height: 25px;
|
||||
opacity: initial;
|
||||
cursor: pointer;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.toggle-checkbox:not(:checked) + .mass-action,
|
||||
.toggle-checkbox:not(:checked) + .mass-action-tags,
|
||||
.toggle-checkbox:not(:checked) ~ .entries .entry-checkbox,
|
||||
.toggle-checkbox:checked ~ .entries .card-preview {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.mass-action-tags {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
|
||||
.mass-action-tags-input.mass-action-tags-input {
|
||||
margin: 0;
|
||||
padding: 0 5px;
|
||||
height: 34px;
|
||||
background: white;
|
||||
border-bottom: 3px solid #c5ebef;
|
||||
}
|
||||
|
||||
.mass-action-tags-input.mass-action-tags-input.mass-action-tags-input:focus {
|
||||
border-bottom: 3px solid variables.$blue-accent-color;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.entries {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.collection {
|
||||
margin: 5px 15px 0;
|
||||
padding: 0;
|
||||
|
||||
.collection-item {
|
||||
padding: 7px;
|
||||
height: 65px;
|
||||
}
|
||||
}
|
||||
|
||||
.results {
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
padding: 1rem 1rem 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nb-results {
|
||||
display: inline-flex;
|
||||
margin-bottom: 20px;
|
||||
gap: 30px;
|
||||
}
|
||||
|
||||
.results-item {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
ul {
|
||||
display: flex;
|
||||
margin: 0;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
|
||||
.prev.disabled,
|
||||
.next.disabled {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
padding: 0;
|
||||
|
||||
&:not(.active) a:hover,
|
||||
&:not(.active) a:active,
|
||||
&:not(.active) a:focus {
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
span,
|
||||
a {
|
||||
padding: 0 10px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
line-height: 30px;
|
||||
}
|
||||
|
||||
.disabled {
|
||||
margin-right: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
li.active span {
|
||||
padding: 0 10px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.footer-text {
|
||||
margin: 0.7rem 0.5rem;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.picker__date-display {
|
||||
display: none;
|
||||
}
|
||||
|
||||
footer {
|
||||
&.page-footer {
|
||||
margin-top: 10px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.row {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 993px) {
|
||||
.results {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.nb-results {
|
||||
margin-bottom: 0;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.mass-action-button {
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
padding: 0 0.5rem;
|
||||
}
|
||||
|
||||
.mass-action-group {
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mass-action-tags {
|
||||
margin-top: 0;
|
||||
margin-left: 7px;
|
||||
flex-wrap: initial;
|
||||
}
|
||||
|
||||
.mass-action {
|
||||
display: flex;
|
||||
margin-top: 10px;
|
||||
align-items: center;
|
||||
|
||||
.mass-action-tags-input.mass-action-tags-input {
|
||||
height: 21px;
|
||||
}
|
||||
}
|
||||
}
|
||||
15
assets/scss/_filters.scss
Normal file
15
assets/scss/_filters.scss
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
/* ==========================================================================
|
||||
* Filters slider
|
||||
* ========================================================================== */
|
||||
|
||||
#filters {
|
||||
button {
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
div.with-checkbox {
|
||||
height: 3rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
13
assets/scss/_fonts.scss
Normal file
13
assets/scss/_fonts.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
/* ==========================================================================
|
||||
* Fonts
|
||||
* ========================================================================== */
|
||||
|
||||
/**
|
||||
* Icomoon
|
||||
*/
|
||||
@font-face {
|
||||
font-family: icomoon;
|
||||
src: url("~icomoon-free-npm/Font/IcoMoon-Free.ttf");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
191
assets/scss/_icons.scss
Normal file
191
assets/scss/_icons.scss
Normal file
|
|
@ -0,0 +1,191 @@
|
|||
/* ==========================================================================
|
||||
* Icons
|
||||
* ========================================================================== */
|
||||
|
||||
/**
|
||||
*
|
||||
* Material icons
|
||||
*
|
||||
*/
|
||||
.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;
|
||||
user-select: none;
|
||||
|
||||
/* 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";
|
||||
|
||||
.md-18 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.md-24 {
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.md-36 {
|
||||
font-size: 36px;
|
||||
}
|
||||
|
||||
.md-48 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
.md-dark {
|
||||
color: rgb(0 0 0 / 54%);
|
||||
|
||||
.md-inactive {
|
||||
color: rgb(0 0 0 / 26%);
|
||||
}
|
||||
}
|
||||
|
||||
.md-light {
|
||||
color: rgb(255 255 255 / 100%);
|
||||
|
||||
.md-inactive {
|
||||
color: rgb(255 255 255 / 30%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* Icomoon icons
|
||||
*
|
||||
*/
|
||||
[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;
|
||||
font-feature-settings: "liga";
|
||||
}
|
||||
|
||||
.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";
|
||||
}
|
||||
|
||||
a.icon-image {
|
||||
background-repeat: no-repeat;
|
||||
padding-right: 0.4em !important;
|
||||
padding-left: 0 !important;
|
||||
margin-left: 25px;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
float: left;
|
||||
margin: 7px 1.5px 0 0;
|
||||
}
|
||||
|
||||
&.diaspora::before {
|
||||
background: url("../img/icons/diaspora-icon--black.png") no-repeat center/80%;
|
||||
}
|
||||
|
||||
&.unmark::before {
|
||||
background: url("../img/icons/unmark-icon--black.png") no-repeat center/80%;
|
||||
}
|
||||
|
||||
&.linkding::before {
|
||||
background: url("../img/icons/linkding.svg") no-repeat center/80%;
|
||||
filter: grayscale(1);
|
||||
}
|
||||
|
||||
&.shaarli::before {
|
||||
background: url("../img/icons/shaarli.png") no-repeat center/80%;
|
||||
}
|
||||
|
||||
&.scuttle::before {
|
||||
background: url("../img/icons/scuttle.png") no-repeat center/80%;
|
||||
}
|
||||
}
|
||||
|
||||
.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 rgb(0 0 0 / 30%);
|
||||
}
|
||||
54
assets/scss/_layout.scss
Executable file
54
assets/scss/_layout.scss
Executable file
|
|
@ -0,0 +1,54 @@
|
|||
@use "variables";
|
||||
|
||||
/* ==========================================================================
|
||||
Layout
|
||||
========================================================================== */
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
background: #fafafa;
|
||||
|
||||
&.login main {
|
||||
padding: 0;
|
||||
min-height: 100vh;
|
||||
}
|
||||
}
|
||||
|
||||
.border-bottom {
|
||||
border-bottom: 1px solid #ddd;
|
||||
}
|
||||
|
||||
a {
|
||||
color: variables.$blue-accent-color;
|
||||
}
|
||||
|
||||
main,
|
||||
#content,
|
||||
.valign-wrapper {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.typo-logo {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
#main {
|
||||
flex: 1 0 auto;
|
||||
|
||||
.logo {
|
||||
a {
|
||||
height: 100pt;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100pt;
|
||||
width: 100pt;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
13
assets/scss/_material-icons.scss
Normal file
13
assets/scss/_material-icons.scss
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
/* 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: rgb(0 0 0 / 54%); }
|
||||
.material-icons.md-dark.md-inactive { color: rgb(0 0 0 / 26%); }
|
||||
|
||||
/* Rules for using icons as white on a dark background. */
|
||||
.material-icons.md-light { color: rgb(255 255 255 / 100%); }
|
||||
.material-icons.md-light.md-inactive { color: rgb(255 255 255 / 30%); }
|
||||
193
assets/scss/_media_queries.scss
Normal file
193
assets/scss/_media_queries.scss
Normal file
|
|
@ -0,0 +1,193 @@
|
|||
/* ==========================================================================
|
||||
Media queries
|
||||
========================================================================== */
|
||||
|
||||
@media only screen and (min-width: 450px) {
|
||||
.entries-row {
|
||||
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 992px) {
|
||||
nav,
|
||||
.index main,
|
||||
footer {
|
||||
padding-left: 240px;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 993px) {
|
||||
.entry main div#content {
|
||||
padding-left: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 992px) {
|
||||
header,
|
||||
main,
|
||||
footer,
|
||||
nav {
|
||||
padding-left: 0;
|
||||
}
|
||||
|
||||
table {
|
||||
display: block;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
iframe {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.nav-panels .action {
|
||||
padding-right: 0.75rem;
|
||||
}
|
||||
|
||||
.nav-panel-top {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.nav-panel-buttom {
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
#article {
|
||||
max-width: 35em;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding-bottom: 100px;
|
||||
font-size: 18px;
|
||||
|
||||
> header > h1 {
|
||||
font-size: 1.33em;
|
||||
}
|
||||
}
|
||||
|
||||
.reader-mode {
|
||||
width: 240px !important;
|
||||
|
||||
span {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: inline-block;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.tab {
|
||||
min-width: 100%;
|
||||
}
|
||||
|
||||
.indicator {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.pagination li {
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
&.prev,
|
||||
&.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.3333%;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 993px) and (max-width: 1200px) {
|
||||
.row {
|
||||
.col.l1 {
|
||||
width: 25%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.col.l2 {
|
||||
width: 33.3333%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.col.l3 {
|
||||
width: 41.6667%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.col.l4 {
|
||||
width: 50%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.col.l5 {
|
||||
width: 58.333%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.col.l6 {
|
||||
width: 66.6667%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.col.l7 {
|
||||
width: 75%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.col.l8 {
|
||||
width: 83.3333%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.col.l9 {
|
||||
width: 91.6667%;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.card-stacked div.metadata .reading-time {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media only print {
|
||||
body {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
194
assets/scss/_nav.scss
Normal file
194
assets/scss/_nav.scss
Normal file
|
|
@ -0,0 +1,194 @@
|
|||
/* ==========================================================================
|
||||
Nav
|
||||
========================================================================== */
|
||||
nav {
|
||||
height: auto;
|
||||
line-height: initial;
|
||||
}
|
||||
|
||||
nav {
|
||||
input {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
ul a:hover {
|
||||
background-color: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-panel-item .button-collapse {
|
||||
margin-left: 0;
|
||||
margin-right: 0.5rem;
|
||||
padding-left: 0.5rem;
|
||||
padding-right: 0.5rem;
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.nav-panel-item {
|
||||
display: flex;
|
||||
padding: 0.6rem 0.4rem 0.6rem 0.75rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
padding: 10px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-panel-item .material-icons {
|
||||
height: auto;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.nav-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.nav-panel-buttom {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.nav-panel-item .add,
|
||||
.nav-panel-item .search,
|
||||
.nav-panels .close {
|
||||
color: #444 !important;
|
||||
}
|
||||
|
||||
.nav-panels {
|
||||
transition: background 0.2s ease;
|
||||
|
||||
.action {
|
||||
margin: 0;
|
||||
font-size: 2.1rem;
|
||||
}
|
||||
|
||||
.input-field input {
|
||||
display: block;
|
||||
font-size: 1.2rem;
|
||||
line-height: inherit;
|
||||
height: 3rem;
|
||||
}
|
||||
|
||||
.input-field input:focus {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
color: #444;
|
||||
}
|
||||
|
||||
/* materializecss override */
|
||||
.input-field.input-field input {
|
||||
margin-bottom: 0;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.input-field.input-field input:focus {
|
||||
border-bottom: none;
|
||||
box-shadow: initial;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-panel-top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-field {
|
||||
&.nav-panel-item label {
|
||||
left: 1rem;
|
||||
}
|
||||
|
||||
&.nav-panel-item .close {
|
||||
color: transparent;
|
||||
cursor: pointer;
|
||||
font-size: 2rem;
|
||||
transition: 0.3s color;
|
||||
}
|
||||
|
||||
&.nav-panel-item {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
&.nav-panel-add.disabled,
|
||||
&.nav-panel-add.disabled input {
|
||||
background-color: whitesmoke;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-panel-add,
|
||||
.nav-panel-search {
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.nav-form-button {
|
||||
padding: 0;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
|
||||
&:focus {
|
||||
background-color: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-form-button,
|
||||
.nav-panel-item .close {
|
||||
margin: 0 1%;
|
||||
}
|
||||
|
||||
.button-filters {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.button-export {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.entry-nav-top--sticky {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
width: 100%;
|
||||
|
||||
li {
|
||||
min-height: auto;
|
||||
padding-right: 15px;
|
||||
}
|
||||
|
||||
li > a {
|
||||
display: flex;
|
||||
padding: 14px 10px;
|
||||
align-items: center;
|
||||
white-space: initial;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 993px) {
|
||||
.toggle-add-url-container {
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.toggle-add-url {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: end;
|
||||
}
|
||||
|
||||
.button-collapse {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.dropdown-content {
|
||||
min-width: 300px;
|
||||
width: initial;
|
||||
}
|
||||
}
|
||||
70
assets/scss/_print.scss
Executable file
70
assets/scss/_print.scss
Executable file
|
|
@ -0,0 +1,70 @@
|
|||
@media print {
|
||||
/* ### Layout ### */
|
||||
|
||||
body {
|
||||
font-family: serif;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
@page {
|
||||
margin: 1cm;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
/* ### Content ### */
|
||||
|
||||
/* Hide useless blocks */
|
||||
body > header,
|
||||
body > footer,
|
||||
.entry-tools,
|
||||
header div,
|
||||
.messages,
|
||||
.entry + .results,
|
||||
.left-bar,
|
||||
.progress,
|
||||
.hide-on-large-only,
|
||||
.entry-info,
|
||||
.title-edit {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
main {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.article {
|
||||
margin: inherit !important;
|
||||
}
|
||||
|
||||
article {
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
/* Add URL after links */
|
||||
.vieworiginal a::after {
|
||||
content: " (" attr(href) ")";
|
||||
}
|
||||
|
||||
/* Add explanation after abbr */
|
||||
abbr[title]::after {
|
||||
content: " (" attr(title) ")";
|
||||
}
|
||||
|
||||
/* Change border on current pager item */
|
||||
.pagination span.current {
|
||||
border-style: dashed;
|
||||
}
|
||||
|
||||
#main {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#article {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
50
assets/scss/_sidenav.scss
Normal file
50
assets/scss/_sidenav.scss
Normal file
|
|
@ -0,0 +1,50 @@
|
|||
/* ==========================================================================
|
||||
Side-nav
|
||||
========================================================================== */
|
||||
|
||||
.side-nav {
|
||||
width: 240px;
|
||||
|
||||
li {
|
||||
padding: 0;
|
||||
|
||||
&.logo > a:hover {
|
||||
background: initial;
|
||||
}
|
||||
|
||||
& > a > i.material-icons.theme-toggle-icon {
|
||||
float: none;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
&.fixed a {
|
||||
font-size: 13px;
|
||||
line-height: 44px;
|
||||
height: 44px;
|
||||
}
|
||||
|
||||
.collapsible-header,
|
||||
&.fixed .collapsible-header {
|
||||
height: 45px;
|
||||
line-height: 44px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
> li.logo {
|
||||
line-height: 0;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.bold > a {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.items-number {
|
||||
float: right;
|
||||
}
|
||||
5
assets/scss/_variables.scss
Normal file
5
assets/scss/_variables.scss
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
/* ==========================================================================
|
||||
Variables
|
||||
========================================================================== */
|
||||
|
||||
$blue-accent-color: #00acc1;
|
||||
40
assets/scss/_various.scss
Normal file
40
assets/scss/_various.scss
Normal file
|
|
@ -0,0 +1,40 @@
|
|||
/* ==========================================================================
|
||||
* Various
|
||||
* ========================================================================== */
|
||||
|
||||
div.settings div.file-field {
|
||||
/* force height on non-input field in the settings page */
|
||||
div,
|
||||
ul {
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
/* but avoid to kill all file input */
|
||||
div {
|
||||
margin-top: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
/* override materializecss pointer-event disabled on checkboxes */
|
||||
[type="checkbox"]:not(:checked),
|
||||
[type="checkbox"]:checked,
|
||||
.input-field label {
|
||||
pointer-events: initial;
|
||||
}
|
||||
|
||||
.input-field label.active {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
nav .input-field input {
|
||||
margin: 0;
|
||||
padding-left: 0.5rem;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.tab {
|
||||
flex: 1;
|
||||
}
|
||||
19
assets/scss/index.scss
Normal file
19
assets/scss/index.scss
Normal file
|
|
@ -0,0 +1,19 @@
|
|||
@use "material-icons";
|
||||
@use "variables";
|
||||
|
||||
/* Style */
|
||||
@use "article";
|
||||
@use "cards";
|
||||
@use "entries";
|
||||
@use "filters";
|
||||
@use "layout";
|
||||
@use "nav";
|
||||
@use "sidenav";
|
||||
@use "various";
|
||||
@use "dark_theme";
|
||||
|
||||
/* Tools */
|
||||
@use "fonts";
|
||||
@use "icons";
|
||||
@use "print";
|
||||
@use "media_queries";
|
||||
426
assets/scss/share.scss
Normal file
426
assets/scss/share.scss
Normal file
|
|
@ -0,0 +1,426 @@
|
|||
/* -------------------------- Reset ------------------- */
|
||||
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
big,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
s,
|
||||
samp,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
article,
|
||||
aside,
|
||||
canvas,
|
||||
details,
|
||||
embed,
|
||||
figure,
|
||||
figcaption,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
output,
|
||||
section,
|
||||
summary,
|
||||
time,
|
||||
mark,
|
||||
audio,
|
||||
video {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border: 0;
|
||||
font-size: 100%;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
|
||||
blockquote::before,
|
||||
blockquote::after,
|
||||
q::before,
|
||||
q::after {
|
||||
content: "";
|
||||
content: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
/* -------------------------- General properties ------------------- */
|
||||
|
||||
body {
|
||||
background-color: white;
|
||||
color: #444;
|
||||
font-family: Georgia;
|
||||
line-height: 1.7;
|
||||
-ms-content-zooming: none;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 600;
|
||||
margin: 0.2em 0;
|
||||
}
|
||||
|
||||
article h1,
|
||||
article h2,
|
||||
article h3,
|
||||
article h4,
|
||||
article h5,
|
||||
article h6 {
|
||||
text-align: left;
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.4em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.3em;
|
||||
}
|
||||
|
||||
h3,
|
||||
h4 {
|
||||
font-size: 1.2em;
|
||||
}
|
||||
|
||||
h5,
|
||||
h6 {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 0.75em;
|
||||
}
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
i,
|
||||
em {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #444;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
a:active,
|
||||
a:hover {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
p,
|
||||
ul,
|
||||
ol,
|
||||
dl {
|
||||
margin: 0 0 1.75em;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding-left: 1.25em;
|
||||
}
|
||||
|
||||
li {
|
||||
padding-bottom: 0.2em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
li p:last-child,
|
||||
li li:last-child {
|
||||
margin-bottom: -0.2em;
|
||||
}
|
||||
|
||||
ul li:last-child,
|
||||
ol li:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
iframe,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
mark {
|
||||
padding: 0 0.2em;
|
||||
}
|
||||
|
||||
mark a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
border-left: 0.25em solid black;
|
||||
margin-left: -20px;
|
||||
padding-left: 17px;
|
||||
margin-bottom: 0.5em;
|
||||
margin-top: 0.5em;
|
||||
}
|
||||
|
||||
blockquote cite {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.8em;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
blockquote cite::before {
|
||||
content: "—";
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: auto;
|
||||
margin-bottom: 0.5em;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
figure figcaption {
|
||||
display: block;
|
||||
margin-top: 0.3em;
|
||||
font-style: italic;
|
||||
font-size: 0.8em;
|
||||
}
|
||||
|
||||
button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: solid #666;
|
||||
border-width: 1px 0 0;
|
||||
margin: 1.6em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
small {
|
||||
font-size: 0.7em;
|
||||
}
|
||||
|
||||
dl {
|
||||
margin: 1.6em 0;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
float: left;
|
||||
width: 11.25em;
|
||||
overflow: hidden;
|
||||
clear: left;
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: bold;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
dl dd {
|
||||
margin-left: 12.5em;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
pre {
|
||||
box-sizing: border-box;
|
||||
margin: 4em 0;
|
||||
border: 0.0625em solid #efefef;
|
||||
width: 100%;
|
||||
padding: 1em;
|
||||
font-family: Consolas, monospace;
|
||||
white-space: pre;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
pre code {
|
||||
font-size: 0.8em;
|
||||
line-height: 1.6em;
|
||||
white-space: pre-wrap;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0.125em 0.375em;
|
||||
margin: 0 0.2em;
|
||||
font-family: Consolas, monospace;
|
||||
font-size: 0.8em;
|
||||
white-space: pre;
|
||||
border: 1px solid lightgray;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
audio,
|
||||
video {
|
||||
max-width: 43.75em;
|
||||
}
|
||||
|
||||
::selection,
|
||||
mark {
|
||||
background: #666;
|
||||
color: white;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
margin-bottom: 2em;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 0.25em;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
thead tr {
|
||||
text-transform: uppercase;
|
||||
font-size: 0.85em;
|
||||
letter-spacing: 1px;
|
||||
font-family: "Segoe UI", sans-serif;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
tbody tr:nth-child(2n+1) {
|
||||
background: rgb(0 0 0 / 10%);
|
||||
}
|
||||
|
||||
tbody {
|
||||
border: solid #999;
|
||||
border-width: 1px 0;
|
||||
}
|
||||
|
||||
figure {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
figure > * {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
header {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.shared-by {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
/* --------------------- Responsive design ------------------------- */
|
||||
|
||||
@media (max-width: 719px) {
|
||||
header > *:not(.preview),
|
||||
article {
|
||||
padding: 0 1em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 720px) {
|
||||
blockquote {
|
||||
margin-left: -1.4375em;
|
||||
padding-left: 1.25em;
|
||||
}
|
||||
|
||||
header {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.block {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
max-width: 43.75em;
|
||||
padding: 0 1.25em;
|
||||
}
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue