infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

move alertify stuff

Browse Source
pull/1/head
Pierre Bondoerffer 7 years ago
parent 0d1f19f5d4
commit 4018c7e0a6
No known key found for this signature in database
GPG Key ID: C0C7C0C5063F2236
8 changed files with 341 additions and 324 deletions
Show Stats Download Patch File Download Diff File

282
customize.dist/src/less/alertify.less
Unescape Escape View File

@ -1,282 +0,0 @@
@import "./variables.less";
/* Logs are shown to inform the user that something has happened
They are only displayed briefly
*/
.alertify-logs {
@media print {
visibility: hidden;
}
> * {
padding: @padding-base @padding-base * 4;
color: @alertify-fore;
font-weight: bold;
font-size: large;
box-shadow: @box-shadow;
border-radius: @border-radius;
&, &.default {
// FIXME
background: rgba(0, 0, 0, .8);
}
&.error {
background: @danger-color;
}
&.success {
background: @success-color;
color: @success-fore;
}
}
}
.alertify {
position: fixed;
background-color: @alertify-bg;
color: @alertify-fg;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 99999;
&.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;
}
.dialog, .alert {
.bright {
color: @light-base;
}
& > div {
background-color: @alertify-dialog-bg;
border-radius: 5px;
&.half {
width: 50%;
@media (max-width: @media-medium-screen) {
width: 100%;
}
}
}
width: 100%;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
> * {
width: 30%;
width: 500px;
max-width: 95%;
margin: 0 auto;
text-align: center;
padding: @padding-base;
background: #fff;
// FIXME
box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084);
}
.msg {
padding: @padding-base;
margin-bottom: @padding-base;
margin: 0;
text-align: left;
}
input:not(.form-control){
background-color: @alertify-input-bg;
color: @alertify-input-fg;
border: 0px;
border-radius: 5px;
margin-bottom: 15px;
width: 100%;
font-size: 100%;
padding: @padding-base;
&:focus {
//outline-offset: -2px;
}
}
nav {
text-align: right;
button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
background-color: @alertify-btn-bg;
box-sizing: border-box;
position: relative;
outline: 0;
border: 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;
color: @alertify-btn-fg;
border: 1px solid @alertify-base;
border-radius: 5px;
&.safe, &.danger {
color: @old-base;
white-space: normal;
font-weight: bold;
}
&.danger {
background-color: @cp-red;
&:hover, &:active {
background-color: lighten(@cp-red, 5%);
}
}
&.safe {
background-color: @cp-green;
&:hover, &:active {
background-color: lighten(@cp-green, 10%);
}
}
&:hover, &:active {
background-color: @alertify-btn-bg-hover;
}
&:focus {
border: 1px dotted @alertify-base;
}
&::-moz-focus-inner {
border:0;
}
}
button.btn {
margin: 6px 4px;
}
}
}
}
.alertify-logs {
position: fixed;
z-index: 99999;
&.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: @padding-base;
opacity: 1;
max-height: 1000px;
padding: @padding-base;
pointer-events: auto;
}
}
}

4
customize.dist/src/less/cryptpad.less
Unescape Escape View File

