diff --git a/customize.dist/main.css b/customize.dist/main.css index 3f2f1e6bd..026649207 100644 --- a/customize.dist/main.css +++ b/customize.dist/main.css @@ -1074,59 +1074,6 @@ html.cp, .cp .panel { background-color: #cccccc; } -.cp table { - border-collapse: collapse; - border-spacing: 0; - margin: 20px; -} -.cp tbody { - border: 1px solid #555; -} -.cp tbody tr { - text-align: center; -} -.cp tbody tr:first-of-type th { - font-size: 20px; - border-top: 0px; - font-weight: bold; - padding: 10px; - text-decoration: underline; -} -.cp tbody tr:first-of-type th.table-refresh { - color: #46E981; - text-decoration: none; - cursor: pointer; -} -.cp tbody tr:nth-child(odd) { - background-color: #ffffff; -} -.cp tbody tr th:first-of-type { - border-left: 0px; -} -.cp tbody tr th { - box-sizing: border-box; - border: 1px solid #555; -} -.cp tbody tr th, -.cp tbody tr td { - color: #555; -} -.cp tbody tr th.remove, -.cp tbody tr td.remove { - cursor: pointer; -} -.cp tbody tr th:last-child { - border-right: 0px; -} -.cp tbody td { - border-right: 1px solid #555; - padding: 12px; - padding-top: 0px; - padding-bottom: 0px; -} -.cp tbody td:last-child { - border-right: none; -} .cp .bottom-left { border-bottom-left-radius: 5px; } @@ -1137,212 +1084,6 @@ html.cp, color: #FA5858; cursor: pointer !important; } -.cp form.realtime, -.cp div.realtime { - padding: 0px; - margin: 0px; -} -.cp form.realtime > textarea, -.cp div.realtime > textarea { - width: 50%; - height: 15vh; -} -.cp form.realtime table, -.cp div.realtime table { - border-collapse: collapse; - width: calc(100% - 1px); -} -.cp form.realtime table tr td:first-child, -.cp div.realtime table tr td:first-child { - position: absolute; - left: 29px; - top: auto; - width: calc(30% - 50px); -} -.cp form.realtime table tr td, -.cp div.realtime table tr td { - padding: 0px; - margin: 0px; -} -.cp form.realtime table tr td div.text-cell, -.cp div.realtime table tr td div.text-cell { - padding: 0px; - margin: 0px; - height: 100%; -} -.cp form.realtime table tr td div.text-cell input, -.cp div.realtime table tr td div.text-cell input { - width: 80%; - width: 90%; - height: 100%; - border: 0px; -} -.cp form.realtime table tr td div.text-cell input[disabled], -.cp div.realtime table tr td div.text-cell input[disabled] { - background-color: transparent; - color: #000; - font-weight: bold; -} -.cp form.realtime table tr td.checkbox-cell, -.cp div.realtime table tr td.checkbox-cell { - margin: 0px; - padding: 0px; - height: 100%; - min-width: 150px; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain { - display: inline-block; - height: 100%; - width: 100%; - position: relative; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain label, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain label { - background-color: transparent; - display: block; - position: absolute; - top: 0px; - left: 0px; - height: 100%; - width: 100%; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable), -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) { - display: none; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover { - font-weight: bold; - background-color: #FA5858; - color: #000; - display: block; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after { - height: 100%; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after { - content: "✖"; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes { - background-color: #46E981; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes:after, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes:after { - content: "✔"; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.uncommitted, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.uncommitted { - background: #ddd; -} -.cp form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine, -.cp div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine { - display: none; -} -.cp form.realtime table input[type="text"], -.cp div.realtime table input[type="text"] { - height: auto; - border: 1px solid #fff; - width: 80%; -} -.cp form.realtime table thead td, -.cp div.realtime table thead td { - padding: 0px 5px; - background: #aaa; - border-radius: 20px 20px 0 0; - text-align: center; -} -.cp form.realtime table thead td input[type="text"], -.cp div.realtime table thead td input[type="text"] { - width: 100%; - box-sizing: border-box; -} -.cp form.realtime table thead td input[type="text"][disabled], -.cp div.realtime table thead td input[type="text"][disabled] { - color: #000; - padding: 1px 5px; - border: none; -} -.cp form.realtime table tbody .text-cell, -.cp div.realtime table tbody .text-cell { - background: #aaa; -} -.cp form.realtime table tbody .text-cell input[type="text"], -.cp div.realtime table tbody .text-cell input[type="text"] { - width: calc(100% - 50px); -} -.cp form.realtime table tbody .text-cell .edit, -.cp div.realtime table tbody .text-cell .edit { - float: right; - margin: 0 10px 0 0; -} -.cp form.realtime table tbody .text-cell .remove, -.cp div.realtime table tbody .text-cell .remove { - float: left; - margin: 0 0 0 10px; -} -.cp form.realtime table tbody td label, -.cp div.realtime table tbody td label { - border: 0.5px solid #555; -} -.cp form.realtime table .edit, -.cp div.realtime table .edit { - color: #000; - cursor: pointer; - float: left; - margin-left: 10px; -} -.cp form.realtime table .remove, -.cp div.realtime table .remove { - float: right; - margin-right: 10px; -} -.cp form.realtime table thead tr th input[type="text"][disabled], -.cp div.realtime table thead tr th input[type="text"][disabled] { - background-color: transparent; - color: #555; - font-weight: bold; -} -.cp form.realtime table thead tr th .remove, -.cp div.realtime table thead tr th .remove { - cursor: pointer; - font-size: 20px; -} -.cp form.realtime table tfoot tr, -.cp div.realtime table tfoot tr { - border: none; -} -.cp form.realtime table tfoot tr td, -.cp div.realtime table tfoot tr td { - border: none; - text-align: center; -} -.cp form.realtime table tfoot tr td .save, -.cp div.realtime table tfoot tr td .save { - padding: 15px; - border-top-left-radius: 5px; - border-top-right-radius: 5px; -} -.cp form.realtime #adduser, -.cp div.realtime #adduser, -.cp form.realtime #addoption, -.cp div.realtime #addoption { - color: #46E981; - border: 1px solid #46E981; - padding: 15px; - cursor: pointer; -} -.cp form.realtime #adduser, -.cp div.realtime #adduser { - border-top-left-radius: 5px; -} -.cp form.realtime #addoption, -.cp div.realtime #addoption { - border-bottom-left-radius: 5px; -} #cors-store { display: none; } diff --git a/customize.dist/src/less/cryptpad.less b/customize.dist/src/less/cryptpad.less index cbee383bf..db8af27ce 100644 --- a/customize.dist/src/less/cryptpad.less +++ b/customize.dist/src/less/cryptpad.less @@ -520,60 +520,6 @@ noscript { /* Tables * Currently only used by /poll/ */ -table { - border-collapse: collapse; - border-spacing: 0; - margin: 20px; -} -tbody { - border: 1px solid @poll-border-color; - tr { - text-align: center; - &:first-of-type th{ - font-size: 20px; - border-top: 0px; - font-weight: bold; - padding: 10px; - text-decoration: underline; - &.table-refresh { - color: @cp-green; - text-decoration: none; - cursor: pointer; - } - - } - &:nth-child(odd) { - background-color: @light-base; - } - th:first-of-type { - border-left: 0px; - } - th { - box-sizing: border-box; - border: 1px solid @poll-border-color; - } - th, td { - color: @fore; - - &.remove { - cursor: pointer; - } - } - th:last-child { - border-right: 0px; - } - } - - td { - border-right: 1px solid @poll-border-color; - padding: 12px; - padding-top: 0px; - padding-bottom: 0px; - &:last-child { - border-right: none; - } - } -} // form things .bottom-left { @@ -588,226 +534,6 @@ tbody { color: @cp-red; cursor: pointer !important; } - -form.realtime, div.realtime { - > input { - &[type="text"] { - - } - } - > textarea { - width: 50%; - height: 15vh; - } - - padding: 0px; - margin: 0px; - - table { - border-collapse: collapse; - width: ~"calc(100% - 1px)"; - tr { - td:first-child { - position:absolute; - left: 29px; - top: auto; - width: ~"calc(30% - 50px)"; - } - td { - padding: 0px; - margin: 0px; - - div.text-cell { - padding: 0px; - margin: 0px; - height: 100%; - - input { - width: 80%; - width: 90%; - height: 100%; - border: 0px; - &[disabled] { - background-color: transparent; - color: @poll-fg; - font-weight: bold; - } - } - } - - &.checkbox-cell { - margin: 0px; - padding: 0px; - height: 100%; - min-width: 150px; - - div.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="checkbox"] { - &:not(.editable) { - display: none; - - ~ .cover { - display: block; - font-weight: bold; - - background-color: @cp-red; - color: @poll-cover-color; - - &:after { - height: 100%; - } - - &:after { content: "✖"; } - - display: block; - &.yes { - background-color: @cp-green; - &:after { content: "✔"; } - } - - &.uncommitted { - background: #ddd; - } - - - &.mine { - display: none; - } - } - } - } - } - } - } - } - } - - input { - &[type="text"] { - height: auto; - border: 1px solid @base; - width: 80%; - } - } - thead { - td { - padding: 0px 5px; - background: @poll-th-bg; - border-radius: 20px 20px 0 0; - text-align: center; - input { - &[type="text"] { - width: 100%; - box-sizing: border-box; - &[disabled] { - color: @poll-fg; - padding: 1px 5px; - border: none; - } - } - } - } - } - - tbody { - .text-cell { - background: @poll-td-bg; - //border-radius: 20px 0 0 20px; - input[type="text"] { - width: ~"calc(100% - 50px)"; - } - .edit { - float:right; - margin: 0 10px 0 0; - } - .remove { - float: left; - margin: 0 0 0 10px; - } - } - td { - label { - border: .5px solid @poll-border-color; - } - } - } - .edit { - color: @poll-cover-color; - cursor: pointer; - float: left; - margin-left: 10px; - } - - .remove { - float: right; - margin-right: 10px; - } - - thead { - tr { - th { - input[type="text"][disabled] { - background-color: transparent; - color: @fore; - font-weight: bold; - } - .remove { - cursor: pointer; - font-size: 20px; - } - } - } - } - tbody { - tr { - td { - - } - } - } - tfoot { - tr { - border: none; - td { - border: none; - text-align: center; - .save { - padding: 15px; - border-top-left-radius: 5px; - border-top-right-radius: 5px; - } - } - } - } - } - - #adduser, - #addoption { - color: @cp-green; - border: 1px solid @cp-green; - padding: 15px; - cursor: pointer; - } - - #adduser { .top-left; } - #addoption { .bottom-left; } -} } // hack for our cross-origin iframe diff --git a/customize.dist/src/less/mixins.less b/customize.dist/src/less/mixins.less index 456adf9b2..b65af90d8 100644 --- a/customize.dist/src/less/mixins.less +++ b/customize.dist/src/less/mixins.less @@ -1,5 +1,5 @@ .fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){ - @font-face{ + @font-face { font-family: @family; src: url(@src) format(@fmt); font-weight: @weight; diff --git a/customize.dist/src/less/variables.less b/customize.dist/src/less/variables.less index 20a1d80e1..8a0b4222e 100644 --- a/customize.dist/src/less/variables.less +++ b/customize.dist/src/less/variables.less @@ -60,12 +60,6 @@ @slide-default-bg: #000; -@poll-th-bg: #aaa; -@poll-td-bg: #aaa; -@poll-border-color: #555; -@poll-cover-color: #000; -@poll-fg: #000; - @bg-loading: @old-base; @color-loading: @old-fore; diff --git a/package.json b/package.json index 882eeaa15..48aed5d0d 100644 --- a/package.json +++ b/package.json @@ -17,7 +17,7 @@ "scripts": { "lint": "jshint --config .jshintrc --exclude-path .jshintignore .", "test": "node TestSelenium.js", - "style": "lessc ./customize.dist/src/less/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css && lessc ./www/drive/file.less > ./www/drive/file.css && lessc ./www/settings/main.less > ./www/settings/main.css && lessc ./www/slide/slide.less > ./www/slide/slide.css && lessc ./www/whiteboard/whiteboard.less > ./www/whiteboard/whiteboard.css", + "style": "lessc ./customize.dist/src/less/cryptpad.less > ./customize.dist/main.css && lessc ./customize.dist/src/less/toolbar.less > ./customize.dist/toolbar.css && lessc ./www/drive/file.less > ./www/drive/file.css && lessc ./www/settings/main.less > ./www/settings/main.css && lessc ./www/slide/slide.less > ./www/slide/slide.css && lessc ./www/whiteboard/whiteboard.less > ./www/whiteboard/whiteboard.css && lessc ./www/poll/poll.less > ./www/poll/poll.css", "template": "cd customize.dist/src && node build.js" } } diff --git a/www/poll/index.html b/www/poll/index.html index 296d6fbf5..31226d989 100644 --- a/www/poll/index.html +++ b/www/poll/index.html @@ -11,108 +11,8 @@ id="favicon" /> + - diff --git a/www/poll/poll.css b/www/poll/poll.css new file mode 100644 index 000000000..321121b59 --- /dev/null +++ b/www/poll/poll.css @@ -0,0 +1,357 @@ +html, +body { + width: 100%; + height: 100%; + margin: 0px; + padding: 0px; + border: 0px; +} +.cryptpad-toolbar h2 { + font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif; + color: #000; + line-height: auto; +} +.cryptpad-toolbar { + display: inline-block; +} +.realtime { + display: block; + max-height: 100%; + max-width: 100%; +} +.realtime input[type="text"] { + height: 1em; + margin: 0px; +} +.text-cell input[type="text"] { + width: 400px; +} +input[type="text"][disabled], +textarea[disabled] { + background-color: transparent; + font: white; + border: 0px; +} +table#table { + margin: 0px; +} +#tableContainer { + position: relative; + padding: 29px; + padding-right: 79px; +} +#tableContainer button { + height: 2rem; + display: none; +} +#publish { + display: none; +} +#publish, +#admin { + margin-top: 15px; + margin-bottom: 15px; +} +#create-user { + position: absolute; + display: inline-block; + /*left: 0px;*/ + top: 55px; + width: 50px; + overflow: hidden; +} +#create-option { + width: 50px; +} +#tableScroll { + overflow-y: hidden; + overflow-x: auto; + margin-left: calc(30% - 50px + 29px); + max-width: 70%; + width: auto; + display: inline-block; +} +#description { + padding: 15px; + margin: auto; + min-width: 80%; + width: 80%; + min-height: 5em; + font-size: 20px; + font-weight: bold; +} +#description[disabled] { + resize: none; + color: #000; + border: 1px solid #444; +} +#commit { + width: 100%; +} +#howItWorks { + width: 80%; + margin: auto; +} +div.upper { + width: 80%; + margin: auto; +} +table { + border-collapse: collapse; + border-spacing: 0; + margin: 20px; +} +tbody { + border: 1px solid #555; +} +tbody tr { + text-align: center; +} +tbody tr:first-of-type th { + font-size: 20px; + border-top: 0px; + font-weight: bold; + padding: 10px; + text-decoration: underline; +} +tbody tr:first-of-type th.table-refresh { + color: #46E981; + text-decoration: none; + cursor: pointer; +} +tbody tr:nth-child(odd) { + background-color: #ffffff; +} +tbody tr th:first-of-type { + border-left: 0px; +} +tbody tr th { + box-sizing: border-box; + border: 1px solid #555; +} +tbody tr th, +tbody tr td { + color: #555; +} +tbody tr th.remove, +tbody tr td.remove { + cursor: pointer; +} +tbody tr th:last-child { + border-right: 0px; +} +tbody td { + border-right: 1px solid #555; + padding: 12px; + padding-top: 0px; + padding-bottom: 0px; +} +tbody td:last-child { + border-right: none; +} +form.realtime, +div.realtime { + padding: 0px; + margin: 0px; +} +form.realtime > textarea, +div.realtime > textarea { + width: 50%; + height: 15vh; +} +form.realtime table, +div.realtime table { + border-collapse: collapse; + width: calc(100% - 1px); +} +form.realtime table tr td:first-child, +div.realtime table tr td:first-child { + position: absolute; + left: 29px; + top: auto; + width: calc(30% - 50px); +} +form.realtime table tr td, +div.realtime table tr td { + padding: 0px; + margin: 0px; +} +form.realtime table tr td div.text-cell, +div.realtime table tr td div.text-cell { + padding: 0px; + margin: 0px; + height: 100%; +} +form.realtime table tr td div.text-cell input, +div.realtime table tr td div.text-cell input { + width: 80%; + width: 90%; + height: 100%; + border: 0px; +} +form.realtime table tr td div.text-cell input[disabled], +div.realtime table tr td div.text-cell input[disabled] { + background-color: transparent; + color: #000; + font-weight: bold; +} +form.realtime table tr td.checkbox-cell, +div.realtime table tr td.checkbox-cell { + margin: 0px; + padding: 0px; + height: 100%; + min-width: 150px; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain, +div.realtime table tr td.checkbox-cell div.checkbox-contain { + display: inline-block; + height: 100%; + width: 100%; + position: relative; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain label, +div.realtime table tr td.checkbox-cell div.checkbox-contain label { + background-color: transparent; + display: block; + position: absolute; + top: 0px; + left: 0px; + height: 100%; + width: 100%; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable), +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) { + display: none; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover { + font-weight: bold; + background-color: #FA5858; + color: #000; + display: block; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after { + height: 100%; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover:after { + content: "✖"; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes { + background-color: #46E981; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes:after, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.yes:after { + content: "✔"; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.uncommitted, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.uncommitted { + background: #ddd; +} +form.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine, +div.realtime table tr td.checkbox-cell div.checkbox-contain input[type="checkbox"]:not(.editable) ~ .cover.mine { + display: none; +} +form.realtime table input[type="text"], +div.realtime table input[type="text"] { + height: auto; + border: 1px solid #fff; + width: 80%; +} +form.realtime table thead td, +div.realtime table thead td { + padding: 0px 5px; + background: #aaa; + border-radius: 20px 20px 0 0; + text-align: center; +} +form.realtime table thead td input[type="text"], +div.realtime table thead td input[type="text"] { + width: 100%; + box-sizing: border-box; +} +form.realtime table thead td input[type="text"][disabled], +div.realtime table thead td input[type="text"][disabled] { + color: #000; + padding: 1px 5px; + border: none; +} +form.realtime table tbody .text-cell, +div.realtime table tbody .text-cell { + background: #aaa; +} +form.realtime table tbody .text-cell input[type="text"], +div.realtime table tbody .text-cell input[type="text"] { + width: calc(100% - 50px); +} +form.realtime table tbody .text-cell .edit, +div.realtime table tbody .text-cell .edit { + float: right; + margin: 0 10px 0 0; +} +form.realtime table tbody .text-cell .remove, +div.realtime table tbody .text-cell .remove { + float: left; + margin: 0 0 0 10px; +} +form.realtime table tbody td label, +div.realtime table tbody td label { + border: 0.5px solid #555; +} +form.realtime table .edit, +div.realtime table .edit { + color: #000; + cursor: pointer; + float: left; + margin-left: 10px; +} +form.realtime table .remove, +div.realtime table .remove { + float: right; + margin-right: 10px; +} +form.realtime table thead tr th input[type="text"][disabled], +div.realtime table thead tr th input[type="text"][disabled] { + background-color: transparent; + color: #555; + font-weight: bold; +} +form.realtime table thead tr th .remove, +div.realtime table thead tr th .remove { + cursor: pointer; + font-size: 20px; +} +form.realtime table tfoot tr, +div.realtime table tfoot tr { + border: none; +} +form.realtime table tfoot tr td, +div.realtime table tfoot tr td { + border: none; + text-align: center; +} +form.realtime table tfoot tr td .save, +div.realtime table tfoot tr td .save { + padding: 15px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} +form.realtime #adduser, +div.realtime #adduser, +form.realtime #addoption, +div.realtime #addoption { + color: #46E981; + border: 1px solid #46E981; + padding: 15px; + cursor: pointer; +} +form.realtime #adduser, +div.realtime #adduser { + border-top-left-radius: 5px; +} +form.realtime #addoption, +div.realtime #addoption { + border-bottom-left-radius: 5px; +} diff --git a/www/poll/poll.less b/www/poll/poll.less new file mode 100644 index 000000000..7292b0e15 --- /dev/null +++ b/www/poll/poll.less @@ -0,0 +1,387 @@ +@import "../../customize.dist/src/less/variables.less"; +@import "../../customize.dist/src/less/mixins.less"; + +@poll-th-bg: #aaa; +@poll-td-bg: #aaa; +@poll-border-color: #555; +@poll-cover-color: #000; +@poll-fg: #000; + +html, body { + width: 100%; + height: 100%; + margin: 0px; + padding: 0px; + border: 0px; +} + +.cryptpad-toolbar h2 { + font: normal normal normal 12px Arial, Helvetica, Tahoma, Verdana, Sans-Serif; + color: #000; + line-height: auto; +} +.cryptpad-toolbar { + display: inline-block; +} +.realtime { + display: block; + max-height: 100%; + max-width: 100%; +} + +.realtime input[type="text"] { + height: 1em; + margin: 0px; +} +.text-cell input[type="text"] { + width: 400px; +} + +input[type="text"][disabled], textarea[disabled] { + background-color: transparent; + font: white; + border: 0px; +} +table#table { + margin: 0px; +} +#tableContainer { + position: relative; + padding: 29px; + padding-right: 79px; +} +#tableContainer button { + height: 2rem; + display: none; +} +#publish { + display: none; +} +#publish, #admin { + margin-top: 15px; + margin-bottom: 15px; +} +#create-user { + position: absolute; + display: inline-block; + /*left: 0px;*/ + top: 55px; + width: 50px; + overflow: hidden; +} +#create-option { + width: 50px; +} +#tableScroll { + overflow-y: hidden; + overflow-x: auto; + margin-left: calc(~"30% - 50px + 29px"); + max-width: 70%; + width: auto; + display: inline-block; +} +#description { + padding: 15px; + margin: auto; + + min-width: 80%; + width: 80%; + min-height: 5em; + font-size: 20px; + font-weight: bold; + +} +#description[disabled] { + resize: none; + color: #000; + border: 1px solid #444; +} + +#commit { + width: 100%; +} +#howItWorks { + width: 80%; + margin: auto; +} +div.upper { + width: 80%; + margin: auto; +} + +// from cryptpad.less + +table { + border-collapse: collapse; + border-spacing: 0; + margin: 20px; +} +tbody { + border: 1px solid @poll-border-color; + tr { + text-align: center; + &:first-of-type th{ + font-size: 20px; + border-top: 0px; + font-weight: bold; + padding: 10px; + text-decoration: underline; + &.table-refresh { + color: @cp-green; + text-decoration: none; + cursor: pointer; + } + + } + &:nth-child(odd) { + background-color: @light-base; + } + th:first-of-type { + border-left: 0px; + } + th { + box-sizing: border-box; + border: 1px solid @poll-border-color; + } + th, td { + color: @fore; + + &.remove { + cursor: pointer; + } + } + th:last-child { + border-right: 0px; + } + } + + td { + border-right: 1px solid @poll-border-color; + padding: 12px; + padding-top: 0px; + padding-bottom: 0px; + &:last-child { + border-right: none; + } + } +} + +form.realtime, div.realtime { + > input { + &[type="text"] { + + } + } + > textarea { + width: 50%; + height: 15vh; + } + + padding: 0px; + margin: 0px; + + table { + border-collapse: collapse; + width: ~"calc(100% - 1px)"; + tr { + td:first-child { + position:absolute; + left: 29px; + top: auto; + width: ~"calc(30% - 50px)"; + } + td { + padding: 0px; + margin: 0px; + + div.text-cell { + padding: 0px; + margin: 0px; + height: 100%; + + input { + width: 80%; + width: 90%; + height: 100%; + border: 0px; + &[disabled] { + background-color: transparent; + color: @poll-fg; + font-weight: bold; + } + } + } + + &.checkbox-cell { + margin: 0px; + padding: 0px; + height: 100%; + min-width: 150px; + + div.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="checkbox"] { + &:not(.editable) { + display: none; + + ~ .cover { + display: block; + font-weight: bold; + + background-color: @cp-red; + color: @poll-cover-color; + + &:after { + height: 100%; + } + + &:after { content: "✖"; } + + display: block; + &.yes { + background-color: @cp-green; + &:after { content: "✔"; } + } + + &.uncommitted { + background: #ddd; + } + + + &.mine { + display: none; + } + } + } + } + } + } + } + } + } + + input { + &[type="text"] { + height: auto; + border: 1px solid @base; + width: 80%; + } + } + thead { + td { + padding: 0px 5px; + background: @poll-th-bg; + border-radius: 20px 20px 0 0; + text-align: center; + input { + &[type="text"] { + width: 100%; + box-sizing: border-box; + &[disabled] { + color: @poll-fg; + padding: 1px 5px; + border: none; + } + } + } + } + } + + tbody { + .text-cell { + background: @poll-td-bg; + //border-radius: 20px 0 0 20px; + input[type="text"] { + width: ~"calc(100% - 50px)"; + } + .edit { + float:right; + margin: 0 10px 0 0; + } + .remove { + float: left; + margin: 0 0 0 10px; + } + } + td { + label { + border: .5px solid @poll-border-color; + } + } + } + .edit { + color: @poll-cover-color; + cursor: pointer; + float: left; + margin-left: 10px; + } + + .remove { + float: right; + margin-right: 10px; + } + + thead { + tr { + th { + input[type="text"][disabled] { + background-color: transparent; + color: @fore; + font-weight: bold; + } + .remove { + cursor: pointer; + font-size: 20px; + } + } + } + } + tbody { + tr { + td { + + } + } + } + tfoot { + tr { + border: none; + td { + border: none; + text-align: center; + .save { + padding: 15px; + border-top-left-radius: 5px; + border-top-right-radius: 5px; + } + } + } + } + } + + #adduser, + #addoption { + color: @cp-green; + border: 1px solid @cp-green; + padding: 15px; + cursor: pointer; + } + + #adduser { .top-left; } + #addoption { .bottom-left; } +}