351 lines
7.2 KiB
SCSS
351 lines
7.2 KiB
SCSS
/*
|
|
* Variables used across files
|
|
*/
|
|
|
|
$ColorUIBackground: #262626; /* Dark Grey */
|
|
/* $ColorScreenPrimary: #f34e1d; */ /* JW */
|
|
$ColorScreenPrimary: #ed3618; /* Orange */
|
|
$ColorElementPrimary: #0b6672; /* Teal */
|
|
$ColorText: #ffffff; /* White */
|
|
$ColorLink: #fc0;
|
|
$ColorLinkHover: #82AEAF;
|
|
$ColorSidebarText: #a0b9bd;
|
|
$ColorScreenBackground: lighten($ColorUIBackground, 10%);
|
|
$ColorTextBoxBackground: #c5c5c5;
|
|
$ColorTextBoxDisabledBackground: #999;
|
|
$ColorRecordingBackground: #471f18;
|
|
|
|
$ColorTextHighlight: white;
|
|
$ColorTextTypical: #CCCCCC;
|
|
$ColorTextDisabled: #AAAAAA;
|
|
|
|
$color1: #006AB6; /* mid blue */
|
|
$color2: #9A9084; /* warm gray */
|
|
$color3: #B11254; /* magenta */
|
|
$color4: #029FCA; /* bright blue */
|
|
$color5: #B19975; /* tan */
|
|
$color6: #F2532B; /* orange */
|
|
$color7: #0A3369; /* deep blue */
|
|
$color8: #FFC742; /* gold */
|
|
$color9: #7D8590; /* slate blue */
|
|
$color10: #81C882; /* seafoam */
|
|
$color11: #f0eacb; /* warm white */
|
|
$color12: shade($color5, 80%); /* warm black */
|
|
$color13: #E9D384; /* wheat */
|
|
$translucent1: rgba(#000, 0.3);
|
|
$translucent2: rgba(#fff, 0.4);
|
|
$text: #f3f1ee;
|
|
|
|
$gradient-diff: 30%; $link: $color8;
|
|
$border: hsl(210, 50%, 45%);
|
|
|
|
$narrow-screen: 1000px; // 990 ? 1000 ?
|
|
$short-screen: 600px; // toolbars / chrome for x768
|
|
|
|
$latencyBadgeMe: #dddddd;
|
|
$latencyBadgeGood: #71a43b;
|
|
$latencyBadgeFair: #cc9900;
|
|
$latencyBadgePoor: #980006;
|
|
$latencyBadgeUnacceptable: #868686;
|
|
$latencyBadgeUnknown: #868686;
|
|
|
|
$good: #71a43b;
|
|
$unknown: #868686;
|
|
$poor: #980006;
|
|
$error: #980006;
|
|
$fair: #cc9900;
|
|
|
|
$labelFontFamily: Arial, Helvetica, sans-serif;
|
|
$labelFontSize: 12px;
|
|
|
|
@mixin labelFont {
|
|
font-family: $labelFontFamily;
|
|
font-size: $labelFontSize;
|
|
}
|
|
|
|
|
|
@mixin border_box_sizing {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-ms-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@mixin content_box_sizing {
|
|
-webkit-box-sizing: content-box;
|
|
-moz-box-sizing: content-box;
|
|
-ms-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
}
|
|
|
|
@mixin border-radius($radius) {
|
|
-moz-border-radius:$radius;
|
|
-webkit-border-radius: $radius;
|
|
border-radius: $radius;
|
|
background-clip: padding-box; /* stops bg color from leaking outside the border: */
|
|
}
|
|
|
|
/** IE10 and above only */
|
|
@mixin vertical-align-row {
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -ms-flexbox;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
|
|
-webkit-flex-pack:space-around;
|
|
-webkit-justify-content:space-around;
|
|
-moz-justify-content:space-around;
|
|
-ms-flex-pack:space-around;
|
|
justify-content:space-around;
|
|
|
|
-webkit-flex-line-pack:center;
|
|
-ms-flex-line-pack:center;
|
|
-webkit-align-content:center;
|
|
align-content:center;
|
|
|
|
-webkit-flex-direction:row;
|
|
-moz-flex-direction:row;
|
|
-ms-flex-direction:row;
|
|
flex-direction:row;
|
|
}
|
|
|
|
@mixin vertical-align-column {
|
|
display: -webkit-box;
|
|
display: -moz-box;
|
|
display: -ms-flexbox;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
|
|
-webkit-flex-pack:space-around;
|
|
-webkit-justify-content:space-around;
|
|
-moz-justify-content:space-around;
|
|
-ms-flex-pack:space-around;
|
|
justify-content:space-around;
|
|
|
|
-webkit-flex-line-pack:center;
|
|
-ms-flex-line-pack:center;
|
|
-webkit-align-content:center;
|
|
align-content:center;
|
|
|
|
-webkit-flex-direction:column;
|
|
-moz-flex-direction:column;
|
|
-ms-flex-direction:column;
|
|
flex-direction:column;
|
|
}
|
|
|
|
// Single side border-radius
|
|
|
|
@mixin border-top-radius($radius) {
|
|
-webkit-border-top-right-radius: $radius;
|
|
border-top-right-radius: $radius;
|
|
-webkit-border-top-left-radius: $radius;
|
|
border-top-left-radius: $radius;
|
|
background-clip: padding-box;
|
|
}
|
|
@mixin border-right-radius($radius) {
|
|
-webkit-border-bottom-right-radius: $radius;
|
|
border-bottom-right-radius: $radius;
|
|
-webkit-border-top-right-radius: $radius;
|
|
border-top-right-radius: $radius;
|
|
background-clip: padding-box;
|
|
}
|
|
@mixin border-bottom-radius($radius) {
|
|
-webkit-border-bottom-right-radius: $radius;
|
|
border-bottom-right-radius: $radius;
|
|
-webkit-border-bottom-left-radius: $radius;
|
|
border-bottom-left-radius: $radius;
|
|
background-clip: padding-box;
|
|
}
|
|
@mixin border-left-radius($radius) {
|
|
-webkit-border-bottom-left-radius: $radius;
|
|
border-bottom-left-radius: $radius;
|
|
-webkit-border-top-left-radius: $radius;
|
|
border-top-left-radius: $radius;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
@mixin flat_dropdown {
|
|
box-shadow: none !important;
|
|
color: #666666;
|
|
width: 100%;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
-ms-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
@mixin white_dropdown {
|
|
ul {
|
|
background-color:white;
|
|
}
|
|
}
|
|
|
|
@mixin no_top_padding_dropdown {
|
|
.selected {
|
|
padding-top:0;
|
|
}
|
|
|
|
.carat {
|
|
margin-top:-9px;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
@mixin client-state-box {
|
|
|
|
.client-state {
|
|
position:relative;
|
|
text-align:center;
|
|
padding:3px;
|
|
@include border_box_sizing;
|
|
color:white;
|
|
|
|
&.unknown {
|
|
background-color: $error;
|
|
}
|
|
|
|
&.error {
|
|
background-color: $error;
|
|
}
|
|
|
|
&.hq {
|
|
background-color: $good;
|
|
}
|
|
|
|
&.sq {
|
|
background-color: $good;
|
|
}
|
|
|
|
&.missing {
|
|
background-color: $error;
|
|
}
|
|
|
|
&.not_mine {
|
|
background-color: $good;
|
|
}
|
|
|
|
&.discarded {
|
|
background-color: $unknown;
|
|
}
|
|
|
|
.retry {
|
|
display:none;
|
|
position:absolute;
|
|
line-height:28px;
|
|
top:4px;
|
|
right:8px;
|
|
z-index:1;
|
|
}
|
|
}
|
|
}
|
|
|
|
@mixin upload-state-box {
|
|
|
|
.upload-state {
|
|
position:relative;
|
|
text-align:center;
|
|
padding:3px;
|
|
@include border_box_sizing;
|
|
color:white;
|
|
|
|
&.unknown {
|
|
background-color: $unknown;
|
|
}
|
|
|
|
&.error {
|
|
background-color: $error;
|
|
}
|
|
|
|
&.missing {
|
|
background-color: $error;
|
|
}
|
|
|
|
&.upload-soon {
|
|
background-color: $fair;
|
|
}
|
|
|
|
&.uploaded {
|
|
background-color: $good;
|
|
}
|
|
|
|
&.not_mine {
|
|
background-color: $good;
|
|
}
|
|
|
|
.retry {
|
|
display:none;
|
|
position:absolute;
|
|
line-height:28px;
|
|
visibility: middle;
|
|
top:4px;
|
|
right:8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
@mixin mix-state-box {
|
|
|
|
.mix-state {
|
|
position:relative;
|
|
text-align:center;
|
|
padding:3px;
|
|
@include border_box_sizing;
|
|
color:white;
|
|
|
|
&.still-uploading { background-color: $fair; }
|
|
&.discarded {background-color: $unknown; }
|
|
&.unknown { background-color: $unknown; }
|
|
&.error { background-color: $error; }
|
|
&.mixed { background-color: $good; }
|
|
&.mixing {background-color: $good; }
|
|
&.waiting-to-mix {background-color: $good; }
|
|
&.stream-mix { background-color: $fair; }
|
|
}
|
|
}
|
|
|
|
.badge-number {
|
|
font-size:25px;
|
|
color:white;
|
|
background-color:$ColorScreenPrimary;
|
|
width:30px;
|
|
height:30px;
|
|
-webkit-border-radius:50%;
|
|
-moz-border-radius:50%;
|
|
border-radius:50%;
|
|
text-align:center;
|
|
display:inline-block;
|
|
border:2px solid white;
|
|
margin-right:10px;
|
|
|
|
&.disabled {
|
|
color:$ColorTextDisabled;
|
|
border-color:$ColorTextDisabled;
|
|
background-color:transparent;
|
|
}
|
|
}
|
|
|
|
.white-bordered-button {
|
|
font-size:20px;
|
|
font-weight:bold;
|
|
background-color:white;
|
|
color:$ColorScreenPrimary;
|
|
border:3px solid $ColorScreenPrimary;
|
|
padding:18px;
|
|
-webkit-border-radius:8px;
|
|
-moz-border-radius:8px;
|
|
border-radius:8px;
|
|
}
|
|
|
|
|
|
.capitalize {
|
|
text-transform: capitalize
|
|
}
|
|
|
|
.vertical-helper {
|
|
display: inline-block;
|
|
height: 100%;
|
|
}
|