@import (reference) "./colortheme-all.less";
@import (reference) "./browser.less";
@import (reference) "./variables.less";
@import (reference) "./avatar.less";
@import (reference) "./tools.less";
.alertify_main() {
--LessLoader_require: LessLoader_currentFile();
};
& {
@max-z-index: 2147483647;
@alertify-fore: @colortheme_modal-fg;
@alertify-base: @colortheme_modal-bg;
@alertify-dialog-bg: @alertify-base;
@alertify-dialog-fg: @alertify-fore;
@alertify-btn-fg: @alertify-fore;
@alertify-bg: @colortheme_modal-dim;
@alertify-fg: @alertify-fore;
@alertify-input-bg: @colortheme_modal-input;
@alertify-input-fg: @colortheme_modal-input-fg;
@alertify_padding-base: @variables_padding;
@alertify_box-shadow: @variables_shadow;
// Logs to show that something has happened
// These show only once
.alertify-logs {
z-index: 10000; // alertify logs
@media print {
visibility: hidden;
}
> * {
padding: @alertify_padding-base @alertify_padding-base * 4;
color: @colortheme_notification-color;
font-family: @colortheme_font;
font-size: large;
box-shadow: @alertify_box-shadow;
&, &.default {
// FIXME
background: @colortheme_notification-log;
}
&.error {
font-weight: bold;
background: @colortheme_notification-warn;
}
&.success {
background: @colortheme_notification-log;
}
}
}
.alertify {
position: fixed;
background-color: @alertify-bg;
color: @alertify-fg;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 100000; // alertify container
font: @colortheme_app-font;
&.forefront {
z-index: @max-z-index; // alertify max forefront
}
.message {
h1, h2, h3, h4, h5, h6 {
color: @alertify-fg;
}
}
h1, h2, h3 {
margin-top: 0;
}
&.hide {
opacity: 0;
pointer-events: none;
}
&, &.show {
box-sizing: border-box;
transition: all .33s cubic-bezier(.25, .8, .25, 1);
}
&, * {
box-sizing: border-box;
}
.dialog {
padding: 12px;
/*
div.tokenfield {
.token {
//border: 1px solid red;
//color: red;
}
color: @colortheme_light-base;
background-color: @alertify-dialog-bg;
input[id$="tokenfield"][type="text"].token-input {
background-color: @alertify-dialog-bg !important;
}
}*/
}
.dialog, .alert {
& > div {
background-color: @alertify-dialog-bg;
&.half {
width: 50%;
max-width: 50%;
@media (max-width: @browser_media-medium-screen) {
width: 100%;
}
}
display: flex;
flex-flow: column;
}
width: 100%;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
max-height: 100%;
display: flex;
> * {
width: 100%;
min-width: 260px;
max-width: 500px;
margin: 0 auto;
text-align: left;
padding: @alertify_padding-base;
background: #fff;
box-shadow: @alertify_box-shadow;
&.wide {
width: 1000px;
max-width: 70%;
}
}
.msg {
padding: @alertify_padding-base;
margin-bottom: @alertify_padding-base;
margin: 0;
overflow: auto;
}
.alertify-tabs {
max-height: 100%;
display: flex;
flex-flow: column;
.alertify-tabs-titles {
height: 30px;
display: flex;
border-bottom: 1px solid @alertify-fore;
margin-bottom: 20px;
box-sizing: content-box;
span {
font-size: 20px;
height: 30px;
line-height: 30px;
box-sizing: border-box;
padding: 0 15px;
border-left: 1px solid lighten(@alertify-base, 10%);
border-right: 1px solid lighten(@alertify-base, 10%);
cursor: pointer;
}
span.alertify-tabs-active {
background-color: @alertify-fore;
border-left: 1px solid @alertify-fore;
border-right: 1px solid @alertify-fore;
color: @alertify-base;
font-weight: bold;
cursor: default;
}
}
.alertify-tabs-contents {
flex: 1 1 auto;
min-height: 0;
& > div {
max-height: 100%;
display: none;
overflow: auto;
}
& > div.alertify-tabs-content-active {
display: block;
&.cp-share-columns {
display: flex;
}
}
}
}
input:not(.form-control), textarea {
background-color: @alertify-input-bg;
color: @alertify-input-fg;
border: 0px;
margin-bottom: 15px;
width: 100%;
font-size: 100%;
padding: @alertify_padding-base;
}
span.cp-password-container {
display: flex;
align-items: center;
margin-bottom: 15px;
justify-content: space-between;
& > * {
margin-bottom: 0 !important;
}
button {
margin: 0 !important;
}
}
input[type="checkbox"], input[type="radio"] {
width: auto;
padding: 0;
margin-right: 0.5em;
margin-top: 1px;
margin-bottom: 5px;
vertical-align: middle;
& + label {
margin-bottom: 0;
margin-right: 2em;
}
}
button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
background-color: @colortheme_alertify-cancel;
box-sizing: border-box;
position: relative;
outline: 0;
display: inline-block;
align-items: center;
padding: 0 6px;
margin: 6px 8px;
line-height: 36px;
min-height: 36px;
white-space: nowrap;
min-width: 88px;
text-align: center;
text-transform: uppercase;
font-size: 14px;
text-decoration: none;
cursor: pointer;
border-radius: 0;
color: @alertify-btn-fg;
border: 1px solid @colortheme_alertify-cancel-border;
&.no-margin {
margin: 0;
}
&.safe, &.danger {
color: @colortheme_old-base;
white-space: normal;
font-weight: bold;
}
&.danger {
background-color: @colortheme_alertify-red;
border-color: @colortheme_alertify-red-border;
color: @colortheme_alertify-red-color;
&:hover, &:active {
background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-red, 10%), lighten(@colortheme_alertify-red, 10%));
}
}
&.safe {
background-color: @colortheme_alertify-green;
border-color: @colortheme_alertify-green-border;
color: @colortheme_alertify-green-color;
&:hover, &:active {
background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-green, 10%), lighten(@colortheme_alertify-green, 10%));
}
}
&.primary {
background-color: @colortheme_alertify-primary;
color: @colortheme_alertify-primary-text;
border-color: @colortheme_alertify-primary-border;
font-weight: bold;
&:hover, &:active {
background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-primary, 10%), lighten(@colortheme_alertify-primary, 10%));
}
}
&:hover, &:active {
background-color: contrast(@colortheme_modal-bg, darken(@colortheme_alertify-cancel, 10%), lighten(@colortheme_alertify-cancel, 10%));
}
&:focus {
//border: 1px dotted @alertify-base;
box-shadow: 0px 0px 5px @colortheme_alertify-primary;
outline: none;
}
&::-moz-focus-inner {
border: 0;
}
}
button.btn {
margin: 6px 4px;
}
nav {
text-align: right;
}
}
}
.alertify-logs {
position: fixed;
z-index: 99999; // alertify logs
&.bottom, &:not(.top) {
bottom: 16px;
/* // Bottom left placement. Default. Use for transitions.
&.left, &:not(.right) {
> * {
}
}
// Top right placement
&.right {
> * {
}
}*/
}
// All left positions.
&.left, &:not(.right) {
left: 16px;
> * {
float: left;
transform: translate3d(0, 0, 0);
height: auto;
&.show {
left: 0;
}
&, &.hide {
left: -110%;
}
}
}
&.right {
right: 16px;
> * {
float: right;
transform: translate3d(0, 0, 0);
&.show {
right: 0;
opacity: 1;
}
&, &.hide {
right: -110%;
opacity: 0;
}
}
}
&.top {
top: 0;
/* // Top left placement, use for transitions.
&.left, &:not(.right) {
> * {
}
}
// Top right placement, use for transitions
&.right {
> * {
}
}*/
}
> * {
box-sizing: border-box;
transition: all .4s cubic-bezier(.25, .8, .25, 1);
position: relative;
clear: both;
backface-visibility: hidden;
perspective: 1000;
& {
max-height: 0;
margin: 0;
padding: 0;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
&.show {
margin-top: @alertify_padding-base;
opacity: 1;
max-height: 1000px;
padding: @alertify_padding-base;
pointer-events: auto;
}
}
}
div.wide {
.cp-share-columns {
display: flex;
flex-flow: row;
& > .cp-share-column {
width: 50%;
padding: 0 10px;
}
}
.cp-share-grid, .cp-share-list {
.avatar_main(50px);
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.cp-share-list {
margin-bottom: 15px;
}
.cp-share-grid {
max-height: 225px;
overflow-x: auto;
}
.cp-recent-only {
.cp-share-grid, .cp-share-grid-filter {
display: none;
}
}
.cp-share-grid-filter {
display: flex;
input {
flex: 1;
min-width: 0;
margin-bottom: 0 !important;
&::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
color: @colortheme_alertify-primary-text;
opacity: 1; /* Firefox */
}
}
margin-bottom: 15px;
&:empty {
margin: 0;
display: none;
}
}
.cp-share-friend {
width: 70px;
height: 70px;
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
padding: 5px;
margin-bottom: 6px;
cursor: default;
transition: order 0.5s, background-color 0.5s;
margin-top: 1px;
.tools_unselectable();
&.cp-selected {
background-color: @colortheme_alertify-primary;
color: @colortheme_alertify-primary-text;
order: -1 !important;
}
.cp-share-friend-name {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
width: 100%;
text-align: center;
}
border: 1px solid @colortheme_alertify-primary;
&.cp-fake-friend {
visibility: hidden;
}
}
.cp-ownership {
& > label {
font-weight: bold;
}
}
}
}