openwrt-web/meteo/meteo.css

   1 * {
   2     margin: 0;
   3     padding: 0;
   4     box-sizing: border-box;
   5 }
   6
   7 body {
   8     font-size: 0.8rem;
   9     background-color: #EEE;
  10 }
  11
  12 html, body {
  13     margin: 0px;
  14     padding: 0px;
  15     height: 100%;
  16     font-family: Microsoft Yahei, WenQuanYi Micro Hei, sans-serif, "Helvetica Neue", Helvetica, Hiragino Sans GB;
  17 }
  18
  19 header {
  20     background: darkgreen;
  21     color: white;
  22 }
  23
  24 header, .main {
  25     width: 100%;
  26     position: absolute;
  27 }
  28
  29 header {
  30     height: 5rem;
  31     box-shadow: 0 2px 5px rgba(0, 0, 0, .26);
  32     transition: box-shadow .2s;
  33     float: left;
  34     position: fixed;
  35     top: 0px;
  36     z-index: 2000;
  37 }
  38
  39 header > .fill > .container {
  40     padding-top: 0.25rem;
  41     padding-right: 1rem;
  42     padding-bottom: 0.25rem;
  43     display: flex;
  44     align-items: center;
  45     height: 5rem;
  46 }
  47
  48 header > .fill > .container > img{
  49     max-height: 4.5rem;
  50     margin: 1rem;
  51     padding: 0.5rem;
  52 }
  53
  54 header > .fill > .container > .brand {
  55     font-size: 1.4rem;
  56     color: white;
  57     text-decoration: none;
  58     margin-left: 1rem;
  59 }
  60
  61 .main {
  62     top: 4rem;
  63     bottom: 0rem;
  64     position: relative;
  65     height: calc(100% - 5rem);
  66 }
  67
  68 .main > #maincontent {
  69     background-color: #EEE;
  70     height: calc(100% - 5rem);
  71 }
  72
  73 #maincontent > .container {
  74     margin: 1rem 2rem 1rem 2rem;
  75     padding-top: 1px;
  76     height: 100%;
  77 }
  78
  79 .section {
  80     margin: 1rem 1rem 1rem 1rem;
  81     padding: 2rem;
  82     border: 0;
  83     font-weight: normal;
  84     font-style: normal;
  85     line-height: 1;
  86     font-family: inherit;
  87     float: left;
  88     min-width: inherit;
  89     border-radius: 0;
  90     color: #404040;
  91     background-color: #FFF;
  92     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
  93     -webkit-overflow-scrolling: touch;
  94 }
  95
  96 .wide-section {
  97     margin: 1rem 1rem 1rem 1rem;
  98     padding: 2rem;
  99     border: 0;
 100     font-weight: normal;
 101     font-style: normal;
 102     line-height: 1;
 103     font-family: inherit;
 104     float: left;
 105     min-width: calc(100% - 2rem);
 106     border-radius: 0;
 107     color: #404040;
 108     background-color: #FFF;
 109     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
 110     -webkit-overflow-scrolling: touch;
 111 }
 112
 113 .large-section {
 114     margin: 1rem 1rem 1rem 1rem;
 115     padding: 2rem;
 116     border: 0;
 117     font-weight: normal;
 118     font-style: normal;
 119     line-height: 1;
 120     font-family: inherit;
 121     min-width: inherit;
 122     border-radius: 0;
 123     height: 100%;
 124     background-color: #FFF;
 125     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
 126     -webkit-overflow-scrolling: touch;
 127 }
 128
 129 .bottom-section {
 130     margin: 1rem 1rem 1rem 1rem;
 131     padding: 2rem;
 132     border: 0;
 133     font-weight: normal;
 134     font-style: normal;
 135     line-height: 1;
 136     font-family: inherit;
 137     float: left;
 138     min-width: calc(100% - 2rem);
 139     border-radius: 0;
 140     height: 80%;
 141     background-color: #FFF;
 142     box-shadow: 0 2px 2px 0 rgba(0, 0, 0, .16), 0 0 2px 0 rgba(0, 0, 0, .12);
 143     -webkit-overflow-scrolling: touch;
 144 }
 145
 146 footer {
 147     text-align: right;
 148     padding: 1rem;
 149     color: #aaa;
 150     font-size: 0.8rem;
 151     text-shadow: 0px 0px 2px #BBB;
 152 }
 153
 154 footer > a {
 155     color: #aaa;
 156     text-decoration: none;
 157 }
 158
 159 .reference {
 160     padding: 1rem 1rem;
 161     text-decoration: bold;
 162     float: left;
 163     font-size: 6rem;
 164 }
 165
 166 .reference-unit {
 167     padding: 0.5rem 1rem;
 168     text-decoration: bold;
 169     float: left;
 170     font-size: 4rem;
 171 }
 172
 173 .section:hover {
 174     color: white;
 175     background: darkgreen;
 176 }
 177
 178 .reference-header {
 179     padding: 0.5rem 0.2rem;
 180     text-decoration: none;
 181     font-size: 2rem;
 182     text-align: left;
 183 }
 184
 185 .selector-header {
 186     padding: 1rem 1rem;
 187     text-decoration: bold;
 188     float: left;
 189     font-size: 1.5rem;
 190 }
 191
 192 .selector {
 193     padding: 1rem 1rem;
 194     text-decoration: bold;
 195     float: left;
 196 }
 197
 198 option {
 199   font-size: 1.2rem;
 200 }