cryptpad/www/poll/app-poll.less

677 lines
22 KiB
Plaintext

@import (reference) '../../customize/src/less2/include/tools.less';
@import (reference) '../../customize/src/less2/include/avatar.less';
@import (reference) "../../customize/src/less2/include/framework.less";
@import (reference) "../../customize/src/less2/include/markdown.less";
&.cp-app-poll {
.framework_main(
@bg-color: @colortheme_poll-bg,
@warn-color: @colortheme_poll-warn,
@color: @colortheme_poll-color
);
@poll-fore: #555;
@poll-th-bg: @colortheme_poll-th-bg;
@poll-th-fg: @colortheme_poll-th-fg;
@poll-th-user-bg: darken(@poll-th-bg, 10%);
@poll-editing: lighten(@poll-th-bg, 10%);
@poll-winner: darken(@poll-th-bg, 15%);
@poll-highlighted: lighten(@poll-th-bg, 15%);
@poll-td-bg: @poll-th-bg;
@poll-td-fg: @poll-th-fg;
@poll-help-bg: @colortheme_poll-help-bg;
@poll-uncommitted-cell: #eee;
@poll-uncommitted-bg: #ddd; //lighten(@poll-th-bg, 50%);
@poll-uncommitted-text: black;
@poll-placeholder: #fff;
@poll-border-color: #555;
@poll-cover-color: #000;
@poll-fg: #000;
@poll-option-yellow: #ff5;
@poll-option-gray: #ccc;
@poll-add-color: #fff;
@poll-add-bg: #777;
@poll-add-bg-alt: #444;
.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-readonly {
#cp-app-poll-table-scroll {
max-width: ~"calc(75% - 30px - 100px)";
}
table {
width: 100%;
}
table tr td:last-child {
margin-left: 0; // uncommitted is hidden
}
td.cp-app-poll-table-uncommitted {
display: none;
}
}
&.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;
margin: 20px;
}
#cp-app-poll-table-container button {
border-radius: 0;
border: 0;
}
#cp-app-poll-create-user {
display: inline-flex;
height: 20px;
padding: 0 5px;
margin: 2px auto;
width: auto;
overflow: hidden;
color: @poll-add-color;
background: @poll-add-bg;
&:hover {
background: @poll-add-bg-alt;
}
}
#cp-app-poll-create-option {
order: 3;
display: inline-flex;
width: 46px;
height: 20px;
margin: 2px;
padding: 0;
color: @poll-add-color;
background: @poll-add-bg;
&:hover {
background: @poll-add-bg-alt;
}
}
#cp-app-poll-table-scroll {
overflow-y: hidden;
overflow-x: auto;
margin-left: 25%;
max-width: ~"calc(75% - 100px - 100px)";
width: auto;
display: inline-block;
}
.cp-markdown-toolbar {
margin: auto;
min-width: 80%;
width: 80%;
}
#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
#cp-app-poll-table-container {
table {
border-collapse: collapse;
border-spacing: 0;
}
tbody {
* {
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-container {
.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: 0;
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 {
height: 28px;
padding: 0px;
margin: 0px;
display: flex;
align-items: center;
.cp-app-poll-table-remove {
order: 1;
}
.cp-app-poll-table-edit {
order: 3;
}
input {
min-width: 0;
order: 2;
flex: 1;
height: 24px;
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;
}
&.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;
}
}
}
tr:not(:last-child) {
&:hover {
td:first-child {
background-color: @poll-highlighted;
}
}
}
}
.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-wrap;
}
.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); }
}
}
}
@media screen and (max-width: 500px) {
#cp-app-poll-table-scroll {
max-width: 100%;
padding: 0;
margin: 0;
table {
tr {
td {
&:first-child {
position: unset;
min-width: 100px;
&:hover:not(:empty) {
position: absolute;
min-width: 100px;
width: auto;
z-index: 100;
}
}
&:nth-last-child(2) {
position: unset;
}
&:last-child {
position: unset;
}
}
}
}
}
#cp-app-poll-comments {
min-width: 90%;
}
}
}
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
}
}