227 lines
3.1 KiB
CSS
227 lines
3.1 KiB
CSS
button:not(:disabled) {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.ui {
|
|
position: fixed;
|
|
right: 0;
|
|
top: 0;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
width: 200px;
|
|
max-width: 600px;
|
|
box-shadow: 0 0 2px 2px #666;
|
|
-webkit-transition: -webkit-transform 500ms;
|
|
transition: transform 500ms;
|
|
}
|
|
|
|
.ui:not(.visible) {
|
|
-webkit-transform: translate(100%, 0);
|
|
transform: translate(100%, 0);
|
|
}
|
|
|
|
.ui h3 {
|
|
background-color: #34495e;
|
|
color: #fff;
|
|
padding: 0.2em 0;
|
|
margin: 0;
|
|
text-transform: capitalize;
|
|
text-align: center;
|
|
}
|
|
|
|
.ui select, .ui input {
|
|
background-color: transparent;
|
|
border: 1px solid rgba(50, 70, 90, 0.5);
|
|
font-size: 13px;
|
|
border-radius: 4px;
|
|
padding: 4px;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
-webkit-font-smoothing: subpixel-antialiased;
|
|
transition: all 250ms linear;
|
|
}
|
|
|
|
.ui select:hover, .ui input:hover, .ui select:focus, .ui input:focus {
|
|
border-color: rgba(50, 70, 90, 1);
|
|
}
|
|
|
|
.ui select, .ui input, .ui #color {
|
|
width: 168px;
|
|
}
|
|
|
|
.ui .go {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.ui p {
|
|
margin: 8px 16px;
|
|
}
|
|
|
|
.ui p.desc {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.ui:not([id]) button {
|
|
border: none;
|
|
padding: 0;
|
|
margin: 0 4px;
|
|
background-color: transparent;
|
|
width: 32px;
|
|
}
|
|
|
|
.ui button:first-child {
|
|
margin-left: 0 !important;
|
|
}
|
|
|
|
.ui button:last-child {
|
|
margin-right: 0 !important;
|
|
}
|
|
|
|
.ui button[data-command=Help] {
|
|
position: absolute;
|
|
left: -50px;
|
|
top: 5px;
|
|
}
|
|
|
|
.ui button[data-command=Notes] {
|
|
position: absolute;
|
|
left: -90px;
|
|
top: 5px;
|
|
}
|
|
|
|
.ui table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.ui table td:first-child {
|
|
padding-left: 16px;
|
|
}
|
|
|
|
.ui table td:last-child {
|
|
text-align: right;
|
|
padding-right: 16px;
|
|
}
|
|
|
|
.ui span {
|
|
text-transform: uppercase;
|
|
font-size: 80%;
|
|
}
|
|
|
|
.ui #color {
|
|
display: block;
|
|
}
|
|
|
|
.ui #color::after {
|
|
clear: both;
|
|
content: "";
|
|
display: block;
|
|
}
|
|
|
|
.ui [data-color] {
|
|
display: block;
|
|
float: left;
|
|
width: 14px;
|
|
height: 14px;
|
|
border-radius: 3px;
|
|
margin-right: 2px;
|
|
border: 1px solid transparent;
|
|
}
|
|
|
|
.ui [data-color]:hover, .ui [data-color]:first-child {
|
|
border-color: #000;
|
|
}
|
|
|
|
#notes {
|
|
width: 50%;
|
|
}
|
|
|
|
#notes-editor {
|
|
border: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.pell-content {
|
|
height: calc(100% - 60px);
|
|
}
|
|
|
|
.ui #github {
|
|
position: absolute;
|
|
right: 8px;
|
|
bottom: 6px;
|
|
}
|
|
|
|
.ui #github img {
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.ui #privacy {
|
|
position: absolute;
|
|
left: 8px;
|
|
bottom: 6px;
|
|
}
|
|
|
|
.ui #toggle {
|
|
z-index: 999;
|
|
position: absolute;
|
|
left: -23px;
|
|
top: 48%;
|
|
width: 35px;
|
|
height: 35px;
|
|
padding: 0 0 0 2px;
|
|
text-align: left;
|
|
|
|
border: none;
|
|
background-color: #fff;
|
|
box-shadow: -3px 0 2px 0px #666;
|
|
|
|
line-height: 8px;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.ui #toggle:after {
|
|
content: "←";
|
|
font-weight: bold;
|
|
font-size: 22px;
|
|
}
|
|
|
|
.ui.visible #toggle:after {
|
|
content: "→";
|
|
}
|
|
|
|
.ui#help {
|
|
overflow-y: auto;
|
|
right: auto;
|
|
left: 0;
|
|
background-color: rgba(255, 255, 255, 0.7);
|
|
width: 250px;
|
|
}
|
|
|
|
.ui#help:not(.visible) {
|
|
-webkit-transform: translate(-100%, 0);
|
|
transform: translate(-100%, 0);
|
|
}
|
|
|
|
.ui#help table {
|
|
font-size: 80%;
|
|
}
|
|
|
|
.ui#io button {
|
|
width: 45%;
|
|
}
|
|
|
|
.ui#io button:nth-child(odd) {
|
|
float: left;
|
|
}
|
|
|
|
.ui#io button:nth-child(even) {
|
|
float: right;
|
|
}
|
|
|
|
.ui select.fa-select ,
|
|
.ui select.fa-select option {
|
|
font-family: fontAwesome;
|
|
font-size: x-large;
|
|
}
|