1006 lines
20 KiB
CSS
1006 lines
20 KiB
CSS
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
html {
|
|
font-size: 10px;
|
|
font-family: menu;
|
|
}
|
|
|
|
body {
|
|
background: none;
|
|
}
|
|
|
|
/* Panel styles */
|
|
|
|
.panel {
|
|
/* hide the extra margin space that the panel resizer now wants to show */
|
|
overflow: hidden;
|
|
font: menu;
|
|
background-color: #fbfbfb;
|
|
height: 410px;
|
|
width: 330px;
|
|
}
|
|
|
|
/* Panel container flexbox */
|
|
.panel-content {
|
|
height: 410px;
|
|
width: 330px;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
/* Notifications displayed over tabs */
|
|
|
|
.panel .messages {
|
|
width: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
.panel .messages .alert {
|
|
margin: 0;
|
|
}
|
|
|
|
/* Sign-in request view */
|
|
|
|
.sign-in-request {
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
margin: 2em 0;
|
|
}
|
|
|
|
.sign-in-request > h1 {
|
|
font-size: 1.7em;
|
|
margin-bottom: .2em;
|
|
}
|
|
|
|
.sign-in-request > h2,
|
|
.sign-in-request > a {
|
|
font-size: 1.2em;
|
|
}
|
|
|
|
.sign-in-request > a {
|
|
cursor: pointer;
|
|
color: #0295df;
|
|
}
|
|
|
|
.sign-in-request > a:hover:active {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.sign-in-request-button {
|
|
font-size: 1rem;
|
|
margin: 1rem;
|
|
width: 80%;
|
|
padding: .5rem 1rem;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Tabs and tab selection buttons */
|
|
|
|
.tab-view-container {
|
|
width: 100%;
|
|
background-image: url("../shared/img/beta-ribbon.svg#beta-ribbon");
|
|
background-color: #fbfbfb;
|
|
background-size: 36px 36px;
|
|
background-repeat: no-repeat;
|
|
flex: 1;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.tab-view {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 4rem;
|
|
line-height: 3.7rem;
|
|
color: #4A4A4A;
|
|
list-style: none;
|
|
border-bottom: 2px solid #ccc;
|
|
}
|
|
|
|
.tab-view > li {
|
|
display: inline-block;
|
|
text-align: center;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.tab-view > .slide-bar {
|
|
position: absolute;
|
|
bottom: -2px;
|
|
left: 0;
|
|
height: .2em;
|
|
width: 50%;
|
|
background: #00A9DC;
|
|
border: none;
|
|
transition: margin .3s ease-in-out;
|
|
}
|
|
|
|
.tab-view li:nth-child(1).selected ~ .slide-bar {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.tab-view li:nth-child(2).selected ~ .slide-bar {
|
|
margin-left: 50%;
|
|
}
|
|
|
|
html[dir="rtl"] .tab-view li:nth-child(1).selected ~ .slide-bar {
|
|
margin-left: 50%;
|
|
}
|
|
|
|
html[dir="rtl"] .tab-view li:nth-child(2).selected ~ .slide-bar {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.tab-view > li > div {
|
|
font-size: 1.2rem;
|
|
pointer-events: none;
|
|
display: inline;
|
|
}
|
|
|
|
.tab-view > li:before {
|
|
content: "";
|
|
pointer-events: none;
|
|
display: inline-block;
|
|
-moz-margin-end: .5rem;
|
|
vertical-align: middle;
|
|
height: 1.4rem;
|
|
width: 1.4rem;
|
|
transition-property: background-image;
|
|
}
|
|
|
|
.tab-view > li.selected {
|
|
transition-delay: .3s;
|
|
}
|
|
|
|
.tab-view > li[data-tab-name="rooms"]:before {
|
|
background-image: url("../shared/img/icons-14x14.svg#hello");
|
|
}
|
|
|
|
.tab-view > li[data-tab-name="rooms"]:hover:before {
|
|
background-image: url("../shared/img/icons-14x14.svg#hello-hover");
|
|
}
|
|
|
|
.tab-view > li[data-tab-name="rooms"].selected:before {
|
|
background-image: url("../shared/img/icons-14x14.svg#hello-active");
|
|
}
|
|
|
|
.tab-view > li[data-tab-name="contacts"]:before {
|
|
background-image: url("../shared/img/icons-14x14.svg#contacts");
|
|
}
|
|
|
|
.tab-view > li[data-tab-name="contacts"]:hover:before {
|
|
background-image: url("../shared/img/icons-14x14.svg#contacts-hover");
|
|
}
|
|
|
|
.tab-view > li[data-tab-name="contacts"].selected:before {
|
|
background-image: url("../shared/img/icons-14x14.svg#contacts-active");
|
|
}
|
|
|
|
/* Styling for one tab */
|
|
.tab-view li:first-child:nth-last-child(2) {
|
|
width: 100%;
|
|
}
|
|
|
|
.tab-view li:first-child:nth-last-child(2) > span {
|
|
display: none;
|
|
}
|
|
|
|
.tab-view li:first-child:nth-last-child(2) > span {
|
|
display: none;
|
|
}
|
|
|
|
.tab-view li:first-child:nth-last-child(2):before {
|
|
background-image: url("../shared/img/icons-14x14.svg#hello-hover");
|
|
}
|
|
|
|
.tab-view li:first-child:nth-last-child(2) ~ li {
|
|
/* hide the tab-slider when there is only one tab shown */
|
|
display: none;
|
|
}
|
|
|
|
.tab-view li:first-child:nth-last-child(3),
|
|
.tab-view li:first-child:nth-last-child(3) ~ li {
|
|
width: 50%;
|
|
}
|
|
|
|
.tab {
|
|
display: none;
|
|
flex: 1;
|
|
overflow: auto;
|
|
}
|
|
|
|
.tab.selected {
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
}
|
|
|
|
/* Content area and input fields */
|
|
|
|
.content-area {
|
|
padding: .5rem 1rem;
|
|
}
|
|
|
|
.content-area header {
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Need to remove when these rules when the Beta tag is removed */
|
|
#share-link-header {
|
|
-moz-padding-start: 20px;
|
|
}
|
|
|
|
.fte-get-started-container + .generate-url > #share-link-header,
|
|
.tab-view + .tab .content-area > .generate-url > #share-link-header {
|
|
/* The header shouldn't be indented if the tabs are present. */
|
|
-moz-padding-start: 0;
|
|
}
|
|
|
|
.content-area label {
|
|
display: block;
|
|
width: 100%;
|
|
margin-top: 10px;
|
|
font-size: 1rem;
|
|
color: #777;
|
|
}
|
|
|
|
.content-area input {
|
|
display: block;
|
|
width: 100%;
|
|
outline: none;
|
|
border-radius: 4px;
|
|
margin: 10px 0;
|
|
border: 1px solid #c3c3c3;
|
|
height: 2.6rem;
|
|
padding: 0 6px;
|
|
font-size: 1.1rem;
|
|
color: #4a4a4a;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.content-area input::-moz-placeholder {
|
|
color: #999;
|
|
}
|
|
|
|
.content-area input:not(.pristine):invalid {
|
|
border: 0.1rem solid #d13f1a;
|
|
}
|
|
|
|
.content-area input:focus {
|
|
border: 0.1rem solid #5cccee;
|
|
}
|
|
|
|
/* Rooms and contacts shared CSS */
|
|
|
|
.contact-list-empty,
|
|
.contact-search-list-empty,
|
|
.no-conversations-message {
|
|
background-repeat: no-repeat;
|
|
background-position: top center;
|
|
text-align: center;
|
|
color: #4a4a4a;
|
|
font-weight: lighter;
|
|
}
|
|
|
|
|
|
|
|
.no-conversations-message {
|
|
/* example of vertical aligning a container in an element
|
|
see: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/ */
|
|
position: relative;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
padding-top: 11rem;
|
|
padding-bottom: 1rem;
|
|
background-image: url("../shared/img/empty_conversations.svg");
|
|
}
|
|
|
|
.panel-text-medium,
|
|
.panel-text-large {
|
|
margin: 3px 0;
|
|
}
|
|
|
|
.panel-text-medium {
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
.panel-text-large {
|
|
font-size: 2.2rem;
|
|
}
|
|
|
|
.room-list-loading {
|
|
position: relative;
|
|
text-align: center;
|
|
/* makes sure that buttons are anchored above footer */
|
|
flex: 1;
|
|
}
|
|
|
|
.room-list-loading > img {
|
|
width: 66px;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
}
|
|
|
|
|
|
/* Rooms */
|
|
.rooms {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
}
|
|
|
|
.rooms > h1 {
|
|
font-weight: bold;
|
|
color: #666;
|
|
padding: .5rem 0;
|
|
height: 3rem;
|
|
line-height: 3rem;
|
|
font-size: 1.1rem;
|
|
margin: 0 15px;
|
|
}
|
|
|
|
.new-room-view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-top: 1px solid #d8d8d8;
|
|
}
|
|
|
|
.new-room-view > .context-checkbox-checked {
|
|
background-color: #dbf7ff;
|
|
}
|
|
|
|
.new-room-view > .context {
|
|
border-top: 1px solid #ebebeb;
|
|
flex: 1;
|
|
border-radius: 3px 3px 0 0;
|
|
padding: 6px 15px 8px;
|
|
}
|
|
|
|
.new-room-view > .context > .context-enabled {
|
|
margin-bottom: .5rem;
|
|
display: block;
|
|
}
|
|
|
|
.new-room-view > .context > .context-enabled > input {
|
|
-moz-margin-start: 0;
|
|
}
|
|
|
|
.new-room-view > .context > .checkbox-wrapper {
|
|
height: 2rem;
|
|
margin-bottom: .5em;
|
|
line-height: 2rem;
|
|
}
|
|
|
|
.new-room-view > .context > .checkbox-wrapper > .checkbox {
|
|
border-color: #d8d8d8;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.new-room-view > .context > .checkbox-wrapper > .checkbox.checked {
|
|
background-image: url("../shared/img/check.svg#check-blue");
|
|
}
|
|
|
|
.new-room-view > .context > .checkbox-wrapper > label {
|
|
color: #333;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
.new-room-view > .btn {
|
|
flex: 1;
|
|
height: 3rem;
|
|
display: block;
|
|
font-size: 1.2rem;
|
|
margin: 7px 15px 0 15px;
|
|
padding: .5rem 1rem;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* Remove when bug 1142671 is backed out. */
|
|
.new-room-view > .context.hide + .new-room-button {
|
|
border-radius: 3px;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.room-list {
|
|
/* xxx not sure why flex needs the 3 value setting
|
|
but setting flex to just 1, the whole tab including the new room is scrollable.
|
|
seems to not like the 0% of the default setting - may be FF bug */
|
|
flex: 1 1 0;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
}
|
|
|
|
.room-list-empty {
|
|
border-bottom-width: 0;
|
|
flex: 1;
|
|
/* the child no-conversations-message is vertical aligned inside this container
|
|
see: http://zerosixthree.se/vertical-align-anything-with-just-3-lines-of-css/
|
|
stops blurring from decimal pixels being rendered - pixel rounding */
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.room-list > .room-entry {
|
|
padding: .2rem 15px;
|
|
/* Always show the default pointer, even over the text part of the entry. */
|
|
cursor: default;
|
|
}
|
|
|
|
.room-list > .room-entry > h2 {
|
|
display: inline-block;
|
|
font-size: 1.3rem;
|
|
line-height: 2.4rem;
|
|
color: #000;
|
|
/* See .room-entry-context-item for the margin/size reductions.
|
|
* An extra 40px to make space for the call button and chevron. */
|
|
width: calc(100% - 1rem - 56px);
|
|
|
|
}
|
|
|
|
.room-list > .room-entry.room-active > h2 {
|
|
font-weight: bold;
|
|
color: #000;
|
|
}
|
|
|
|
.room-list > .room-entry:hover {
|
|
background: #dbf7ff;
|
|
}
|
|
|
|
.room-list > .room-entry > p {
|
|
margin: 0;
|
|
padding: .2rem 0;
|
|
}
|
|
|
|
.room-list > .room-entry > p > a {
|
|
color: #777;
|
|
opacity: .5;
|
|
transition: opacity .1s ease-in-out 0s;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.room-list > .room-entry > p > a:hover {
|
|
opacity: 1;
|
|
text-decoration: underline;
|
|
}
|
|
|
|
@keyframes drop-and-fade-in {
|
|
0% {opacity: 0; top: -15px;}
|
|
25% {opacity: 0; top: -15px;}
|
|
100% {opacity: 1; top: 0;}
|
|
}
|
|
|
|
.room-list > .room-entry > h2 > button {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 24px;
|
|
height: 24px;
|
|
border: none;
|
|
margin: .1em; /* relative to _this_ line's font, not the document's */
|
|
-moz-margin-start: .5em;
|
|
background-color: transparent; /* override browser default for button tags */
|
|
top: -15px;
|
|
}
|
|
|
|
.room-list > .room-entry:hover > h2 > button {
|
|
animation: drop-and-fade-in 0.250s;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.room-list > .room-entry:hover > h2 > .copy-link {
|
|
background-image: url(../shared/img/icons-16x16.svg#copy);
|
|
}
|
|
|
|
.room-list > .room-entry:hover > h2 > .delete-link {
|
|
background-image: url(../shared/img/icons-16x16.svg#trash);
|
|
}
|
|
|
|
/* scale this up to 1.1x and then back to the original size */
|
|
@keyframes pulse {
|
|
0%, 100% { transform: scale(1.0); }
|
|
50% { transform: scale(1.1); }
|
|
}
|
|
|
|
.room-list > .room-entry > h2 > .copy-link.checked {
|
|
background: transparent url(../shared/img/icons-16x16.svg#checkmark);
|
|
animation: pulse .150s;
|
|
animation-timing-function: ease-in-out;
|
|
top: 0;
|
|
}
|
|
|
|
/* keep the various room-entry row pieces aligned with each other */
|
|
.room-list > .room-entry > h2 > button,
|
|
.room-list > .room-entry > h2 > span {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.room-list > .room-entry > h2:before {
|
|
content: "";
|
|
display: inline-block;
|
|
background-image: url("../shared/img/icons-14x14.svg#hello");
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
width: 13px;
|
|
height: 13px;
|
|
-moz-margin-end: 1rem;
|
|
margin-bottom: -3px;
|
|
}
|
|
|
|
.room-list > .room-entry.room-active > h2:before {
|
|
background-image: url("../shared/img/icons-14x14.svg#hello-active");
|
|
}
|
|
|
|
/* Room entry context button (call button + chevron) */
|
|
.room-entry-context-actions {
|
|
display: none;
|
|
border-radius: 30px;
|
|
background: #56b397;
|
|
vertical-align: top;
|
|
}
|
|
|
|
.room-entry:hover .room-entry-context-actions {
|
|
display: inline-block;
|
|
}
|
|
|
|
.room-entry:hover .room-entry-context-actions:hover {
|
|
background: #50e3c2;
|
|
}
|
|
|
|
/* Room entry call button */
|
|
.room-entry-call-btn {
|
|
border-top-left-radius: 30px;
|
|
border-bottom-left-radius: 30px;
|
|
background-color: transparent;
|
|
background-image: url("../shared/img/icons-14x14.svg#video-white");
|
|
background-position: right center;
|
|
}
|
|
|
|
html[dir="rtl"] .room-entry-call-btn {
|
|
background-position: left center;
|
|
}
|
|
|
|
/* Room entry context menu */
|
|
.room-entry-context-menu-chevron {
|
|
display: inline-block;
|
|
border-top-right-radius: 30px;
|
|
border-bottom-right-radius: 30px;
|
|
background-image: url("../shared/img/icons-10x10.svg#dropdown-white");
|
|
background-position: center;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Common styles for chevron and call button. */
|
|
.room-entry-context-menu-chevron,
|
|
.room-entry-call-btn {
|
|
width: 30px;
|
|
height: 24px;
|
|
background-size: 12px;
|
|
background-repeat: no-repeat;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
html[dir="rtl"] .room-entry-context-actions > .dropdown-menu {
|
|
right: auto;
|
|
left: 21px;
|
|
}
|
|
|
|
.room-entry-context-actions > .dropdown-menu {
|
|
right: 21px;
|
|
bottom: auto;
|
|
left: auto;
|
|
}
|
|
|
|
/* Keep ".room-list > .room-entry > h2" in sync with these. */
|
|
.room-entry-context-item {
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
-moz-margin-start: 1rem;
|
|
height: 16px;
|
|
}
|
|
|
|
.room-entry:hover .room-entry-context-item {
|
|
display: none;
|
|
}
|
|
|
|
.room-entry-context-item > a > img {
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
|
|
.button-close {
|
|
background-color: transparent;
|
|
background-image: url(../shared/img/icons-10x10.svg#close);
|
|
background-repeat: no-repeat;
|
|
background-size: 8px 8px;
|
|
border: none;
|
|
padding: 0;
|
|
height: 8px;
|
|
width: 8px;
|
|
}
|
|
|
|
.button-close:hover,
|
|
.button-close:hover:active {
|
|
background-color: transparent;
|
|
border: none;
|
|
}
|
|
|
|
/* Spinner */
|
|
|
|
@keyframes spinnerRotate {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
.spinner {
|
|
width: 16px;
|
|
height: 16px;
|
|
background-repeat: no-repeat;
|
|
background-size: 16px 16px;
|
|
}
|
|
|
|
.spinner.busy {
|
|
background-image: url(../shared/img/spinner.png);
|
|
animation-name: spinnerRotate;
|
|
animation-duration: 1s;
|
|
animation-timing-function: linear;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
@media (min-resolution: 2dppx) {
|
|
.spinner.busy {
|
|
background-image: url(../shared/img/spinner@2x.png);
|
|
}
|
|
}
|
|
|
|
/* Share tab */
|
|
|
|
.generate-url-stack {
|
|
margin: 14px 0;
|
|
position: relative;
|
|
}
|
|
|
|
.generate-url-input {
|
|
outline: 0;
|
|
border: 1px solid #ccc; /* Overriding background style for a text input (see
|
|
below) resets its borders to a weird beveled style;
|
|
defining a default 1px border solves the issue. */
|
|
border-radius: 2px;
|
|
height: 26px;
|
|
padding: 0 10px;
|
|
font-size: 1em;
|
|
}
|
|
|
|
.generate-url-spinner {
|
|
position: absolute;
|
|
pointer-events: none;
|
|
z-index: 1;
|
|
top: 4px;
|
|
left: auto;
|
|
right: 4px;
|
|
}
|
|
|
|
html[dir="rtl"] .generate-url-spinner {
|
|
left: 4px;
|
|
right: auto;
|
|
}
|
|
|
|
.generate-url .button {
|
|
background-color: #00a9dc;
|
|
border-color: #0096dd;
|
|
color: #fff;
|
|
}
|
|
|
|
.generate-url .button:hover {
|
|
background-color: #008acb;
|
|
border-color: #008acb;
|
|
}
|
|
|
|
#powered-by,
|
|
.terms-service {
|
|
color: #4a4a4a;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
#powered-by {
|
|
border-top: 1px solid #ccc;
|
|
padding-top: 1.5rem;
|
|
text-align: center;
|
|
margin-top: 0;
|
|
}
|
|
|
|
#powered-by-logo {
|
|
display: inline-block;
|
|
margin-left: 10px;
|
|
margin-right: 10px;
|
|
vertical-align: middle;
|
|
background-image: url("../shared/img/telefonica.png");
|
|
background-size: 72px 20px;
|
|
width: 72px;
|
|
height: 20px;
|
|
}
|
|
|
|
#powered-by-logo.en-GB,
|
|
#powered-by-logo.de {
|
|
background-image: url("../shared/img/02.png");
|
|
background-size: 21px 20px;
|
|
width: 21px;
|
|
height: 20px;
|
|
}
|
|
|
|
#powered-by-logo.pt-BR {
|
|
background-image: url("../shared/img/vivo.png");
|
|
background-size: 53px 26px;
|
|
width: 53px;
|
|
height: 26px;
|
|
}
|
|
|
|
#powered-by-logo[class^="es-"] {
|
|
background-image: url("../shared/img/movistar.png");
|
|
background-size: 92px 20px;
|
|
width: 92px;
|
|
height: 20px;
|
|
}
|
|
|
|
@media (min-resolution: 2dppx) {
|
|
#powered-by-logo {
|
|
background-image: url("../shared/img/telefonica@2x.png");
|
|
}
|
|
|
|
#powered-by-logo.en-GB,
|
|
#powered-by-logo.de {
|
|
background-image: url("../shared/img/02@2x.png");
|
|
}
|
|
|
|
#powered-by-logo.pt-BR {
|
|
background-image: url("../shared/img/vivo@2x.png");
|
|
}
|
|
|
|
#powered-by-logo[class^="es-"] {
|
|
background-image: url("../shared/img/movistar@2x.png");
|
|
}
|
|
}
|
|
|
|
.terms-service {
|
|
padding-left: 5rem;
|
|
padding-right: 5rem;
|
|
padding-bottom: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.terms-service > a {
|
|
color: #00a9dc;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* DnD menu */
|
|
|
|
.dnd-status {
|
|
border: 1px solid transparent;
|
|
padding: 2px 4px;
|
|
margin: 0;
|
|
/* Undo the start border + padding so that unhovered dnd-status is aligned
|
|
as if there was no additional spacing. */
|
|
-moz-margin-start: calc(-1px + -4px);
|
|
cursor: pointer;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.dnd-status:hover {
|
|
border-color: #ddd;
|
|
background-color: #f1f1f1;
|
|
}
|
|
|
|
.status-available:before,
|
|
.status-unavailable:before {
|
|
content: "";
|
|
display: inline-block;
|
|
width: 16px;
|
|
height: 16px;
|
|
vertical-align: bottom;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
-moz-margin-end: .2rem;
|
|
margin-bottom: -3px;
|
|
}
|
|
|
|
.dropdown-menu-item.status-available:before,
|
|
.dropdown-menu-item.status-unavailable:before {
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
html[dir="rtl"] .dropdown-menu-item.status-available:before,
|
|
html[dir="rtl"] .dropdown-menu-item.status-unavailable:before {
|
|
margin-right: -3px;
|
|
}
|
|
|
|
.status-available:before {
|
|
background-image: url("../shared/img/icons-16x16.svg#status-available");
|
|
}
|
|
|
|
.status-unavailable:before {
|
|
background-image: url("../shared/img/icons-16x16.svg#status-unavailable");
|
|
}
|
|
|
|
/* Status badges -- Available/Unavailable */
|
|
.status {
|
|
display: inline-block;
|
|
width: 8px;
|
|
height: 8px;
|
|
margin: 0 5px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
/* Sign in/up link */
|
|
|
|
.signin-link {
|
|
flex: 2 1 auto;
|
|
margin: 0;
|
|
text-align: right;
|
|
}
|
|
|
|
.signin-link > a {
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
color: #00A9DC;
|
|
}
|
|
|
|
/* Settings (gear) menu */
|
|
|
|
.button-settings {
|
|
width: 10px;
|
|
height: 10px;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: none;
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
background: transparent url("../shared/img/icons-10x10.svg#settings-cog");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
-moz-margin-start: .5em;
|
|
}
|
|
|
|
.user-details .dropdown-menu {
|
|
bottom: 1.3rem; /* Just above the text. */
|
|
left: -5px; /* Compensate for button padding. */
|
|
}
|
|
|
|
html[dir="rtl"] .user-details .dropdown-menu {
|
|
right: -5px;
|
|
}
|
|
|
|
.settings-menu .dropdown-menu {
|
|
/* The panel can't have dropdown menu overflowing its iframe boudaries;
|
|
let's anchor it from the bottom-right, while resetting the top & left values
|
|
set by .dropdown-menu */
|
|
top: auto;
|
|
left: auto;
|
|
bottom: 1.1em;
|
|
right: 14px;
|
|
}
|
|
|
|
html[dir="rtl"] .settings-menu .dropdown-menu {
|
|
/* This is specified separately rather than using -moz-margin-start etc, as
|
|
we need to override .dropdown-menu's values which can't use the gecko
|
|
specific extensions. */
|
|
left: 14px;
|
|
right: auto;
|
|
}
|
|
|
|
.settings-menu .icon {
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
width: 12px;
|
|
height: 12px;
|
|
-moz-margin-end: 1em;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.settings-menu .icon-tour {
|
|
background-image: url("../shared/img/icons-16x16.svg#tour");
|
|
}
|
|
|
|
.settings-menu .icon-account {
|
|
background-image: url(../shared/img/svg/glyph-account-16x16.svg);
|
|
}
|
|
|
|
.settings-menu .icon-signin {
|
|
background-image: url(../shared/img/svg/glyph-signin-16x16.svg);
|
|
}
|
|
|
|
.settings-menu .icon-signout {
|
|
background-image: url(../shared/img/svg/glyph-signout-16x16.svg);
|
|
}
|
|
|
|
.settings-menu .icon-help {
|
|
background-image: url(../shared/img/svg/glyph-help-16x16.svg);
|
|
}
|
|
|
|
/* Footer */
|
|
|
|
.footer {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: nowrap;
|
|
justify-content: space-between;
|
|
align-content: stretch;
|
|
align-items: center;
|
|
font-size: 1rem;
|
|
color: #666666;
|
|
padding: 10px 15px 6px 15px;
|
|
width: 100%;
|
|
height: 42px;
|
|
}
|
|
|
|
.footer .signin-details {
|
|
align-items: center;
|
|
display: flex;
|
|
}
|
|
|
|
.footer .user-identity {
|
|
color: #000;
|
|
font-weight: bold;
|
|
margin: 0;
|
|
}
|
|
|
|
/* First time use */
|
|
|
|
.fte-get-started-content {
|
|
/* Manual vertical centering */
|
|
flex: 1;
|
|
padding: 7.5rem 0 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.fte-title {
|
|
margin: 0 44px;
|
|
}
|
|
|
|
.fte-title > img {
|
|
width: 100%;
|
|
}
|
|
|
|
.fte-subheader {
|
|
text-align: center;
|
|
font-size: 1.8rem;
|
|
margin-bottom: 2rem;
|
|
color: #4a4a4a;
|
|
}
|
|
|
|
.fte-get-started-content + .powered-by-wrapper {
|
|
width: 100%;
|
|
}
|
|
|
|
.fte-get-started-container {
|
|
height: 410px;
|
|
width: 330px;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
background: #fbfbfb;
|
|
}
|
|
|
|
.fte-get-started-button {
|
|
border: none;
|
|
color: #fff;
|
|
background-color: #00a9dc;
|
|
line-height: 43px;
|
|
margin: 0 15px;
|
|
padding: 0;
|
|
border-radius: 4px;
|
|
font-size: 1.4rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.fte-get-started-button:hover,
|
|
.fte-get-started-button:focus,
|
|
.fte-get-started-button:active {
|
|
background-color: #5cccee;
|
|
color: #fff;
|
|
}
|