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         height: 70px;
 125         margin: 0 auto;
 126 }
 127
 128 /* Logo */
 129
 130 #logo {
 131         height: 65px;
 132         margin-top: 1em;
 133 }
 134
 135 #logo h1 {
 136         color: #fff;
 137         font-size: 3.6em;
 138         font-weight: bold;
 139         padding-top: 0.2em;
 140         padding-left: 1.7em;
 141 }
 142
 143 /* Main */
 144
 145 .bigbox {
 146         margin: 0 auto;
 147         margin-top: 0.5em;
 148         padding: 1.5em 2em 0 2em;
 149         background: #ffffff;
 150
 151         border: 2px solid black;
 152         border-radius: 3px 3px 3px 3px;
 153 }
 154
 155 #main_inner {
 156         padding-bottom: 1.5em;
 157 }
 158
 159 #main_inner p {
 160         text-align: justify;
 161         margin-bottom: 2em;
 162 }
 163
 164 #main_inner ul {
 165         margin-bottom: 2em;
 166 }
 167
 168 #main_inner h1 {
 169         font-size: 1.8em;
 170         margin-bottom: 1em;
 171 }
 172
 173 #main_inner .post {
 174         border: 1px solid silver;
 175         padding: 1em 2em 1em 2em;
 176         margin-bottom: 1em;
 177         clear: both;
 178 }
 179
 180 #main_inner .post h2 {
 181         border-bottom: dotted 1px #e1e1e1;
 182         font-size: 1.6em;
 183         margin-bottom: 1em;
 184 }
 185
 186 #main_header > * {
 187         display: inline-block;
 188         vertical-align: baseline;
 189 }
 190
 191 #main_header > span {
 192         margin-left: 0.8em;
 193 }
 194
 195 #main_header img {
 196         padding: 0;
 197 }
 198
 199 #footer {
 200         height: 2.5em;
 201         margin-bottom: 1.5em;
 202         padding-bottom: 0.5em;
 203 }
 204
 205 #footer a {
 206         color: inherit;
 207         text-decoration: none;
 208 }
 209
 210 #footer a:hover {
 211         text-decoration: underline;
 212 }
 213
 214 #traffic {
 215         float: right;
 216         min-width: 20em;
 217         line-height: 32px;
 218 }
 219
 220 /* Menu */
 221 #cssmenu {
 222         padding-top: 0;
 223         font-weight: 500;
 224         height: 32px;
 225 }
 226
 227 #cssmenu a {
 228         color: #363636;
 229         display: inline-block;
 230         line-height: 32px;
 231         padding: 0 1em;
 232         text-decoration: none;
 233 }
 234
 235 #cssmenu ul {
 236         list-style: none;
 237         padding: 0;
 238 }
 239
 240 #cssmenu > ul > li {
 241         display: inline-block;
 242 }
 243
 244 #cssmenu > ul > li.active a, #cssmenu > ul > li:hover > a {
 245         color: #ffffff;
 246         background: #363636;
 247 }
 248
 249 #cssmenu .has-sub:hover > ul {
 250         display: block;
 251 }
 252
 253 #cssmenu .has-sub ul {
 254         display: none;
 255         position: absolute;
 256         z-index: 1;
 257 }
 258
 259 #cssmenu .has-sub ul li a {
 260         min-width: 12em;
 261         background: #ffffff;
 262         color: #363636;
 263         display: block;
 264         line-height: 40%;
 265         padding: 12px 5px;
 266         border: 1px solid black;
 267 }
 268
 269 #cssmenu .has-sub ul li:hover a {
 270         color: #ffffff;
 271         background: #363636;
 272 }
 273
 274 /* This decorates all tables with class="tbl" */
 275
 276 table {
 277         *border-collapse: collapse; /* IE7 and lower */
 278         border-spacing: 0;
 279 }
 280
 281 .tbl th {
 282         color: #ffffff;
 283         border-top: 1px solid #363636;
 284         border-bottom: 1px solid #363636;
 285         background: #363636;
 286         padding-left: 0.5em;
 287         padding-right: 0.5em;
 288 }
 289
 290 .tbl th:first-child {
 291         border-left: 1px solid #363636;
 292         border-top: 1px solid #363636;
 293         border-bottom: 1px solid #363636;
 294 }
 295
 296 .tbl th:last-child {
 297         border-right: 1px solid #363636;
 298         border-top: 1px solid #363636;
 299         border-bottom: 1px solid #363636;
 300 }
 301
 302 .tbl th:only-child {
 303         border: 1px solid #363636;
 304 }
 305
 306 .tbl td {
 307         padding: 0.25em 0.5em;
 308 }
 309
 310 .tbl tr td:first-child {
 311         border-left: 1px solid #363636;
 312 }
 313
 314 .tbl tr td:last-child {
 315         border-right: 1px solid #363636;
 316 }
 317
 318 .tbl tr:first-child td {
 319         border-top: 1px solid #363636;
 320 }
 321
 322 .tbl tr:last-child td:only-child {
 323         border-bottom: 1px solid #363636;
 324 }
 325
 326 .tbl tr:last-child td:first-child {
 327         border-bottom: 1px solid #363636;
 328 }
 329
 330 .tbl tr:last-child td:last-child {
 331         border-bottom: 1px solid #363636;
 332 }
 333
 334 .tbl tr:last-child td {
 335         border-bottom: 1px solid #363636;
 336 }
 337
 338 table.fw-nat tbody tr td {
 339         height: 2.25em;
 340 }
 341
 342 /* RRD graph images */
 343
 344 div.rrdimage > ul {
 345         list-style-type: none;
 346         margin: 0;
 347         display: flex;
 348         justify-content: center;
 349 }
 350
 351 .rrdimage li:not(:first-child)::before {
 352         content: "-";
 353         padding: 0 0.3em;
 354 }
 355
 356 .rrdimage button {
 357         padding: 0.3em;
 358         font-weight: 700;
 359         color: #ff2e52;
 360         border: none;
 361         background: none;
 362         cursor: pointer;
 363         text-decoration: none;
 364 }
 365
 366 .rrdimage button:focus {
 367         outline: none;
 368         box-shadow: none;
 369 }
 370
 371 .rrdimage button.selected {
 372         text-decoration: underline;
 373 }
 374
 375 div.rrdimage > img {
 376         padding: 0;
 377         max-width: 100%;
 378         min-height: 290px;
 379 }