ctf-server

old server for hosting capture-the-flag

git clone https://9o.is/git/ctf-server.git

labels-badges.less

(1884B)


      1 //
      2 // Labels and badges
      3 // --------------------------------------------------
      4 
      5 
      6 // Base classes
      7 .label,
      8 .badge {
      9   display: inline-block;
     10   padding: 2px 4px;
     11   font-size: @baseFontSize * .846;
     12   font-weight: bold;
     13   line-height: 14px; // ensure proper line-height if floated
     14   color: @white;
     15   vertical-align: baseline;
     16   white-space: nowrap;
     17   text-shadow: 0 -1px 0 rgba(0,0,0,.25);
     18   background-color: @grayLight;
     19 }
     20 // Set unique padding and border-radii
     21 .label {
     22   .border-radius(3px);
     23 }
     24 .badge {
     25   padding-left: 9px;
     26   padding-right: 9px;
     27   .border-radius(9px);
     28 }
     29 
     30 // Empty labels/badges collapse
     31 .label,
     32 .badge {
     33   &:empty {
     34     display: none;
     35   }
     36 }
     37 
     38 // Hover/focus state, but only for links
     39 a {
     40   &.label:hover,
     41   &.label:focus,
     42   &.badge:hover,
     43   &.badge:focus {
     44     color: @white;
     45     text-decoration: none;
     46     cursor: pointer;
     47   }
     48 }
     49 
     50 // Colors
     51 // Only give background-color difference to links (and to simplify, we don't qualifty with `a` but [href] attribute)
     52 .label,
     53 .badge {
     54   // Important (red)
     55   &-important         { background-color: @errorText; }
     56   &-important[href]   { background-color: darken(@errorText, 10%); }
     57   // Warnings (orange)
     58   &-warning           { background-color: @orange; }
     59   &-warning[href]     { background-color: darken(@orange, 10%); }
     60   // Success (green)
     61   &-success           { background-color: @successText; }
     62   &-success[href]     { background-color: darken(@successText, 10%); }
     63   // Info (turquoise)
     64   &-info              { background-color: @infoText; }
     65   &-info[href]        { background-color: darken(@infoText, 10%); }
     66   // Inverse (black)
     67   &-inverse           { background-color: @grayDark; }
     68   &-inverse[href]     { background-color: darken(@grayDark, 10%); }
     69 }
     70 
     71 // Quick fix for labels/badges in buttons
     72 .btn {
     73   .label,
     74   .badge {
     75     position: relative;
     76     top: -1px;
     77   }
     78 }
     79 .btn-mini {
     80   .label,
     81   .badge {
     82     top: 0;
     83   }
     84 }