557 lines
16 KiB
Plaintext
557 lines
16 KiB
Plaintext
@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-light-bg: fade(@alertify-fore, 25%);
|
|
@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: 100001; // alertify logs should be in front of alertify modals
|
|
@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;
|
|
|
|
.cp-inline-alert-text {
|
|
flex: 1;
|
|
}
|
|
|
|
&.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 {
|
|
& > 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;
|
|
:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
.alertify-tabs {
|
|
max-height: 100%;
|
|
display: flex;
|
|
flex-flow: column;
|
|
.alertify-tabs-titles {
|
|
height: 40px;
|
|
display: flex;
|
|
border-bottom: 1px solid @alertify-fore;
|
|
margin-bottom: 10px;
|
|
box-sizing: content-box;
|
|
span {
|
|
font-size: 20px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
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;
|
|
&:hover {
|
|
background-color: @alertify-light-bg;
|
|
}
|
|
}
|
|
span.alertify-tabs-active {
|
|
background-color: @alertify-fore;
|
|
border-left: 1px solid @alertify-fore;
|
|
border-right: 1px solid @alertify-fore;
|
|
color: @alertify-base;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
::placeholder { /* Chrome, Firefox, Opera, Safari 10.1+ */
|
|
color: @cryptpad_color_grey;
|
|
opacity: 1; /* Firefox */
|
|
}
|
|
:-ms-input-placeholder { /* Internet Explorer 10-11 */
|
|
color: @cryptpad_color_grey;
|
|
}
|
|
::-ms-input-placeholder { /* Microsoft Edge */
|
|
color: @cryptpad_color_grey;
|
|
}
|
|
input:not(.form-control), textarea {
|
|
background-color: @alertify-input-fg;
|
|
color: @cryptpad_text_col;
|
|
border: 1px solid @alertify-input-bg;
|
|
margin-bottom: @alertify_padding-base;
|
|
width: 100%;
|
|
font-size: 100%;
|
|
padding: @alertify_padding-base;
|
|
&[readonly] {
|
|
background-color: @alertify-light-bg;
|
|
color: @cryptpad_text_col;
|
|
border-color: @alertify-light-bg;
|
|
}
|
|
}
|
|
|
|
textarea {
|
|
overflow: hidden;
|
|
padding: 8px;
|
|
&[readonly] {
|
|
resize: none;
|
|
}
|
|
}
|
|
|
|
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 @alertify-btn-fg;
|
|
|
|
&.no-margin {
|
|
margin: 0;
|
|
}
|
|
|
|
&:hover, &:active {
|
|
background-color: @alertify-light-bg;
|
|
}
|
|
|
|
&.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%));
|
|
}
|
|
}
|
|
|
|
&.cancel {
|
|
border-color: @colortheme_alertify-cancel-border;
|
|
color: @colortheme_alertify-cancel-border;
|
|
&:hover, &:hover {
|
|
background-color: fade(@colortheme_alertify-cancel-border, 25%);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
&:focus {
|
|
//border: 1px dotted @alertify-base;
|
|
box-shadow: 0px 0px 5px @colortheme_alertify-primary;
|
|
outline: none;
|
|
}
|
|
&::-moz-focus-inner {
|
|
border: 0;
|
|
}
|
|
|
|
&:disabled {
|
|
cursor: not-allowed !important;
|
|
background-color: @colortheme_alertify-disabled;
|
|
color: @colortheme_alertify-disabled-text;
|
|
border-color: @colortheme_alertify-disabled-border;
|
|
&:hover, &:active {
|
|
background-color: @colortheme_alertify-disabled;
|
|
}
|
|
}
|
|
}
|
|
|
|
nav {
|
|
padding: @alertify_padding-base;
|
|
text-align: right;
|
|
button {
|
|
margin: 0px !important;
|
|
&:not(:first-child) {
|
|
margin-left: @alertify_padding-base !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.alertify-logs {
|
|
|
|
position: fixed;
|
|
z-index: 100001; // alertify logs (just in front of alertify modals
|
|
|
|
&.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 {
|
|
div.alertify-tabs {
|
|
p.msg:not(:last-child) {
|
|
border-bottom: 1px solid @alertify-fore;
|
|
}
|
|
}
|
|
.cp-share-columns {
|
|
display: flex;
|
|
flex-flow: row;
|
|
|
|
& > .cp-share-column {
|
|
width: 50%;
|
|
padding: 0 10px;
|
|
position: relative;
|
|
&.contains-nav {
|
|
nav {
|
|
position: relative;
|
|
bottom: 0;
|
|
right: 0;
|
|
button {
|
|
margin: 0 !important;
|
|
&:not(:first-child) {
|
|
margin-left: 8px !important;
|
|
margin-top: 6px !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&:first-child {
|
|
border-right: 1px solid @alertify-fore;
|
|
}
|
|
}
|
|
}
|
|
.cp-ownership {
|
|
& > label {
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
.cp-share-column {
|
|
.cp-usergrid-grid {
|
|
max-height: 225px;
|
|
overflow-x: auto;
|
|
}
|
|
}
|
|
// Bootstrap Alerts
|
|
.alert {
|
|
margin: 0px 0px @alertify_padding-base 0px;
|
|
font-size: 12px;
|
|
padding: 5px;
|
|
border-radius: 0px;
|
|
i {
|
|
margin-right: 10px;
|
|
}
|
|
&.alert-primary {
|
|
background-color: @alertify-base;
|
|
color: @alertify-fg;
|
|
border-color: @alertify-fg;
|
|
a {
|
|
color: @alertify-fg;
|
|
text-decoration: underline;
|
|
}
|
|
}
|
|
&.dismissable {
|
|
display: flex;
|
|
align-items: center;
|
|
span.fa-times {
|
|
font-size: @colortheme_app-font-size;
|
|
margin-left: 20px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|