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 /* Fonts */
   9
  10 @font-face {
  11         font-family: "Prompt";
  12         font-style: normal;
  13         font-weight: 400;
  14         src: local("Prompt Regular"), local("Prompt-Regular"), url(../fonts/Prompt-Regular.ttf) format("truetype");
  15         unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  16 }
  17
  18 @font-face {
  19         font-family: "Prompt";
  20         font-style: normal;
  21         font-weight: 400;
  22         src: local("Prompt Regular"), local("Prompt-Regular"), url(../fonts/Prompt-Regular.ttf) format("truetype");
  23         unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  24 }
  25
  26 @font-face {
  27         font-family: 'Prompt';
  28         font-style: normal;
  29         font-weight: 500;
  30         src: local("Prompt Medium"), local("Prompt-Medium"), url(../fonts/Prompt-Medium.ttf) format("truetype");
  31         unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  32 }
  33
  34 @font-face {
  35         font-family: 'Prompt';
  36         font-style: normal;
  37         font-weight: 500;
  38         src: local("Prompt Medium"), local("Prompt-Medium"), url(../fonts/Prompt-Medium.ttf) format("truetype");
  39         unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  40 }
  41
  42 @font-face {
  43         font-family: "Prompt";
  44         font-style: normal;
  45         font-weight: 700;
  46         src: local("Prompt Bold"), local("Prompt-Bold"), url(../fonts/Prompt-Bold.ttf) format("truetype");
  47         unicode-range:U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
  48 }
  49
  50 @font-face {
  51         font-family: "Prompt";
  52         font-style: normal;
  53         font-weight: 700;
  54         src: local("Prompt Bold"), local("Prompt-Bold"), url(../fonts/Prompt-Bold.ttf) format("truetype");
  55         unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
  56 }
  57
  58 /* Basic Stuff */
  59
  60 * {
  61         margin: 0;
  62 }
  63
  64 html {
  65         height: 100vh;
  66 }
  67
  68 body {
  69         background: linear-gradient(
  70                 #ff2e52,
  71                 #000000
  72         );
  73         background-attachment: fixed;
  74
  75         font-family: "Prompt", sans-serif;
  76         font-size: 9pt;
  77
  78         color: #363636;
  79 }
  80
  81 h1, h2, h3, h4, h5, h6 {
  82         font-size: 20px;
  83         font-weight: normal;
  84         letter-spacing: -1px;
  85         text-align: left;
  86 }
  87
  88 br.clear {
  89         clear: both;
  90 }
  91
  92 img {
  93         padding: 3px;
  94 }
  95
  96 a {
  97         text-decoration: underline;
  98         color: #ff2e52;
  99 }
 100
 101 a:hover {
 102         text-decoration: none;
 103 }
 104
 105 p {
 106         line-height: 1.8em;
 107 }
 108
 109 hr {
 110         margin: 0.3em 0 0.3em 0;
 111 }
 112
 113 iframe {
 114         border: 0;
 115 }
 116
 117 .pull-right {
 118         float: right !important;
 119 }
 120
 121 /* Header */
 122
 123 #header {
 124         margin: 0 auto;
 125 }
 126
 127 /* Logo */
 128
 129 #logo {
 130         height: 65px;
 131         margin-top: 1em;
 132 }
 133
 134 #logo h1 {
 135         color: #ffffff;
 136         font-size: 3.5em;
 137         font-weight: bold;
 138 }
 139
 140 #logo h1 a {
 141         color: inherit;
 142         text-decoration: none;
 143 }
 144
 145 /* Main */
 146
 147 .bigbox {
 148         margin: 0 auto;
 149         margin-top: 0.5em;
 150         padding: 1.5em 2em 0 2em;
 151         background: #ffffff;
 152
 153         border: 2px solid black;
 154         border-radius: 3px 3px 3px 3px;
 155 }
 156
 157 #main_inner {
 158         padding-bottom: 1.5em;
 159 }
 160
 161 #main_inner p {
 162         text-align: justify;
 163         margin-bottom: 2em;
 164 }
 165
 166 #main_inner ul {
 167         margin-bottom: 2em;
 168 }
 169
 170 #main_inner h1 {
 171         font-size: 1.8em;
 172         margin-bottom: 1em;
 173 }
 174
 175 #main_inner .post {
 176         border: 1px solid silver;
 177         padding: 1em 2em 1em 2em;
 178         margin-bottom: 1em;
 179         clear: both;
 180 }
 181
 182 #main_inner .post h2 {
 183         border-bottom: dotted 1px #e1e1e1;
 184         font-size: 1.6em;
 185         margin-bottom: 1em;
 186 }
 187
 188 #main_header > * {
 189         display: inline-block;
 190         vertical-align: baseline;
 191 }
 192
 193 #main_header > span {
 194         margin-left: 0.8em;
 195 }
 196
 197 #main_header img {
 198         padding: 0;
 199 }
 200
 201 #footer {
 202         height: 2.5em;
 203         margin-bottom: 1.5em;
 204         padding-bottom: 0.5em;
 205 }
 206
 207 #footer a {
 208         color: inherit;
 209         text-decoration: none;
 210 }
 211
 212 #footer a:hover {
 213         text-decoration: underline;
 214 }
 215
 216 #traffic {
 217         float: right;
 218         min-width: 20em;
 219         line-height: 32px;
 220 }
 221
 222 /* Menu */
 223 #cssmenu {
 224         padding-top: 0;
 225         font-weight: 500;
 226         height: 32px;
 227 }
 228
 229 #cssmenu a {
 230         color: #363636;
 231         display: inline-block;
 232         line-height: 32px;
 233         padding: 0 1em;
 234         text-decoration: none;
 235 }
 236
 237 #cssmenu ul {
 238         list-style: none;
 239         padding: 0;
 240 }
 241
 242 #cssmenu > ul > li {
 243         display: inline-block;
 244 }
 245
 246 #cssmenu > ul > li.active a, #cssmenu > ul > li:hover > a {
 247         color: #ffffff;
 248         background: #363636;
 249 }
 250
 251 #cssmenu .has-sub:hover > ul {
 252         display: block;
 253 }
 254
 255 #cssmenu .has-sub ul {
 256         display: none;
 257         position: absolute;
 258         z-index: 1;
 259 }
 260
 261 #cssmenu .has-sub ul li a {
 262         min-width: 12em;
 263         background: #ffffff;
 264         color: #363636;
 265         display: block;
 266         line-height: 40%;
 267         padding: 12px 5px;
 268         border: 1px solid black;
 269 }
 270
 271 #cssmenu .has-sub ul li:hover a {
 272         color: #ffffff;
 273         background: #363636;
 274 }
 275
 276 /* This decorates all tables with class="tbl" */
 277
 278 table {
 279         *border-collapse: collapse; /* IE7 and lower */
 280         border-spacing: 0;
 281 }
 282
 283 .tbl th {
 284         color: #ffffff;
 285         border-top: 1px solid #363636;
 286         border-bottom: 1px solid #363636;
 287         background: #363636;
 288         padding-left: 0.5em;
 289         padding-right: 0.5em;
 290 }
 291
 292 .tbl th:first-child {
 293         border-left: 1px solid #363636;
 294         border-top: 1px solid #363636;
 295         border-bottom: 1px solid #363636;
 296 }
 297
 298 .tbl th:last-child {
 299         border-right: 1px solid #363636;
 300         border-top: 1px solid #363636;
 301         border-bottom: 1px solid #363636;
 302 }
 303
 304 .tbl th:only-child {
 305         border: 1px solid #363636;
 306 }
 307
 308 .tbl td {
 309         padding: 0.25em 0.5em;
 310 }
 311
 312 .tbl tr td:first-child {
 313         border-left: 1px solid #363636;
 314 }
 315
 316 .tbl tr td:last-child {
 317         border-right: 1px solid #363636;
 318 }
 319
 320 .tbl tr:first-child td {
 321         border-top: 1px solid #363636;
 322 }
 323
 324 .tbl tr:last-child td:only-child {
 325         border-bottom: 1px solid #363636;
 326 }
 327
 328 .tbl tr:last-child td:first-child {
 329         border-bottom: 1px solid #363636;
 330 }
 331
 332 .tbl tr:last-child td:last-child {
 333         border-bottom: 1px solid #363636;
 334 }
 335
 336 .tbl tr:last-child td {
 337         border-bottom: 1px solid #363636;
 338 }
 339
 340 table.fw-nat tbody tr td {
 341         height: 2.25em;
 342 }
 343
 344 /* RRD graph images */
 345
 346 div.rrdimage > ul {
 347         list-style-type: none;
 348         margin: 0;
 349         display: flex;
 350         justify-content: center;
 351 }
 352
 353 .rrdimage li:not(:first-child)::before {
 354         content: "-";
 355         padding: 0 0.3em;
 356 }
 357
 358 .rrdimage button {
 359         padding: 0.3em;
 360         font-weight: 700;
 361         color: #ff2e52;
 362         border: none;
 363         background: none;
 364         cursor: pointer;
 365         text-decoration: none;
 366 }
 367
 368 .rrdimage button:focus {
 369         outline: none;
 370         box-shadow: none;
 371 }
 372
 373 .rrdimage button.selected {
 374         text-decoration: underline;
 375 }
 376
 377 div.rrdimage > img {
 378         padding: 0;
 379         max-width: 100%;
 380         min-height: 290px;
 381 }