luci2/htdocs/luci2/css/luci2.css

   1 body {
   2         padding-top: 55px;
   3 }
   4
   5 .nowrap {
   6         white-space: nowrap;
   7 }
   8
   9 .fade.in {
  10         background-color: rgba(0, 0, 0, 0.5);
  11 }
  12
  13 .modal.fade.wide .modal-dialog {
  14         width: 98%;
  15         max-width: 900px;
  16 }
  17
  18 .progress {
  19         display: inline-block;
  20         position: relative;
  21         max-width: 250px;
  22         width: 100%;
  23         margin-bottom: 0;
  24 }
  25
  26 .progress-bar {
  27         z-index: 1;
  28         position: absolute;
  29 }
  30
  31 .progress small {
  32         position: absolute;
  33         top: 0;
  34         z-index: 2;
  35         color: black;
  36         text-align: center;
  37         width: 100%;
  38 }
  39
  40 .nav.nav-tabs {
  41         margin-bottom: 15px;
  42 }
  43
  44 .luci2-modal-loader {
  45         background: #FFFFFF url(/luci2/icons/loading.gif) no-repeat 10px center;
  46         text-align: center;
  47 }
  48
  49 .luci2-section-header {
  50         position: relative;
  51 }
  52
  53 .luci2-section-header .badge {
  54         position: absolute;
  55         left: -11px;
  56         top: -7px;
  57         background-color: #D9534F;
  58 }
  59
  60 .nav-tabs li a .badge {
  61         background-color: #D9534F;
  62 }
  63
  64 .nav-tabs li.active a .badge {
  65         display: none;
  66 }
  67
  68 .list-group-item .luci2-section-header > .btn-group {
  69         position: absolute;
  70         top: 2px;
  71         right: 2px;
  72         z-index: 10;
  73         box-shadow: -5px 0 5px 10px #FFFFFF;
  74         display: none;
  75 }
  76
  77 .list-group-item:hover .luci2-section-header > .btn-group {
  78         display: inline-block;
  79 }
  80
  81 .luci2-section-teaser {
  82         font-size: 90%;
  83         overflow: hidden;
  84         text-overflow: ellipsis;
  85         white-space: nowrap;
  86         cursor: pointer;
  87         margin-bottom: 0 !important;
  88 }
  89
  90 .panel > .list-group > .list-group-item:first-child {
  91         border-top: none;
  92         border-top-left-radius: 4px;
  93         border-top-right-radius: 4px;
  94 }
  95
  96 .panel > .panel-body + .list-group > .list-group-item:first-child {
  97         border-top: 1px solid #DDDDDD;
  98         border-top-left-radius: 0;
  99         border-top-right-radius: 0;
 100 }
 101
 102 .row.condensed {
 103         margin-left: 0;
 104         margin-right: 0;
 105 }
 106
 107 .row.condensed > div {
 108         padding: 0 1px 0 0;
 109 }
 110
 111 .row.condensed > div:last-child {
 112         padding-right: 0;
 113 }
 114
 115 table.table td .btn-group {
 116         white-space: nowrap;
 117 }
 118
 119 table.table td .btn-group > .btn {
 120         float: none;
 121 }
 122
 123 .luci2-form-error .control-label {
 124         color: #B94A48;
 125 }
 126
 127 pre.uci-changes {
 128         margin: 3px 0;
 129 }
 130
 131 pre.uci-changes ins {
 132         text-decoration: none;
 133         color: #008000;
 134 }
 135
 136 pre.uci-changes del {
 137         text-decoration: none;
 138         color: #800000;
 139 }
 140
 141 .ifacebox {
 142         border: 1px solid #DDDDDD;
 143         border-radius: 3px;
 144         background-color: #FFFFFF;
 145         text-align: center;
 146         white-space: nowrap;
 147 }
 148
 149 .ifacebox-head {
 150         border-bottom: 1px solid #DDDDDD;
 151         padding: 0 3px;
 152 }
 153
 154 .traffic-chart {
 155         position: relative;
 156 }
 157
 158 .traffic-chart label {
 159         position: absolute;
 160         left: 0;
 161         top: 0;
 162         background-color: rgba(255, 255, 255, 0.5);
 163         font-size: 80%;
 164         font-weight: normal;
 165 }
 166
 167 .badge input[type=text] {
 168         border: none;
 169         border-radius: 3px;
 170         padding: 1px 3px;
 171 }
 172
 173 .luci2-grid {
 174         margin-bottom: 20px;
 175 }
 176
 177 .luci2-grid > .row {
 178         border-top: 1px solid #e5e5e5;
 179         margin-left: 0;
 180         margin-right: 0;
 181 }
 182
 183 .luci2-grid > .row:last-child {
 184         border-bottom: 1px solid #e5e5e5;
 185 }
 186
 187 .luci2-grid > .row > .cell {
 188         padding-top: 5px;
 189         padding-bottom: 5px;
 190     display: inline-block !important;
 191     vertical-align: middle;
 192     float: none;
 193 }
 194
 195 .luci2-grid > .row > .cell.nowrap {
 196         overflow: hidden;
 197         text-overflow: ellipsis;
 198 }
 199
 200 .luci2-grid > .row > .cell.caption {
 201         font-weight: bold;
 202 }
 203
 204 .luci2-grid-condensed {
 205         margin-top: -1px;
 206         margin-bottom: -1px;
 207 }
 208
 209 .luci2-grid-condensed > .row > .cell {
 210         padding: 5px 3px;
 211         vertical-align: top;
 212 }
 213
 214 .luci2-grid-hover > .row:hover {
 215         background-color: #f5f5f5;
 216 }
 217
 218 .luci2-grid > .row > .cell > .btn-group {
 219         white-space: nowrap;
 220 }
 221
 222 .luci2-grid > .row > .cell > .btn-group > .btn {
 223         float: none;
 224 }
 225
 226 @media (max-width: 767px) {
 227         body {
 228                 font-size: 13px;
 229         }
 230         .badge {
 231                 padding: 2px 4px;
 232         }
 233         .container {
 234                 padding-left: 5px;
 235                 padding-right: 5px;
 236         }
 237         .luci2-grid > .row > .cell.hidden-xs,
 238         .luci2-grid > .row > .cell.hidden-sm.hidden-xs,
 239         .luci2-grid > .row > .cell.hidden-md.hidden-xs,
 240         .luci2-grid > .row > .cell.hidden-lg.hidden-xs { display: none !important; }
 241         .luci2-grid > .row > .cell { padding: 5px; }
 242         .luci2-grid-condensed > .row > .cell {
 243                 vertical-align: middle;
 244                 padding: 5px 10px;
 245         }
 246 }
 247 @media (min-width: 768px) and (max-width: 991px) {
 248         .luci2-grid > .row > .cell.hidden-xs.hidden-sm,
 249         .luci2-grid > .row > .cell.hidden-sm,
 250         .luci2-grid > .row > .cell.hidden-md.hidden-sm,
 251         .luci2-grid > .row > .cell.hidden-lg.hidden-sm { display: none !important; }
 252         .luci2-grid > .row > .cell { padding: 5px; }
 253         .luci2-grid-condensed > .row > .cell > .btn-group > .btn {
 254                 padding: 6px;
 255         }
 256 }
 257 @media (min-width: 992px) and (max-width: 1199px) {
 258         .luci2-grid > .row > .cell.hidden-xs.hidden-md,
 259         .luci2-grid > .row > .cell.hidden-sm.hidden-md,
 260         .luci2-grid > .row > .cell.hidden-md,
 261         .luci2-grid > .row > .cell.hidden-lg.hidden-md { display: none !important; }
 262 }
 263 @media (min-width: 1200px) {
 264         .luci2-grid > .row > .cell.hidden-xs.hidden-lg,
 265         .luci2-grid > .row > .cell.hidden-sm.hidden-lg,
 266         .luci2-grid > .row > .cell.hidden-md.hidden-lg,
 267         .luci2-grid > .row > .cell.hidden-lg { display: none !important; }
 268 }