2025 lines
37 KiB
SCSS
2025 lines
37 KiB
SCSS
|
|
// These are overriding the variables at https://getbootstrap.com/docs/3.4/customize/
|
|
|
|
$text-dark: #333;
|
|
|
|
$brand-primary: #2196F3 !default; // #62bdfc
|
|
$brand-success: #27CE65 !default;
|
|
$brand-info: #3995b1 !default;
|
|
$brand-warning: #f0ad4e !default;
|
|
$brand-danger: #ff4c4c !default;
|
|
|
|
$body-bg: #E5E5E5;
|
|
$font-family-sans-serif: Roboto, Helvetica, Arial, sans-serif;
|
|
$font-family-heading: Roboto-Light, Helvetica, Arial, sans-serif;
|
|
|
|
$navbar-default-link-color: #428BCA !default;
|
|
$navbar-default-link-hover-color: #62bdfc !default;
|
|
$navbar-default-link-active-color: #62bdfc !default;
|
|
$navbar-default-brand-color: #777 !default;
|
|
|
|
$btn-default-bg: transparent !default;
|
|
$btn-default-color: #444 !default;
|
|
$btn-default-border: #aaa !default;
|
|
|
|
//$btn-primary-bg: $btn-default-bg;
|
|
//$btn-primary-color: $brand-primary !default;
|
|
$btn-primary-border: $brand-primary !default;
|
|
|
|
//$btn-success-bg: $btn-default-bg;
|
|
//$btn-success-color: $brand-success !default;
|
|
$btn-success-border: $brand-success !default;
|
|
|
|
$btn-info-bg: $btn-default-bg;
|
|
$btn-info-color: $brand-info !default;
|
|
$btn-info-border: $brand-info !default;
|
|
|
|
// $btn-warning-bg: #333 !default;
|
|
// $btn-warning-color: $brand-warning !default;
|
|
// $btn-warning-border: $brand-warning !default;
|
|
|
|
$btn-danger-bg: $btn-default-bg;
|
|
$btn-danger-color: $brand-danger !default;
|
|
$btn-danger-border: $brand-danger !default;
|
|
|
|
$modal-content-border-color: transparent !default;
|
|
$modal-header-border-color: white !default;
|
|
$border-radius-large: 2px !default;
|
|
$border-radius-base: 2px !default;
|
|
|
|
$table-border-color: transparent !default;
|
|
|
|
$state-danger-bg: $brand-danger;
|
|
$state-danger-text: $brand-danger;
|
|
$state-danger-border: $brand-danger;
|
|
|
|
@import "bootstrap";
|
|
|
|
@font-face {
|
|
font-family: Roboto;
|
|
src: url(3rdparty/Roboto-Regular.ttf);
|
|
}
|
|
|
|
@font-face {
|
|
font-family: Roboto-Light;
|
|
src: url(3rdparty/Roboto-Light.ttf);
|
|
}
|
|
|
|
// ----------------------------
|
|
// Bootstrap extension
|
|
// ----------------------------
|
|
|
|
.row-same-height {
|
|
height: 100%;
|
|
display: table;
|
|
width: 100%;
|
|
}
|
|
|
|
.col-same-height {
|
|
height: 100%;
|
|
vertical-align: middle;
|
|
display: table-cell;
|
|
float: none !important;
|
|
}
|
|
|
|
.row-no-margin {
|
|
margin: 0;
|
|
}
|
|
|
|
.row-no-margin:before,
|
|
.row-no-margin:after {
|
|
content: " ";
|
|
display: table;
|
|
}
|
|
|
|
.row-no-margin:after {
|
|
clear: both;
|
|
}
|
|
|
|
.elide-table-cell {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
max-width: 300px;
|
|
}
|
|
|
|
.dropdown-menu>li>a:focus, .dropdown-menu>li>a:hover {
|
|
background-color: $brand-primary;
|
|
color: white;
|
|
}
|
|
|
|
select.form-control {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
|
|
background-image: url("data:image/svg+xml;utf8,<svg fill='black' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
|
|
background-repeat: no-repeat;
|
|
background-position-x: 100%;
|
|
background-position-y: 5px;
|
|
}
|
|
|
|
input[type="checkbox"], input[type="radio"] {
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
|
|
background-color: white;
|
|
outline: none;
|
|
}
|
|
|
|
.fa-fw {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
.tooltip {
|
|
pointer-events: none;
|
|
|
|
.tooltip-inner {
|
|
max-width: 800px;
|
|
white-space: nowrap;
|
|
}
|
|
}
|
|
|
|
.btn.pull-right {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
// ----------------------------
|
|
// Main classes
|
|
// ----------------------------
|
|
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
.offline-banner {
|
|
position: fixed;
|
|
z-index: 30000;
|
|
background-color: $brand-danger;
|
|
width: 100%;
|
|
padding: 2px;
|
|
text-align: center;
|
|
color: white;
|
|
|
|
&:hover, &:focus {
|
|
color: white;
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.restart-banner {
|
|
position: fixed;
|
|
z-index: 20000;
|
|
background-color: $text-dark;
|
|
width: 100%;
|
|
padding: 2px;
|
|
text-align: center;
|
|
color: white;
|
|
}
|
|
|
|
.layout-root {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.layout-content {
|
|
flex-grow: 1;
|
|
overflow: auto;
|
|
}
|
|
|
|
#ng-view {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.shadow {
|
|
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.highlight:hover {
|
|
background-color: rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
.content {
|
|
width: 100%;
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
|
|
@media(min-width:768px) {
|
|
width: 720px;
|
|
|
|
&.content-large {
|
|
width: 970px;
|
|
max-width: 970px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.navbar {
|
|
display: block;
|
|
width: 100%;
|
|
flex-grow: 0;
|
|
|
|
.navbar-collapse {
|
|
background-color: #F8F8F8;
|
|
}
|
|
|
|
@media(min-width:768px) {
|
|
max-height: 50px;
|
|
}
|
|
|
|
.navbar-brand-icon {
|
|
padding: 5px 15px;
|
|
}
|
|
|
|
.navbar-nav > li > a {
|
|
@media(min-width:768px) {
|
|
padding: 13px 15px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.panel-body {
|
|
padding: 15px 0;
|
|
}
|
|
|
|
.radio {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.help {
|
|
color: #757c82;
|
|
font-size: 14px;
|
|
|
|
&:hover {
|
|
color: $navbar-default-link-hover-color;
|
|
}
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
font-family: $font-family-heading;
|
|
}
|
|
|
|
.view-header {
|
|
padding-left: 15px;
|
|
padding-right: 15px;
|
|
}
|
|
|
|
.offscreen {
|
|
position: absolute;
|
|
left: -999em;
|
|
}
|
|
|
|
textarea {
|
|
max-width: 100%;
|
|
}
|
|
|
|
// ----------------------------
|
|
// Apps view
|
|
// ----------------------------
|
|
|
|
.app-grid {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
width: 100%;
|
|
}
|
|
|
|
.grid-item {
|
|
margin: 10px;
|
|
width: 221px;
|
|
position: relative;
|
|
|
|
@media(max-width:767px) {
|
|
width: 100%;
|
|
|
|
&.admin-action {
|
|
height: 270px;
|
|
}
|
|
}
|
|
|
|
.col-xs-12 {
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
|
|
.status, .status {
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
}
|
|
}
|
|
|
|
&.stopped {
|
|
filter: grayscale(1);
|
|
}
|
|
|
|
.grid-item-content {
|
|
position: relative;
|
|
display: block;
|
|
background-color: white;
|
|
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
|
|
border-radius: 2px;
|
|
height: 100%;
|
|
|
|
&:focus-within {
|
|
box-shadow: 0px 2px 5px rgba(0,0,0,0.4);
|
|
}
|
|
|
|
&:hover {
|
|
background-color: rgba(0, 0, 0, 0.1) !important;
|
|
|
|
& > .grid-item-action {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.grid-item-action {
|
|
border: none;
|
|
z-index: 1;
|
|
position: relative;
|
|
float: right;
|
|
margin-bottom: -14px;
|
|
background-color: unset;
|
|
opacity: 0;
|
|
transition: opacity 200ms;
|
|
color: $text-dark;
|
|
|
|
&:hover {
|
|
color: $brand-primary;
|
|
background-color: rgba(256, 256, 256, 0.5);
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
.grid-item-top {
|
|
position: relative;
|
|
padding: 10px 15px;
|
|
height: 100%;
|
|
padding-top: 30px; // offset for non-admins
|
|
|
|
.grid-item-top-title {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
font-size: 24px;
|
|
font-family: $font-family-heading;
|
|
}
|
|
|
|
.usermanagement-indicator {
|
|
position: absolute;
|
|
top: 10px;
|
|
color: #03a9f49e;
|
|
right: 10px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.app-update-badge {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
left: -12px;
|
|
top: -12px;
|
|
font-size: 24px;
|
|
height: 36px;
|
|
width: 36px;
|
|
color: white;
|
|
cursor: pointer;
|
|
background-color: $brand-success;
|
|
border-radius: 34px;
|
|
transition: all 100ms ease-out;
|
|
|
|
&:hover {
|
|
transform: scale(1.4);
|
|
}
|
|
}
|
|
|
|
.app-postinstall-message {
|
|
max-height: 500px;
|
|
overflow-x: none;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.app-info-title {
|
|
display: inline-block;
|
|
margin: 5px 10px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.app-info-meta {
|
|
margin-left: 4px;
|
|
color: $text-muted;
|
|
}
|
|
|
|
.app-info-icon {
|
|
float: left;
|
|
min-height: 64px;
|
|
max-height: 64px;
|
|
min-width: 64px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
multiselect {
|
|
&.stretch {
|
|
button {
|
|
min-width: 120px;
|
|
}
|
|
}
|
|
|
|
.dropdown-toggle {
|
|
background-color: white;
|
|
border-color: #ccc;
|
|
|
|
&:hover {
|
|
background-color: white;
|
|
}
|
|
}
|
|
|
|
.empty {
|
|
padding-left: 14px;
|
|
}
|
|
}
|
|
|
|
// same as settings-avatar
|
|
.app-custom-icon {
|
|
position: relative;
|
|
cursor: pointer;
|
|
width: 64px;
|
|
height: 64px;
|
|
background-position: center;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
border: 1px solid gray;
|
|
border-radius: 3px;
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.overlay {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
background-color: rgba(255, 255, 255 ,0.3);
|
|
background-image: url('/img/plus.png');
|
|
background-repeat: no-repeat;
|
|
background-size: 32px 32px;
|
|
background-position: center;
|
|
transition: all 150ms;
|
|
opacity: 0;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.alias-domains .col-lg-11 {
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.alias-domains .col-lg-1 {
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
.alias-domains .row {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.alternate-domains .col-lg-11 {
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.alternate-domains .col-lg-1 {
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
.alternate-domains .row {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.back-to-view-link {
|
|
position: absolute;
|
|
z-index: 20;
|
|
top: 50px;
|
|
left: 0;
|
|
width: 100%;
|
|
padding: 10px;
|
|
background-color: white;
|
|
|
|
@media(min-width:768px) {
|
|
background-color: transparent;
|
|
width: auto;
|
|
padding: 20px;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
}
|
|
}
|
|
|
|
.bind-name {
|
|
width: 35%
|
|
}
|
|
|
|
.bind-host-path {
|
|
width: 45%;
|
|
.form-control {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
// ----------------------------
|
|
// Mail view
|
|
// ----------------------------
|
|
|
|
.maillog-filter {
|
|
display: inline-block;
|
|
|
|
.form-control {
|
|
display: inline-block;
|
|
width: 200px;
|
|
}
|
|
}
|
|
|
|
.email-domain-list-item {
|
|
display: block;
|
|
text-decoration: none;
|
|
color: $text-dark;
|
|
padding: 8px;
|
|
|
|
&:hover {
|
|
text-decoration: none;
|
|
color: $text-dark;
|
|
}
|
|
}
|
|
|
|
.no-padding {
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.aliases .col-lg-11 {
|
|
padding-right: 5px;
|
|
}
|
|
|
|
.aliases .col-lg-1 {
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
.aliases .row {
|
|
margin-top: 5px;
|
|
}
|
|
|
|
// ----------------------------
|
|
// App view
|
|
// ----------------------------
|
|
|
|
.app-configure {
|
|
// Ensure back link is fully visible
|
|
@media(max-width:1200px) {
|
|
margin-top: 60px;
|
|
}
|
|
|
|
h3 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.card {
|
|
min-height: 418px;
|
|
}
|
|
|
|
@media(min-width:768px) {
|
|
.col-sm-2 {
|
|
padding-right: 0;
|
|
}
|
|
|
|
.col-sm-8 {
|
|
padding-left: 0;
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
|
|
.app-header-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
padding: 0 15px;
|
|
|
|
@media(min-width:768px) {
|
|
padding: 0;
|
|
}
|
|
|
|
h1 {
|
|
margin-right: 10px;
|
|
line-height: 0.7;
|
|
font-size: 30px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
|
|
a {
|
|
white-space: nowrap;
|
|
color: black;
|
|
line-height: 1.1;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus {
|
|
text-decoration: none;
|
|
color: $brand-primary;
|
|
}
|
|
}
|
|
}
|
|
|
|
&>div {
|
|
white-space: nowrap;
|
|
text-align: right;
|
|
padding-top: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.app-status-container {
|
|
margin-bottom: 10px;
|
|
padding: 0 15px;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
|
|
@media(min-width:768px) {
|
|
padding: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
.app-configure-links-container {
|
|
margin-top: 10px;
|
|
padding: 0;
|
|
}
|
|
|
|
.card-container {
|
|
padding: 0;
|
|
}
|
|
|
|
.app-configure .row {
|
|
@media(max-width:769px) {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.app-configure-links {
|
|
position: relative;
|
|
z-index: 10;
|
|
|
|
div {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
padding: 6px 15px;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
color: black;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 16px;
|
|
user-select: none;
|
|
|
|
@media(min-width:768px) {
|
|
display: block;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
text-decoration: none;
|
|
background-color: #f3f3f3;
|
|
box-shadow: -4px 3px 5px -2px rgba(0,0,0,.1);
|
|
}
|
|
|
|
&.active {
|
|
background-color: white;
|
|
color: $navbar-default-link-color;
|
|
box-shadow: -4px 3px 5px -2px rgba(0,0,0,.1);
|
|
}
|
|
|
|
&.disabled {
|
|
color: gray;
|
|
background-color: transparent !important;
|
|
box-shadow: none !important;
|
|
cursor: not-allowed;
|
|
}
|
|
}
|
|
}
|
|
|
|
.task-active-overlay {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
z-index: 7;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
// ----------------------------
|
|
// Appstore view
|
|
// ----------------------------
|
|
|
|
.appstore-login {
|
|
margin-top: 50px !important;
|
|
|
|
h1 {
|
|
font-size: 32px;
|
|
}
|
|
}
|
|
|
|
.appstore-toolbar {
|
|
position: fixed;
|
|
padding: 0;
|
|
background: $body-bg;
|
|
z-index: 2;
|
|
padding-top: 20px;
|
|
padding-bottom: 15px;
|
|
|
|
// below to not hide the scrollbar partly
|
|
width: calc(100% - 30px);
|
|
margin: 0 15px;
|
|
|
|
.appstore-toolbar-content {
|
|
display: flex;
|
|
margin: auto;
|
|
max-width: 1200px;
|
|
|
|
> input {
|
|
margin: 0 10px;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
> button, > .dropdown > .btn {
|
|
border-radius: 0;
|
|
display: inline-block;
|
|
}
|
|
|
|
> button:first-of-type {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
@media(max-width:768px) {
|
|
flex-wrap: wrap;
|
|
|
|
> input {
|
|
margin: 0;
|
|
}
|
|
|
|
> button, > .dropdown {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.appstore-grid {
|
|
margin: auto;
|
|
margin-top: 65px;
|
|
width: calc(100% - 30px); // -30px to offset .row margins
|
|
max-width: 1200px;
|
|
|
|
h2 {
|
|
font-size: 20px;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
.appstore-item {
|
|
padding: 10px;
|
|
width: 300px;
|
|
}
|
|
|
|
.appstore-item-content {
|
|
background-color: white;
|
|
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
|
|
border-radius: 2px;
|
|
padding: 10px;
|
|
width: 100%;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.appstore-item-badge-testing {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 2px;
|
|
}
|
|
|
|
.appstore-item-content-testing {
|
|
background-color: #E6E6E6;
|
|
background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
|
|
background-size: 64px 64px;
|
|
}
|
|
|
|
.appstore-item-content-title {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.appstore-item-content-tagline {
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
height: 44px; // show two lines
|
|
}
|
|
|
|
.appstore-item-content-icon {
|
|
width: 100px;
|
|
min-width: 100px;
|
|
max-width: 100px;
|
|
padding-left: 10px;
|
|
padding-right: 10px;
|
|
}
|
|
|
|
.appstore-item-content-description {
|
|
width: 160px;
|
|
min-width: 160px;
|
|
max-width: 160px;
|
|
}
|
|
|
|
.appstore-category-link {
|
|
display: block;
|
|
padding: 6px 10px;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
color: black;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-size: 16px;
|
|
|
|
&:hover,
|
|
&:focus,
|
|
&.category-active {
|
|
text-decoration: none;
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
|
|
&.category-active {
|
|
background-color: $navbar-default-link-hover-color;
|
|
color: white;
|
|
}
|
|
|
|
& > i {
|
|
width: 30px;
|
|
}
|
|
}
|
|
|
|
|
|
.appstore-category-missing {
|
|
padding: 10px;
|
|
background-color: white;
|
|
|
|
p {
|
|
font-weight: bold;
|
|
}
|
|
|
|
textarea {
|
|
display: block;
|
|
width: 100%;
|
|
height: 50px;
|
|
margin-bottom: 10px;
|
|
transition: all 250ms ease-out;
|
|
|
|
&:focus {
|
|
height: 200px;
|
|
}
|
|
}
|
|
|
|
button {
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
.appstore-install-description {
|
|
max-height: 250px;
|
|
overflow-x: none;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.modal-body .panel-body {
|
|
padding: 5px;
|
|
}
|
|
|
|
.modal-footer {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.appstore-install-title {
|
|
display: inline-block;
|
|
margin: 5px 10px;
|
|
}
|
|
|
|
.appstore-install-meta {
|
|
margin-left: 10px;
|
|
color: $text-muted;
|
|
}
|
|
|
|
.appstore-item-rating {
|
|
color: $navbar-default-link-hover-color;
|
|
}
|
|
|
|
.appstore-search {
|
|
width: 200px;
|
|
}
|
|
|
|
.loading-banner {
|
|
padding-top: 150px;
|
|
text-align: center;
|
|
|
|
h1 {
|
|
font-size: 48px;
|
|
}
|
|
}
|
|
|
|
.badge-success {
|
|
background-color: #5CB85C;
|
|
}
|
|
|
|
.badge-warning {
|
|
background-color: #EFBD48;
|
|
}
|
|
|
|
.badge-danger {
|
|
background-color: $brand-danger;
|
|
}
|
|
|
|
.progress {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.card {
|
|
position: relative;
|
|
background-color: white;
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
margin-bottom: 15px;
|
|
padding: 10px 15px;
|
|
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.card-small {
|
|
max-width: 600px;
|
|
}
|
|
|
|
.card-large {
|
|
max-width: 970px;
|
|
}
|
|
|
|
.text-success {
|
|
color: #5CB85C;
|
|
}
|
|
|
|
.text-bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.text-large {
|
|
font-size: $font-size-h1;
|
|
}
|
|
|
|
.text-medium {
|
|
font-size: $font-size-h4;
|
|
}
|
|
|
|
.text-small {
|
|
font-size: $font-size-h6;
|
|
}
|
|
|
|
.text-hover {
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
color: $brand-primary;
|
|
}
|
|
}
|
|
|
|
.newPort {
|
|
border-left: 5px solid $brand-success;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.obsoletePort {
|
|
border-left: 5px solid $gray-light;
|
|
padding-left: 5px;
|
|
}
|
|
|
|
.grid-item-top .progress {
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
margin-top: 10px;
|
|
width: inherit;
|
|
height: 10px;
|
|
}
|
|
|
|
.grid-item-top .progress-bar {
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.app-icon {
|
|
min-height: 80px;
|
|
max-height: 80px;
|
|
min-width: 80px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.appstore-install .app-icon {
|
|
float: left;
|
|
min-height: 96px;
|
|
max-height: 96px;
|
|
min-width: 96px;
|
|
max-width: 100%;
|
|
}
|
|
|
|
select.purpose:invalid {
|
|
color: gray
|
|
}
|
|
|
|
// ----------------------------
|
|
// Animations
|
|
// ----------------------------
|
|
|
|
// ngAnimate will delay hiding the element if there is an animation attached
|
|
.fa-spin.ng-hide,
|
|
.fa-pulse.ng-hide {
|
|
display: none !important;
|
|
}
|
|
|
|
.animateMe {
|
|
opacity: 1;
|
|
-webkit-transition: 0.25s ease all;
|
|
transition: 0.25s ease all;
|
|
}
|
|
|
|
.animateMe.ng-hide-add,
|
|
.animateMe.ng-hide-remove {
|
|
display: block !important;
|
|
transform: scale(0.9, 0.9);
|
|
opacity: 0;
|
|
}
|
|
|
|
.animateMeOpacity {
|
|
opacity: 1;
|
|
-webkit-transition: 0.25s ease all;
|
|
transition: 0.25s ease all;
|
|
}
|
|
|
|
.animateMeOpacity.ng-hide-add,
|
|
.animateMeOpacity.ng-hide-remove {
|
|
display: block !important;
|
|
opacity: 0;
|
|
}
|
|
|
|
.animation-rise {
|
|
animation-duration: 3s;
|
|
animation-name: rise;
|
|
}
|
|
|
|
.animation-plop {
|
|
transform: scale(0);
|
|
animation-name: plop;
|
|
animation-delay: 2s;
|
|
animation-duration: 350ms;
|
|
animation-iteration-count: 1;
|
|
animation-timing-function: ease-out;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.animation-fade {
|
|
opacity: 0;
|
|
animation-name: fade;
|
|
animation-delay: 4s;
|
|
animation-duration: 250ms;
|
|
animation-iteration-count: 1;
|
|
animation-timing-function: ease-out;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
|
|
.animation-pulse {
|
|
animation-duration: 1.5s;
|
|
animation-name: pulse;
|
|
animation-timing-function: ease-in;
|
|
animation-iteration-count: infinite;
|
|
}
|
|
|
|
@keyframes rise {
|
|
from {
|
|
color: transparent;
|
|
}
|
|
|
|
to {
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
@keyframes plop {
|
|
0% {
|
|
transform: scale(0);
|
|
opacity: 0;
|
|
}
|
|
|
|
50% {
|
|
transform: scale(1.2);
|
|
opacity: 0.3
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fade {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes pulse {
|
|
0% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
transform: scale(0.8);
|
|
opacity: 0.5;
|
|
}
|
|
|
|
100% {
|
|
transform: scale(1);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.slick-item {
|
|
height: 200px;
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: contain;
|
|
}
|
|
|
|
.modal-backdrop {
|
|
position: fixed;
|
|
top: 0;
|
|
bottom: 0;
|
|
height: auto !important;
|
|
}
|
|
|
|
.has-error,
|
|
.text-danger {
|
|
color: $brand-danger;
|
|
|
|
a {
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
footer {
|
|
flex-grow: 0;
|
|
background-color: #f8f8f8;
|
|
width: 100%;
|
|
color: #555;
|
|
max-height: 30px;
|
|
font-size: 14px;
|
|
padding: 5px;
|
|
text-align: center;
|
|
box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1);
|
|
|
|
a {
|
|
color: #62bdfc;
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
}
|
|
}
|
|
|
|
.hand {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.copy {
|
|
cursor: copy;
|
|
}
|
|
|
|
.arrow {
|
|
cursor: default;
|
|
}
|
|
|
|
// ----------------------------
|
|
// Setup classes
|
|
// ----------------------------
|
|
|
|
.setup {
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 0;
|
|
background: #F7F7F7;
|
|
|
|
.main-container {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: table;
|
|
|
|
h1 {
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
&>.row {
|
|
display: table-cell;
|
|
vertical-align: middle;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------------
|
|
// System classes
|
|
// ----------------------------
|
|
|
|
.color-indicator {
|
|
display: inline-block;
|
|
width: 3px;
|
|
height: 18px;
|
|
}
|
|
|
|
// ----------------------------
|
|
// Error and status page classes
|
|
// ----------------------------
|
|
|
|
.status-page {
|
|
background-color: white;
|
|
padding: 0;
|
|
margin: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
|
|
.wrapper {
|
|
display: table;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.content {
|
|
display: table-cell;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
footer {
|
|
bottom: 0;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
// ----------------------------
|
|
// Settings
|
|
// ----------------------------
|
|
|
|
.settings-avatar {
|
|
position: relative;
|
|
cursor: pointer;
|
|
width: 128px;
|
|
height: 128px;
|
|
background-position: center;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
border: 1px solid gray;
|
|
border-radius: 3px;
|
|
margin-bottom: 10px;
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(127, 127, 127 ,0.3);
|
|
background-image: url('/img/plus.png');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
transition: all 150ms;
|
|
opacity: 0;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.settings-avatar-selector {
|
|
text-align: center;
|
|
|
|
.grid {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.preview-avatar {
|
|
text-align: center;
|
|
}
|
|
|
|
.item {
|
|
display: inline-block;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
width: 64px;
|
|
height: 64px;
|
|
margin: 5px;
|
|
cursor: pointer;
|
|
opacity: 0.6;
|
|
transform: scale(1.0);
|
|
transition: all 150ms;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
&.add {
|
|
border-radius: 2px;
|
|
width: 54px;
|
|
height: 54px;
|
|
background-color: $brand-primary;
|
|
background-image: url('/img/plus.png');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.plans label {
|
|
font-weight: normal;
|
|
}
|
|
|
|
// ----------------------------
|
|
// Notification
|
|
// ----------------------------
|
|
|
|
.ui-notification {
|
|
cursor: auto;
|
|
|
|
& a {
|
|
color: white;
|
|
|
|
&:hover {
|
|
color: white;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// ----------------------------
|
|
// Users view
|
|
// ----------------------------
|
|
|
|
.group-badge {
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.no-wrap {
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.users-filter {
|
|
display: inline-block;
|
|
padding-left: 0;
|
|
margin: 20px 0;
|
|
border-radius: 2px;
|
|
|
|
.form-control {
|
|
display: inline-block;
|
|
width: 200px;
|
|
}
|
|
}
|
|
|
|
// ----------------------------
|
|
// Upgrade
|
|
// ----------------------------
|
|
|
|
.upgrade {
|
|
position: fixed;
|
|
right: 10px;
|
|
bottom: 30px;
|
|
color: white;
|
|
z-index: 1200;
|
|
text-align: right;
|
|
|
|
.content {
|
|
height: 0;
|
|
overflow: hidden;
|
|
transition: height 250ms;
|
|
background-color: #00A500;
|
|
text-align: left;
|
|
border-radius: 0;
|
|
transition: all 250ms;
|
|
box-shadow: 0 3px 5px rgba(0,0,0,.5);
|
|
|
|
a {
|
|
color: white;
|
|
text-decoration: underline;
|
|
|
|
&:hover {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
padding: 10px;
|
|
border-radius: 5px;
|
|
border-bottom-right-radius: 0;
|
|
height: auto;
|
|
}
|
|
}
|
|
|
|
.trigger {
|
|
cursor: pointer;
|
|
padding: 4px 10px;
|
|
display: inline-block;
|
|
font-size: 18px;
|
|
background-color: #00A500;
|
|
border-radius: 5px;
|
|
transition: all 250ms;
|
|
box-shadow: 0 3px 5px rgba(0,0,0,.5);
|
|
|
|
&.active {
|
|
border-top-left-radius: 0;
|
|
border-top-right-radius: 0;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------------
|
|
// Eventlog/Activity
|
|
// ----------------------------
|
|
|
|
.eventlog-filter {
|
|
display: inline-block;
|
|
padding-left: 0;
|
|
margin: 20px 0;
|
|
border-radius: 2px;
|
|
|
|
.form-control {
|
|
display: inline-block;
|
|
width: 200px;
|
|
}
|
|
}
|
|
|
|
.eventlog-details {
|
|
white-space: pre-wrap;
|
|
background-color: white;
|
|
}
|
|
|
|
// ----------------------------
|
|
// Account/Notifications
|
|
// ----------------------------
|
|
|
|
.notification-item {
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
box-shadow: 0 2px 27px rgba(0,0,0,.1);
|
|
}
|
|
|
|
&.notification-unread {
|
|
border-left: solid 3px #2196f3;
|
|
|
|
.notification-title {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------------
|
|
// Branding
|
|
// ----------------------------
|
|
|
|
.branding-avatar {
|
|
position: relative;
|
|
cursor: pointer;
|
|
width: 64px;
|
|
height: 64px;
|
|
background-position: center;
|
|
background-size: 100% 100%;
|
|
background-repeat: no-repeat;
|
|
border: 1px solid gray;
|
|
border-radius: 3px;
|
|
|
|
img {
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(127, 127, 127 ,0.3);
|
|
background-image: url('/img/plus.png');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
transition: all 150ms;
|
|
opacity: 0;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.branding-avatar-selector {
|
|
text-align: center;
|
|
|
|
.grid {
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.preview-avatar {
|
|
text-align: center;
|
|
}
|
|
|
|
.item {
|
|
display: inline-block;
|
|
background-size: cover;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
width: 64px;
|
|
height: 64px;
|
|
margin: 5px;
|
|
cursor: pointer;
|
|
opacity: 0.6;
|
|
transform: scale(1.0);
|
|
transition: all 150ms;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
&.add {
|
|
border-radius: 2px;
|
|
width: 54px;
|
|
height: 54px;
|
|
background-color: $brand-primary;
|
|
background-image: url('/img/plus.png');
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 50%;
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------------
|
|
// Tag Input
|
|
// ----------------------------
|
|
// https://codepen.io/webmatze/pen/isuHh
|
|
|
|
tag-input {
|
|
height: auto !important;
|
|
cursor: text;
|
|
|
|
.tag-input-container {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-wrap: wrap;
|
|
|
|
input {
|
|
flex-grow: 1;
|
|
padding: 0px;
|
|
font-size: 14px;
|
|
line-height: 18px;
|
|
color: black;
|
|
border: 0px;
|
|
margin: 4px 0;
|
|
|
|
&:focus {
|
|
outline: 0;
|
|
box-shadow: 0px;
|
|
}
|
|
}
|
|
|
|
.input-tag {
|
|
margin: 2px 0;
|
|
margin-right: 4px;
|
|
|
|
:first-child {
|
|
cursor: text;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------------
|
|
// Logs
|
|
// ----------------------------
|
|
|
|
.logs {
|
|
background: black;
|
|
|
|
.logs-controls {
|
|
margin: 5px;
|
|
|
|
.ng-isolate-scope {
|
|
float: left;
|
|
}
|
|
|
|
h3 {
|
|
margin: 5px 0;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.logs-container {
|
|
flex-grow: 1;
|
|
color: white;
|
|
overflow: auto;
|
|
margin: 5px;
|
|
font-family: monospace;
|
|
|
|
.log-line {
|
|
line-height: 1.2;
|
|
white-space: nowrap;
|
|
width: 100%;
|
|
|
|
&:hover {
|
|
background-color: #333333;
|
|
|
|
.time {
|
|
background-color: #333333;
|
|
}
|
|
}
|
|
|
|
.time {
|
|
color: #00FFFF;
|
|
position: sticky;
|
|
left: 0;
|
|
background: black;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// ----------------------------
|
|
// Terminal
|
|
// ----------------------------
|
|
|
|
.terminal-view {
|
|
background: black;
|
|
|
|
.terminal-controls {
|
|
margin: 5px;
|
|
|
|
.ng-isolate-scope {
|
|
float: left;
|
|
}
|
|
|
|
h3 {
|
|
margin: 5px 0;
|
|
color: white;
|
|
}
|
|
}
|
|
|
|
.terminal-container {
|
|
flex-grow: 1;
|
|
margin-bottom: 5px;
|
|
color: white;
|
|
overflow: hidden;
|
|
padding: 5px;
|
|
font-family: monospace;
|
|
|
|
&.placeholder {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
}
|
|
}
|
|
|
|
.contextMenuBackdrop {
|
|
display: none;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// ----------------------------
|
|
// File Manager
|
|
// ----------------------------
|
|
|
|
.filemanager {
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
margin-bottom: 10px;
|
|
|
|
button {
|
|
float: none;
|
|
}
|
|
|
|
div {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.path-parts {
|
|
margin: 0 5px;
|
|
white-space: nowrap;
|
|
overflow: auto;
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
.text-editor {
|
|
display: flex;
|
|
padding: 10px;
|
|
margin: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
flex-direction: column;
|
|
|
|
.toolbar {
|
|
width: 100%;
|
|
display: flex;
|
|
margin-bottom: 5px;
|
|
justify-content: space-between;
|
|
|
|
:not(:last-child) {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
div {
|
|
flex-grow: 2;
|
|
margin: auto;
|
|
text-align: center;
|
|
}
|
|
}
|
|
}
|
|
|
|
// those are for drag'n'drop
|
|
.file-list {
|
|
overflow: auto;
|
|
border: 2px solid transparent;
|
|
position: relative;
|
|
height: 100%;
|
|
|
|
&.top-scroll-indicator {
|
|
transition: box-shadow 200ms;
|
|
box-shadow: inset 0 10px 10px -10px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.table-hover > tbody > tr:hover {
|
|
background-color: #0000000a;
|
|
}
|
|
}
|
|
|
|
.file-list-header {
|
|
th {
|
|
padding: 2px 8px;
|
|
}
|
|
}
|
|
|
|
table {
|
|
border: 2px solid transparent;
|
|
}
|
|
|
|
.context-menu-action {
|
|
display: none;
|
|
}
|
|
|
|
tr:hover .context-menu-action {
|
|
display: inline-block;
|
|
}
|
|
|
|
tr.entry-selected .context-menu-action {
|
|
display: inline-block;
|
|
color: white;
|
|
}
|
|
|
|
.entry-hovered {
|
|
border: 2px solid $brand-primary;
|
|
}
|
|
|
|
.entry-hovered > td {
|
|
border: none !important;
|
|
}
|
|
|
|
.entry-selected {
|
|
background-color: $brand-primary !important;
|
|
color: white !important;
|
|
}
|
|
|
|
.card {
|
|
height: calc(100% - 20px);
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
margin-bottom: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
}
|
|
|
|
// ----------------------------
|
|
// Dark mode overrides
|
|
// ----------------------------
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
$textColor: #959595;
|
|
$backgroundLight: #2b2b2e;
|
|
$backgroundDark: #1c1c1c;
|
|
|
|
body, .appstore-toolbar, .modal-content, .setup {
|
|
color: $textColor;
|
|
background-color: $backgroundLight;
|
|
}
|
|
|
|
select.form-control {
|
|
background-image: url("data:image/svg+xml;utf8,<svg fill='lightgray' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
|
|
}
|
|
|
|
.navbar-default {
|
|
background-color: $backgroundDark;
|
|
border-color: $backgroundDark;
|
|
}
|
|
|
|
.navbar .navbar-collapse {
|
|
background-color: $backgroundDark;
|
|
}
|
|
|
|
.grid-item {
|
|
.grid-item-content {
|
|
background-color: $backgroundDark !important;
|
|
|
|
.grid-item-action {
|
|
color: white;
|
|
|
|
&:hover {
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
footer, .card, .app-configure-links div.active {
|
|
background-color: $backgroundDark;
|
|
}
|
|
|
|
.app-configure-links div:hover {
|
|
background-color: $backgroundDark;
|
|
color: $textColor;
|
|
}
|
|
|
|
.app-configure-links div {
|
|
color: $textColor;
|
|
}
|
|
|
|
multiselect .dropdown-toggle {
|
|
background-color: $backgroundDark;
|
|
border-color: $backgroundDark;
|
|
}
|
|
|
|
.btn {
|
|
background-color: $backgroundDark;
|
|
}
|
|
|
|
.btn-default {
|
|
color: $textColor;
|
|
|
|
&:hover {
|
|
color: #868686;
|
|
}
|
|
}
|
|
|
|
code {
|
|
background-color: $backgroundDark;
|
|
color: #991a3a;
|
|
}
|
|
|
|
hr {
|
|
border-top: 1px solid #868686;
|
|
}
|
|
|
|
input {
|
|
background-color: $backgroundLight;
|
|
}
|
|
|
|
tag-input .tag-input-container input {
|
|
color: $textColor;
|
|
}
|
|
|
|
.form-control {
|
|
background-color: $backgroundLight;
|
|
border-color: #676767;
|
|
color: $textColor;
|
|
}
|
|
|
|
.app-configure .app-header-container h1 a {
|
|
color: $textColor;
|
|
}
|
|
|
|
.appstore-item-content {
|
|
background-color: $backgroundDark;
|
|
}
|
|
|
|
.modal-header {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.modal-footer {
|
|
border-top: none;
|
|
}
|
|
|
|
.navbar-default .navbar-nav > .open > a {
|
|
background-color: transparent !important;
|
|
}
|
|
|
|
.dropdown-menu {
|
|
background-color: $backgroundDark;
|
|
}
|
|
|
|
.dropdown-menu > li > a {
|
|
color: $textColor;
|
|
}
|
|
|
|
multiselect .dropdown-toggle:hover {
|
|
background-color: #222;
|
|
}
|
|
|
|
.table-hover > tbody > tr:hover {
|
|
background-color: $backgroundLight;
|
|
color: white;
|
|
}
|
|
|
|
.email-domain-list-item, .email-domain-list-item:hover {
|
|
color: $textColor;
|
|
}
|
|
|
|
.nav-tabs {
|
|
border-bottom: 1px solid $backgroundDark;
|
|
}
|
|
|
|
.nav-tabs > li > a
|
|
.nav-tabs > li > a:focus,
|
|
.nav-tabs > li > a:hover {
|
|
background-color: $backgroundLight;
|
|
border: 1px solid $backgroundDark;
|
|
border-bottom-color: transparent;
|
|
}
|
|
|
|
.nav-tabs > li.active > a,
|
|
.nav-tabs > li.active > a:focus,
|
|
.nav-tabs > li.active > a:hover {
|
|
background-color: $backgroundDark;
|
|
color: $textColor;
|
|
border: 1px solid $backgroundDark;
|
|
}
|
|
} |