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         height: 15px;
 159         width: 24px;
 160 }
 161
 162 .framed {
 163         > canvas,
 164         > img,
 165         > .icon {
 166                 background-color: @wcfContentBackgroundColor;
 167                 border: 1px solid @wcfContainerBorderColor;
 168                 padding: 1px;
 169         }
 170 }
 171
 172 .highlight {
 173         background-color: @wcfHighlightBackgroundColor;
 174 }
 175
 176 .grayscale {
 177         filter: url(../images/grayscale-filter.svg#grayscale);
 178         filter: gray;
 179         -webkit-filter: grayscale(1);
 180 }
 181
 182 /* fixes fieldset overflow issues */
 183 /* webkit */
 184 fieldset {
 185         min-width: 0;
 186 }
 187 /* firefox */
 188 @-moz-document url-prefix() {
 189         fieldset {
 190                 display: table-column;
 191         }
 192 }
 193
 194 /* balloon tooltips */
 195 .balloonTooltip {
 196         background-color: @wcfTooltipBackgroundColor;
 197         border-radius: 6px;
 198         color: @wcfTooltipColor;
 199         font-size: @wcfSmallFontSize;
 200         max-width: 300px;
 201         padding: 5px 10px 7px;
 202         position: absolute;
 203         z-index: 800;
 204
 205         .pointer {
 206                 border-color: @wcfTooltipBackgroundColor transparent;
 207                 border-style: solid;
 208                 border-width: 0 5px 5px;
 209                 left: 50%;
 210                 position: absolute;
 211                 top: -5px;
 212         }
 213
 214         .boxShadow(0, 3px, rgba(0, 0, 0, .3), 7px);
 215
 216         &.inverse {
 217                 .pointer {
 218                         border-width: 5px 5px 0;
 219                 }
 220         }
 221 }
 222
 223 /* popover */
 224 .popover {
 225         background-color: rgba(0, 0, 0, .4);
 226         border-radius: 6px;
 227         padding: @wcfGapSmall;
 228         position: absolute;
 229         vertical-align: middle;
 230         width: 400px !important;
 231         z-index: 500;
 232
 233         .boxShadow(0, 1px, rgba(0, 0, 0, .3), 7px);
 234
 235         > .icon-spinner {
 236                 color: white;
 237                 left: 50%;
 238                 margin-left: -21px;
 239                 margin-top: -21px;
 240                 position: absolute;
 241                 top: 50%;
 242
 243                 .textShadow(black);
 244         }
 245
 246         > .popoverContent {
 247                 background-color: @wcfContainerBackgroundColor;
 248                 border-radius: 6px;
 249                 color: @wcfColor;
 250                 max-height: 300px;
 251                 min-height: 32px;
 252                 opacity: 0;
 253                 overflow: hidden;
 254                 padding: @wcfGapSmall @wcfGapMedium;
 255         }
 256
 257         &::after {
 258                 border: 10px solid transparent;
 259                 content: "";
 260                 display: inline-block;
 261                 position: absolute;
 262                 z-index: 100;
 263         }
 264
 265         &.top::after {
 266                 border-bottom-width: 0;
 267                 border-top-color: rgba(0, 0, 0, .3);
 268                 bottom: -10px;
 269         }
 270
 271         &.bottom::after {
 272                 border-bottom-color: rgba(0, 0, 0, .3);
 273                 border-top-width: 0;
 274                 top: -10px;
 275         }
 276
 277         &.right::after {
 278                 left: 10px;
 279         }
 280
 281         &.left::after {
 282                 right: 10px;
 283         }
 284 }
 285
 286
 287 /* ### badges ### */
 288 /* default values */
 289 .badge {
 290         background-color: @wcfColor;
 291         border-radius: 9px;
 292         color: @wcfContentBackgroundColor;
 293         display: inline-block;
 294         font-size: @wcfSmallFontSize;
 295         font-weight: bold;
 296         padding: 1px 6px 1px;
 297         position: relative;
 298         text-shadow: none !important; /* necessary to avoid ugly text shadows in comment lists; @todo: better solution without "!important" */
 299         vertical-align: middle;
 300         white-space: nowrap;
 301         word-wrap: normal;
 302
 303         &.label {
 304                 border-radius: 4px;
 305                 font-weight: normal;
 306         }
 307
 308         /* colors */
 309         &.badgeUpdate {
 310                 background-color: @wcfTabularBoxBackgroundColor;
 311                 color: @wcfTabularBoxColor;
 312         }
 313
 314         &.badgeInverse {
 315                 background-color: @wcfTabularBoxColor;
 316                 color: @wcfTabularBoxBackgroundColor;
 317         }
 318
 319         /* default label colors */
 320         &.green {
 321                 background-color: rgba(0, 153, 0, 1);
 322                 color: rgba(238, 255, 238, 1);
 323         }
 324
 325         &.red {
 326                 background-color: rgba(204, 0, 0, 1);
 327                 color: rgba(255, 238, 238, 1);
 328         }
 329
 330         &.black {
 331                 background-color: #333;
 332                 color: #fff;
 333         }
 334
 335         &.brown {
 336                 background-color: #c63;
 337                 color: #fff;
 338         }
 339
 340         &.orange {
 341                 background-color: #f90;
 342                 color: #fff;
 343         }
 344
 345         &.yellow {
 346                 background-color: #ff0;
 347                 color: #333;
 348         }
 349
 350         &.blue {
 351                 background-color: #369;
 352                 color: #fff;
 353         }
 354
 355         &.purple {
 356                 background-color: #c0f;
 357                 color: #fff;
 358         }
 359
 360         &.pink {
 361                 background-color: #f0c;
 362                 color: #fff;
 363         }
 364 }
 365
 366 a.badge:hover {
 367         color: @wcfContentBackgroundColor;
 368         text-decoration: none;
 369
 370         &.black {
 371                 background-color: #000;
 372         }
 373
 374         &.brown {
 375                 background-color: #930;
 376         }
 377
 378         &.red {
 379                 background-color: #900;
 380         }
 381
 382         &.orange {
 383                 background-color: #f60;
 384         }
 385
 386         &.yellow {
 387                 background-color: #cc0;
 388         }
 389
 390         &.green {
 391                 background-color: #060;
 392         }
 393
 394         &.blue {
 395                 background-color: #036;
 396         }
 397
 398         &.purple {
 399                 background-color: #90c;
 400         }
 401
 402         &.pink {
 403                 background-color: #c09;
 404         }
 405 }
 406
 407 /* the CSS below can be detected through JavaScript and works better than matchMedia-API (not supported by IE9) */
 408 @media only screen and (max-width: 800px) {
 409         html {
 410                 caption-side: bottom;
 411         }
 412
 413         body {
 414                 caption-side: top;
 415         }
 416 }
 417
 418 @media only screen and (max-width: 800px) and (-webkit-min-device-pixel-ratio: 2) {
 419         // Preserve HTML font-size when iPhone orientation changes from portrait to landscape
 420         html {
 421                 -webkit-text-size-adjust: 100%;
 422         }
 423
 424         // Fixes zoom when iPhone orientation changes from portrait to landscape
 425         html,
 426         body {
 427                 width: 100%;
 428                 overflow: hidden;
 429         }
 430 }