diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index c4a82918f..1c71d4f05 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -77,6 +77,15 @@ #C9FFFE, #C8D6FF, #E4CAFF; +@cp_palette-dark: + darken(desaturate(extract(@cp_palette, 1),60%), 60%), + darken(desaturate(extract(@cp_palette, 2),60%), 60%), + darken(desaturate(extract(@cp_palette, 3),55%), 60%), + darken(desaturate(extract(@cp_palette, 4),55%), 70%), + darken(desaturate(extract(@cp_palette, 5),60%), 65%), + darken(desaturate(extract(@cp_palette, 6),60%), 70%), + darken(desaturate(extract(@cp_palette, 7),60%), 60%), + darken(desaturate(extract(@cp_palette, 8),70%), 60%); @cryptpad_color_link:@cryptpad_color_brand_300; @@ -363,15 +372,7 @@ @cp_kanban-add-hover: fade(@cryptpad_color_black, 10%); @cp_kanban-trash-bg: @cryptpad_color_warn_red; @cp_kanban-color0: @cryptpad_color_grey_600; -@cp_kanban-colors: - darken(desaturate(extract(@cp_palette, 1),60%), 60%), - darken(desaturate(extract(@cp_palette, 2),60%), 60%), - darken(desaturate(extract(@cp_palette, 3),55%), 60%), - darken(desaturate(extract(@cp_palette, 4),55%), 70%), - darken(desaturate(extract(@cp_palette, 5),60%), 65%), - darken(desaturate(extract(@cp_palette, 6),60%), 70%), - darken(desaturate(extract(@cp_palette, 7),60%), 60%), - darken(desaturate(extract(@cp_palette, 8),70%), 60%); +@cp_kanban-colors: @cp_palette-dark; // Notifications @cp_notif-hover: fade(@cryptpad_color_black, 10%); @@ -448,3 +449,5 @@ @cp_form-poll-maybe: @cryptpad_color_grey_700; @cp_form-poll-yes-color: @cryptpad_color_green; @cp_form-invalid: @cryptpad_color_light_red; +@cp_form-palette: @cp_palette-dark; +@cp_form-palette2: @cp_palette; diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 0bc7fbdab..dd6115ea1 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -76,6 +76,15 @@ #C9FFFE, #C8D6FF, #E4CAFF; +@cp_palette-dark: + darken(extract(@cp_palette, 1), 50%), + darken(extract(@cp_palette, 2), 51%), + darken(extract(@cp_palette, 3), 52%), + darken(extract(@cp_palette, 4), 61%), + darken(extract(@cp_palette, 5), 57%), + darken(extract(@cp_palette, 6), 65%), + darken(extract(@cp_palette, 7), 50%), + darken(extract(@cp_palette, 8), 50%); @cryptpad_color_link: @cryptpad_color_brand; @@ -439,3 +448,5 @@ @cp_form-poll-maybe: @cryptpad_color_grey_300; @cp_form-poll-yes-color: @cryptpad_color_green; @cp_form-invalid: @cryptpad_color_red; +@cp_form-palette: @cp_palette; +@cp_form-palette2: @cp_palette-dark; diff --git a/www/form/app-form.less b/www/form/app-form.less index b19298e49..eb3945481 100644 --- a/www/form/app-form.less +++ b/www/form/app-form.less @@ -18,13 +18,18 @@ color: @cryptpad_text_col; background-color: @cp_app-bg; + .alert { + font-size: 1rem; + &.alert-info { + color: @cryptpad_text_col !important; + } + } + @palette0: @cp_kanban-color0; // Default bg color for header - @kanban-colors: @cp_kanban-colors; - .kanban-colors(@kanban-colors; @index) when (@index > 0){ - // loop through the @colors - .kanban-colors(@kanban-colors; (@index - 1)); - @color: extract(@kanban-colors, @index); - // make a numbered class selector for each color + @form-colors: @cp_form-palette; + .form-colors(@form-colors; @index) when (@index > 0){ + .form-colors(@form-colors; (@index - 1)); + @color: extract(@form-colors, @index); .cp-form-palette-color@{index}{ &.cp-form-palette { background-color: @color !important; @@ -36,8 +41,38 @@ } } } - // call the loop - .kanban-colors(@kanban-colors; length(@kanban-colors)); + .form-colors(@form-colors; length(@form-colors)); + + @form-colors2: @cp_form-palette2; + .checkmark-colors(@form-colors2; @index) when (@index > 0){ + .checkmark-colors(@form-colors2; (@index - 1)); + @color: extract(@form-colors2, @index); + &.cp-form-palette-color@{index}{ + .cp-form-block { + .cp-radio input:checked ~ .cp-radio-mark, .cp-checkmark input:checked ~ .cp-checkmark-mark { + background-color: @color !important; + border-color: @color !important; + } + input, textarea { + border-color: @color !important; + } + } + .cp-form-block-question-text { + color: @color !important; + } + .cp-form-type-sort:hover { + color: @color !important; + .cp-form-sort-order { + border-color: @color !important; + } + } + .cp-form-input-block { + input { color: @color !important; } + border-bottom-color: @color !important; + } + } + } + .checkmark-colors(@form-colors2; length(@form-colors2)); .cp-form-palette { &.cp-form-palette-nocolor { @@ -196,20 +231,32 @@ } .cp-form-color-container { - display: flex; - justify-content: space-between; - .cp-form-palette { - display: inline-block; - border-radius: 50%; - height: 30px; - width: 30px; - text-align: center; - line-height: 30px; - color: @cp_kanban-fg; - border: 1px solid fade(@cp_kanban-fg, 40%); - cursor: pointer; + & > div { + display: flex; + justify-content: space-between; + margin-top: 5px; + &:last-child { + justify-content: space-evenly; + } + .cp-form-palette { + display: inline-block; + border-radius: 50%; + height: 30px; + width: 30px; + text-align: center; + line-height: 30px; + color: @cp_kanban-fg; + border: 1px solid fade(@cp_kanban-fg, 40%); + cursor: pointer; + } } } + + .cp-form-response-msg-container button { + white-space: initial; + line-height: 25px; + padding: 5.5px 6px; + } } div.cp-form-filler-container { width: 300px; diff --git a/www/form/inner.js b/www/form/inner.js index 984c87059..1cf7356ce 100644 --- a/www/form/inner.js +++ b/www/form/inner.js @@ -4230,19 +4230,27 @@ define([ refreshEndDate(); Messages.form_colors = "Color theme"; // XXX - var colorContainer = h('div.cp-form-color-container'); + var colorLine1 = h('div'); + var colorLine2 = h('div'); + var colorContainer = h('div.cp-form-color-container', [ + colorLine1, + colorLine2 + ]); var colorTheme = h('div.cp-form-color-theme-container', [ h('span', Messages.form_colors), colorContainer ]); var $colors = $(colorContainer); var refreshColorTheme = function () { - $colors.empty(); + $(colorLine1).empty(); + $(colorLine2).empty(); var palette = ['nocolor']; for (var i=1; i<=8; i++) { palette.push('color'+i); } var color = content.answers.color || 'nocolor'; var selectedColor = color; - palette.forEach(function (_color) { + var currentContainer = colorLine1; + palette.forEach(function (_color, i) { + if (i === 5) { currentContainer = colorLine2; } var $color = $(h('span.cp-form-palette.fa')); $color.addClass('cp-form-palette-'+(_color || 'nocolor')); if (selectedColor === _color) { $color.addClass('fa-check'); } @@ -4264,7 +4272,7 @@ define([ }); $body.addClass('cp-form-palette-'+_color); }); - }).appendTo($colors); + }).appendTo(currentContainer); }); }; refreshColorTheme();