mirror of
https://github.com/moparisthebest/wallabag
synced 2024-12-11 10:12:22 -05:00
684 lines
11 KiB
CSS
Executable File
684 lines
11 KiB
CSS
Executable File
* {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
margin: 10px;
|
|
font-family: 'Roboto',Verdana,Geneva,sans-serif;
|
|
font-size: 16px;
|
|
color: #000;
|
|
}
|
|
|
|
h1 span {
|
|
color #FFF;
|
|
background: #000;
|
|
display: inline-block;
|
|
padding: 0.2em 1em 0.2em 1.2em;
|
|
font-size: 0.7em;
|
|
position: relative;
|
|
top: -1em;
|
|
left: -1em;
|
|
}
|
|
|
|
h1 a {
|
|
color: #FFF;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#menu {
|
|
font-family: 'fontello';
|
|
position:fixed;
|
|
z-index: 11;
|
|
top: 0.7em;
|
|
right: 0.5em;
|
|
border:0;
|
|
font-size: 2em;
|
|
background: #000;
|
|
color:#FFF;
|
|
height: 58px;
|
|
width: 58px;
|
|
line-height:58px;
|
|
border-radius:120px;
|
|
}
|
|
|
|
#menu:hover, #menu:focus {
|
|
background: #FFF;
|
|
color:#000;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#menu span {
|
|
position: absolute;
|
|
top: -99999px;
|
|
}
|
|
|
|
#menuContainer ul, #article_toolbar ul {
|
|
position:fixed;
|
|
top: 0;
|
|
left:0;
|
|
width: 100%;
|
|
padding: 0;
|
|
margin: 0;
|
|
text-align:center;
|
|
height:80px;
|
|
}
|
|
|
|
/*Inspired by http://tympanus.net/Tutorials/AnimatedBorderMenus/index.html */
|
|
|
|
#menuContainer, #article_toolbar {
|
|
position: fixed;
|
|
top: 0;
|
|
left:0;
|
|
width: 100%;
|
|
height: 0;
|
|
overflow: hidden;
|
|
border-width:0;
|
|
border-style: solid;
|
|
border-color:#000;
|
|
background-color: transparent;
|
|
-webkit-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
|
|
-moz-transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
|
|
transition: border-width 0.3s, background-color 0.3s, height 0s 0.3s;
|
|
}
|
|
|
|
#article_toolbar ul {
|
|
padding: 1.7em;
|
|
}
|
|
|
|
#menuContainer.open, #article_toolbar.open {
|
|
border-width:80px;
|
|
height: 100%;
|
|
background: rgba(0,0,0,0.5);
|
|
-webkit-transition: border-width 0.3s, background-color 0.3s;
|
|
-moz-transition: border-width 0.3s, background-color 0.3s;
|
|
transition: border-width 0.3s, background-color 0.3s;
|
|
z-index: 1;
|
|
}
|
|
|
|
#links li, #article_toolbar li {
|
|
list-style: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
#links li a, #article_toolbar a {
|
|
color:#FFF;
|
|
display: block;
|
|
position:relative;
|
|
top: -200px;
|
|
-webkit-transition: top 0.3s ease;
|
|
-moz-transition: top 0.3s ease;
|
|
transition: top 0.3s ease;
|
|
padding:1.85em 1em;
|
|
}
|
|
|
|
#links li a {
|
|
text-decoration:none;
|
|
text-transform:uppercase;
|
|
}
|
|
|
|
#links li a:hover, #links li a:focus {
|
|
background: #FFF;
|
|
color:#000;
|
|
}
|
|
|
|
#menuContainer.open li a, #article_toolbar.open a {
|
|
top: 0;
|
|
-webkit-transition: top 0.3s ease;
|
|
-moz-transition: top 0.3s ease;
|
|
transition: top 0.3s ease;
|
|
-webkit-transition-delay:0.25ms;
|
|
-moz-transition-delay:0.25ms;
|
|
transition-delay:0.25ms;
|
|
}
|
|
|
|
#menuContainer.open li:nth-child(2) a {
|
|
-webkit-transition-delay:0.50ms;
|
|
-moz-transition-delay:0.50ms;
|
|
transition-delay:0.50ms;
|
|
}
|
|
|
|
#menuContainer.open li:nth-child(3) a {
|
|
-webkit-transition-delay:1ms;
|
|
-moz-transition-delay:1ms;
|
|
transition-delay:1ms;
|
|
}
|
|
|
|
#menuContainer.open li:nth-child(4) a {
|
|
-webkit-transition-delay:1.25ms;
|
|
-moz-transition-delay:1.25ms;
|
|
transition-delay:1.25ms;
|
|
}
|
|
|
|
#menuContainer.open li:nth-child(5) a {
|
|
-webkit-transition-delay:1.55ms;
|
|
-moz-transition-delay:1.55ms;
|
|
transition-delay:1.55ms;
|
|
}
|
|
|
|
#article_toolbar li:nth-child(2) { display: none; }
|
|
|
|
#menu:before {
|
|
content: "\e801";
|
|
display: block;
|
|
text-indent: 0;
|
|
}
|
|
|
|
body > header {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 1em;
|
|
z-index: 10;
|
|
}
|
|
|
|
#main {
|
|
padding:6em;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
entrie
|
|
========================================================================== */
|
|
|
|
.entrie, #article {
|
|
width: 45em;
|
|
margin: auto;
|
|
position:relative;
|
|
padding: 0 0 1em 0;
|
|
margin-bottom: 1.5em;
|
|
}
|
|
|
|
#article a {
|
|
text-decoration: underline;
|
|
color:#000;
|
|
}
|
|
|
|
#article a:hover, #article a:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.entrie:after {
|
|
content:"";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 4px;
|
|
background: #000;
|
|
bottom:0;
|
|
left: -1em;
|
|
}
|
|
|
|
.entrie p {
|
|
padding:0 0 0 1.5em;
|
|
}
|
|
|
|
.entrie:before {
|
|
content:'';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -1em;
|
|
width: 4px;
|
|
height: 100%;
|
|
background: #000;
|
|
}
|
|
|
|
.entrie h2:after {
|
|
content:"";
|
|
display: block;
|
|
width: 0;
|
|
height: 0;
|
|
border-color: #000;
|
|
border-width:7px;
|
|
border-color:transparent transparent transparent #000;
|
|
border-style: solid;
|
|
position: absolute;
|
|
top: 0.8em;
|
|
right: -0.58em;
|
|
}
|
|
|
|
.entrie h2 {
|
|
margin:0;
|
|
display: inline-block;
|
|
position: relative;
|
|
max-width: 78%;
|
|
}
|
|
|
|
.entrie h2 a {
|
|
color:#000;
|
|
text-decoration:none;
|
|
display: block;
|
|
background: #000;
|
|
padding: 0.4em 1em;
|
|
color:#FFF;
|
|
margin-left: -0.5em;
|
|
-webkit-transition: all 0.3s ease-out;
|
|
-moz-transition: all 0.3s ease-out;
|
|
transition: all 0.3s ease-out;
|
|
}
|
|
|
|
.entrie h2 a:hover, .entrie h2 a:focus {
|
|
padding:0.4em 1em 0.4em 2em;
|
|
}
|
|
|
|
ul {
|
|
padding:0;
|
|
margin:0;
|
|
}
|
|
|
|
ul li {
|
|
list-style: none;
|
|
}
|
|
|
|
.tools {
|
|
display: inline-block;
|
|
margin-left: 1em;
|
|
vertical-align: top;
|
|
padding-top: 1em;
|
|
}
|
|
|
|
.tools a span {
|
|
position:absolute;
|
|
top: -99999px;
|
|
}
|
|
|
|
.tools li {
|
|
display: inline-block;
|
|
}
|
|
|
|
.tools a {
|
|
display: block;
|
|
color:#FFF;
|
|
background: #000;
|
|
text-decoration:none;
|
|
height: 1.5em;
|
|
width: 1.5em;
|
|
text-align: center;
|
|
line-height:1.5em;
|
|
border-radius: 90px;
|
|
}
|
|
|
|
.tools a:hover, .tools a:focus {
|
|
background: #FFF;
|
|
color:#000;
|
|
}
|
|
|
|
.tools a:before { display: block; font-family: 'icomoon'; }
|
|
|
|
|
|
.fav-off:before, .fav:before { content: '\e805'; } /* '' */
|
|
.archive-off:before, .archive:before { content: '\e804'; } /* '' */
|
|
.tools .archive, .tools .fav {
|
|
background: #FFF;
|
|
color:#000;
|
|
}
|
|
.link:before { content: '\e801'; } /* '' */
|
|
.delete:before { content: '\e80c'; } /* '' */
|
|
.reading-time:before { content: '\e803'; } /* '' */
|
|
|
|
#article_toolbar a:before {
|
|
display: block;
|
|
font-family: 'icomoon';
|
|
}
|
|
|
|
#article_toolbar a {
|
|
display: block;
|
|
color:#000;
|
|
background: #FFF;
|
|
text-decoration:none;
|
|
height: 1.5em;
|
|
width: 1.5em;
|
|
text-align: center;
|
|
line-height:1.5em;
|
|
border-radius: 90px;
|
|
padding: 0;
|
|
}
|
|
|
|
#article_toolbar a:hover, #article_toolbar a:focus {
|
|
background: #000;
|
|
color:#FFF;
|
|
}
|
|
|
|
#article_toolbar span {
|
|
position: absolute;
|
|
top: -99999px;
|
|
}
|
|
|
|
.email:before { content: '\e80a'; } /* '' */
|
|
.icon-check:before { content: '\e804'; } /* '' */
|
|
.back:before { content: '\e806'; } /* '' */
|
|
.flattr:before { content: '\e800'; } /* '' */
|
|
.bad-display:before { content: '\e600'; } /* '' */
|
|
.twitter:before { content: '\e807'; } /* '' */
|
|
|
|
#article_toolbar .flattrli {
|
|
display: none;
|
|
}
|
|
|
|
#article_toolbar li {
|
|
margin: 0 0 0 1em;
|
|
}
|
|
|
|
|
|
footer {
|
|
position: fixed;
|
|
bottom: 0;
|
|
width: 100%;
|
|
padding: 0 2%;
|
|
left: 0;
|
|
text-align:right;
|
|
font-size: 0.8em;
|
|
font-style: italic;
|
|
background: rgba(255,255,255,0.5);
|
|
}
|
|
|
|
footer a {
|
|
color:#000;
|
|
}
|
|
|
|
footer a:hover,footer a:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
footer p:first-child {
|
|
float:left;
|
|
}
|
|
|
|
#loginForm fieldset {
|
|
border:5px solid #000;
|
|
padding: 1.5em;
|
|
}
|
|
|
|
fieldset {
|
|
border:0;
|
|
padding: 0;
|
|
}
|
|
|
|
#loginForm {
|
|
max-width: 25em;
|
|
margin: auto;
|
|
}
|
|
|
|
#loginForm .row {
|
|
margin-bottom: 0.5em;
|
|
}
|
|
|
|
form h2 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
form label {
|
|
width: 40%;
|
|
display: inline-block;
|
|
}
|
|
|
|
form input[type="text"], form input[type="password"], form input[type='url'], form select {
|
|
border:1px solid #000;
|
|
padding:0.5em 1em;
|
|
}
|
|
|
|
@media screen and (-webkit-min-device-pixel-ratio:0){
|
|
form select{
|
|
-webkit-appearance: none;
|
|
background: url(../img/bg-select.png) no-repeat right center;
|
|
padding-right: 2.2em;
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
form button, form input[type="submit"] {
|
|
background: #000;
|
|
color:#FFF;
|
|
border:0;
|
|
font-size:1em;
|
|
padding:0.5em 1em;
|
|
margin-top: 1em;
|
|
cursor: pointer;
|
|
}
|
|
|
|
form button:hover, form button:focus, form input[type="submit"]:hover, form input[type="submit"]:focus {
|
|
background: #FFF;
|
|
color: #000;
|
|
}
|
|
|
|
/* ==========================================================================
|
|
Config
|
|
========================================================================== */
|
|
|
|
#config {
|
|
max-width: 60%;
|
|
margin: auto;
|
|
}
|
|
|
|
#config a {
|
|
background: #000;
|
|
text-decoration: none;
|
|
color:#FFF;
|
|
padding: 0.2em 1em;
|
|
}
|
|
|
|
#config .special {
|
|
background: none;
|
|
padding:0;
|
|
color: #000;
|
|
}
|
|
|
|
#config a:hover, #config a:focus {
|
|
background: #FFF;
|
|
color:#000;
|
|
}
|
|
|
|
#config li {
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
#plainurl {
|
|
font-size: 1em;
|
|
}
|
|
|
|
#config label {
|
|
width: 20%;
|
|
}
|
|
|
|
.results {
|
|
max-width: 62.5%;
|
|
font-style:italic;
|
|
margin: 1em auto 2.5em;
|
|
}
|
|
|
|
#sort {
|
|
max-width: 62.5%;
|
|
margin: 0 auto -2.5em;
|
|
text-align: right;
|
|
border-bottom:1px dotted #000;
|
|
}
|
|
|
|
#sort li {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
position: relative;
|
|
top: -0.1em;
|
|
margin-left: 1em;
|
|
}
|
|
|
|
#sort li img {
|
|
display: none;
|
|
}
|
|
|
|
#sort a {
|
|
display: inline-block;
|
|
font-family: 'fontello';
|
|
color:#000;
|
|
text-decoration: none;
|
|
}
|
|
|
|
#sort a:hover, #sort a:focus {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
#sort a:before {
|
|
display: block;
|
|
}
|
|
|
|
#sort li a:first-child:before {
|
|
content: '\e809';
|
|
}
|
|
|
|
#sort li a:first-child + a:before {
|
|
content: '\e80b';
|
|
}
|
|
|
|
@media screen and (max-width: 860px) {
|
|
.entrie, #article {
|
|
width: 30em;
|
|
}
|
|
}
|
|
|
|
@media screen and (max-width: 650px) {
|
|
#menuContainer ul, #article_toolbar ul {
|
|
width: 120px;
|
|
height: 100%;
|
|
}
|
|
|
|
body > header {
|
|
position: static;
|
|
}
|
|
|
|
#main {
|
|
padding: 0 0.5em 6em;
|
|
}
|
|
|
|
#menu {
|
|
display: none;
|
|
}
|
|
|
|
#main:before {
|
|
content:none;
|
|
}
|
|
|
|
#menuContainer, #article_toolbar, #menuContainer ul, #article_toolbar ul {
|
|
position: static;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
#links li a, #article_toolbar a {
|
|
position: static;
|
|
color: #000;
|
|
}
|
|
|
|
#links li a {
|
|
padding: 1em;
|
|
min-width: 120px;
|
|
text-align: left;
|
|
}
|
|
|
|
#article_toolbar li {
|
|
margin-bottom: 1em;
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
}
|
|
|
|
@media screen and (max-width: 500px) {
|
|
.entrie, #article {
|
|
width: 17em;
|
|
}
|
|
.entrie h2 {
|
|
width: 100%;
|
|
max-width: none;
|
|
}
|
|
.entrie h2 a:hover, .entrie h2 a:focus {
|
|
padding-left: 1em;
|
|
background: #FFF;
|
|
color: #000;
|
|
}
|
|
.entrie h2:after {
|
|
content:none;
|
|
}
|
|
|
|
.messages {
|
|
width: 100%!important;
|
|
}
|
|
|
|
#sort {
|
|
margin: 3em auto 0;
|
|
max-width: none;
|
|
text-align: center;
|
|
}
|
|
#config {
|
|
margin: 7em auto 0;
|
|
max-width: none;
|
|
}
|
|
#config label { width: 100%; }
|
|
.results {
|
|
max-width: none;
|
|
margin-bottom: 1em;
|
|
}
|
|
|
|
footer p:first-child {
|
|
float: none;
|
|
}
|
|
footer {
|
|
position:static;
|
|
}
|
|
}
|
|
|
|
|
|
.w600p {
|
|
width: 70%;
|
|
margin: auto;
|
|
}
|
|
|
|
.tagForm {
|
|
margin: 1em 0;
|
|
}
|
|
|
|
.tagForm p {
|
|
font-style: italic;
|
|
margin: 0;
|
|
font-size: 0.8em;
|
|
color: #999;
|
|
}
|
|
|
|
.tagForm label {
|
|
width: auto;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
.back:before {
|
|
font-family: "icomoon";
|
|
}
|
|
|
|
.back.link {
|
|
color: #000;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.back.link:before {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.tag-list a {
|
|
color: #000;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tag-list li {
|
|
display: inline-block;
|
|
margin-right: 1em;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.tag {
|
|
background: #000;
|
|
color: #FFF;
|
|
padding: 0.5em 1em;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.tag:hover, .tag:focus {
|
|
background: #FFF;
|
|
color: #000;
|
|
} |