wallabag/themes/courgette/css/style.css
2014-02-07 00:07:54 +01:00

684 lines
No EOL
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;
}