648 lines
12 KiB
Plaintext
648 lines
12 KiB
Plaintext
@import "./variables.less";
|
|
|
|
.fontface(@family, @src, @style: normal, @weight: 400, @fmt: 'truetype'){
|
|
@font-face{
|
|
font-family: @family;
|
|
src: url(@src) format(@fmt);
|
|
font-weight: @weight;
|
|
font-style: @style;
|
|
}
|
|
}
|
|
|
|
a.github-corner > svg {
|
|
fill: @cp-green;
|
|
color: @base;
|
|
}
|
|
|
|
.transform(...) {
|
|
-webkit-transform: @arguments;
|
|
-moz-transform: @arguments;
|
|
-o-transform: @arguments;
|
|
-ms-transform: @arguments;
|
|
transform: @arguments;
|
|
}
|
|
|
|
.translate(@x:0, @y:0) {
|
|
.transform(translate(@x, @y));
|
|
}
|
|
|
|
.table-refresh > svg {
|
|
width: .9em;
|
|
height: .9em;
|
|
fill: @cp-green;
|
|
.translate(0, 15%);
|
|
}
|
|
|
|
.lato {
|
|
font-family: lato, Helvetica, sans-serif;
|
|
font-size: 1.02em;
|
|
}
|
|
|
|
html {
|
|
font-size: .875em;
|
|
background-color: @base;
|
|
color: @fore;
|
|
}
|
|
|
|
html,body {
|
|
font-family: Georgia,Cambria,serif;
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
line-height: 2rem;
|
|
}
|
|
|
|
h1,h2,h3,h4,h5,h6 {
|
|
color: @fore;
|
|
|
|
font-family: "Source Sans Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
|
|
-webkit-font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
|
|
-moz-font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
|
|
font-feature-settings: 'dlig' 1,'liga' 1,'lnum' 1,'kern' 1;
|
|
font-style: normal;
|
|
font-weight: 600;
|
|
margin-top: 0;
|
|
}
|
|
|
|
h1 {
|
|
line-height: 3rem;
|
|
font-size: 2.05714rem;
|
|
margin-bottom: .21999rem;
|
|
padding-top: .78001rem;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 1.95312rem;
|
|
margin-bottom: .18358rem;
|
|
padding-top: .81642rem;
|
|
}
|
|
|
|
h2,h3 {
|
|
line-height: 3rem;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 1.64571rem;
|
|
margin-bottom: .07599rem;
|
|
padding-top: .92401rem;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.5625rem;
|
|
margin-bottom: .54686rem;
|
|
padding-top: .45314rem;
|
|
}
|
|
|
|
h5 {
|
|
font-size: 1.25rem;
|
|
margin-bottom: -.56251rem;
|
|
padding-top: .56251rem;
|
|
}
|
|
|
|
h6 {
|
|
font-size: 1rem;
|
|
margin-bottom: -.65001rem;
|
|
padding-top: .65001rem;
|
|
}
|
|
|
|
a {
|
|
cursor: pointer;
|
|
color: @cp-green;
|
|
text-decoration: none;
|
|
|
|
&:hover {
|
|
color: @cp-accent;
|
|
}
|
|
}
|
|
|
|
img {
|
|
height: auto;
|
|
max-width: 100%;
|
|
|
|
&.cryptofist {
|
|
filter: invert(100%);
|
|
-webkit-filter: invert(100%);
|
|
}
|
|
}
|
|
|
|
p {
|
|
padding-top: .66001rem;
|
|
margin-top: 0;
|
|
}
|
|
|
|
p,pre {
|
|
margin-bottom: 1.33999rem;
|
|
}
|
|
|
|
p, pre, td, a, table, tr {
|
|
.lato;
|
|
}
|
|
|
|
#main {
|
|
width: 70vw;
|
|
margin: auto;
|
|
|
|
font-size: medium;
|
|
padding-bottom: 1em;
|
|
}
|
|
|
|
/* buttons */
|
|
.create, .action {
|
|
@thick: 2px;
|
|
border: @thick solid @cp-green;
|
|
border-radius: 10px;
|
|
background-color: @base;
|
|
color: @cp-green;
|
|
|
|
font-weight: bold;
|
|
font-size: large;
|
|
margin-right: 5px;
|
|
margin-left: 5px;
|
|
&:hover {
|
|
border: @thick solid @cp-accent;
|
|
color: @cp-green;
|
|
}
|
|
}
|
|
.create {
|
|
display: none;
|
|
}
|
|
.action {
|
|
display: inline-block;
|
|
}
|
|
.buttons {
|
|
margin-bottom: 50px;
|
|
margin-top: 20px;
|
|
line-height: 2.5em;
|
|
}
|
|
|
|
.button {
|
|
@hpad: 2 * 6px;
|
|
@vpad: 2 * 2px;
|
|
padding: @vpad @hpad @vpad @hpad;
|
|
|
|
border-radius: 5px;
|
|
margin-top: 2 * 6px;
|
|
margin-bottom: 2 * 6px;
|
|
white-space: nowrap;
|
|
}
|
|
.alertify button {
|
|
margin: 3px 0px;
|
|
}
|
|
/* Tables */
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
border-spacing: 0;
|
|
margin: 20px;
|
|
}
|
|
tbody {
|
|
border: 2px solid black;
|
|
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 black;
|
|
}
|
|
th, td {
|
|
color: @fore;
|
|
|
|
&.remove {
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
th:last-child {
|
|
border-right: 0px;
|
|
}
|
|
}
|
|
|
|
|
|
td {
|
|
border-right: 1px solid black;
|
|
padding: 12px;
|
|
padding-top: 0px;
|
|
padding-bottom: 0px;
|
|
&:last-child {
|
|
border-right: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Bottom Bar */
|
|
|
|
.top-bar, .bottom-bar {
|
|
position:fixed;
|
|
height:4%;
|
|
height: 2.5em;
|
|
|
|
display: inline-block;
|
|
width: 100%;
|
|
background: @base;
|
|
border-top: 1px solid @cp-outline;
|
|
|
|
a {
|
|
color: @cp-green;
|
|
text-decoration: none;
|
|
}
|
|
p {
|
|
margin: -1px;
|
|
font-family: Arial, Helvetica, Tahoma, Verdana, sans-serif;
|
|
|
|
font-size: 20px;
|
|
display:block;
|
|
margin-left: 10px;
|
|
padding-top:3px;
|
|
color: @fore;
|
|
}
|
|
img {
|
|
margin-right: 4px;
|
|
position: relative;
|
|
}
|
|
|
|
.big {
|
|
@media screen and (max-width: 800px) {
|
|
display: none;
|
|
}
|
|
@media screen and (min-width: 801px) {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
.small {
|
|
@media screen and (max-width: 800px) {
|
|
display: inline-block;
|
|
}
|
|
@media screen and (min-width: 801px) {
|
|
display: none;
|
|
}
|
|
img {
|
|
height: 1.25em;
|
|
}
|
|
}
|
|
|
|
}
|
|
.bottom-bar {
|
|
bottom: 0px;
|
|
right: 0px;
|
|
}
|
|
.top-bar {
|
|
top: 0px;
|
|
right: 0px;
|
|
}
|
|
|
|
.bottom-bar-left {
|
|
display:block;
|
|
float:left;
|
|
padding-left:10px;
|
|
}
|
|
.bottom-bar-left p {
|
|
float: right;
|
|
}
|
|
.bottom-bar-right {
|
|
display:block;
|
|
float:right;
|
|
padding-right:20px
|
|
}
|
|
.bottom-bar-center {
|
|
width: 20%;
|
|
position: absolute;
|
|
left: 40%;
|
|
text-align: center;
|
|
}
|
|
.bottom-bar-heart {
|
|
top: 2px;
|
|
}
|
|
.bottom-bar-xwiki {
|
|
top: 3px;
|
|
}
|
|
.bottom-bar-openpaas {
|
|
top: 3px;
|
|
max-width: 100px;
|
|
}
|
|
|
|
|
|
// form things
|
|
|
|
// MIXINS
|
|
.bottom-left(@s: 5px) { border-bottom-left-radius: @s; }
|
|
.bottom-left {
|
|
.bottom-left;
|
|
}
|
|
|
|
.top-left(@s: 5px) { border-top-left-radius: @s; }
|
|
.top-left {
|
|
.top-left;
|
|
}
|
|
|
|
.remove {
|
|
color: @cp-red;
|
|
cursor: pointer !important;
|
|
}
|
|
|
|
form.realtime {
|
|
> input {
|
|
&[type="text"] {
|
|
|
|
}
|
|
}
|
|
> textarea {
|
|
width: 50%;
|
|
height: 15vh;
|
|
}
|
|
|
|
padding: 0px;
|
|
margin: 0px;
|
|
|
|
table {
|
|
border-collapse: collapse;
|
|
tr {
|
|
td {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
|
|
div.text-cell {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
height: 100%;
|
|
input {
|
|
width: 80%;
|
|
height: 100%;
|
|
border: 0px;
|
|
&[disabled] {
|
|
background-color: transparent;
|
|
color: @fore;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.checkbox-cell {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
|
|
div.checkbox-contain {
|
|
display: 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: @base;
|
|
&:after { content: "✖"; }
|
|
|
|
display: block;
|
|
&.yes {
|
|
background-color: @cp-green;
|
|
&:after { content: "✔"; }
|
|
}
|
|
&.mine {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
input {
|
|
&[type="text"] {
|
|
height: 100%;
|
|
width: 80%;
|
|
border: 3px solid @base;
|
|
}
|
|
}
|
|
.edit {
|
|
color: @cp-green;
|
|
cursor: pointer;
|
|
width: 10%;
|
|
font-size: 20px;
|
|
&:after { content: '✐'; }
|
|
&.editable { display: none; }
|
|
}
|
|
|
|
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 {
|
|
td {
|
|
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; }
|
|
}
|
|
|
|
.viewportRatio (@x, @y, @p: 100) {
|
|
width: @p * 100vw;
|
|
height: @y * (@p * 100vw) / @x;
|
|
max-width: @x / @y * (@p * 100vh);
|
|
max-height: (@p * 100vh);
|
|
}
|
|
|
|
div.modal, div#modal {
|
|
|
|
#content {
|
|
box-sizing: border-box;
|
|
.size (@n) {
|
|
font-size: @n * 1vw;
|
|
line-height: @n * 1.1vw;
|
|
}
|
|
|
|
border: 1px solid white;
|
|
|
|
vertical-align: middle;
|
|
padding: 2.5vw;
|
|
|
|
|
|
width: 100vw;
|
|
height: 56.25vw; // height:width ratio = 9/16 = .5625
|
|
//background: pink;
|
|
max-height: 100vh;
|
|
max-width: 177.78vh; // 16/9 = 1.778
|
|
margin: auto;
|
|
position: absolute;
|
|
top:0;bottom:0; // vertical center
|
|
left:0;right:0; // horizontal center
|
|
|
|
p, li, pre, code {
|
|
.size(2.75);
|
|
}
|
|
|
|
h1 { .size(5); }
|
|
h2 { .size(4.2); }
|
|
h3 { .size(3.6); }
|
|
h4 { .size (3); }
|
|
h5 { .size(2.2); }
|
|
h6 { .size(1.6); }
|
|
|
|
|
|
pre > code {
|
|
|
|
display: block;
|
|
position: relative;
|
|
border: 1px solid #333;
|
|
width: 90%;
|
|
margin: auto;
|
|
padding-left: .25vw;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
box-sizing: border-box;
|
|
z-index: 9001;
|
|
position: fixed;
|
|
|
|
top: 0px;
|
|
left: 0px;
|
|
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: none;
|
|
|
|
background-color: @base;
|
|
|
|
.center {
|
|
position: relative;
|
|
|
|
width: 80%;
|
|
height: 80%;
|
|
margin: auto;
|
|
border: 1px solid @light-base;
|
|
|
|
text-align: center;
|
|
}
|
|
|
|
&.shown {
|
|
display: block;
|
|
}
|
|
|
|
table {
|
|
margin: 30px;
|
|
|
|
border-collapse: collapse;
|
|
tr {
|
|
td {
|
|
}
|
|
}
|
|
|
|
input {
|
|
height: 100%;
|
|
width: 90%;
|
|
border: 3px solid @base;
|
|
}
|
|
|
|
thead {
|
|
tr {
|
|
th {
|
|
span.remove {
|
|
}
|
|
}
|
|
}
|
|
}
|
|
tbody {
|
|
tr {
|
|
td {
|
|
|
|
}
|
|
}
|
|
}
|
|
tfoot {
|
|
tr {
|
|
td {
|
|
z-index: 4000;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#addtime,
|
|
#adddate {
|
|
color: @cp-green;
|
|
border: 1px solid @cp-green;
|
|
padding: 15px;
|
|
}
|
|
|
|
#adddate { .top-left; }
|
|
#addtime { .bottom-left; }
|
|
}
|