Corner alerts

pull/1/head
David Benqué 4 years ago
parent c92b0cf5b9
commit e39ad8afdc

@ -210,8 +210,9 @@
@cp_avatar-fg: @cryptpad_text_col; @cp_avatar-fg: @cryptpad_text_col;
// Corner // Corner
@cp_corner-primary: @cryptpad_color_blue; @cp_corner-bg: @cryptpad_color_grey_800;
@cp_corner-secondary: @cryptpad_color_black; // XXX @cp_corner-fg: @cryptpad_color_brand_300;
@cp_corner-text: @cryptpad_text_col;
// Pad Creation Screen // Pad Creation Screen
@cp_creation-bg: @cryptpad_color_grey_800; @cp_creation-bg: @cryptpad_color_grey_800;

@ -210,8 +210,9 @@
@cp_avatar-fg: @cryptpad_text_col; @cp_avatar-fg: @cryptpad_text_col;
// Corner // Corner
@cp_corner-primary: @cryptpad_color_blue; @cp_corner-bg: @cryptpad_color_grey_100;
@cp_corner-secondary: @cryptpad_color_white; @cp_corner-fg: @cryptpad_color_brand;
@cp_corner-text: @cryptpad_text_col;
// Pad Creation Screen // Pad Creation Screen
@cp_creation-bg: @cryptpad_color_white; @cp_creation-bg: @cryptpad_color_white;

@ -4,10 +4,11 @@
--LessLoader_require: LessLoader_currentFile(); --LessLoader_require: LessLoader_currentFile();
}; };
& { & {
@corner-blue: @cp_corner-primary; @corner-bg: @cp_corner-bg;
@corner-white: @cp_corner-secondary; @corner-fg: @cp_corner-fg;
@corner-blue-alt: darken(@corner-blue, 10%); @corner-text: @cp_corner-text;
@corner-white-alt: darken(@corner-white, 10%); @corner-bg-alt: darken(@corner-bg, 10%);
@corner-fg-alt: darken(@corner-fg, 10%);
@keyframes appear { @keyframes appear {
@ -33,16 +34,18 @@
bottom: 10px; bottom: 10px;
width: 350px; width: 350px;
padding: 10px; padding: 10px;
background-color: fade(@corner-blue, 95%); background-color: fade(@corner-bg, 95%);
color: @corner-white; color: @corner-text;
z-index: 9999; z-index: 9999;
transform-origin: bottom right; transform-origin: bottom right;
animation: appear 0.8s ease-in-out; animation: appear 0.8s ease-in-out;
//box-shadow: 0 0 10px 0 @corner-blue; border: 1px solid @corner-fg;
box-shadow: 0 0 10px 0 @cp_shadow-color;
&.cp-corner-alt { &.cp-corner-alt {
background-color: fade(@corner-white, 95%); background-color: fade(@corner-bg, 95%);
color: @corner-blue; color: @corner-fg;
border-color: @corner-fg;
} }
h1, h2, h3 { h1, h2, h3 {
@ -66,14 +69,16 @@
font-size: 1.1em; font-size: 1.1em;
} }
&:hover { &:hover {
color: @corner-white-alt; color: @corner-fg-alt;
} }
} }
&.cp-corner-alt { &.cp-corner-alt {
.cp-corner-dontshow { .cp-corner-dontshow {
display: inline-block;
color: @corner-text;
&:hover { &:hover {
color: @corner-blue-alt; color: @corner-fg;
} }
} }
} }
@ -89,63 +94,44 @@
} }
.cp-corner-footer, .cp-corner-text { .cp-corner-footer, .cp-corner-text {
a { a {
color: @corner-white; color: @corner-fg;
text-decoration: underline; text-decoration: underline;
&:hover { &:hover {
color: @corner-white-alt; color: @corner-fg-alt;
} }
} }
} }
&.cp-corner-alt a { &.cp-corner-alt a {
color: @corner-blue; color: @corner-text;
&:hover { &:hover {
color: @corner-blue-alt; color: @corner-fg;
} }
} }
button { button {
padding: 5px; padding: 5px;
color: @corner-white; color: @corner-fg;
&:not(:first-child) { &:not(:first-child) {
margin-left: 10px; margin-left: 10px;
} }
outline: none;
text-transform: uppercase; text-transform: uppercase;
border: 1px solid @corner-white; border: 1px solid @corner-fg;
.fa, .cptools { .fa, .cptools {
margin-right: 0.3em; margin-right: 0.3em;
} }
&.cp-corner-primary { &.cp-corner-primary {
background-color: @corner-white; background-color: @corner-fg;
color: @corner-blue; color: @corner-bg;
&:hover { &:hover {
background-color: @corner-white-alt; background-color: @corner-fg-alt;
border-color: @corner-white-alt; border-color: @corner-fg-alt;
} }
} }
&.cp-corner-cancel { &.cp-corner-cancel {
background-color: @corner-blue; background-color: @corner-bg;
color: @corner-white; color: @corner-fg;
&:hover { &:hover {
background-color: @corner-blue-alt; background-color: @corner-bg-alt;
}
}
}
&.cp-corner-alt button {
border-color: @corner-blue;
&.cp-corner-primary {
background-color: @corner-blue;
color: @corner-white;
&:hover {
background-color: @corner-blue-alt;
border-color: @corner-blue-alt;
}
}
&.cp-corner-cancel {
background-color: @corner-white;
color: @corner-blue;
&:hover {
background-color: @corner-white-alt;
} }
} }
} }

Loading…
Cancel
Save