@ -1,7 +1,7 @@
@import "./variables.less"; @import "./variables.less";
@import "./mixins.less"; @import "./mixins.less";
@import "./alertify.less"; @import "../less2/include/alertify.less";
@import "./bar.less"; @import "./bar.less";
@import "./loading.less"; @import "./loading.less";
@import "./dropdown.less"; @import "./dropdown.less";
@ -10,6 +10,8 @@
@toolbar-green: #5cb85c; @toolbar-green: #5cb85c;
.alertify_main();
html.cp, .cp body { html.cp, .cp body {
font-size: .875em; font-size: .875em;
background-color: @page-white; //@base; background-color: @page-white; //@base;

52
customize.dist/src/less/variables.less
Unescape Escape View File

@ -1,21 +1,21 @@
@import (once) '../less2/include/colortheme.less'; @import (once) '../less2/include/colortheme.less';
@import (once) '../less2/include/browser.less';
@base: #fff; //#f5f5f5; @base: @colortheme_base;
@dark-base: darken(@base, 20%); @dark-base: darken(@base, 20%);
@less-dark-base: darken(@base, 10%); @less-dark-base: darken(@base, 10%);
@light-base: lighten(@base, 20%); @light-base: @colortheme_light-base;
@less-light-base: lighten(@base, 10%); @less-light-base: lighten(@base, 10%);
@fore: #555; @fore: #555;
@old-base: #302B28; @old-base: @colortheme_old-base;
@old-fore: #fafafa; @old-fore: @colortheme_old-fore;
@main-font-size: 16px; @main-font-size: 16px;
@cp-green: #46E981; @cp-green: @colortheme_cp-green;
@cp-accent: lighten(@cp-green, 20%); @cp-accent: lighten(@cp-green, 20%);
//@cp-red: #FF0073; // remove red @cp-red: @colortheme_cp-red;
@cp-red: #FA5858; // remove red
@cp-outline: #444; @cp-outline: #444;
@cp-orange: #FE9A2E; @cp-orange: #FE9A2E;
@ -33,46 +33,18 @@
@cp-link-visited: @cp-light-blue; @cp-link-visited: @cp-light-blue;
@cp-link-hover: darken(@cp-light-blue, 10%); @cp-link-hover: darken(@cp-light-blue, 10%);
// alertify things
@box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
@padding-base: 12px;
@success-color: @cp-green;
@success-fore: @base;
@danger-color: @cp-red;
@text-color: rgba(0, 0, 0, .8);
@border-radius: 1px;
@alertify-fore: @old-fore;
@alertify-base: @old-base;
@alertify-dialog-bg: #444;
@alertify-dialog-fg: @old-fore;
@alertify-btn-fg: @old-fore;
@alertify-btn-bg: rgba(200, 200, 200, 0.05);
@alertify-btn-bg-hover: rgba(200, 200, 200, .15);
@alertify-bg: rgba(0, 0, 0, .3);
@alertify-fg: @old-fore;
@alertify-input-bg: @old-base;
@alertify-input-fg: @old-fore;
@slide-default-bg: #000; @slide-default-bg: #000;
@bg-loading: #222; @bg-loading: #222;
@color-loading: @old-fore; @color-loading: @old-fore;
@media-not-big: 800px; @media-not-big: @browser_media-not-big;
@media-not-small: 801px; @media-not-small: @browser_media-not-small;
@media-short-screen: 450px; @media-short-screen: @browser_media-short-screen;
@media-narrow-screen: 400px; @media-narrow-screen: @browser_media-narrow-screen;
@media-medium-screen: 600px; @media-medium-screen: @browser_media-medium-screen;
// Dropdown // Dropdown

304
customize.dist/src/less2/include/alertify.less
Unescape Escape View File

@ -0,0 +1,304 @@
@import (once) "./colortheme.less";
@import (once) "./browser.less";
.alertify_main () {
@alertify-fore: @colortheme_old-fore;
@alertify-base: @colortheme_old-base;
@alertify-dialog-bg: #444;
@alertify-dialog-fg: @colortheme_old-fore;
@alertify-btn-fg: @colortheme_old-fore;
@alertify-btn-bg: rgba(200, 200, 200, 0.05);
@alertify-btn-bg-hover: rgba(200, 200, 200, .15);
@alertify-bg: rgba(0, 0, 0, .3);
@alertify-fg: @colortheme_old-fore;
@alertify-input-bg: @colortheme_old-base;
@alertify-input-fg: @colortheme_old-fore;
@alertify_padding-base: 12px;
@alertify_box-shadow: 0 2px 5px 0 rgba(0,0,0,.2);
@alertify_border-radius: 1px;
// Logs to show that something has happened
// These show only once
.alertify-logs {
@media print {
visibility: hidden;
}
> * {
padding: @alertify_padding-base @alertify_padding-base * 4;
color: @alertify-fore;
font-weight: bold;
font-size: large;
box-shadow: @alertify_box-shadow;
border-radius: @alertify_border-radius;
&, &.default {
// FIXME
background: rgba(0, 0, 0, .8);
}
&.error {
background: @colortheme_cp-red;
}
&.success {
background: @colortheme_cp-green;
}
}
}
.alertify {
position: fixed;
background-color: @alertify-bg;
color: @alertify-fg;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
z-index: 99999;
&.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;
}
.dialog, .alert {
.bright {
color: @colortheme_light-base;
}
& > div {
background-color: @alertify-dialog-bg;
border-radius: 5px;
&.half {
width: 50%;
@media (max-width: @browser_media-medium-screen) {
width: 100%;
}
}
}
width: 100%;
margin: 0 auto;
position: relative;
top: 50%;
transform: translateY(-50%);
> * {
width: 30%;
width: 500px;
max-width: 95%;
margin: 0 auto;
text-align: center;
padding: @alertify_padding-base;
background: #fff;
// FIXME
box-shadow: 0 2px 4px -1px rgba(0,0,0,.14), 0 4px 5px 0 rgba(0,0,0,.098), 0 1px 10px 0 rgba(0,0,0,.084);
}
.msg {
padding: @alertify_padding-base;
margin-bottom: @alertify_padding-base;
margin: 0;
text-align: left;
}
input:not(.form-control){
background-color: @alertify-input-bg;
color: @alertify-input-fg;
border: 0px;
border-radius: 5px;
margin-bottom: 15px;
width: 100%;
font-size: 100%;
padding: @alertify_padding-base;
&:focus {
//outline-offset: -2px;
}
}
nav {
text-align: right;
button:not(.btn):not(.pure-button):not(.md-button):not(.mdl-button) {
background-color: @alertify-btn-bg;
box-sizing: border-box;
position: relative;
outline: 0;
border: 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;
color: @alertify-btn-fg;
border: 1px solid @alertify-base;
border-radius: 5px;
&.safe, &.danger {
color: @colortheme_old-base;
white-space: normal;
font-weight: bold;
}
&.danger {
background-color: @colortheme_cp-red;
&:hover, &:active {
background-color: lighten(@colortheme_cp-red, 5%);
}
}
&.safe {
background-color: @colortheme_cp-green;
&:hover, &:active {
background-color: lighten(@colortheme_cp-green, 10%);
}
}
&:hover, &:active {
background-color: @alertify-btn-bg-hover;
}
&:focus {
border: 1px dotted @alertify-base;
}
&::-moz-focus-inner {
border:0;
}
}
button.btn {
margin: 6px 4px;
}
}
}
}
.alertify-logs {
position: fixed;
z-index: 99999;
&.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;
}
}
}
}

