www/css/style.css

   1 /*
   2  * This file is part of WolneLektury-Mobile, licensed under GNU Affero GPLv3 or later.
   3  * Copyright © Fundacja Nowoczesna Polska. See NOTICE for more information.
   4  */
   5
   6 body {
   7         padding: 0;
   8         margin: 0;
   9         background: white;
  10         font-family: verdana, arial, helvetica, sans-serif;
  11 }
  12
  13 .night-mode, .night-mode #search {
  14         color: #ddd;
  15         background: #222;
  16 }
  17 .night-mode a {
  18         color: #fff;
  19 }
  20
  21 .spinner {
  22         margin-top: 4em;
  23         text-align: center;
  24 }
  25 @-webkit-keyframes rotate {
  26   from {
  27     -webkit-transform: rotate(0deg);
  28   }
  29   to {
  30     -webkit-transform: rotate(360deg);
  31   }
  32 }
  33 .spinner img {
  34         -webkit-animation-name: rotate;
  35         -webkit-animation-duration: 4s;
  36         -webkit-animation-iteration-count: 10;
  37         -webkit-animation-direction: right;
  38         -webkit-animation-timing-function:linear;
  39 }
  40 #spinnertext {
  41         margin-top: 2em;
  42         font-size: .7em;
  43 }
  44
  45 #cover {
  46         width: 100%;
  47 }
  48
  49 #searchbox {
  50         font-size: 1.25em;
  51         /*background: #84bf2a;*/
  52         padding: 3px 3px 6px 0;
  53         display: none;
  54 }
  55 #search {
  56         border: none;
  57         width: 100%;
  58         padding: 5px 0 5px 0;
  59         font-size: 1em;
  60 }
  61 #swrap {
  62         margin-right:85px;
  63         margin-left:80px;
  64 }
  65 #searchbutton {
  66         width:80px;
  67         float:right;
  68         margin-top:.5em;
  69 }
  70 #content {
  71     padding: 10px;
  72 }
  73 .button {
  74         display: block;
  75         background: #ddd;
  76     font-size: 1.25em;
  77         padding: .5em;
  78         margin-bottom: .5em;
  79         border-radius: 8px;
  80     -webkit-border-radius: 8px;
  81         color: #295158;
  82 }
  83 .button img {
  84         margin-right: .5em;
  85         vertical-align: middle;
  86 }
  87 .button .sub {
  88         font-size: .7em;
  89 }
  90 .button .note {
  91         font-size: .5em;
  92         text-align: right;
  93 }
  94 .button img {
  95         float:left;
  96 }
  97 .button .label {
  98         margin-left: 32px;
  99 }
 100
 101 .button-Book {
 102     background: #ccc;
 103 }
 104 .button-BookText {
 105     background: #ccc;
 106 }
 107 .delete {
 108         float: right;
 109         width: 24px;
 110
 111         background: #464646;
 112     font-size: 1.25em;
 113         padding: .5em;
 114         margin-bottom: .5em;
 115         border-radius: 8px;
 116     -webkit-border-radius: 8px;
 117         color: white;
 118         text-align: center;
 119 }
 120
 121 h1 .subheader {
 122         display:block;
 123         font-size: 70%;
 124 }
 125 .upper {
 126         text-transform: capitalize;
 127 }
 128
 129
 130 .footer {
 131         font-size: 0.75em;
 132         text-align: center;
 133 }
 134
 135 .clr {
 136         clear: both;
 137 }
 138
 139
 140 .info dt {
 141         display: inline;
 142         font-weight: bold;
 143 }
 144
 145 .info dd {
 146         display: inline;
 147         margin: 0;
 148 }
 149 .info img {
 150         max-width: 100%;
 151 }
 152
 153 #top-bar {
 154         background-image: -webkit-gradient(linear, left top, left bottom,
 155                 from(#7d828c),
 156                 to(#121a2e));
 157 }
 158
 159 #back-button {
 160         display:none;
 161         float:left;
 162         color: #fff;
 163         text-decoration: none;
 164         padding: 7px 10px;
 165         -webkit-border-radius: 5px;
 166
 167  background-image: -webkit-gradient(linear, left top, left bottom,
 168          from(#7d828c),
 169          color-stop(0.5, #303749),
 170          color-stop(0.5, #121a2e),
 171          to(#121a2e));
 172  border: solid 1px rgba(79, 79, 79, 0.75);
 173
 174         position: relative;
 175         padding-left: 5px;
 176         margin-left: 1.5em;
 177         margin-top: .5em;
 178 }
 179
 180
 181 #back-button:before {
 182         content: " ";
 183         display: block;
 184         z-index: 0;
 185         background-image:
 186                 -webkit-gradient(linear, left top, right bottom,
 187          from(#7d828c),
 188          color-stop(0.5, #303749),
 189          color-stop(0.5, #121a2e),
 190          to(#121a2e));
 191         border-left: solid 1px #484e59;
 192         border-bottom: solid 1px #9aa5bb;
 193         -webkit-border-top-left-radius: 5px;
 194         -webkit-border-bottom-right-radius: 5px;
 195         -webkit-border-bottom-left-radius: 4px;
 196         height: 23.5px;
 197         width: 23.5px;
 198         display: inline-block;
 199         -webkit-transform: rotate(45deg);
 200         -webkit-mask-image:
 201                 -webkit-gradient(linear, left bottom, right top,
 202                         from(#000000),
 203                         color-stop(0.5,#000000),
 204                         color-stop(0.5, transparent),
 205                         to(transparent));
 206         position: absolute;
 207         left: -9px;
 208         top: 2.5px;
 209         -webkit-background-clip: content;
 210 }