wallabag/themes/courgette/css/style.css

* {
  -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;
}

#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: 'fontello'; }


.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: '\e800'; } /* '' */
.delete:before { content: '\e803'; } /* '' */
.reading-time:before { content: '\e802'; } /* '' */

#article_toolbar a:before {
  display: block;
  font-family: 'fontello'; 
}

#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'; } /* '' */
.bad-display:before { content: '\e808'; } /* '' */
.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;
  }
}