753 lines
13 KiB
SCSS
753 lines
13 KiB
SCSS
/* Welcome to Compass.
|
|
* In this file you should write your main styles. (or centralize your imports)
|
|
* Import this file using the following HTML or equivalent:
|
|
* <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
|
|
|
|
|
|
@import "compass/reset";
|
|
@import "compass/css3/images";
|
|
@import "compass/css3/background-size";
|
|
@import "compass/css3/opacity";
|
|
|
|
@import "client/common.css.scss";
|
|
|
|
html.wf-inactive {
|
|
body {
|
|
font-family: Arial, Helvetica, sans-serif;
|
|
}
|
|
}
|
|
|
|
body {
|
|
color: $ColorText;
|
|
background-color: $ColorUIBackground;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
font-size: 14px;
|
|
font-family: 'Raleway', Arial, Helvetica, sans-serif;
|
|
font-weight: 300;
|
|
|
|
input,textarea {
|
|
font-family: 'Raleway', Arial, Helvetica, sans-serif;
|
|
font-weight: 300;
|
|
}
|
|
}
|
|
|
|
b { font-weight: bold; }
|
|
|
|
a {
|
|
cursor:pointer;
|
|
color: $ColorLink;
|
|
text-decoration: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
[layout-link] {
|
|
cursor:pointer;
|
|
}
|
|
|
|
a:hover {
|
|
text-decoration: underline;
|
|
color: $ColorLinkHover;
|
|
}
|
|
|
|
a.arrow-up {
|
|
float:right;
|
|
margin-right:5px;
|
|
display:block;
|
|
margin-top:6px;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 7px solid transparent;
|
|
border-right: 7px solid transparent;
|
|
border-bottom: 7px solid #333;
|
|
}
|
|
|
|
a.arrow-down {
|
|
float:right;
|
|
margin-right:5px;
|
|
display:block;
|
|
margin-top:6px;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 7px solid transparent;
|
|
border-right: 7px solid transparent;
|
|
border-top: 7px solid #333;
|
|
}
|
|
|
|
select {
|
|
|
|
border: 0 !important; /*Removes border*/
|
|
-webkit-appearance: none; /*Removes default chrome and safari style*/
|
|
-moz-appearance: none; /* Removes Default Firefox style*/
|
|
appearance: none;
|
|
background: #C5C5C5 url('/assets/down_arrow_black_pad.png') no-repeat; /*Adds background-image*/
|
|
background-position: right center; /*Position of the background-image*/
|
|
text-indent: 0.01px; /* Removes default arrow from firefox*/
|
|
text-overflow: ""; /*Removes default arrow from firefox*/
|
|
cursor: pointer;
|
|
padding:3px 20px 3px 3px;
|
|
&::-ms-expand {
|
|
display: none;
|
|
}
|
|
font-size:15px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
form .body {
|
|
/* TODO - size with layout */
|
|
width: 100%;
|
|
height: 40%;
|
|
max-height: 40%;
|
|
overflow:auto;
|
|
}
|
|
|
|
.formrow {
|
|
margin: 1em;
|
|
padding: 1em;
|
|
border: 1px solid #555;
|
|
float:left;
|
|
}
|
|
|
|
label {
|
|
display:block;
|
|
}
|
|
|
|
.button1 {
|
|
background: $color1;
|
|
color: #fff !important;
|
|
font-weight:bold;
|
|
font-size: 120%;
|
|
margin: 2px;
|
|
padding:8px;
|
|
}
|
|
|
|
input[type="button"] {
|
|
margin:0px 8px 0px 8px;
|
|
background-color:#666;
|
|
border: solid 1px #868686;
|
|
outline:solid 2px #666;
|
|
padding:3px 10px;
|
|
font-size:12px;
|
|
font-weight:300;
|
|
cursor:pointer;
|
|
color:#ccc;
|
|
}
|
|
|
|
.clearall {
|
|
clear:both;
|
|
}
|
|
|
|
.left {
|
|
float:left;
|
|
}
|
|
|
|
.right {
|
|
float:right;
|
|
}
|
|
|
|
.hidden {
|
|
display:none;
|
|
}
|
|
|
|
.small {
|
|
font-size:11px;
|
|
}
|
|
|
|
.center {
|
|
text-align:center;
|
|
}
|
|
|
|
.block {
|
|
display:block;
|
|
}
|
|
|
|
.orange {
|
|
color: $ColorScreenPrimary !important;
|
|
}
|
|
|
|
.curtain {
|
|
|
|
&.minimal {
|
|
display:none
|
|
}
|
|
|
|
background-color: $ColorScreenBackground;
|
|
position:absolute;
|
|
top:0px;
|
|
left:0px;
|
|
}
|
|
.curtain .splash {
|
|
position:absolute;
|
|
left:50%;
|
|
top:50%;
|
|
margin-top:-100px;
|
|
margin-left:-125px;
|
|
}
|
|
.curtain .splash img {}
|
|
.curtain .splash p {
|
|
width: 100%;
|
|
text-align:center;
|
|
}
|
|
|
|
.dialog-overlay {
|
|
background-color: #000;
|
|
}
|
|
|
|
.avatar {
|
|
display: block;
|
|
float:left;
|
|
}
|
|
|
|
.avatar.medium {
|
|
width: 48px;
|
|
height: 48px;
|
|
margin-right: 12px;
|
|
}
|
|
|
|
.avatar.small {
|
|
width: 32px;
|
|
height: 32px;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.avatar-tiny {
|
|
width:20px;
|
|
heigh:20px;
|
|
-webkit-border-radius:18px;
|
|
-moz-border-radius:18px;
|
|
border-radius:18px;
|
|
}
|
|
|
|
/* Invitations */
|
|
#invitation-controls {
|
|
clear:both;
|
|
}
|
|
|
|
/* TODO - generalize */
|
|
.instrument {
|
|
margin: 1px;
|
|
background: $ColorElementPrimary;
|
|
color:$ColorText;
|
|
padding: 3px;
|
|
width:auto;
|
|
float:left;
|
|
}
|
|
|
|
.instrument span {
|
|
font-size:85%;
|
|
font-weight:bold;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.profiency {
|
|
float:left;
|
|
}
|
|
|
|
/* Autocomplete */
|
|
.autocomplete {
|
|
background:$ColorScreenBackground;
|
|
color:$ColorText;
|
|
cursor:default;
|
|
text-align:left;
|
|
max-height:350px;
|
|
overflow:auto;
|
|
margin:-1px 6px 6px -6px;
|
|
_height:350px; /* IE6 specific: */
|
|
_margin:0;
|
|
_overflow-x:hidden;
|
|
}
|
|
|
|
.autocomplete-suggestions { border: 1px solid #999; background: #666; overflow: auto; }
|
|
.autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
|
|
.autocomplete-selected { background: #999; }
|
|
.autocomplete-suggestions strong { font-weight: normal; color: #a2cffd; }
|
|
|
|
.autocomplete .selected {
|
|
background:$ColorScreenBackground;
|
|
cursor:pointer;
|
|
}
|
|
|
|
.autocomplete div {
|
|
padding:5px 5px 5px 5px;
|
|
white-space:nowrap;
|
|
overflow:hidden;
|
|
border-bottom:1px solid #999;
|
|
border-left:1px solid #999;
|
|
border-right:1px solid #999;
|
|
text-align:center;
|
|
}
|
|
|
|
.autocomplete strong {
|
|
font-weight:normal;
|
|
}
|
|
|
|
.multiselect-dropdown {
|
|
position:relative;
|
|
z-index:99;
|
|
width: 175px;
|
|
-webkit-border-radius: 6px;
|
|
border-radius: 6px;
|
|
background-color:#C5C5C5;
|
|
border: none;
|
|
color:#333;
|
|
font-weight:400;
|
|
padding:0px 0px 0px 8px;
|
|
height:20px;
|
|
line-height:20px;
|
|
overflow:hidden;
|
|
-webkit-box-shadow: inset 2px 2px 3px 0px #888;
|
|
box-shadow: inset 2px 2px 3px 0px #888;
|
|
}
|
|
|
|
.multiselect-dropdown a {
|
|
color:#333;
|
|
text-decoration:none;
|
|
}
|
|
|
|
.list-items {
|
|
float:left;
|
|
width:175px;
|
|
height:127px;
|
|
overflow:auto;
|
|
}
|
|
|
|
.list-item-text {
|
|
font-size:11px;
|
|
float:left;
|
|
width:135px;
|
|
}
|
|
|
|
.search-box {
|
|
float:left;
|
|
margin-left: 10px;
|
|
-webkit-border-radius: 6px;
|
|
border-radius: 6px;
|
|
background-color:$ColorTextBoxBackground;
|
|
border: none;
|
|
color:#333;
|
|
font-weight:400;
|
|
padding:0px 0px 0px 0px;
|
|
height:25px;
|
|
line-height:18px;
|
|
overflow:hidden;
|
|
-webkit-box-shadow: inset 2px 2px 3px 0px #888;
|
|
box-shadow: inset 2px 2px 3px 0px #888;
|
|
}
|
|
|
|
input[type="text"], input[type="password"], input[type="url"], input[type="number"] {
|
|
background-color:$ColorTextBoxBackground;
|
|
border:none;
|
|
padding:3px;
|
|
font-size:15px;
|
|
|
|
&:disabled {
|
|
background-color: $ColorTextBoxDisabledBackground;
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
font-size:15px;
|
|
padding:3px;
|
|
}
|
|
|
|
|
|
.mr10 {
|
|
margin-right:10px;
|
|
}
|
|
|
|
.mr20 {
|
|
margin-right:20px;
|
|
}
|
|
|
|
.mr30 {
|
|
margin-right:30px;
|
|
}
|
|
|
|
.ml10 {
|
|
margin-left:10px;
|
|
}
|
|
|
|
.ml20 {
|
|
margin-left:20px;
|
|
}
|
|
|
|
.ml30 {
|
|
margin-left:30px;
|
|
}
|
|
|
|
.ml35 {
|
|
margin-left:35px;
|
|
}
|
|
|
|
.op70 {
|
|
opacity: .7;
|
|
-ms-filter: "alpha(opacity=70)";
|
|
}
|
|
|
|
.op50 {
|
|
opacity: .5;
|
|
-ms-filter: "alpha(opacity=50)";
|
|
}
|
|
|
|
.op30 {
|
|
opacity: .3;
|
|
-ms-filter: "alpha(opacity=30)";
|
|
}
|
|
|
|
.op10 {
|
|
opacity: .1;
|
|
-ms-filter: "alpha(opacity=10)";
|
|
}
|
|
|
|
.nowrap {
|
|
display:inline-block;
|
|
white-space:nowrap;
|
|
}
|
|
|
|
.error {
|
|
background-color:#300;
|
|
padding:5px;
|
|
border: solid 1px #900;
|
|
|
|
.error-text {
|
|
display:block;
|
|
font-size:11px;
|
|
color:#F00;
|
|
margin:10px 0 0;
|
|
}
|
|
|
|
&.transparent {
|
|
background-color:transparent;
|
|
padding:0;
|
|
border-width:0px;
|
|
|
|
.error-text {
|
|
margin:5px 0 0;
|
|
font-size:14px;
|
|
font-weight:bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.error input {
|
|
background-color:#fadfd1 !important;
|
|
margin-bottom:5px;
|
|
}
|
|
|
|
.error-text {
|
|
display:none;
|
|
}
|
|
|
|
.grey {
|
|
color:#999;
|
|
}
|
|
|
|
.darkgrey {
|
|
color:#333;
|
|
}
|
|
|
|
.w10 {
|
|
width:10%;
|
|
}
|
|
|
|
.w20 {
|
|
width:20%;
|
|
}
|
|
|
|
.w25 {
|
|
width:25%;
|
|
}
|
|
|
|
.w27 {
|
|
width:27%;
|
|
}
|
|
|
|
.w30 {
|
|
width:30%;
|
|
}
|
|
|
|
.w38 {
|
|
width:38%;
|
|
}
|
|
|
|
.w40 {
|
|
width:40%;
|
|
}
|
|
|
|
.w45 {
|
|
width:45%;
|
|
}
|
|
|
|
.w50 {
|
|
width:50%;
|
|
}
|
|
|
|
.w60 {
|
|
width:60%;
|
|
}
|
|
|
|
.w70 {
|
|
width:70%;
|
|
}
|
|
|
|
.w80 {
|
|
width:80%;
|
|
}
|
|
|
|
.w90 {
|
|
width:90%;
|
|
}
|
|
|
|
.w100 {
|
|
width:100%;
|
|
}
|
|
|
|
.f20 {
|
|
font-size: 20px !important;
|
|
}
|
|
/* TODO - we need a separate stylesheet(s) for signin/signup screens */
|
|
/* Following is a style adjustment for the sign-in table spacing */
|
|
#sign-in td { padding: 4px; }
|
|
|
|
.spinner-large {
|
|
background-image: url('/assets/shared/spinner.gif');
|
|
background-repeat:no-repeat;
|
|
background-position:center;
|
|
width:128px;
|
|
height:128px;
|
|
}
|
|
|
|
.spinner-small {
|
|
background-image: url('/assets/shared/spinner.gif');
|
|
background-repeat:no-repeat;
|
|
background-position:center;
|
|
width:32px;
|
|
height:32px;
|
|
background-size: 50% 50%;
|
|
}
|
|
|
|
.infinite-scroll-loader {
|
|
position:absolute;
|
|
overflow:hidden;
|
|
height:14px;
|
|
text-align: center;
|
|
margin:auto;
|
|
width:100%;
|
|
@include border_box_sizing;
|
|
}
|
|
|
|
.infinite-scroll-loader-2 {
|
|
height:14px;
|
|
text-align: center;
|
|
margin:auto;
|
|
@include border_box_sizing;
|
|
margin-top:10px;
|
|
}
|
|
|
|
// disable text selection for the in-session panel, ftue, and arbitrary elements marked with .no-selection-range
|
|
div[layout-id=session], div[layout-id=ftue], .no-selection-range {
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-khtml-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
}
|
|
|
|
|
|
.icheckbuttons {
|
|
|
|
margin-top:5px;
|
|
|
|
div.iradio_minimal {
|
|
float:left;
|
|
}
|
|
|
|
label {
|
|
float:left;
|
|
margin:0 10px 0 3px;
|
|
}
|
|
}
|
|
|
|
hr {
|
|
background-color: #999999;
|
|
border: 0 none;
|
|
height: 1px;
|
|
margin: 10px 0;
|
|
}
|
|
|
|
::-webkit-input-placeholder {
|
|
font-family: 'Raleway', Arial, Helvetica, sans-serif;
|
|
font-size:14px;
|
|
}
|
|
|
|
:-moz-placeholder { /* Firefox 18- */
|
|
font-family: 'Raleway', Arial, Helvetica, sans-serif;
|
|
font-size:14px;
|
|
}
|
|
|
|
::-moz-placeholder { /* Firefox 19+ */
|
|
font-family: 'Raleway', Arial, Helvetica, sans-serif;
|
|
font-size:14px;
|
|
}
|
|
|
|
:-ms-input-placeholder {
|
|
font-family: 'Raleway', Arial, Helvetica, sans-serif;
|
|
font-size:14px;
|
|
}
|
|
|
|
// infinitescroll required element
|
|
.btn-next-pager {
|
|
display:none;
|
|
}
|
|
|
|
.end-of-list {
|
|
display:none;
|
|
overflow: visibility;
|
|
margin:40px auto 10px;
|
|
width:100%;
|
|
height:20px;
|
|
text-align:center;
|
|
}
|
|
|
|
body.jam .icheckbox_minimal {
|
|
display:inline-block;
|
|
position:relative;
|
|
}
|
|
|
|
.follow-links {
|
|
|
|
line-height:28px;
|
|
|
|
.facebook-follow-btn {
|
|
margin-right:5px;
|
|
display:inline-block;
|
|
vertical-align:middle;
|
|
height:50px;
|
|
}
|
|
|
|
.twitter-follow-btn {
|
|
margin-right:5px;
|
|
display:inline-block;
|
|
}
|
|
|
|
.g-follow-btn {
|
|
display:inline-block;
|
|
}
|
|
|
|
}
|
|
|
|
// add .video-container to your own css and position & set widths (NOT HERE)
|
|
.video-container {
|
|
position: relative;
|
|
}
|
|
|
|
.video-container iframe,
|
|
.video-container object,
|
|
.video-container embed {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.video-thumbnail {
|
|
position:relative;
|
|
background-size:contain !important;
|
|
img.play {
|
|
width:30%;
|
|
display:block;
|
|
margin:-46.75% auto 0;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
$ReactSelectVerticalPadding: 3px;
|
|
|
|
.Select-value {
|
|
padding-top: $ReactSelectVerticalPadding !important;
|
|
padding-bottom: $ReactSelectVerticalPadding !important;
|
|
}
|
|
|
|
.Select-arrow {
|
|
top: $ReactSelectVerticalPadding + 5 + 1 !important;
|
|
}
|
|
// overrides for react-select
|
|
.Select-control {
|
|
background-color: $ColorTextBoxBackground !important;
|
|
border: 0px solid #868686 !important;
|
|
border-color: lighten(#868686, 5%) #868686 darken(#868686, 10%) !important;
|
|
color: #ccc !important;
|
|
border-radius:0 !important;
|
|
padding-top: $ReactSelectVerticalPadding !important;
|
|
padding-bottom: $ReactSelectVerticalPadding !important;
|
|
font-size:15px !important;
|
|
|
|
&:hover {
|
|
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
|
|
}
|
|
}
|
|
|
|
.Select-placeholder {
|
|
padding-top: $ReactSelectVerticalPadding + 2 !important;
|
|
padding-bottom: $ReactSelectVerticalPadding + 2 !important;
|
|
}
|
|
|
|
.Select-menu-outer {
|
|
// Unfortunately, having both border-radius and allows scrolling using overflow defined on the same
|
|
// element forces the browser to repaint on scroll. However, if these definitions are split into an
|
|
// outer and an inner element, the browser is able to optimize the scrolling behavior and does not
|
|
// have to repaint on scroll.
|
|
|
|
border-radius: 0 !important;
|
|
//.border-bottom-radius( @select-input-border-radius );
|
|
background-color: $ColorTextBoxBackground !important;
|
|
border: 1px solid #868686 !important;
|
|
border-top-color: mix($ColorTextBoxBackground, #868686, 50%);
|
|
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
|
|
box-sizing: border-box;
|
|
margin-top: -1px;
|
|
}
|
|
|
|
.Select-search-prompt {
|
|
padding:3px 0 !important;
|
|
}
|
|
|
|
|
|
.session-track-list-enter {
|
|
opacity: 0.01;
|
|
transition: opacity .5s ease-in;
|
|
|
|
&.session-track-list-enter-active {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.session-track-list-leave {
|
|
opacity:1;
|
|
transition: opacity .5s ease-in;
|
|
|
|
&.session-track-list-leave-active {
|
|
opacity: 0.01;
|
|
}
|
|
}
|
|
|
|
#ui-datepicker-div {
|
|
z-index:10 !important;
|
|
}
|
|
|
|
button.stripe-connect {
|
|
background-color: transparent;
|
|
padding: 0;
|
|
border: 0;
|
|
margin:0 auto;
|
|
display:block;
|
|
}
|
|
|
|
.site-nav {
|
|
margin-bottom:10px;
|
|
} |