618 lines
13 KiB
SCSS
618 lines
13 KiB
SCSS
/* Custom Styles for the FTUE Dialogs */
|
|
|
|
@import "client/common.css.scss";
|
|
@charset "UTF-8";
|
|
|
|
/* Jonathon's FTUE overrides */
|
|
|
|
#ftue-dialog {
|
|
.help-doc {
|
|
display:none;
|
|
}
|
|
}
|
|
|
|
div.dialog.ftue .ftue-inner div[layout-wizard-step="1"] {
|
|
p.intro {
|
|
margin-top:0px;
|
|
}
|
|
|
|
ul {
|
|
margin:0px;
|
|
padding:0px;
|
|
margin-top:20px;
|
|
}
|
|
|
|
li {
|
|
text-align:center;
|
|
width: 31%;
|
|
height: 170px;
|
|
margin:0px;
|
|
/*padding:0px;*/
|
|
list-style: none;
|
|
float:left;
|
|
}
|
|
li.first {
|
|
width: 34%;
|
|
}
|
|
}
|
|
div.dialog.ftue .ftue-inner div[layout-wizard-step="3"] {
|
|
h5 {
|
|
color:#fff;
|
|
font-weight: bold;
|
|
margin:0px;
|
|
padding:0px;
|
|
margin-top:16px;
|
|
}
|
|
p {
|
|
margin-top:0px;
|
|
}
|
|
}
|
|
|
|
div.dialog.ftue .ftue-inner div[layout-wizard-step="0"] {
|
|
|
|
}
|
|
#ftue-latency-needle {
|
|
position:absolute;
|
|
width: 6px;
|
|
height: 220px;
|
|
top:50%;
|
|
left:50%;
|
|
overflow:visible;
|
|
margin: -106px -3px 0px 0px;
|
|
padding: 0px 0px 0px 0px;
|
|
}
|
|
#ftue-latency-numerical {
|
|
position:absolute;
|
|
width: 150px;
|
|
height: 32px;
|
|
top: 228px;
|
|
left: 50%;
|
|
margin: -73px;
|
|
text-align:center;
|
|
font-size: 1.8em;
|
|
font-weight: bold;
|
|
}
|
|
#ftue-latency-label {
|
|
position:absolute;
|
|
width: 150px;
|
|
height: 32px;
|
|
top: 250px;
|
|
left: 50%;
|
|
margin: -73px;
|
|
text-align:center;
|
|
font-size: 0.9em;
|
|
}
|
|
|
|
|
|
div.dialog.ftue {
|
|
min-height: 500px;
|
|
max-height: 500px;
|
|
width: 800px;
|
|
|
|
.ftue-inner {
|
|
line-height: 1.3em;
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
p {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
.device_type ul {
|
|
list-style:disc;
|
|
}
|
|
|
|
.device_type li {
|
|
margin: 15px 12px 15px 36px;
|
|
}
|
|
|
|
select {
|
|
max-width: 220px;
|
|
}
|
|
|
|
.settings-profile {
|
|
margin-top: 12px;
|
|
}
|
|
|
|
p.intro {
|
|
margin-top:0px;
|
|
}
|
|
|
|
.easydropdown-wrapper {
|
|
width:100%;
|
|
max-width:220px;
|
|
}
|
|
.ftue-new {
|
|
clear:both;
|
|
position:relative;
|
|
width:100%;
|
|
height: 54px;
|
|
margin-top: 12px;
|
|
select {
|
|
font-size: 15px;
|
|
padding: 3px;
|
|
}
|
|
.latency {
|
|
position: absolute;
|
|
top: 120px;
|
|
font-size: 12px;
|
|
.report {
|
|
color:#fff;
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 0px;
|
|
width: 105px;
|
|
height: 50px;
|
|
background-color: #72a43b;
|
|
padding: 10px;
|
|
text-align: center;
|
|
.ms-label {
|
|
padding-top: 10px;
|
|
font-size: 34px;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
p {
|
|
margin-top: 4px;
|
|
}
|
|
}
|
|
.report.neutral, .report.start, .report.unknown {
|
|
background-color: #666;
|
|
}
|
|
.report.good {
|
|
background-color: #72a43b;
|
|
}
|
|
.report.acceptable {
|
|
background-color: #D6A800;
|
|
}
|
|
.report.bad {
|
|
background-color: #7B0C00;
|
|
}
|
|
.instructions {
|
|
color:#fff;
|
|
position: absolute;
|
|
top: 20px;
|
|
left: 125px;
|
|
width: 595px;
|
|
height: 50px;
|
|
padding: 10px;
|
|
background-color: #666;
|
|
}
|
|
.instructions p.start, .instructions p.neutral {
|
|
padding-top: 4px;
|
|
}
|
|
.instructions p.unknown {
|
|
margin-top:0px;
|
|
padding-top: 4px;
|
|
}
|
|
.instructions p.good {
|
|
padding-top: 4px;
|
|
}
|
|
.instructions p.acceptable {
|
|
margin-top: -6px;
|
|
}
|
|
.instructions p.bad {
|
|
margin-top: -6px;
|
|
line-height: 16px;
|
|
}
|
|
.instructions p a {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
.column {
|
|
position:absolute;
|
|
width: 220px;
|
|
height: 50px;
|
|
margin-right:8px;
|
|
}
|
|
.settings-2-device {
|
|
left:0px;
|
|
}
|
|
.settings-2-center {
|
|
left:50%;
|
|
margin-left: -110px;
|
|
.buttons {
|
|
margin-top: 14px;
|
|
a {
|
|
margin-right: 0px;
|
|
}
|
|
}
|
|
}
|
|
.settings-2-voice {
|
|
top: 0px;
|
|
right:0px;
|
|
}
|
|
.controls {
|
|
margin-top: 16px;
|
|
background-color: #222;
|
|
height: 48px;
|
|
width: 220px;
|
|
}
|
|
.ftue-vu-left {
|
|
position:relative;
|
|
top: 0px;
|
|
}
|
|
.ftue-vu-right {
|
|
position:relative;
|
|
top: 22px;
|
|
}
|
|
.ftue-fader {
|
|
position:relative;
|
|
top: 14px;
|
|
left: 8px;
|
|
}
|
|
.gain-label {
|
|
color: $ColorScreenPrimary;
|
|
position:absolute;
|
|
top: 76px;
|
|
right: 6px;
|
|
}
|
|
|
|
.subcolumn {
|
|
position:absolute;
|
|
top: 60px;
|
|
font-size: 12px !important;
|
|
width: 68px;
|
|
height: 48px;
|
|
}
|
|
.subcolumn select {
|
|
width: 68px;
|
|
}
|
|
.subcolumn.first {
|
|
left:0px;
|
|
}
|
|
.subcolumn.second {
|
|
left:50%;
|
|
margin-left:-34px;
|
|
}
|
|
.subcolumn.third {
|
|
right:0px;
|
|
}
|
|
}
|
|
|
|
.asio-settings {
|
|
clear:both;
|
|
position:relative;
|
|
width:100%;
|
|
height: 54px;
|
|
margin-top: 8px;
|
|
.column {
|
|
position:absolute;
|
|
width: 220px;
|
|
height: 50px;
|
|
margin-right:8px;
|
|
}
|
|
.settings-driver {
|
|
left:0px;
|
|
}
|
|
.settings-asio {
|
|
left:50%;
|
|
margin-left: -110px;
|
|
}
|
|
.settings-asio.mac {
|
|
left:0px;
|
|
margin-left: 0px;
|
|
}
|
|
.settings-asio-button {
|
|
right:0px;
|
|
height: 45px;
|
|
.bottom {
|
|
position:absolute;
|
|
bottom:0px;
|
|
}
|
|
}
|
|
.settings-asio-button.mac {
|
|
right:auto;
|
|
left:50%;
|
|
margin-left: -110px;
|
|
}
|
|
.subcolumn {
|
|
position:absolute;
|
|
width: 68px;
|
|
height: 48px;
|
|
}
|
|
.subcolumn select {
|
|
width: 68px;
|
|
}
|
|
.subcolumn.first {
|
|
left:0px;
|
|
}
|
|
.subcolumn.second {
|
|
left:50%;
|
|
margin-left:-34px;
|
|
}
|
|
.subcolumn.third {
|
|
right:0px;
|
|
}
|
|
|
|
}
|
|
.settings-controls {
|
|
|
|
clear:both;
|
|
position:relative;
|
|
width: 100%;
|
|
height: 100px;
|
|
|
|
div.section {
|
|
position:absolute;
|
|
width: 220px;
|
|
height: 100px;
|
|
|
|
select {
|
|
display:block;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.audio-input {
|
|
left:0px;
|
|
}
|
|
.voice-chat-input {
|
|
left:50%;
|
|
margin-left: -110px;
|
|
}
|
|
.audio-output {
|
|
right:0px;
|
|
}
|
|
.ftue-controls {
|
|
margin-top: 16px;
|
|
position:relative;
|
|
height: 48px;
|
|
width: 220px;
|
|
background-color: #222;
|
|
}
|
|
.ftue-vu-left {
|
|
position:relative;
|
|
top: 0px;
|
|
}
|
|
.ftue-vu-right {
|
|
position:relative;
|
|
top: 22px;
|
|
}
|
|
.ftue-fader {
|
|
position:relative;
|
|
top: 14px;
|
|
left: 8px;
|
|
}
|
|
.gain-label {
|
|
color: $ColorScreenPrimary;
|
|
position:absolute;
|
|
top: 14px;
|
|
right: 6px;
|
|
}
|
|
}
|
|
|
|
.buttonbar {
|
|
position:absolute;
|
|
bottom: 24px;
|
|
right: 0px;
|
|
a {
|
|
color: darken(#fff, 5);
|
|
text-decoration: none;
|
|
}
|
|
|
|
.spinner-small {
|
|
display:none;
|
|
margin-top: 3px;
|
|
position: relative;
|
|
top: 12px;
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
/*
|
|
div[layout-id="ftue2"] {
|
|
.formrow {
|
|
position:relative;
|
|
clear:both;
|
|
border:none;
|
|
margin: 12px;
|
|
padding:4px;
|
|
}
|
|
label {
|
|
text-align:left;
|
|
}
|
|
select {
|
|
display:block;
|
|
position:absolute;
|
|
left: 140px;
|
|
top: 0px;
|
|
}
|
|
}
|
|
|
|
div[layout-id="ftue3"] {
|
|
button {
|
|
margin: 0px 2em;
|
|
}
|
|
|
|
.progressContainer {
|
|
margin: 2em;
|
|
border: 1px solid #fff;
|
|
width: 400px;
|
|
height: 10px;
|
|
}
|
|
|
|
.progressFull {
|
|
height: 10px;
|
|
width: 2px;
|
|
background-color:#0f0;
|
|
}
|
|
}
|
|
*/
|
|
|
|
/* Start Jeff's ftue.css */
|
|
.landing-overlay {
|
|
z-index:100;
|
|
width:800px;
|
|
height:auto;
|
|
position:absolute;
|
|
left:50%;
|
|
top:150px;
|
|
margin-left:-400px;
|
|
background-color:#333;
|
|
border: 1px solid #ed3618;
|
|
}
|
|
|
|
.ftue-overlay {
|
|
z-index:100;
|
|
width:800px;
|
|
height:400px;
|
|
position:absolute;
|
|
left:50%;
|
|
top:20%;
|
|
margin-left:-400px;
|
|
background-color:#333;
|
|
border: 1px solid #ed3618;
|
|
}
|
|
|
|
.ftue-overlay.tall {
|
|
top:75px;
|
|
}
|
|
.ftue-overlay.tall .ftue-inner {
|
|
padding:5px;
|
|
}
|
|
|
|
|
|
.ftue-inner {
|
|
width:750px;
|
|
padding:25px;
|
|
font-size:15px;
|
|
color:#aaa;
|
|
}
|
|
|
|
.ftue-inner input[type=text], .ftue-inner input[type=password] {
|
|
padding:3px;
|
|
font-size:13px;
|
|
width:145px;
|
|
}
|
|
|
|
.ftue-inner input.gearprofile {
|
|
width:auto;
|
|
}
|
|
|
|
.ftue-inner select.audiodropdown {
|
|
width:223px;
|
|
color:#666;
|
|
}
|
|
|
|
.ftue-left {
|
|
float:left;
|
|
width:340px;
|
|
padding-right:30px;
|
|
border-right:solid 1px #484848;
|
|
}
|
|
|
|
.ftue-right {
|
|
width: 340px;
|
|
padding-left:30px;
|
|
float:left;
|
|
}
|
|
|
|
/**
|
|
|
|
.ftue-inner a {
|
|
color:#ccc;
|
|
}
|
|
|
|
.ftue-inner a:hover {
|
|
color:#fff;
|
|
}
|
|
*/
|
|
|
|
.ftue-instrumentlist {
|
|
width:340px;
|
|
height:178px;
|
|
background-color:#c5c5c5;
|
|
border:none;
|
|
-webkit-box-shadow: inset 2px 2px 3px 0px #888;
|
|
box-shadow: inset 2px 2px 3px 0px #888;
|
|
color:#000;
|
|
overflow:auto;
|
|
font-size:14px;
|
|
}
|
|
|
|
.ftue-instrumentlist select, .ftue-instrumentlist .easydropdown {
|
|
width:100%;
|
|
color:#000;
|
|
}
|
|
|
|
table.audiogeartable {
|
|
margin-left:-20px;
|
|
margin-right:-20px;
|
|
}
|
|
|
|
.ftue-gainmeter {
|
|
width:223px;
|
|
height:55px;
|
|
display:inline-block;
|
|
margin-right:8px;
|
|
position:relative;
|
|
background-color:#242323;
|
|
}
|
|
|
|
.gainmeter-vu-top {
|
|
position:absolute;
|
|
left:0px;
|
|
top:0px;
|
|
}
|
|
|
|
.gainmeter-vu-bottom {
|
|
position:absolute;
|
|
left:0px;
|
|
bottom:0px;
|
|
}
|
|
|
|
.gainmeter-gain {
|
|
position:absolute;
|
|
top:18px;
|
|
left:10px;
|
|
width:150px;
|
|
height:18px;
|
|
background-image:url(/assets/content/bkg_slider_gain_horiz.png);
|
|
background-repeat:repeat-x;
|
|
}
|
|
|
|
.gainmeter-gain-wrapper {
|
|
position:relative;
|
|
width:51px;
|
|
height:18px;
|
|
}
|
|
|
|
.gainmeter-gain-slider {
|
|
position:absolute;
|
|
top:0px;
|
|
left:60%;
|
|
width:10px;
|
|
height:18px;
|
|
}
|
|
|
|
.gainmeter-label {
|
|
font-size:16px;
|
|
color:#ED3618;
|
|
position:absolute;
|
|
top:18px;
|
|
right:16px;
|
|
}
|
|
/* End Jeff's CSS */
|
|
|
|
/* Added to deal with invitation codes */
|
|
.ftue-invited, {
|
|
width:750px;
|
|
padding:25px;
|
|
font-size:15px;
|
|
color:#aaa;
|
|
}
|
|
|
|
.ftue-video-link {
|
|
padding:4px;
|
|
cursor:pointer;
|
|
background-color:#333;
|
|
border: 1px solid #333;
|
|
}
|
|
.ftue-video-link.hover {
|
|
background-color:#444;
|
|
border: 1px solid #555;
|
|
}
|