bosun.org@v0.0.0-20210513094433-e25bc3e69a1f/cmd/bosun/web/static/css/variables.less (about) 1 /*! Generated by Live LESS Theme Customizer - not used in runtime, but for reference */ 2 3 @gray-base: rgb(0, 0, 0); 4 @gray-darker: lighten(@gray-base, 13.5%); 5 @gray-dark: lighten(@gray-base, 20%); 6 @gray: lighten(@gray-base, 33.5%); 7 @gray-light: lighten(@gray-base, 46.7%); 8 @gray-lighter: lighten(@gray-base, 93.5%); 9 @brand-primary: darken(#428bca, 6.5%); 10 @brand-success: rgb(92, 184, 92); 11 @brand-info: rgb(91, 192, 222); 12 @brand-warning: rgb(240, 173, 78); 13 @brand-danger: rgb(217, 83, 79); 14 @body-bg: rgb(255, 255, 255); 15 @text-color: @gray-dark; 16 @link-color: @brand-primary; 17 @link-hover-color: darken(@link-color, 15%); 18 @link-hover-decoration: underline; 19 @font-family-sans-serif: "Helvetica Neue", Helvetica, Arial, sans-serif; 20 @font-family-serif: Georgia, "Times New Roman", Times, serif; 21 @font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; 22 @font-family-base: @font-family-sans-serif; 23 @font-size-base: 13.5px; 24 @font-size-large: ceil((@font-size-base * 1.25)); 25 @font-size-small: ceil((@font-size-base * 0.85)); 26 @font-size-h1: floor((@font-size-base * 2.25)); 27 @font-size-h2: floor((@font-size-base * 2)); 28 @font-size-h3: ceil((@font-size-base * 1.5)); 29 @font-size-h4: ceil((@font-size-base * 1.25)); 30 @font-size-h5: @font-size-base; 31 @font-size-h6: ceil((@font-size-base * 0.85)); 32 @line-height-base: 1.3333333; 33 @line-height-computed: floor((@font-size-base * @line-height-base)); 34 @headings-font-family: inherit; 35 @headings-font-weight: 500; 36 @headings-line-height: 1.1; 37 @headings-color: inherit; 38 @icon-font-path: "../fonts/"; 39 @icon-font-name: "glyphicons-halflings-regular"; 40 @icon-font-svg-id: "glyphicons_halflingsregular"; 41 @padding-base-vertical: 5px; 42 @padding-base-horizontal: 12px; 43 @padding-large-vertical: 6px; 44 @padding-large-horizontal: 16px; 45 @padding-small-vertical: 4px; 46 @padding-small-horizontal: 10px; 47 @padding-xs-vertical: 1px; 48 @padding-xs-horizontal: 5px; 49 @line-height-large: 1.3333333; 50 @line-height-small: 1.5; 51 @border-radius-base: 4px; 52 @border-radius-large: 6px; 53 @border-radius-small: 3px; 54 @component-active-color: rgb(255, 255, 255); 55 @component-active-bg: @brand-primary; 56 @caret-width-base: 4px; 57 @caret-width-large: 5px; 58 @table-cell-padding: 8px; 59 @table-condensed-cell-padding: 5px; 60 @table-bg: transparent; 61 @table-bg-accent: rgb(249, 249, 249); 62 @table-bg-hover: rgb(245, 245, 245); 63 @table-bg-active: @table-bg-hover; 64 @table-border-color: rgb(221, 221, 221); 65 @btn-font-weight: normal; 66 @btn-default-color: rgb(51, 51, 51); 67 @btn-default-bg: rgb(255, 255, 255); 68 @btn-default-border: rgb(204, 204, 204); 69 @btn-primary-color: rgb(255, 255, 255); 70 @btn-primary-bg: @brand-primary; 71 @btn-primary-border: darken(@btn-primary-bg, 5%); 72 @btn-success-color: rgb(255, 255, 255); 73 @btn-success-bg: @brand-success; 74 @btn-success-border: darken(@btn-success-bg, 5%); 75 @btn-info-color: rgb(255, 255, 255); 76 @btn-info-bg: @brand-info; 77 @btn-info-border: darken(@btn-info-bg, 5%); 78 @btn-warning-color: rgb(255, 255, 255); 79 @btn-warning-bg: @brand-warning; 80 @btn-warning-border: darken(@btn-warning-bg, 5%); 81 @btn-danger-color: rgb(255, 255, 255); 82 @btn-danger-bg: @brand-danger; 83 @btn-danger-border: darken(@btn-danger-bg, 5%); 84 @btn-link-disabled-color: @gray-light; 85 @btn-border-radius-base: @border-radius-base; 86 @btn-border-radius-large: @border-radius-large; 87 @btn-border-radius-small: @border-radius-small; 88 @input-bg: rgb(255, 255, 255); 89 @input-bg-disabled: @gray-lighter; 90 @input-color: @gray; 91 @input-border: rgb(204, 204, 204); 92 @input-border-radius: @border-radius-base; 93 @input-border-radius-large: @border-radius-large; 94 @input-border-radius-small: @border-radius-small; 95 @input-border-focus: rgb(102, 175, 233); 96 @input-color-placeholder: rgb(153, 153, 153); 97 @input-height-base: (@line-height-computed + (@padding-base-vertical * 2) + 2); 98 @input-height-large: (ceil(@font-size-large * @line-height-large) + (@padding-large-vertical * 2) + 2); 99 @input-height-small: (floor(@font-size-small * @line-height-small) + (@padding-small-vertical * 2) + 2); 100 @form-group-margin-bottom: 10px; 101 @legend-color: @gray-dark; 102 @legend-border-color: rgb(229, 229, 229); 103 @input-group-addon-bg: @gray-lighter; 104 @input-group-addon-border-color: @input-border; 105 @cursor-disabled: not-allowed; 106 @dropdown-bg: rgb(255, 255, 255); 107 @dropdown-border: rgba(0, 0, 0, 0.15); 108 @dropdown-fallback-border: rgb(204, 204, 204); 109 @dropdown-divider-bg: rgb(229, 229, 229); 110 @dropdown-link-color: @gray-dark; 111 @dropdown-link-hover-color: darken(@gray-dark, 5%); 112 @dropdown-link-hover-bg: rgb(245, 245, 245); 113 @dropdown-link-active-color: @component-active-color; 114 @dropdown-link-active-bg: @component-active-bg; 115 @dropdown-link-disabled-color: @gray-light; 116 @dropdown-header-color: @gray-light; 117 @dropdown-caret-color: rgb(0, 0, 0); 118 @zindex-navbar: 1000; 119 @zindex-dropdown: 1000; 120 @zindex-popover: 1060; 121 @zindex-tooltip: 1070; 122 @zindex-navbar-fixed: 1030; 123 @zindex-modal-background: 1040; 124 @zindex-modal: 1050; 125 @screen-xs: 480px; 126 @screen-xs-min: @screen-xs; 127 @screen-phone: @screen-xs-min; 128 @screen-sm: 768px; 129 @screen-sm-min: @screen-sm; 130 @screen-tablet: @screen-sm-min; 131 @screen-md: 992px; 132 @screen-md-min: @screen-md; 133 @screen-desktop: @screen-md-min; 134 @screen-lg: 1200px; 135 @screen-lg-min: @screen-lg; 136 @screen-lg-desktop: @screen-lg-min; 137 @screen-xs-max: (@screen-sm-min - 1); 138 @screen-sm-max: (@screen-md-min - 1); 139 @screen-md-max: (@screen-lg-min - 1); 140 @grid-columns: 12; 141 @grid-gutter-width: 30px; 142 @grid-float-breakpoint: @screen-sm-min; 143 @grid-float-breakpoint-max: (@grid-float-breakpoint - 1); 144 @container-tablet: (720px + @grid-gutter-width); 145 @container-sm: @container-tablet; 146 @container-desktop: (940px + @grid-gutter-width); 147 @container-md: @container-desktop; 148 @container-large-desktop: (1140px + @grid-gutter-width); 149 @container-lg: @container-large-desktop; 150 @navbar-height: 40px; 151 @navbar-margin-bottom: @line-height-computed; 152 @navbar-border-radius: @border-radius-base; 153 @navbar-padding-horizontal: floor((@grid-gutter-width / 2)); 154 @navbar-padding-vertical: ((@navbar-height - @line-height-computed) / 2); 155 @navbar-collapse-max-height: 340px; 156 @navbar-default-color: rgb(119, 119, 119); 157 @navbar-default-bg: rgb(248, 248, 248); 158 @navbar-default-border: darken(@navbar-default-bg, 6.5%); 159 @navbar-default-link-color: rgb(119, 119, 119); 160 @navbar-default-link-hover-color: rgb(51, 51, 51); 161 @navbar-default-link-hover-bg: transparent; 162 @navbar-default-link-active-color: rgb(85, 85, 85); 163 @navbar-default-link-active-bg: darken(@navbar-default-bg, 6.5%); 164 @navbar-default-link-disabled-color: rgb(204, 204, 204); 165 @navbar-default-link-disabled-bg: transparent; 166 @navbar-default-brand-color: @navbar-default-link-color; 167 @navbar-default-brand-hover-color: darken(@navbar-default-brand-color, 10%); 168 @navbar-default-brand-hover-bg: transparent; 169 @navbar-default-toggle-hover-bg: rgb(221, 221, 221); 170 @navbar-default-toggle-icon-bar-bg: rgb(136, 136, 136); 171 @navbar-default-toggle-border-color: rgb(221, 221, 221); 172 @navbar-inverse-color: lighten(@gray-light, 15%); 173 @navbar-inverse-bg: rgb(34, 34, 34); 174 @navbar-inverse-border: darken(@navbar-inverse-bg, 10%); 175 @navbar-inverse-link-color: lighten(@gray-light, 15%); 176 @navbar-inverse-link-hover-color: rgb(255, 255, 255); 177 @navbar-inverse-link-hover-bg: transparent; 178 @navbar-inverse-link-active-color: @navbar-inverse-link-hover-color; 179 @navbar-inverse-link-active-bg: darken(@navbar-inverse-bg, 10%); 180 @navbar-inverse-link-disabled-color: rgb(68, 68, 68); 181 @navbar-inverse-link-disabled-bg: transparent; 182 @navbar-inverse-brand-color: @navbar-inverse-link-color; 183 @navbar-inverse-brand-hover-color: rgb(255, 255, 255); 184 @navbar-inverse-brand-hover-bg: transparent; 185 @navbar-inverse-toggle-hover-bg: rgb(51, 51, 51); 186 @navbar-inverse-toggle-icon-bar-bg: rgb(255, 255, 255); 187 @navbar-inverse-toggle-border-color: rgb(51, 51, 51); 188 @nav-link-padding: 10px 15px; 189 @nav-link-hover-bg: @gray-lighter; 190 @nav-disabled-link-color: @gray-light; 191 @nav-disabled-link-hover-color: @gray-light; 192 @nav-tabs-border-color: rgb(221, 221, 221); 193 @nav-tabs-link-hover-border-color: @gray-lighter; 194 @nav-tabs-active-link-hover-bg: @body-bg; 195 @nav-tabs-active-link-hover-color: @gray; 196 @nav-tabs-active-link-hover-border-color: rgb(221, 221, 221); 197 @nav-tabs-justified-link-border-color: rgb(221, 221, 221); 198 @nav-tabs-justified-active-link-border-color: @body-bg; 199 @nav-pills-border-radius: @border-radius-base; 200 @nav-pills-active-link-hover-bg: @component-active-bg; 201 @nav-pills-active-link-hover-color: @component-active-color; 202 @pagination-color: @link-color; 203 @pagination-bg: rgb(255, 255, 255); 204 @pagination-border: rgb(221, 221, 221); 205 @pagination-hover-color: @link-hover-color; 206 @pagination-hover-bg: @gray-lighter; 207 @pagination-hover-border: rgb(221, 221, 221); 208 @pagination-active-color: rgb(255, 255, 255); 209 @pagination-active-bg: @brand-primary; 210 @pagination-active-border: @brand-primary; 211 @pagination-disabled-color: @gray-light; 212 @pagination-disabled-bg: rgb(255, 255, 255); 213 @pagination-disabled-border: rgb(221, 221, 221); 214 @pager-bg: @pagination-bg; 215 @pager-border: @pagination-border; 216 @pager-border-radius: 15px; 217 @pager-hover-bg: @pagination-hover-bg; 218 @pager-active-bg: @pagination-active-bg; 219 @pager-active-color: @pagination-active-color; 220 @pager-disabled-color: @pagination-disabled-color; 221 @jumbotron-padding: 30px; 222 @jumbotron-color: inherit; 223 @jumbotron-bg: @gray-lighter; 224 @jumbotron-heading-color: inherit; 225 @jumbotron-font-size: ceil((@font-size-base * 1.5)); 226 @jumbotron-heading-font-size: ceil((@font-size-base * 4.5)); 227 @state-success-text: rgb(60, 118, 61); 228 @state-success-bg: rgb(223, 240, 216); 229 @state-success-border: darken(spin(@state-success-bg, -10), 5%); 230 @state-info-text: rgb(49, 112, 143); 231 @state-info-bg: rgb(217, 237, 247); 232 @state-info-border: darken(spin(@state-info-bg, -10), 7%); 233 @state-warning-text: rgb(138, 109, 59); 234 @state-warning-bg: rgb(252, 248, 227); 235 @state-warning-border: darken(spin(@state-warning-bg, -10), 5%); 236 @state-danger-text: rgb(169, 68, 66); 237 @state-danger-bg: rgb(242, 222, 222); 238 @state-danger-border: darken(spin(@state-danger-bg, -10), 5%); 239 @tooltip-max-width: 200px; 240 @tooltip-color: rgb(255, 255, 255); 241 @tooltip-bg: rgb(0, 0, 0); 242 @tooltip-opacity: .9; 243 @tooltip-arrow-width: 5px; 244 @tooltip-arrow-color: @tooltip-bg; 245 @popover-bg: rgb(255, 255, 255); 246 @popover-max-width: 276px; 247 @popover-border-color: rgba(0, 0, 0, 0.2); 248 @popover-fallback-border-color: rgb(204, 204, 204); 249 @popover-title-bg: darken(@popover-bg, 3%); 250 @popover-arrow-width: 10px; 251 @popover-arrow-color: @popover-bg; 252 @popover-arrow-outer-width: (@popover-arrow-width + 1); 253 @popover-arrow-outer-color: fadein(@popover-border-color, 5%); 254 @popover-arrow-outer-fallback-color: darken(@popover-fallback-border-color, 20%); 255 @label-default-bg: @gray-light; 256 @label-primary-bg: @brand-primary; 257 @label-success-bg: @brand-success; 258 @label-info-bg: @brand-info; 259 @label-warning-bg: @brand-warning; 260 @label-danger-bg: @brand-danger; 261 @label-color: rgb(255, 255, 255); 262 @label-link-hover-color: rgb(255, 255, 255); 263 @modal-inner-padding: 15px; 264 @modal-title-padding: 15px; 265 @modal-title-line-height: @line-height-base; 266 @modal-content-bg: rgb(255, 255, 255); 267 @modal-content-border-color: rgba(0, 0, 0, 0.2); 268 @modal-content-fallback-border-color: rgb(153, 153, 153); 269 @modal-backdrop-bg: rgb(0, 0, 0); 270 @modal-backdrop-opacity: .5; 271 @modal-header-border-color: rgb(229, 229, 229); 272 @modal-footer-border-color: @modal-header-border-color; 273 @modal-lg: 900px; 274 @modal-md: 600px; 275 @modal-sm: 300px; 276 @alert-padding: 15px; 277 @alert-border-radius: @border-radius-base; 278 @alert-link-font-weight: bold; 279 @alert-success-bg: @state-success-bg; 280 @alert-success-text: @state-success-text; 281 @alert-success-border: @state-success-border; 282 @alert-info-bg: @state-info-bg; 283 @alert-info-text: @state-info-text; 284 @alert-info-border: @state-info-border; 285 @alert-warning-bg: @state-warning-bg; 286 @alert-warning-text: @state-warning-text; 287 @alert-warning-border: @state-warning-border; 288 @alert-danger-bg: @state-danger-bg; 289 @alert-danger-text: @state-danger-text; 290 @alert-danger-border: @state-danger-border; 291 @progress-bg: rgb(245, 245, 245); 292 @progress-bar-color: rgb(255, 255, 255); 293 @progress-border-radius: @border-radius-base; 294 @progress-bar-bg: @brand-primary; 295 @progress-bar-success-bg: @brand-success; 296 @progress-bar-warning-bg: @brand-warning; 297 @progress-bar-danger-bg: @brand-danger; 298 @progress-bar-info-bg: @brand-info; 299 @list-group-bg: rgb(255, 255, 255); 300 @list-group-border: rgb(221, 221, 221); 301 @list-group-border-radius: @border-radius-base; 302 @list-group-hover-bg: rgb(245, 245, 245); 303 @list-group-active-color: @component-active-color; 304 @list-group-active-bg: @component-active-bg; 305 @list-group-active-border: @list-group-active-bg; 306 @list-group-active-text-color: lighten(@list-group-active-bg, 40%); 307 @list-group-disabled-color: @gray-light; 308 @list-group-disabled-bg: @gray-lighter; 309 @list-group-disabled-text-color: @list-group-disabled-color; 310 @list-group-link-color: rgb(85, 85, 85); 311 @list-group-link-hover-color: @list-group-link-color; 312 @list-group-link-heading-color: rgb(51, 51, 51); 313 @panel-bg: rgb(255, 255, 255); 314 @panel-body-padding: 10px; 315 @panel-heading-padding: 8px 15px; 316 @panel-footer-padding: @panel-heading-padding; 317 @panel-border-radius: @border-radius-base; 318 @panel-inner-border: rgb(221, 221, 221); 319 @panel-footer-bg: rgb(245, 245, 245); 320 @panel-default-text: @gray-dark; 321 @panel-default-border: rgb(221, 221, 221); 322 @panel-default-heading-bg: rgb(245, 245, 245); 323 @panel-primary-text: rgb(255, 255, 255); 324 @panel-primary-border: @brand-primary; 325 @panel-primary-heading-bg: @brand-primary; 326 @panel-success-text: @state-success-text; 327 @panel-success-border: @state-success-border; 328 @panel-success-heading-bg: @state-success-bg; 329 @panel-info-text: @state-info-text; 330 @panel-info-border: @state-info-border; 331 @panel-info-heading-bg: @state-info-bg; 332 @panel-warning-text: @state-warning-text; 333 @panel-warning-border: @state-warning-border; 334 @panel-warning-heading-bg: @state-warning-bg; 335 @panel-danger-text: @state-danger-text; 336 @panel-danger-border: @state-danger-border; 337 @panel-danger-heading-bg: @state-danger-bg; 338 @thumbnail-padding: 4px; 339 @thumbnail-bg: @body-bg; 340 @thumbnail-border: rgb(221, 221, 221); 341 @thumbnail-border-radius: @border-radius-base; 342 @thumbnail-caption-color: @text-color; 343 @thumbnail-caption-padding: 9px; 344 @well-bg: rgb(245, 245, 245); 345 @well-border: darken(@well-bg, 7%); 346 @badge-color: rgb(255, 255, 255); 347 @badge-link-hover-color: rgb(255, 255, 255); 348 @badge-bg: @gray-light; 349 @badge-active-color: @link-color; 350 @badge-active-bg: rgb(255, 255, 255); 351 @badge-font-weight: bold; 352 @badge-line-height: 1; 353 @badge-border-radius: 10px; 354 @breadcrumb-padding-vertical: 8px; 355 @breadcrumb-padding-horizontal: 15px; 356 @breadcrumb-bg: rgb(245, 245, 245); 357 @breadcrumb-color: rgb(204, 204, 204); 358 @breadcrumb-active-color: @gray-light; 359 @breadcrumb-separator: "/"; 360 @carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6); 361 @carousel-control-color: rgb(255, 255, 255); 362 @carousel-control-width: 15%; 363 @carousel-control-opacity: .5; 364 @carousel-control-font-size: 20px; 365 @carousel-indicator-active-bg: rgb(255, 255, 255); 366 @carousel-indicator-border-color: rgb(255, 255, 255); 367 @carousel-caption-color: rgb(255, 255, 255); 368 @close-font-weight: bold; 369 @close-color: rgb(0, 0, 0); 370 @close-text-shadow: 0 1px 0 #fff; 371 @code-color: rgb(199, 37, 78); 372 @code-bg: rgb(249, 242, 244); 373 @kbd-color: rgb(255, 255, 255); 374 @kbd-bg: rgb(51, 51, 51); 375 @pre-bg: rgb(245, 245, 245); 376 @pre-color: @gray-dark; 377 @pre-border-color: rgb(204, 204, 204); 378 @pre-scrollable-max-height: 340px; 379 @component-offset-horizontal: 180px; 380 @text-muted: @gray-light; 381 @abbr-border-color: @gray-light; 382 @headings-small-color: @gray-light; 383 @blockquote-small-color: @gray-light; 384 @blockquote-font-size: (@font-size-base * 1.25); 385 @blockquote-border-color: @gray-lighter; 386 @page-header-border-color: @gray-lighter; 387 @dl-horizontal-offset: @component-offset-horizontal; 388 @dl-horizontal-breakpoint: @grid-float-breakpoint; 389 @hr-border: @gray-lighter;