tenna
Version:
A node js application that lets you easily stream most videos from any PC/laptop in your home network, to other devices in the network with a browser.
295 lines (206 loc) • 8.53 kB
text/less
//
// Variables
// --------------------------------------------------
// Global values
// --------------------------------------------------
//
// Color Swatches
// --------------------------------------------------
@turquoise: #1abc9c;
@green-sea: #16a085;
@emerald: #2ecc71;
@nephritis: #27ae60;
@peter-river: #3498db;
@belize-hole: #2980b9;
@amethyst: #9b59b6;
@wisteria: #8e44ad;
@wet-asphalt: #34495e;
@midnight-blue: #2c3e50;
@sun-flower: #f1c40f;
@orange: #f39c12;
@carrot: #e67e22;
@pumpkin: #d35400;
@alizarin: #e74c3c;
@pomegranate: #c0392b;
@clouds: #ecf0f1;
@silver: #bdc3c7;
@concrete: #95a5a6;
@asbestos: #7f8c8d;
// Grays
// -------------------------
@gray: @concrete;
@gray-light: @silver;
@inverse: white;
// Brand colors
// -------------------------
@brand-primary: @wet-asphalt;
@brand-secondary: @turquoise;
@brand-success: @emerald;
@brand-warning: @sun-flower;
@brand-danger: @alizarin;
@brand-info: @peter-river;
// Scaffolding
// -------------------------
@body-bg: #fff;
@text-color: @brand-primary;
// Links
// -------------------------
@link-color: @green-sea;
@link-hover-color: @turquoise;
// Typography
// -------------------------
@font-family-base: "Lato", Helvetica, Arial, sans-serif;
@font-family-demo: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace;
@font-size-base: 18px;
@font-size-h1: floor(@font-size-base * 3.444); // ~62px
@font-size-h2: ceil(@font-size-base * 2.889); // ~52px
@font-size-h3: ceil(@font-size-base * 2.222); // ~40px
@font-size-h4: ceil(@font-size-base * 1.611); // ~29px
@font-size-h5: ceil(@font-size-base * 1.556); // ~28px
@font-size-h6: ceil(@font-size-base * 1.333); // ~24px
@line-height-base: 1.72222; // 31/18
@line-height-computed: floor(@font-size-base * @line-height-base); // ~31px
@headings-font-family: @font-family-base;
@headings-font-weight: 700;
@headings-line-height: 1.1;
@headings-color: inherit;
// Icons
@icon-normal: 16px;
@icon-medium: 18px;
@icon-large: 32px;
// Components
// -------------------------
@border-radius-base: 4px;
@border-radius-large: 6px;
@border-radius-small: 3px;
// COMPONENT VARIABLES
// --------------------------------------------------
@component-font-size-base: ceil(@font-size-base * 0.833); // ~15px
// Form controls
// -------------------------
@input-font-size-base: @component-font-size-base;
@input-font-size-sm: floor(@component-font-size-base * 0.867); // ~13px
@input-font-size-lg: ceil(@component-font-size-base * 1.133); // ~17px
@input-font-size-hg: floor(@component-font-size-base * 1.467); // ~22px
@input-icon-font-size: ceil(@component-font-size-base * 1.333); // ~20px
@input-bg: @inverse;
@input-bg-disabled: mix(@gray, white, 10%);
@input-height-small: 35px;
@input-height-base: 41px;
@input-height-large: 45px;
@input-height-huge: 53px;
@input-border-radius: @border-radius-large;
// Pagination
// -------------------------
@pagination-color: mix(@brand-primary, white, 20%);
// Pager
@pager-padding: 9px 15px 10px;
// Buttons
// -------------------------
@btn-font-size-base: @component-font-size-base;
@btn-font-size-xs: ceil(@component-font-size-base * 0.80); // ~12px
@btn-font-size-sm: floor(@component-font-size-base * 0.867); // ~13px
@btn-font-size-lg: ceil(@component-font-size-base * 1.133); // ~17px
@btn-font-size-hg: floor(@component-font-size-base * 1.467); // ~22px
@btn-line-height-base: 1.4; // ~21px
@btn-line-height-hg: 1.227; // ~27px
@btn-line-height-lg: 1.471; // ~25px
@btn-line-height-sm: 1.385; // ~16px
@btn-line-height-xs: 1.083; // ~13px
@btn-social-font-size-base: floor(@component-font-size-base * 0.867); // ~13px
@btn-social-line-height-base: 1.077; // ~14px
@btn-font-weight: normal;
@btn-default-color: @inverse;
@btn-default-bg: @gray-light;
@btn-hover-bg: mix(@gray-light, white, 80%);
@btn-active-bg: mix(@gray-light, black, 85%);
@btn-primary-hover-bg: mix(@brand-secondary, white, 80%);
@btn-primary-active-bg: mix(@brand-secondary, black, 85%);
@btn-info-hover-bg: mix(@brand-info, white, 80%);
@btn-info-active-bg: mix(@brand-info, black, 85%);
@btn-success-hover-bg: mix(@brand-success, white, 80%);
@btn-success-active-bg: mix(@brand-success, black, 85%);
@btn-danger-hover-bg: mix(@brand-danger, white, 80%);
@btn-danger-active-bg: mix(@brand-danger, black, 85%);
@btn-warning-hover-bg: overlay(@brand-warning, darken(white, 37.5%));
@btn-warning-active-bg: mix(@brand-warning, black, 85%);
@btn-inverse-hover-bg: overlay(@brand-primary, darken(white, 37.5%));
@btn-inverse-active-bg: mix(@brand-primary, black, 85%);
@btn-link-disabled-color: @gray-light;
// Navbar
// -------------------------
@navbar-link-space: 20px;
@navbar-sublink-space: 9px;
// Dropdown Menu
// -------------------------
@dropdown-background: mix(@inverse, @brand-primary, 94%);
// Iconbar
// -------------------------
@iconbar-background: mix(@brand-primary, black, 85%);
// Progress/slider
// -------------------------
@progress-height: 12px;
// Switch
// -------------------------
@switch-border-radius: 30px;
@switch-width: 80px;
// Media queries breakpoints
// --------------------------------------------------
// Extra small screen / phone
@screen-xs-min: 480px;
// Small screen / tablet
@screen-sm-min: 768px;
// Medium screen / desktop
@screen-md-min: 992px;
// Large screen / wide desktop
@screen-lg-min: 1200px;
// So media queries don't overlap when required, provide a maximum
@screen-xs-max: (@screen-sm-min - 1);
@screen-sm-max: (@screen-md-min - 1);
@screen-md-max: (@screen-lg-min - 1);
// Grid system
// --------------------------------------------------
// Number of columns in the grid system
@grid-columns: 12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width: 30px;
// Point at which the navbar stops collapsing
@grid-float-breakpoint: @screen-sm-min;
// Form states and alerts
// -------------------------
@state-success-text: @brand-success;
@state-success-bg: #dff0d8;
@state-success-border: darken(spin(@state-success-bg, -10), 5%);
@state-info-text: @brand-info;
@state-info-bg: #d9edf7;
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
@state-warning-text: @brand-warning;
@state-warning-bg: #fcf8e3;
@state-warning-border: darken(spin(@state-warning-bg, -10), 5%);
@state-danger-text: @brand-danger;
@state-danger-bg: #f2dede;
@state-danger-border: darken(spin(@state-danger-bg, -10), 5%);
// Code
// ------------------------
@code-color: #c7254e;
@code-bg: #f9f2f4;
@pre-bg: @inverse;
@pre-color: inherit;
@pre-border-color: mix(@brand-primary, @inverse, 12%);
@pre-scrollable-max-height: 340px;
@pre-border-radius: @border-radius-large;
// Type
// ------------------------
@text-muted: @gray-light;
@abbr-border-color: @gray-light;
@headings-small-color: mix(@brand-primary, @inverse, 12%);
@blockquote-small-color: inherit;
@blockquote-border-color: mix(@brand-primary, @inverse, 12%);
@page-header-border-color: mix(@brand-primary, @inverse, 12%);
// Miscellaneous
// -------------------------
// Hr border color
@hr-border: mix(@brand-primary, @inverse, 63%);
// Horizontal forms & lists
@component-offset-horizontal: 180px;