wcfsetup/install/files/style/global.less

   1 /* ### globals ### */
   2 html, body {
   3         font-size: @wcfBaseFontSize;
   4 }
   5
   6 body {
   7         background-color: @wcfPageBackgroundColor;
   8         color: @wcfColor;
   9         font-family: @wcfBaseFontFamily;
  10         line-height: @wcfBaseLineHeight;
  11         word-wrap: break-word;
  12 }
  13
  14 small {
  15         font-size: @wcfSmallFontSize;
  16 }
  17
  18 img {
  19         vertical-align: middle;
  20
  21         &.disabled {
  22                 opacity: .3;
  23         }
  24 }
  25
  26 a {
  27         color: @wcfLinkColor;
  28         cursor: pointer;
  29         text-decoration: none;
  30
  31         &:hover {
  32                 color: @wcfLinkHoverColor;
  33                 text-decoration: underline;
  34         }
  35
  36         &.externalURL::after {
  37                 content: "\f08e";
  38                 display: inline-block;
  39                 font-family: FontAwesome !important;
  40                 font-size: 14px !important;
  41                 font-weight: normal !important;
  42                 font-style: normal !important;
  43                 margin-left: 4px;
  44                 vertical-align: -1px;
  45         }
  46 }
  47
  48 .footerContent, .logo {
  49         color: @wcfPageColor;
  50
  51         a {
  52                 color: @wcfPageLinkColor;
  53
  54                 &:hover {
  55                         color: @wcfPageLinkHoverColor;
  56                 }
  57         }
  58 }
  59
  60 .nativeList {
  61         margin: 1em 0;
  62         margin-left: 40px;
  63
  64         ul,
  65         ol {
  66                 margin-bottom: 0;
  67                 margin-top: 0;
  68         }
  69
  70         li {
  71                 margin: @wcfGapSmall 0;
  72         }
  73 }
  74
  75 ul.nativeList {
  76         list-style-type: disc;
  77 }
  78 ol.nativeList {
  79         list-style-type: decimal;
  80 }
  81
  82 .htmlContent {
  83         p {
  84                 margin: 1em 0;
  85         }
  86
  87         h1 {
  88                 font-size: @wcfSubHeadlineFontSize;
  89         }
  90
  91         h2 {
  92                 font-size: @wcfTitleFontSize;
  93         }
  94
  95         h1, h2, h3, h4, h5, h6 {
  96                 font-weight: bold;
  97                 margin: 0.5em 0;
  98         }
  99
 100         ul, ol {
 101                 .nativeList;
 102         }
 103
 104         ul {
 105                 list-style-type: disc;
 106         }
 107
 108         ol {
 109                 list-style-type: decimal;
 110         }
 111 }
 112
 113 /* hide broken reCaptcha iframe */
 114 body > iframe[src="about:blank"] {
 115         display:none;
 116 }
 117
 118 ::selection {
 119         text-shadow: 0 1px 0 rgba(255, 255, 255, .5) !important;
 120         color: #300;
 121         background-color: rgba(255, 170, 34, .7);
 122 }
 123
 124 .invisible {
 125         display: none;
 126 }
 127
 128 .marginTopLarge {
 129         margin-top: @wcfGapLarge;
 130 }
 131
 132 .marginTop,
 133 .marginMedium {
 134         margin-top: @wcfGapMedium;
 135 }
 136
 137 .marginTopSmall {
 138         margin-top: @wcfGapSmall;
 139 }
 140
 141 .marginTopTiny {
 142         margin-top: @wcfGapTiny;
 143 }
 144
 145 .center {
 146         text-align: center;
 147 }
 148
 149 .pointer {
 150         cursor: pointer;
 151 }
 152
 153 .dimmed {
 154         color: @wcfDimmedColor;
 155 }
 156
 157 .iconFlag {
 158         background-color: @wcfContentBackgroundColor;
 159         border: 1px solid @wcfContainerBorderColor;
 160         padding: 1px;
 161
 162         height: 15px;
 163         width: 24px;
 164 }
 165
 166 .framed {
 167         > canvas,
 168         > img,
 169         > .icon {
 170                 background-color: @wcfContentBackgroundColor;
 171                 border: 1px solid @wcfContainerBorderColor;
 172                 padding: 1px;
 173         }
 174 }
 175
 176 .highlight {
 177         background-color: @wcfHighlightBackgroundColor;
 178 }
 179
 180 .grayscale {
 181         filter: url(../images/grayscale-filter.svg#grayscale);
 182         filter: gray;
 183         -webkit-filter: grayscale(1);
 184 }
 185
 186 /* fixes fieldset overflow issues */
 187 /* webkit */
 188 fieldset {
 189         min-width: 0;
 190 }
 191 /* firefox */
 192 @-moz-document url-prefix() {
 193         fieldset {
 194                 display: table-column;
 195         }
 196 }
 197
 198 /* balloon tooltips */
 199 .balloonTooltip {
 200         background-color: @wcfTooltipBackgroundColor;
 201         border-radius: 6px;
 202         color: @wcfTooltipColor;
 203         font-size: @wcfSmallFontSize;
 204         max-width: 300px;
 205         padding: 5px 10px 7px;
 206         position: absolute;
 207         z-index: 800;
 208
 209         .pointer {
 210                 border-color: @wcfTooltipBackgroundColor transparent;
 211                 border-style: solid;
 212                 border-width: 0 5px 5px;
 213                 left: 50%;
 214                 position: absolute;
 215                 top: -5px;
 216         }
 217
 218         .boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
 219
 220         &.inverse {
 221                 .pointer {
 222                         border-width: 5px 5px 0;
 223                 }
 224         }
 225 }
 226
 227 /* popover */
 228 .popover {
 229         background-color: rgba(0, 0, 0, .4);
 230         border-radius: 6px;
 231         padding: @wcfGapSmall;
 232         position: absolute;
 233         vertical-align: middle;
 234         width: 400px !important;
 235         z-index: 500;
 236
 237         .boxShadow(0, 1px, rgba(0, 0, 0, .3), 7px);
 238
 239         > .icon-spinner {
 240                 color: white;
 241                 left: 50%;
 242                 margin-left: -21px;
 243                 margin-top: -21px;
 244                 position: absolute;
 245                 top: 50%;
 246
 247                 .textShadow(black);
 248         }
 249
 250         > .popoverContent {
 251                 background-color: @wcfContainerBackgroundColor;
 252                 border-radius: 6px;
 253                 color: @wcfColor;
 254                 max-height: 300px;
 255                 min-height: 32px;
 256                 opacity: 0;
 257                 overflow: hidden;
 258                 padding: @wcfGapSmall @wcfGapMedium;
 259         }
 260
 261         &::after {
 262                 border: 10px solid transparent;
 263                 content: "";
 264                 display: inline-block;
 265                 position: absolute;
 266                 z-index: 100;
 267         }
 268
 269         &.top::after {
 270                 border-bottom-width: 0;
 271                 border-top-color: rgba(0, 0, 0, .3);
 272                 bottom: -10px;
 273         }
 274
 275         &.bottom::after {
 276                 border-bottom-color: rgba(0, 0, 0, .3);
 277                 border-top-width: 0;
 278                 top: -10px;
 279         }
 280
 281         &.right::after {
 282                 left: 10px;
 283         }
 284
 285         &.left::after {
 286                 right: 10px;
 287         }
 288 }
 289
 290
 291 /* ### badges ### */
 292 /* default values */
 293 .badge {
 294         background-color: @wcfColor;
 295         border-radius: 9px;
 296         color: @wcfContentBackgroundColor;
 297         display: inline-block;
 298         font-size: @wcfSmallFontSize;
 299         font-weight: bold;
 300         padding: 1px 6px 1px;
 301         position: relative;
 302         text-shadow: none !important; /* necessary to avoid ugly text shadows in comment lists; @todo: better solution without "!important" */
 303         vertical-align: middle;
 304         white-space: nowrap;
 305         word-wrap: normal;
 306
 307         &.label {
 308                 border-radius: 4px;
 309                 font-weight: normal;
 310         }
 311
 312         /* colors */
 313         &.badgeUpdate {
 314                 background-color: @wcfTabularBoxBackgroundColor;
 315                 color: @wcfTabularBoxColor;
 316         }
 317
 318         &.badgeInverse {
 319                 background-color: @wcfTabularBoxColor;
 320                 color: @wcfTabularBoxBackgroundColor;
 321         }
 322
 323         /* default label colors */
 324         &.green {
 325                 background-color: rgba(0, 153, 0, 1);
 326                 color: rgba(238, 255, 238, 1);
 327         }
 328
 329         &.red {
 330                 background-color: rgba(204, 0, 0, 1);
 331                 color: rgba(255, 238, 238, 1);
 332         }
 333
 334         &.black {
 335                 background-color: #333;
 336                 color: #fff;
 337         }
 338
 339         &.brown {
 340                 background-color: #c63;
 341                 color: #fff;
 342         }
 343
 344         &.orange {
 345                 background-color: #f90;
 346                 color: #fff;
 347         }
 348
 349         &.yellow {
 350                 background-color: #ff0;
 351                 color: #333;
 352         }
 353
 354         &.blue {
 355                 background-color: #369;
 356                 color: #fff;
 357         }
 358
 359         &.purple {
 360                 background-color: #c0f;
 361                 color: #fff;
 362         }
 363
 364         &.pink {
 365                 background-color: #f0c;
 366                 color: #fff;
 367         }
 368 }
 369
 370 a.badge:hover {
 371         color: @wcfContentBackgroundColor;
 372         text-decoration: none;
 373
 374         &.black {
 375                 background-color: #000;
 376         }
 377
 378         &.brown {
 379                 background-color: #930;
 380         }
 381
 382         &.red {
 383                 background-color: #900;
 384         }
 385
 386         &.orange {
 387                 background-color: #f60;
 388         }
 389
 390         &.yellow {
 391                 background-color: #cc0;
 392         }
 393
 394         &.green {
 395                 background-color: #060;
 396         }
 397
 398         &.blue {
 399                 background-color: #036;
 400         }
 401
 402         &.purple {
 403                 background-color: #90c;
 404         }
 405
 406         &.pink {
 407                 background-color: #c09;
 408         }
 409 }
 410
 411 /* the CSS below can be detected through JavaScript and works better than matchMedia-API (not supported by IE9) */
 412 @media only screen and (max-width: 800px) {
 413         html {
 414                 caption-side: bottom;
 415         }
 416
 417         body {
 418                 caption-side: top;
 419         }
 420 }
 421
 422 @media only screen and (max-width: 800px) and (-webkit-min-device-pixel-ratio: 2) {
 423         // Preserve HTML font-size when iPhone orientation changes from portrait to landscape
 424         html {
 425                 -webkit-text-size-adjust: 100%;
 426         }
 427
 428         // Fixes zoom when iPhone orientation changes from portrait to landscape
 429         html,
 430         body {
 431                 width: 100%;
 432                 overflow: hidden;
 433         }
 434 }