html/html/themes/ipfire/include/css/style.css

   1
   2 /* This controls the width of the fixed width layouts */
   3
   4 .fixed {
   5         width: 960px !important;
   6 }
   7
   8 /* Basic Stuff */
   9
  10 * {
  11         margin: 0;
  12         padding: 0;
  13 }
  14
  15 html {
  16         height: 100%;
  17 }
  18
  19 body {
  20         /* SVG as background image (IE9/Chrome/Safari/Opera) */
  21         background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2ODQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMTAwJSIgeTE9IjEwMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgo8c3RvcCBzdG9wLWNvbG9yPSIjMDAwMDAwIiBvZmZzZXQ9IjAiLz48c3RvcCBzdG9wLWNvbG9yPSIjODgwNDAwIiBvZmZzZXQ9IjU3JSIvPgo8L2xpbmVhckdyYWRpZW50Pgo8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2c2ODQpIiAvPgo8L3N2Zz4=);
  22
  23         background-image: linear-gradient(
  24                 bottom,
  25                 #000000 0%,
  26                 #880400 57%
  27         );
  28         background-image: -o-linear-gradient(
  29                 bottom,
  30                 #000000 0%,
  31                 #880400 57%
  32         );
  33         background-image: -moz-linear-gradient(
  34                 bottom,
  35                 #000000 0%,
  36                 #880400 57%
  37         );
  38         background-image: -webkit-linear-gradient(
  39                 bottom,
  40                 #000000 0%,
  41                 #880400 57
  42         );
  43         background-image: -ms-linear-gradient(
  44                 bottom,
  45                 #000000 0%,
  46                 #880400 57%
  47         );
  48         background-image: -webkit-gradient(
  49                 linear,
  50                 left bottom,
  51                 left top,
  52                 color-stop(0, #000000),
  53                 color-stop(0.57, #880400)
  54         );
  55         background-attachment: fixed;
  56
  57         font-size: 9pt;
  58         font-family: "DejaVu Sans", Helvetica, sans-serif;
  59 }
  60
  61
  62 h1, h2, h3, h4, h5, h6 {
  63         font-size: 20px;
  64         font-weight: normal;
  65         letter-spacing: -1px;
  66         text-align: left;
  67 }
  68
  69 h1 {
  70         color: #66000F;
  71 }
  72
  73 br.clear {
  74         clear: both;
  75 }
  76
  77 img {
  78         padding: 3px;
  79 }
  80
  81 a {
  82         text-decoration: underline;
  83         color: #d90000;
  84 }
  85
  86 a:hover {
  87         text-decoration: none;
  88 }
  89
  90 p {
  91         line-height: 1.8em;
  92 }
  93
  94 hr {
  95         margin: 0.3em 0 0.3em 0;
  96 }
  97
  98 iframe {
  99         border: 0;
 100 }
 101
 102 .pull-right {
 103         float: right !important;
 104 }
 105
 106 /* Header */
 107
 108 #header {
 109         height: 70px;
 110         margin: 0 auto;
 111 }
 112
 113 /* Logo */
 114
 115 #logo {
 116         height: 65px;
 117         margin-top: 1em;
 118 }
 119
 120 #logo h1 {
 121         color: #fff;
 122         font-size: 3.6em;
 123         font-weight: bold;
 124         padding-top: 0.2em;
 125         padding-left: 1.7em;
 126 }
 127
 128 /* Main */
 129
 130 .bigbox {
 131         margin: 0 auto;
 132         margin-top: 0.5em;
 133         padding: 1.5em 2em 0 2em;
 134         background: #fff url('../../images/n2.gif') 0px 0px repeat-x;
 135         border: 1px solid black;
 136
 137         border-radius: 3px 3px 3px 3px;
 138         -webkit-border-radius: 3px 3px 3px 3px;
 139 }
 140
 141 #main_inner {
 142         padding-bottom: 1.5em;
 143 }
 144
 145 #main_inner p {
 146         text-align: justify;
 147         margin-bottom: 2em;
 148 }
 149
 150 #main_inner ul {
 151         margin-bottom: 2em;
 152 }
 153
 154 #main_inner h1 {
 155         font-size: 1.8em;
 156         margin-bottom: 1em;
 157 }
 158
 159 #main_inner .post {
 160         border: 1px solid silver;
 161         padding: 1em 2em 1em 2em;
 162         margin-bottom: 1em;
 163         clear: both;
 164 }
 165
 166 #main_inner .post h2 {
 167         border-bottom: dotted 1px #e1e1e1;
 168         font-size: 1.6em;
 169         margin-bottom: 1em;
 170 }
 171
 172 #footer {
 173         height: 2.5em;
 174         margin-bottom: 1em;
 175 }
 176
 177 #footer a {
 178         color: inherit;
 179         text-decoration: none;
 180 }
 181
 182 #footer a:hover {
 183         text-decoration: underline;
 184 }
 185
 186 input {
 187         margin: 0.2em;
 188 }
 189
 190 input.button {
 191         background: #ca2f2f url('../../images/n3.gif') repeat-x;
 192         color: #fff;
 193         border: solid 1px #a94b4b;
 194         font-weight: bold;
 195         font-size: 0.8em;
 196         height: 2.0em;
 197 }
 198
 199 input.text {
 200         border: solid 1px #f1f1f1;
 201         padding: 0.25em;
 202 }
 203
 204 #traffic {
 205         float: right;
 206         min-width: 20em;
 207         line-height: 32px;
 208 }
 209
 210 /* Menu */
 211 #cssmenu {
 212         margin: 0 auto;
 213         margin-top: 0;
 214         padding-top: 0;
 215         font-weight: 600;
 216         height: 32px;
 217         border: 1px solid black;
 218 }
 219
 220 #cssmenu a {
 221         color: #111111;
 222         display: inline-block;
 223         line-height: 32px;
 224         padding: 0 1em;
 225         text-decoration: none;
 226 }
 227
 228 #cssmenu ul {
 229         list-style: none;
 230 }
 231
 232 #cssmenu > ul > li {
 233         display: inline-block;
 234 }
 235
 236 #cssmenu > ul > li.active a, #cssmenu > ul > li:hover > a {
 237         color: white;
 238         background: #aaaaaa;
 239 }
 240
 241 #cssmenu .has-sub:hover > ul {
 242         display: block;
 243 }
 244
 245 #cssmenu .has-sub ul {
 246         display: none;
 247         position: absolute;
 248 }
 249
 250 #cssmenu .has-sub ul li a {
 251         min-width: 12em;
 252         background: #ffffff;
 253         color: grey;
 254         display: block;
 255         line-height: 40%;
 256         padding: 12px 5px;
 257         border: 1px solid black;
 258 }
 259
 260 #cssmenu .has-sub ul li:hover a {
 261         background: #dddddd;
 262 }
 263
 264 /* This decorates all tables with class="tbl" */
 265
 266 table {
 267         *border-collapse: collapse; /* IE7 and lower */
 268         border-spacing: 0;
 269 }
 270
 271 .tbl th {
 272         color: #000000;
 273         border-top: 1px solid lightgrey;
 274         border-bottom: 1px solid lightgrey;
 275         background: #cccccc;
 276         padding-left: 0.5em;
 277         padding-right: 0.5em;
 278 }
 279
 280 .tbl th:first-child {
 281         border-left: 1px solid lightgrey;
 282         border-top: 1px solid lightgrey;
 283         border-bottom: 1px solid lightgrey;
 284 }
 285
 286 .tbl th:last-child {
 287         border-right: 1px solid lightgrey;
 288         border-top: 1px solid lightgrey;
 289         border-bottom: 1px solid lightgrey;
 290 }
 291
 292 .tbl th:only-child {
 293         border: 1px solid lightgrey;
 294 }
 295 .tbl td{
 296         padding-left: 0.5em;
 297         padding-right: 0.5em;
 298 }
 299 .tbl tr td:first-child {
 300         border-left: 1px solid lightgrey;
 301 }
 302
 303 .tbl tr td:last-child {
 304         border-right: 1px solid lightgrey;
 305 }
 306
 307 .tbl tr:first-child td {
 308         border-top: 1px solid lightgrey;
 309 }
 310
 311 .tbl tr:last-child td:only-child {
 312         border-bottom: 1px solid lightgrey;
 313 }
 314
 315 .tbl tr:last-child td:first-child {
 316         border-bottom: 1px solid lightgrey;
 317 }
 318
 319 .tbl tr:last-child td:last-child {
 320         border-bottom: 1px solid lightgrey;
 321 }
 322
 323 .tbl tr:last-child td {
 324         border-bottom: 1px solid lightgrey;
 325 }
 326
 327 table.fw-nat tbody tr td {
 328         height: 2.25em;
 329 }
 330
 331 /* RRD graph images */
 332
 333 div.rrdimage > ul {
 334         list-style-type: none;
 335         margin: 0;
 336         display: flex;
 337         justify-content: center;
 338 }
 339 .rrdimage li:not(:first-child)::before {
 340         content: "-";
 341         padding: 0 0.3em;
 342 }
 343
 344 .rrdimage button {
 345         padding: 0.3em;
 346         font-weight: 700;
 347         color: #d90000; /* link color */
 348         border: none;
 349         background: none;
 350         cursor: pointer;
 351         text-decoration: underline;
 352 }
 353 .rrdimage button:focus {
 354         outline: none;
 355         box-shadow: none;
 356 }
 357 .rrdimage button.selected {
 358         background-color: rgba(135, 203, 0, 0.2);
 359 }
 360
 361 div.rrdimage > img {
 362         box-sizing: border-box;
 363         max-width: 100%;
 364         min-height: 290px;
 365 }