mirror of
https://github.com/wallabag/wallabag.git
synced 2024-04-28 07:28:43 +00:00
1325 lines
20 KiB
CSS
Executable file
1325 lines
20 KiB
CSS
Executable file
/* ==========================================================================
|
|
Sommaire
|
|
|
|
1 = Style Guide
|
|
2 = Layout
|
|
3 = Pictos
|
|
4 = Messages
|
|
5 = Article
|
|
6 = Media queries
|
|
|
|
========================================================================== */
|
|
|
|
html {
|
|
min-height: 100%;
|
|
}
|
|
|
|
body {
|
|
background-color: #eee;
|
|
}
|
|
|
|
.login {
|
|
background-color: #333;
|
|
}
|
|
|
|
.login #main {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.login form {
|
|
background-color: #fff;
|
|
padding: 1.5em;
|
|
box-shadow: 0 1px 8px rgb(0 0 0 / 90%);
|
|
width: 20em;
|
|
position: absolute;
|
|
top: 8em;
|
|
left: 50%;
|
|
margin-left: -10em;
|
|
}
|
|
|
|
.login .logo {
|
|
position: absolute;
|
|
top: 2em;
|
|
left: 50%;
|
|
margin-left: -55px;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
1 = Style Guide
|
|
========================================================================== */
|
|
|
|
::selection {
|
|
color: #fff;
|
|
background-color: #000;
|
|
}
|
|
|
|
.desktopHide {
|
|
display: none;
|
|
}
|
|
|
|
.logo {
|
|
position: fixed;
|
|
z-index: 20;
|
|
top: 0.4em;
|
|
left: 0.6em;
|
|
}
|
|
|
|
h2,
|
|
h3,
|
|
h4 {
|
|
font-family: "PT Sans", sans-serif;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
p,
|
|
li,
|
|
label {
|
|
color: #666;
|
|
}
|
|
|
|
a {
|
|
color: #000;
|
|
font-weight: bold;
|
|
}
|
|
|
|
a.nostyle {
|
|
text-decoration: none;
|
|
}
|
|
|
|
a:hover,
|
|
a:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
form fieldset {
|
|
border: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
form input[type="text"],
|
|
form input[type="number"],
|
|
select,
|
|
form input[type="password"],
|
|
form input[type="url"],
|
|
form input[type="email"] {
|
|
border: 1px solid #999;
|
|
padding: 0.5em 1em;
|
|
min-width: 12em;
|
|
color: #666;
|
|
}
|
|
|
|
@media screen and (min-device-pixel-ratio: 0) {
|
|
select {
|
|
appearance: none;
|
|
border-radius: 0;
|
|
background: #fff url("../../_global/img/bg-select.png") no-repeat right center;
|
|
}
|
|
}
|
|
|
|
.inline .row {
|
|
display: inline-block;
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.inline label {
|
|
min-width: 6em;
|
|
}
|
|
|
|
fieldset label {
|
|
display: inline-block;
|
|
min-width: 12.5em;
|
|
color: #666;
|
|
}
|
|
|
|
label {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
form .row {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
form button,
|
|
input[type="submit"] {
|
|
cursor: pointer;
|
|
background-color: #000;
|
|
color: #fff;
|
|
padding: 0.5em 1em;
|
|
display: inline-block;
|
|
border: 1px solid #000;
|
|
}
|
|
|
|
form button:hover,
|
|
form button:focus,
|
|
input[type="submit"]:hover,
|
|
input[type="submit"]:focus {
|
|
background-color: #fff;
|
|
color: #000;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
#bookmarklet {
|
|
cursor: move;
|
|
}
|
|
|
|
h2::after {
|
|
content: "";
|
|
height: 4px;
|
|
width: 70px;
|
|
background-color: #000;
|
|
display: block;
|
|
}
|
|
|
|
.links {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.links li {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
#links {
|
|
position: fixed;
|
|
top: 0;
|
|
width: 10em;
|
|
left: 0;
|
|
text-align: right;
|
|
background-color: #333;
|
|
padding-top: 9.5em;
|
|
height: 100%;
|
|
box-shadow: inset -4px 0 20px rgb(0 0 0 / 60%);
|
|
z-index: 15;
|
|
}
|
|
|
|
#main {
|
|
margin-left: 12em;
|
|
position: relative;
|
|
z-index: 10;
|
|
padding-right: 5%;
|
|
padding-bottom: 1em;
|
|
}
|
|
|
|
#links > li > a {
|
|
display: block;
|
|
padding: 0.5em 2em 0.5em 1em;
|
|
color: #fff;
|
|
position: relative;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
font-weight: normal;
|
|
font-family: "PT Sans", sans-serif;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
#links > li > a:hover,
|
|
#links > li > a:focus {
|
|
background-color: #999;
|
|
color: #000;
|
|
}
|
|
|
|
#links .current::after {
|
|
content: "";
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
border-style: solid;
|
|
border-width: 10px;
|
|
border-color: transparent #eee transparent transparent;
|
|
right: 0;
|
|
top: 50%;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
#links li:last-child {
|
|
position: fixed;
|
|
bottom: 1em;
|
|
width: 10em;
|
|
}
|
|
|
|
#links li:last-child a::before {
|
|
font-size: 1.2em;
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
|
|
#sort {
|
|
padding: 0;
|
|
list-style-type: none;
|
|
opacity: 0.5;
|
|
display: inline-block;
|
|
}
|
|
|
|
#sort li {
|
|
display: inline;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
#sort li + li {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
#sort a {
|
|
padding: 2px 2px 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
#sort img {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
#sort img:hover {
|
|
cursor: pointer;
|
|
}
|
|
|
|
#display-mode {
|
|
float: right;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
#listmode {
|
|
width: 16px;
|
|
display: inline-block;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#listmode.tablemode {
|
|
background-image: url("../../_global/img/table.png");
|
|
background-repeat: no-repeat;
|
|
background-position: bottom;
|
|
}
|
|
|
|
#listmode.listmode {
|
|
background-image: url("../../_global/img/list.png");
|
|
background-repeat: no-repeat;
|
|
background-position: bottom;
|
|
}
|
|
|
|
#warning_message {
|
|
position: fixed;
|
|
background-color: #ff6347;
|
|
z-index: 1000;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
color: #000;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
2 = Layout
|
|
========================================================================== */
|
|
|
|
#content {
|
|
margin-top: 2em;
|
|
min-height: 30em;
|
|
}
|
|
|
|
footer {
|
|
text-align: right;
|
|
position: relative;
|
|
bottom: 0;
|
|
right: 5em;
|
|
color: #999;
|
|
font-size: 0.8em;
|
|
font-style: italic;
|
|
z-index: 20;
|
|
}
|
|
|
|
footer a {
|
|
color: #999;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.list-entries {
|
|
letter-spacing: -5px;
|
|
}
|
|
|
|
.listmode.entry {
|
|
width: 100%;
|
|
height: inherit;
|
|
}
|
|
|
|
.card-entry-labels {
|
|
position: absolute;
|
|
top: 100px;
|
|
left: -1em;
|
|
z-index: 90;
|
|
max-width: 50%;
|
|
padding-left: 0;
|
|
}
|
|
|
|
.card-entry-labels li {
|
|
margin: 10px 10px 10px auto;
|
|
padding: 5px 12px 5px 25px;
|
|
background-color: rgb(0 0 0 / 60%);
|
|
border-radius: 0 3px 3px 0;
|
|
color: #fff;
|
|
cursor: default;
|
|
max-height: 2em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.card-entry-tags {
|
|
max-height: 2em;
|
|
overflow-y: hidden;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.card-entry-tags li,
|
|
.card-entry-tags span {
|
|
display: inline-block;
|
|
margin: 0 5px;
|
|
padding: 5px 12px;
|
|
background-color: rgb(0 0 0 / 60%);
|
|
border-radius: 3px;
|
|
max-height: 2em;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.card-entry-tags a,
|
|
.card-entry-labels a {
|
|
text-decoration: none;
|
|
font-weight: normal;
|
|
color: #fff;
|
|
}
|
|
|
|
.nav-panel-add-tag {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
.list-entries + .results {
|
|
margin-bottom: 2em;
|
|
}
|
|
|
|
.reading-time,
|
|
.created-at {
|
|
color: #999;
|
|
font-style: italic;
|
|
font-weight: normal;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.estimatedTime small {
|
|
position: relative;
|
|
top: -1px;
|
|
}
|
|
|
|
.entry {
|
|
background-color: #fff;
|
|
letter-spacing: normal;
|
|
box-shadow: 0 3px 7px rgb(0 0 0 / 30%);
|
|
display: inline-block;
|
|
width: 32%;
|
|
margin-bottom: 1.5em;
|
|
vertical-align: top;
|
|
margin-right: 1%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
padding: 1.5em 1.5em 3em;
|
|
height: 440px;
|
|
}
|
|
|
|
.entry::before {
|
|
content: "";
|
|
width: 0;
|
|
height: 0;
|
|
border-style: solid;
|
|
border-color: transparent transparent #000;
|
|
border-width: 10px;
|
|
position: absolute;
|
|
bottom: 0.3em;
|
|
z-index: 10;
|
|
right: 1.5em;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.entry::after {
|
|
content: "";
|
|
position: absolute;
|
|
height: 7px;
|
|
width: 100%;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: #000;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.entry:hover {
|
|
box-shadow: 0 3px 10px rgb(0 0 0 / 100%);
|
|
}
|
|
|
|
.entry:hover::after {
|
|
height: 40px;
|
|
}
|
|
|
|
.entry:hover::before {
|
|
bottom: 2.4em;
|
|
}
|
|
|
|
.entry:hover h2 a {
|
|
color: #666;
|
|
}
|
|
|
|
.entry h2 {
|
|
text-transform: none;
|
|
margin-bottom: 0;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
.entry h2::after {
|
|
content: none;
|
|
}
|
|
|
|
.entry h2 a {
|
|
display: block;
|
|
text-decoration: none;
|
|
color: #000;
|
|
word-wrap: break-word;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
img.preview {
|
|
max-width: calc(100% + 3em);
|
|
left: -1.5em;
|
|
position: relative;
|
|
}
|
|
|
|
.entry p {
|
|
color: #666;
|
|
font-size: 0.9em;
|
|
line-height: 1.7;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.entry h2 a::first-letter {
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.entry:hover .tools {
|
|
bottom: 0;
|
|
}
|
|
|
|
.entry .tools {
|
|
position: absolute;
|
|
bottom: -50px;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 10;
|
|
padding-right: 0.5em;
|
|
text-align: right;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
.entry .tools a {
|
|
color: #666;
|
|
text-decoration: none;
|
|
display: block;
|
|
padding: 0.4em;
|
|
}
|
|
|
|
.entry .tools a:hover {
|
|
color: #fff;
|
|
}
|
|
|
|
.entry .tools li {
|
|
display: inline-block;
|
|
}
|
|
|
|
.entry:nth-child(3n+1) {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.results {
|
|
letter-spacing: -5px;
|
|
padding: 0 0 0.5em;
|
|
}
|
|
|
|
.results > * {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
letter-spacing: normal;
|
|
width: 50%;
|
|
text-align: right;
|
|
}
|
|
|
|
div.pagination ul {
|
|
text-align: right;
|
|
}
|
|
|
|
.nb-results {
|
|
text-align: left;
|
|
font-style: italic;
|
|
color: #999;
|
|
display: inline-flex;
|
|
}
|
|
|
|
div.pagination ul > * {
|
|
display: inline-block;
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
div.pagination ul a {
|
|
color: #999;
|
|
text-decoration: none;
|
|
}
|
|
|
|
div.pagination ul a:hover,
|
|
div.pagination ul a:focus {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
div.pagination ul .prev.disabled,
|
|
div.pagination ul .next.disabled {
|
|
display: none;
|
|
}
|
|
|
|
div.pagination ul .current {
|
|
height: 25px;
|
|
padding: 4px 8px;
|
|
border: 1px solid #d5d5d5;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
color: #000;
|
|
background-color: #ccc;
|
|
}
|
|
|
|
.hide {
|
|
display: none;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
2.1 = "save a link" related styles
|
|
========================================================================== */
|
|
|
|
.popup-form {
|
|
background: rgb(0 0 0 / 50%);
|
|
position: absolute;
|
|
top: 0;
|
|
left: 10em;
|
|
z-index: 20;
|
|
height: 100%;
|
|
width: 100%;
|
|
margin: 0;
|
|
margin-top: -30% !important;
|
|
padding: 2em;
|
|
display: none;
|
|
border-left: 1px #eee solid;
|
|
}
|
|
|
|
.popup-form form {
|
|
background-color: #fff;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 20;
|
|
border: 10px solid #000;
|
|
width: 400px;
|
|
height: 200px;
|
|
padding: 2em;
|
|
}
|
|
|
|
#bagit-form-form .addurl {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.closeMessage,
|
|
.close-button {
|
|
background-color: #000;
|
|
color: #fff;
|
|
font-size: 1.2em;
|
|
line-height: 1.6;
|
|
width: 1.6em;
|
|
height: 1.6em;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.closeMessage:hover,
|
|
.closeMessage:focus,
|
|
.close-button:hover,
|
|
.close-button:focus {
|
|
background-color: #999;
|
|
color: #000;
|
|
}
|
|
|
|
.close-button--popup {
|
|
display: inline-block;
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
font-size: 1.4em;
|
|
}
|
|
|
|
.active-current {
|
|
background-color: #999;
|
|
}
|
|
|
|
.active-current::after {
|
|
content: "";
|
|
width: 0;
|
|
height: 0;
|
|
position: absolute;
|
|
border-style: solid;
|
|
border-width: 10px;
|
|
border-color: transparent #eee transparent transparent;
|
|
right: 0;
|
|
top: 50%;
|
|
margin-top: -10px;
|
|
}
|
|
|
|
.opacity03 {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.add-to-wallabag-link-after {
|
|
background-color: #000;
|
|
color: #fff;
|
|
padding: 0 3px 2px;
|
|
}
|
|
|
|
a.add-to-wallabag-link-after {
|
|
visibility: hidden;
|
|
position: absolute;
|
|
opacity: 0;
|
|
transition-duration: 2s;
|
|
transition-timing-function: ease-out;
|
|
}
|
|
|
|
#article article a:hover + a.add-to-wallabag-link-after,
|
|
a.add-to-wallabag-link-after:hover {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
transition-duration: 0.3s;
|
|
transition-timing-function: ease-in;
|
|
}
|
|
|
|
a.add-to-wallabag-link-after::after {
|
|
content: "w";
|
|
}
|
|
|
|
#add-link-result {
|
|
font-weight: bold;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
.btn-clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
3 = Pictos
|
|
========================================================================== */
|
|
|
|
@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: 1em; /* 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";
|
|
}
|
|
|
|
.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; }
|
|
|
|
.icon span,
|
|
.icon-image span {
|
|
position: absolute;
|
|
top: -9999px;
|
|
}
|
|
|
|
[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;
|
|
|
|
/* Enable Ligatures ================ */
|
|
letter-spacing: 0;
|
|
font-feature-settings: "liga";
|
|
|
|
/* Better Font Rendering =========== */
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
|
|
.icon-flattr::before {
|
|
content: "\ead4";
|
|
}
|
|
|
|
.icon-mail::before {
|
|
content: "\ea86";
|
|
}
|
|
|
|
.icon-up-open::before {
|
|
content: "\e80b";
|
|
}
|
|
|
|
.icon-star::before {
|
|
content: "\e9d9";
|
|
}
|
|
|
|
.icon-check::before {
|
|
content: "\ea10";
|
|
}
|
|
|
|
.icon-link::before {
|
|
content: "\e9cb";
|
|
}
|
|
|
|
.icon-reply::before {
|
|
content: "\e806";
|
|
}
|
|
|
|
.icon-menu::before {
|
|
content: "\e9bd";
|
|
}
|
|
|
|
.icon-clock::before {
|
|
content: "\e803";
|
|
}
|
|
|
|
.icon-twitter::before {
|
|
content: "\ea96";
|
|
}
|
|
|
|
.icon-down-open::before {
|
|
content: "\e809";
|
|
}
|
|
|
|
.icon-trash::before {
|
|
content: "\e9ac";
|
|
}
|
|
|
|
.icon-delete::before {
|
|
content: "\ea0d";
|
|
}
|
|
|
|
.icon-power::before {
|
|
content: "\ea14";
|
|
}
|
|
|
|
.icon-arrow-up-thick::before {
|
|
content: "\ea3a";
|
|
}
|
|
|
|
.icon-rss::before {
|
|
content: "\e808";
|
|
}
|
|
|
|
.icon-print::before {
|
|
content: "\e954";
|
|
}
|
|
|
|
.icon-reload::before {
|
|
content: "\ea2e";
|
|
}
|
|
|
|
.icon-price-tags::before {
|
|
content: "\e936";
|
|
}
|
|
|
|
.icon-eye::before {
|
|
content: "\e9ce";
|
|
}
|
|
|
|
.icon-no-eye::before {
|
|
content: "\e9d1";
|
|
}
|
|
|
|
.icon-calendar::before {
|
|
content: "\e953";
|
|
}
|
|
|
|
.icon-pencil2::before {
|
|
content: "\e906";
|
|
}
|
|
|
|
.icon-users::before {
|
|
content: "\e972";
|
|
}
|
|
|
|
.icon-time::before {
|
|
content: "\e952";
|
|
}
|
|
|
|
/* .icon-image class, for image-based icons
|
|
========================================================================== */
|
|
|
|
.icon-image {
|
|
background-size: 16px 16px;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
padding-right: 1em !important;
|
|
padding-left: 1em !important;
|
|
}
|
|
|
|
/* Carrot (http://carrot.org) */
|
|
.icon-image--carrot {
|
|
background-image: url("../../_global/img/icons/carrot-icon--white.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");
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Icon selected
|
|
========================================================================== */
|
|
|
|
.icon-star.fav::before {
|
|
color: #fff;
|
|
}
|
|
|
|
.icon-check.archive::before {
|
|
color: #fff;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
4 = Messages
|
|
========================================================================== */
|
|
|
|
.messages {
|
|
text-align: left;
|
|
margin-top: 1em;
|
|
}
|
|
|
|
.messages > * {
|
|
display: inline-block;
|
|
}
|
|
|
|
.warning {
|
|
font-weight: bold;
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
.more-info {
|
|
font-size: 0.85em;
|
|
line-height: 1.5;
|
|
color: #aaa;
|
|
}
|
|
|
|
.more-info a {
|
|
color: #aaa;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
5 = Article
|
|
========================================================================== */
|
|
|
|
#article {
|
|
width: 70%;
|
|
margin-bottom: 3em;
|
|
text-align: justify;
|
|
}
|
|
|
|
#article .tags {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
#article i {
|
|
font-style: normal;
|
|
}
|
|
|
|
blockquote {
|
|
border: 1px solid #999;
|
|
background-color: #fff;
|
|
padding: 1em;
|
|
margin: 0;
|
|
}
|
|
|
|
#article h1 {
|
|
text-align: left;
|
|
}
|
|
|
|
#article h2,
|
|
#article h3,
|
|
#article h4 {
|
|
text-transform: none;
|
|
}
|
|
|
|
#article h2::after {
|
|
content: none;
|
|
}
|
|
|
|
.topPosF {
|
|
position: fixed;
|
|
right: 20%;
|
|
bottom: 2em;
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
#article_toolbar {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
#article_toolbar li {
|
|
display: inline-block;
|
|
margin: 3px auto;
|
|
}
|
|
|
|
#article_toolbar a {
|
|
background-color: #000;
|
|
padding: 0.3em 0.5em 0.2em;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#article_toolbar a:hover,
|
|
#article_toolbar a:focus {
|
|
background-color: #999;
|
|
}
|
|
|
|
#nav-btn-add-tag {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.shaarli::before {
|
|
content: "*";
|
|
}
|
|
|
|
.scuttle::before {
|
|
content: "*";
|
|
}
|
|
|
|
.return {
|
|
text-decoration: none;
|
|
margin-top: 1em;
|
|
display: block;
|
|
}
|
|
|
|
.return::before {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.notags {
|
|
font-style: italic;
|
|
color: #999;
|
|
}
|
|
|
|
.icon-rss {
|
|
background-color: #000;
|
|
color: #fff;
|
|
padding: 0.2em 0.5em;
|
|
}
|
|
|
|
.icon-rss::before {
|
|
position: relative;
|
|
top: 2px;
|
|
}
|
|
|
|
.list-tags li {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
.list-tags .icon-rss:hover,
|
|
.list-tags .icon-rss:focus {
|
|
background-color: #fff;
|
|
color: #000;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.list-tags a {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.list-tags a:hover,
|
|
.list-tags a:focus {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
pre code {
|
|
font-family: "Courier New", Courier, monospace;
|
|
}
|
|
|
|
#filters {
|
|
position: fixed;
|
|
width: 20%;
|
|
height: 100%;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: #fff;
|
|
padding: 15px;
|
|
padding-right: 30px;
|
|
padding-top: 30px;
|
|
border-left: 1px #333 solid;
|
|
z-index: 12;
|
|
min-width: 300px;
|
|
}
|
|
|
|
#filters form .filter-group {
|
|
margin: 5px;
|
|
}
|
|
|
|
#download-form {
|
|
position: fixed;
|
|
width: 10%;
|
|
height: 100%;
|
|
top: 0;
|
|
right: 0;
|
|
background-color: #fff;
|
|
padding: 15px;
|
|
padding-right: 30px;
|
|
padding-top: 30px;
|
|
border-left: 1px #333 solid;
|
|
z-index: 12;
|
|
min-width: 200px;
|
|
}
|
|
|
|
#download-form li {
|
|
display: block;
|
|
padding: 0.5em 2em 0.5em 1em;
|
|
color: #fff;
|
|
position: relative;
|
|
text-transform: uppercase;
|
|
text-decoration: none;
|
|
font-weight: 400;
|
|
font-family: PT Sans, sans-serif;
|
|
transition: all 0.5s ease;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
6 = Media Queries
|
|
========================================================================== */
|
|
|
|
@media screen and (max-width: 1050px) {
|
|
.entry {
|
|
width: 49%;
|
|
}
|
|
|
|
.entry:nth-child(3n+1) {
|
|
margin-left: 1.5%;
|
|
}
|
|
|
|
.entry:nth-child(2n+1) {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 900px) {
|
|
#article {
|
|
width: 80%;
|
|
}
|
|
|
|
.topPosF {
|
|
right: 2.5em;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 700px) {
|
|
.entry {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
#display-mode {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-height: 770px) {
|
|
.menu.users,
|
|
.menu.internal,
|
|
.menu.developer {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 500px) {
|
|
.entry {
|
|
width: 100%;
|
|
margin-left: 0;
|
|
}
|
|
|
|
body > header {
|
|
background-color: #333;
|
|
position: fixed;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 3em;
|
|
z-index: 11;
|
|
}
|
|
|
|
#links li:last-child {
|
|
position: static;
|
|
width: auto;
|
|
}
|
|
|
|
#links li:last-child a::before {
|
|
content: none;
|
|
}
|
|
|
|
.logo {
|
|
width: 1.25em;
|
|
height: 1.25em;
|
|
left: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.login > header {
|
|
position: static;
|
|
}
|
|
|
|
.login form {
|
|
width: 100%;
|
|
position: static;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.login .logo {
|
|
height: auto;
|
|
top: 0.5em;
|
|
width: 75px;
|
|
margin-left: -37.5px;
|
|
}
|
|
|
|
.desktopHide {
|
|
display: block;
|
|
position: fixed;
|
|
z-index: 20;
|
|
top: 0;
|
|
right: 0;
|
|
border: 0;
|
|
width: 2.5em;
|
|
height: 2.5em;
|
|
cursor: pointer;
|
|
background-color: #999;
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.desktopHide:hover,
|
|
.desktopHide:focus {
|
|
background-color: #fff;
|
|
}
|
|
|
|
#links {
|
|
display: none;
|
|
width: 100%;
|
|
height: auto;
|
|
padding-top: 3em;
|
|
}
|
|
|
|
#links.menu--open {
|
|
display: block;
|
|
}
|
|
|
|
footer {
|
|
position: static;
|
|
margin-right: 3em;
|
|
}
|
|
|
|
#main {
|
|
margin-left: 1.5em;
|
|
padding-right: 1.5em;
|
|
position: static;
|
|
margin-top: 3em;
|
|
}
|
|
|
|
.card-entry-labels {
|
|
display: none;
|
|
}
|
|
|
|
#article_toolbar .topPosF {
|
|
display: none;
|
|
}
|
|
|
|
#article {
|
|
width: 100%;
|
|
}
|
|
|
|
#article h1 {
|
|
font-size: 1.5em;
|
|
}
|
|
|
|
#article_toolbar a {
|
|
padding: 0.3em 0.4em 0.2em;
|
|
}
|
|
|
|
#display-mode {
|
|
display: none;
|
|
}
|
|
|
|
.popup-form,
|
|
#bagit-form,
|
|
#search-form {
|
|
left: 0;
|
|
width: 100%;
|
|
border-left: none;
|
|
}
|
|
|
|
.popup-form form,
|
|
#bagit-form form,
|
|
#search-form form {
|
|
width: 100%;
|
|
}
|
|
}
|