@import (once) "../../customize/src/less2/include/browser.less"; @import (once) "../../customize/src/less2/include/toolbar.less"; @import (once) "../../customize/src/less2/include/markdown.less"; @import (once) '../../customize/src/less2/include/fileupload.less'; @import (once) '../../customize/src/less2/include/alertify.less'; @import (once) '../../customize/src/less2/include/tokenfield.less'; @import (once) '../../customize/src/less2/include/tools.less'; @import (once) '../../customize/src/less2/include/avatar.less'; .toolbar_main(); .fileupload_main(); .alertify_main(); .tokenfield_main(); @poll-fore: #555; @poll-th-bg: #005bef; @poll-th-fg: #fff; @poll-th-user-bg: darken(@poll-th-bg, 10%); @poll-editing: lighten(@poll-th-bg, 10%); @poll-winner: darken(@poll-th-bg, 15%); @poll-td-bg: @poll-th-bg; @poll-td-fg: @poll-th-fg; @poll-help-bg: #bbffbb; // lightgreen @poll-uncommitted-cell: #eee; @poll-uncommitted-bg: #ddd; //lighten(@poll-th-bg, 50%); @poll-uncommitted-text: black; @poll-placeholder: #666; @poll-border-color: #555; @poll-cover-color: #000; @poll-fg: #000; @poll-option-yellow: #ff5; @poll-option-gray: #ccc; .bottom-left(@s: 5px) { border-bottom-left-radius: @s; } .top-left(@s: 5px) { border-top-left-radius: @s; } display: flex; flex-flow: column; overflow-x: hidden; #cp-app-poll-content { display: flex; flex: 1; min-height: 0; #cp-app-poll-form { flex: 1; overflow-y: auto; &.cp-app-poll-published { #cp-app-poll-create-option { display: none; } .cp-app-poll-table-remove[data-rt-id^="y"], .cp-app-poll-table-edit[data-rt-id^="y"] { display: none; } tr.cp-app-poll-table-uncommitted { display: none; } } } } input[type="text"], textarea { background-color: white; color: black; border: 0; } input[type="text"][disabled], textarea[disabled] { background-color: transparent; border: 0px; } // The placeholder color only seems to effect Safari when not set input[type="text"][disabled]::placeholder { //color: @poll-placeholder; opacity: 1; } table#cp-app-poll-table { margin: 0px; overflow: hidden; } #cp-app-poll-table-container { position: relative; padding: 30px 0; width: ~"calc(100% - 30px)"; } #cp-app-poll-table-container button { //display: none; border-radius: 0; border: 0; } #cp-app-poll-create-user { display: inline-flex; height: 24px; padding: 0; width: 50px; overflow: hidden; } #cp-app-poll-create-option { order: 3; display: inline-flex; width: 50px; height: 24px; padding: 0; } #cp-app-poll-table-scroll { overflow-y: hidden; overflow-x: auto; margin-left: ~"calc(25% + 30px)"; max-width: ~"calc(75% - 30px - 100px - 100px)"; width: auto; display: inline-block; } #cp-app-poll-description { &~ .CodeMirror { margin: auto; min-width: 80%; width: 80%; min-height: 200px; height: 200px; border: 1px solid black; .CodeMirror-placeholder { color: #777; } } } #cp-app-poll-description-published { display: none; padding: 15px; margin: auto; min-width: 80%; width: 80%; min-height: 7em; color: #000; border: 1px solid transparent; background-color: #eeeeee; font: @colortheme_app-font; text-align: left; media-tag > * { max-width: 100%; max-height: 20em; } } div.cp-app-poll-published { div.cp-app-poll-realtime { #cp-app-poll-description { display: none; &~ .CodeMirror { display: none; } } #cp-app-poll-description-published { display: block; &:empty { display: none; } } #cp-app-poll-nocomments { display: none; } #cp-app-poll-comments { display: block; } } } #cp-app-poll-help { width: 100%; margin: auto; padding: 20px 10%; background: @poll-help-bg; } // from cryptpad.less table { border-collapse: collapse; border-spacing: 0; margin: 20px; } tbody { //border: 1px solid @poll-border-color; * { box-sizing: border-box; } tr { text-align: center; } td { .tools_unselectable(); border-right: 1px solid @poll-border-color; padding: 12px; padding-top: 0px; padding-bottom: 0px; &:last-child { border-right: none; } } } div.cp-app-poll-realtime { display: block; max-height: 100%; max-width: 100%; input { &[type="text"] { height: 1em; margin: 0px; } } > textarea { width: 50%; height: 15vh; } padding: 0px; margin: 0px; .cp-app-poll-table-scrolled { tr td:last-child { right: 0; } tr td:nth-last-child(2) { right: 100px; } } table { border-collapse: collapse; width: ~"calc(100% - 1px)"; .cp-app-poll-table-editing { background-color: @poll-editing; } .cp-app-poll-table-uncommitted { .cp-app-poll-table-cover { background-color: @poll-uncommitted-cell !important; } div.cp-app-poll-table-text-cell { background-color: @poll-uncommitted-bg !important; color: @poll-uncommitted-text !important; } text-align: center; background-color: @poll-uncommitted-bg !important; color: @poll-uncommitted-text !important; } tr { height: 28px; /* Options */ td:first-child { position:absolute; left: 30px; top: auto; width: 25%; } /* Uncommitted column */ td:nth-last-child(2) { position: absolute; top: auto; width: 100px; min-width: unset !important; height: auto !important; } /* Results */ td:last-child { color: @poll-th-fg; position:absolute; top: auto; margin-left: 100px; width: 100px; min-width: unset !important; background-color: @poll-th-bg; } td { padding: 0px; margin: 0px; div.cp-app-poll-table-text-cell { padding: 0px; margin: 0px; height: 100%; display: flex; align-items: center; .cp-app-poll-table-remove { order: 1; } .cp-app-poll-table-edit { order: 3; } input { order: 2; flex: 1; height: 100%; border: 0px; margin: 2px; &[disabled] { background-color: transparent; color: @poll-td-fg; //font-weight: bold; } } } &.cp-app-poll-table-checkbox-cell { margin: 0px; padding: 0px; height: 100%; min-width: 100px; div.cp-app-poll-table-checkbox-contain { display: inline-block; height: 100%; width: 100%; position: relative; label { background-color: transparent; display: block; position: absolute; top: 0px; left: 0px; height: 100%; width: 100%; } input { &[type="number"] { &:not(.editable) { display: none; ~ .cp-app-poll-table-cover { line-height: 28px; display: block; font-weight: bold; height: 100%; display: block; color: @poll-cover-color; &:after { height: 100%; } } } } } input[type="number"][value="0"] { ~ .cp-app-poll-table-cover { background-color: @colortheme_cp-red; &:after { content: "✖"; } } } input[type="number"][value="1"] { ~ .cp-app-poll-table-cover { background-color: @colortheme_cp-green; &:after { content: "✔"; } } } input[type="number"][value="2"] { ~ .cp-app-poll-table-cover { background-color: @poll-option-yellow; &:after { content: "~"; } } } input[type="number"][value="3"] { ~ .cp-app-poll-table-cover { background-color: @poll-option-gray; &:after { content: "?"; } } } } } } } input { &[type="text"] { height: auto; width: 80%; } } span { .tools_unselectable(); } thead { height: 52px; tr { height: 52px; } td { padding: 0px 5px; background: @poll-th-bg; color: @poll-th-fg; &:not(:last-child) { border-right: 1px solid rgba(255,255,255,0.2); } &:last-child { height: 52px; line-height: 52px; text-align: center; } &:nth-last-child(2) { border-right: 1px solid @poll-border-color; } //text-align: center; &.cp-app-poll-table-own { background: @poll-th-user-bg; .cp-app-poll-table-lock { cursor: default; } } .cp-app-poll-table-buttons { display: flex; justify-content: space-between; flex-wrap: wrap; align-items: center; span { cursor: pointer; width: 1em; text-align: center; } .cp-app-poll-table-bookmark { color: darken(@poll-th-fg, 30%); &.cp-app-poll-table-bookmark-full { color: @poll-th-fg; } } } input { &[type="text"] { overflow: hidden; text-overflow: ellipsis; break-after: always; width: ~"calc(100% - 2px)"; // borders... box-sizing: border-box; padding: 1px 5px; margin: 1px; &[disabled] { color: @poll-th-fg; } } } } } tbody { td:first-child { background: @poll-td-bg; color: @poll-td-fg; } td.cp-app-poll-table-winner { background-color: @poll-winner; &:last-child { font-weight: bold; } } .cp-app-poll-table-text-cell { input[type="text"] { width: ~"calc(100% - 50px)"; padding: 0 0.5em; } .cp-app-poll-table-edit { float:right; margin: 2px 10px 0 0; } .cp-app-poll-table-remove { float: left; margin: 2px 0 0 10px; } } tr:not(:first-child) { td:not(:first-child) { label { border-top: 1px solid @poll-border-color; } } } } .cp-app-poll-table-edit { //color: @poll-cover-color; cursor: pointer; float: left; margin-left: 10px; } thead { tr { th { input[type="text"][disabled] { background-color: transparent; color: @poll-fore; font-weight: bold; } .cp-app-poll-table-remove { cursor: pointer; font-size: 20px; } } } } tbody { tr { td { } } } tfoot { display: none; } } #cp-app-poll-nocomments { color: #999; text-align: center; margin: 20px; font: @colortheme_app-font; } #cp-app-poll-comments { width: 50%; margin: 20px auto; min-width: 400px; padding-bottom: 5px; display: none; button { border-radius: 0; } #cp-app-poll-comments-add { input, textarea { border: 1px solid black; width: 90%; margin: 5px 5%; } input { padding: 5px; height: 26px; &[disabled] { background: #eee; } } textarea { padding: 5px; height: 8em; line-height: 1.5em; } button { padding: 10px; } text-align: center; } #cp-app-poll-comments-list { .cp-app-poll-comments-list-el { width: 90%; margin: 5px 5%; } .cp-app-poll-comments-list-msg { display: flex; background: #eee; padding: 5px 10px; .cp-app-poll-comments-list-msg-text { flex: 1; white-space: pre; } .cp-app-poll-comments-list-msg-actions { button { padding: 0; width: 25px; line-height: 20px; } } } .cp-app-poll-comments-list-data { background: #ddd; padding: 5px 10px; display: flex; align-items: center; .cp-app-poll-comments-list-data-name { margin-left: 10px; flex: 1; } .cp-app-poll-comments-list-data-avatar { .avatar_main(30px); } } } } } .btn { display: inline-flex; align-items: center; justify-content: center; }