1
0
mirror of https://github.com/ascribe/onion.git synced 2024-12-23 01:39:36 +01:00
onion/sass/whitelabel/wallet/market/market_custom_style.scss
2018-05-23 17:49:58 +02:00

379 lines
10 KiB
SCSS

$market--fg-color: black;
$market--bg-color: white;
$market--nav-fg-prim-color: $market--fg-color;
$market--nav-fg-sec-color: #3a3a3a;
$market--nav-bg-color: $market--bg-color;
$market--nav-highlight-color: #f8f8f8;
$market--button-default-color: $market--fg-color;
$market--highlight-color: #2882fa;
.client--demo, .client--liquidgallery {
/** Landing page **/
.route--landing {
display: table;
min-height: 100vh;
> .container {
display: table-cell;
padding-bottom: 100px;
vertical-align: middle;
}
.hero {
display: none;
}
.landing {
font-weight: normal;
text-align: center;
}
.landing--header {
background-color: $market--bg-color;
border: 1px solid darken($market--bg-color, 20%);
color: $market--fg-color;
padding: 2em;
.landing--header-logo {
margin: 1em 0 2em 0;
}
}
.landing--content {
background-color: $market--bg-color;
border: 1px solid darken($market--bg-color, 20%);
border-top: none;
padding: 2em;
}
}
/** Navbar **/
.navbar-default {
background-color: $market--bg-color;
.navbar-brand .img-brand {
height: 115%;
}
.navbar-brand .icon-ascribe-logo {
color: $market--nav-fg-prim-color;
&:hover {
color: darken($market--nav-fg-prim-color, 20%);
}
}
}
.navbar-nav > li > a,
.navbar-nav > li > a:focus,
.navbar-nav > li > .active a,
.navbar-nav > li > .active a:focus {
color: $market--nav-fg-prim-color;
}
.navbar-nav > li > a:hover {
color: darken($market--nav-fg-prim-color, 20%);
}
.navbar-nav > .active a,
.navbar-nav > .active a:hover,
.navbar-nav > .active a:focus {
background-color: $market--nav-bg-color;
border-bottom-color: $market--nav-fg-prim-color;
color: $market--nav-fg-prim-color;
}
.navbar-nav > .open > a,
.dropdown-menu > .active > a,
.dropdown-menu > li > a {
color: $market--nav-fg-prim-color;
background-color: $market--nav-bg-color;
}
.navbar-nav > .open > a:hover,
.navbar-nav > .open > a:focus,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus,
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
color: lighten($market--nav-fg-prim-color, 20%);
background-color: $market--nav-highlight-color;
}
.navbar-collapse.collapsing,
.navbar-collapse.collapse.in {
background-color: $market--nav-bg-color;
.navbar-nav > .open > a,
.navbar-nav > .active > a {
background-color: $market--nav-highlight-color;
}
}
.navbar-collapse.collapsing li a,
.navbar-collapse.collapse.in li a {
color: $market--nav-fg-prim-color;
}
.navbar-collapse.collapse.in li a:not(.ascribe-powered-by):hover {
color: lighten($market--nav-fg-prim-color, 20%);
background-color: $market--nav-highlight-color;
}
.navbar-toggle {
border-color: $market--highlight-color;
.icon-bar {
background-color: $market--highlight-color;
}
}
.navbar-toggle:hover,
.navbar-toggle:focus {
border-color: lighten($market--highlight-color, 10%);
background-color: $market--nav-fg-prim-color;
.icon-bar {
background-color: lighten($market--highlight-color, 10%);
}
}
.notification-menu {
.dropdown-menu {
background-color: $market--nav-bg-color;
}
.notification-header {
background-color: $market--nav-fg-sec-color;
border-top-width: 0;
color: $market--nav-bg-color;
}
.notification-action {
color: $market--highlight-color;
}
}
/** Buttons **/
// reset disabled button styling for btn-default
.btn-default.disabled,
.btn-default.disabled:hover,
.btn-default.disabled:focus,
.btn-default.disabled.focus,
.btn-default.disabled:active,
.btn-default.disabled.active,
.btn-default[disabled],
.btn-default[disabled]:hover,
.btn-default[disabled]:focus,
.btn-default[disabled].focus,
.btn-default[disabled]:active,
.btn-default[disabled].active,
fieldset[disabled] .btn-default,
fieldset[disabled] .btn-default:hover,
fieldset[disabled] .btn-default:focus,
fieldset[disabled] .btn-default.focus,
fieldset[disabled] .btn-default:active,
fieldset[disabled] .btn-default.active {
background-color: lighten($market--button-default-color, 30%);
border-color: lighten($market--button-default-color, 30%);
}
.btn-default {
background-color: $market--button-default-color;
border-color: $market--button-default-color;
&:hover,
&:active,
&:focus,
&:active:hover,
&:active:focus,
&:active.focus,
&.active:hover,
&.active:focus,
&.active.focus {
background-color: lighten($market--button-default-color, 30%);
border-color: lighten($market--button-default-color, 30%);
}
}
// disabled buttons
.btn-secondary.disabled,
.btn-secondary.disabled:hover,
.btn-secondary.disabled:focus,
.btn-secondary.disabled.focus,
.btn-secondary.disabled:active,
.btn-secondary.disabled.active,
.btn-secondary[disabled],
.btn-secondary[disabled]:hover,
.btn-secondary[disabled]:focus,
.btn-secondary[disabled].focus,
.btn-secondary[disabled]:active,
.btn-secondary[disabled].active,
fieldset[disabled] .btn-secondary,
fieldset[disabled] .btn-secondary:hover,
fieldset[disabled] .btn-secondary:focus,
fieldset[disabled] .btn-secondary.focus,
fieldset[disabled] .btn-secondary:active,
fieldset[disabled] .btn-secondary.active {
background-color: darken($market--bg-color, 20%);
border-color: $market--button-default-color;
}
.btn-secondary {
border-color: $market--button-default-color;
color: $market--button-default-color;
&:hover,
&:active,
&:focus,
&:active:hover,
&:active:focus,
&:active.focus,
&.active:hover,
&.active:focus,
&.active.focus {
background-color: $market--button-default-color;
border-color: $market--button-default-color;
color: $market--bg-color;
}
}
.btn-tertiary {
&:hover,
&:active,
&ctive:hover,
&.active:hover{
background-color: $market--highlight-color;
border-color: $market--highlight-color;
color: $market--bg-color;
}
}
/** Other components **/
.ascribe-piece-list-toolbar .btn-ascribe-add {
display: none;
}
.ascribe-footer {
display: none;
}
.ascribe-accordion-list-table-toggle:hover {
color: $market--fg-color;
}
.request-action-badge {
color: $market--fg-color;
}
.acl-information-dropdown-list .title {
color: $market--fg-color;
}
// filter widget
.ascribe-piece-list-toolbar-widget button {
background-color: transparent !important;
border-color: transparent !important;
color: $market--button-default-color !important;
&:hover,
&:active {
background-color: $market--button-default-color !important;
border-color: $market--button-default-color !important;
color: $market--bg-color !important;
}
}
.icon-ascribe-search {
color: $market--fg-color;
}
// forms
.ascribe-property-wrapper:hover {
border-left-color: rgba($market--fg-color, 0.5);
}
.ascribe-property textarea,
.ascribe-property input,
.search-bar > .form-group > .input-group input {
&::-webkit-input-placeholder {
color: rgba($market--fg-color, 0.5);
}
&::-moz-placeholder {
color: rgba($market--fg-color, 0.5);
}
&:-ms-input-placeholder {
color: rgba($market--fg-color, 0.5);
}
&:-moz-placeholder {
color: rgba($market--fg-color, 0.5);
}
}
.ascribe-property {
> div,
> input,
> pre,
> select,
> span:not(.glyphicon),
> p,
> p > span,
> textarea {
color: $market--fg-color;
}
}
// global notification
.ascribe-global-notification-success {
background-color: lighten($market--fg-color, 20%);
}
// uploader progress
.ascribe-progress-bar > .progress-bar {
background-color: lighten($market--fg-color, 20%);
}
.ascribe-progress-bar span {
text-shadow: -1px 0 lighten($market--fg-color, 20%),
0 1px lighten($market--fg-color, 20%),
1px 0 lighten($market--fg-color, 20%),
0 -1px lighten($market--fg-color, 20%);
}
.action-file.icon-ascribe-ok,
.action-file.icon-ascribe-ok:hover {
color: lighten($market--fg-color, 20%);
}
// spinner
.spinner-circle {
border-color: $market--fg-color;
}
.spinner-inner {
display: none;
}
.btn-secondary .spinner-circle {
border-color: $market--bg-color;
}
// video player
.ascribe-media-player .vjs-default-skin {
.vjs-play-progress,
.vjs-volume-level {
background-color: $market--highlight-color;
}
}
// pager
.pager li > a,
.pager li > span {
background-color: $market--fg-color;
border-color: $market--fg-color;
}
.pager .disabled > a,
.pager .disabled > span {
background-color: $market--fg-color !important;
border-color: $market--fg-color;
}
}