Rounded creation screen

master
David Benqué 3 years ago
parent df0c8f3eb4
commit acda74d034

@ -234,6 +234,7 @@
// Pad Creation Screen // Pad Creation Screen
@cp_creation-bg: @cryptpad_color_grey_800; @cp_creation-bg: @cryptpad_color_grey_800;
@cp_creation-fg: @cryptpad_text_col; @cp_creation-fg: @cryptpad_text_col;
@cp_creation-template: @cryptpad_color_grey_700;
@cp_creation-button-bg: @cryptpad_color_brand; @cp_creation-button-bg: @cryptpad_color_brand;
@cp_creation-button-fg: @cryptpad_color_white; @cp_creation-button-fg: @cryptpad_color_white;
@cp_creation-error-bg: @cryptpad_color_blue; @cp_creation-error-bg: @cryptpad_color_blue;

@ -233,6 +233,7 @@
// Pad Creation Screen // Pad Creation Screen
@cp_creation-bg: @cryptpad_color_white; @cp_creation-bg: @cryptpad_color_white;
@cp_creation-fg: @cryptpad_text_col; @cp_creation-fg: @cryptpad_text_col;
@cp_creation-template: @cryptpad_color_grey_100;
@cp_creation-button-bg: @cryptpad_color_brand; @cp_creation-button-bg: @cryptpad_color_brand;
@cp_creation-button-fg: @cryptpad_color_white; @cp_creation-button-fg: @cryptpad_color_white;
@cp_creation-error-bg: @cryptpad_color_blue; @cp_creation-error-bg: @cryptpad_color_blue;
@ -324,7 +325,7 @@
@cp_shadow-color: fade(@cryptpad_color_black, 30%); @cp_shadow-color: fade(@cryptpad_color_black, 30%);
// Apps // Apps
@cp_app-bg: @cryptpad_color_grey_100; @cp_app-bg: @cryptpad_color_white;
@cp_app-fg: @cryptpad_text_col; @cp_app-fg: @cryptpad_text_col;
// Accounts // Accounts

@ -3,6 +3,7 @@
@import (reference) "./tools.less"; @import (reference) "./tools.less";
@import (reference) './icon-colors.less'; @import (reference) './icon-colors.less';
@import (reference) "./avatar.less"; @import (reference) "./avatar.less";
@import (reference) "./variables.less";
.creation_vars( .creation_vars(
@bg-color: @colortheme_apps[default] @bg-color: @colortheme_apps[default]
@ -63,6 +64,7 @@
width: 700px; width: 700px;
max-width: 90vw; max-width: 90vw;
height: 500px; height: 500px;
border-radius: @variables_radius_L;
max-height: ~"calc(100vh - 20px)"; max-height: ~"calc(100vh - 20px)";
margin: 0px; margin: 0px;
flex-shrink: 0; flex-shrink: 0;
@ -131,6 +133,7 @@
color: @cp_creation-button-fg; color: @cp_creation-button-fg;
margin: 3px 10px; margin: 3px 10px;
border: none; border: none;
border-radius: @variables_radius;
cursor: pointer; cursor: pointer;
outline: none; outline: none;
text-transform: uppercase; text-transform: uppercase;
@ -256,6 +259,7 @@
} }
select { select {
margin-right: 5px; margin-right: 5px;
border-radius: @variables_radius;
} }
} }
&.active { &.active {
@ -325,11 +329,12 @@
max-height: 159px; max-height: 159px;
align-items: center; align-items: center;
.cp-creation-template-element { .cp-creation-template-element {
box-shadow: 2px 2px 7px @cp_shadow-color; box-shadow: 0px 0px 5px 1px #00000030; // XXX
width: 300px; width: 300px;
max-width: calc(100% - 10px); max-width: calc(100% - 10px);
padding: 2px; padding: 5px;
margin: 5px; margin: 5px;
border-radius: @variables_radius;
display: inline-flex; display: inline-flex;
box-sizing: border-box; box-sizing: border-box;
@ -337,7 +342,7 @@
text-align: left; text-align: left;
line-height: 1em; line-height: 1em;
cursor: pointer; cursor: pointer;
background-color: @cp_creation-template;
color: @creation-color; color: @creation-color;
color: var(--creation-color); color: var(--creation-color);
border: 1px solid transparent; border: 1px solid transparent;

Loading…
Cancel
Save