9
customize.dist/src/less2/include/browser.less
Unescape Escape View File

@ -0,0 +1,9 @@
// These things are not for design but rather for working in different browser
// types and window sizes
@browser_media-not-big: 800px;
@browser_media-not-small: 801px;
@browser_media-short-screen: 450px;
@browser_media-narrow-screen: 400px;
@browser_media-medium-screen: 600px;

8
customize.dist/src/less2/include/colortheme.less
Unescape Escape View File

@ -2,6 +2,14 @@
@colortheme_link-color-visited: #005999; @colortheme_link-color-visited: #005999;
@colortheme_info-background: #fafafa; @colortheme_info-background: #fafafa;
@colortheme_old-base: #302B28;
@colortheme_old-fore: #fafafa;
@colortheme_base: #fff;
@colortheme_light-base: lighten(@colortheme_base, 20%);
@colortheme_cp-red: #FA5858; // remove red
@colortheme_cp-green: #46E981;
@colortheme_pad-bg: #1c4fa0; @colortheme_pad-bg: #1c4fa0;
@colortheme_pad-color: #fff; @colortheme_pad-color: #fff;

2
customize.dist/src/less2/pages/page-login.less
Unescape Escape View File

@ -1,8 +1,10 @@
@import (once) "../include/infopages.less"; @import (once) "../include/infopages.less";
@import (once) "../include/colortheme.less"; @import (once) "../include/colortheme.less";
@import (once) "../include/alertify.less";
.infopages_main(); .infopages_main();
.infopages_topbar(); .infopages_topbar();
.alertify_main();
.form-group { .form-group {
.extra { .extra {

2
customize.dist/src/less2/pages/page-register.less
Unescape Escape View File

@ -1,8 +1,10 @@
@import (once) "../include/infopages.less"; @import (once) "../include/infopages.less";
@import (once) "../include/colortheme.less"; @import (once) "../include/colortheme.less";
@import (once) "../include/alertify.less";
.infopages_main(); .infopages_main();
.infopages_topbar(); .infopages_topbar();
.alertify_main();
.cp-container { .cp-container {
.form-group { .form-group {

Write Preview
Loading…
Cancel
Save