.full-button {
background-color: #1d1f21; color: #ccc; font-family: Menlo, Consolas, monospace; border: 1px solid #8f8f8f; padding: 1em; text-decoration: none; display: block; text-align: center; margin-top: 0.5em; margin-bottom: 0.5em; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-color: #323539; background-image: -webkit-linear-gradient(top, #323539 0%, #1a1c1e 20%); background-image: -moz-linear-gradient(top, #323539 0%, #1a1c1e 20%); background-image: -ms-linear-gradient(top, #323539 0%, #1a1c1e 20%); background-image: -o-linear-gradient(top, #323539 0%, #1a1c1e 20%); background-image: linear-gradient(top, #323539 0%, #1a1c1e 20%);
} .full-button:hover {
color: #ccc; background-color: #323539; background-color: #45494e; background-image: -webkit-linear-gradient(top, #45494e 0%, #2d3033 20%); background-image: -moz-linear-gradient(top, #45494e 0%, #2d3033 20%); background-image: -ms-linear-gradient(top, #45494e 0%, #2d3033 20%); background-image: -o-linear-gradient(top, #45494e 0%, #2d3033 20%); background-image: linear-gradient(top, #45494e 0%, #2d3033 20%);
} .full-button:active {
background-color: #474c51; background-color: #2d3033; background-image: -webkit-linear-gradient(top, #2d3033 0%, #45494e 20%); background-image: -moz-linear-gradient(top, #2d3033 0%, #45494e 20%); background-image: -ms-linear-gradient(top, #2d3033 0%, #45494e 20%); background-image: -o-linear-gradient(top, #2d3033 0%, #45494e 20%); background-image: linear-gradient(top, #2d3033 0%, #45494e 20%);
} .full-button > .label-icon-left {
float: left;
} .full-button > .label-icon-right {
float: right;
} .inline-text-input, .inline-dropdown {
background-color: #1d1f21; color: #ccc; font-family: Menlo, Consolas, monospace; border: 1px solid #8f8f8f; padding: 1em; text-decoration: none; display: block; text-align: center; margin-top: 0.5em; margin-bottom: 0.5em; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: left; box-sizing: border-box; width: 100%; box-shadow: inset 0px 0px 2px 2px #17191a;
} .inline-text-input:hover, .inline-dropdown:hover {
color: #ccc; background-color: #323539;
} .inline-text-input:active, .inline-dropdown:active {
background-color: #474c51;
} .inline-text-input > .label-icon-left, .inline-dropdown > .label-icon-left {
float: left;
} .inline-text-input > .label-icon-right, .inline-dropdown > .label-icon-right {
float: right;
} .inline-text-input.unclicked, .inline-dropdown.unclicked {
color: #666;
} textarea.inline-text-input, textarea.inline-dropdown {
height: 25em;
} input::-webkit-input-placeholder {
color: #666;
} input:focus::-webkit-input-placeholder {
opacity: 0;
} .inline-checkbox {
padding: 0.2em; -webkit-user-select: none; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; font-family: Menlo, Consolas, monospace; min-height: 1.4em; display: inline-block;
} .inline-checkbox > span {
vertical-align: middle;
} .inline-checkbox input {
display: none;
} .inline-checkbox:before {
display: inline-block; vertical-align: middle; content: " "; width: 1em; height: 1em; border: 1px solid #8f8f8f; margin-right: 0.5em; background-color: #323539; background-image: -webkit-linear-gradient(top, #323539 0%, #1a1c1e 20%); background-image: -moz-linear-gradient(top, #323539 0%, #1a1c1e 20%); background-image: -ms-linear-gradient(top, #323539 0%, #1a1c1e 20%); background-image: -o-linear-gradient(top, #323539 0%, #1a1c1e 20%); background-image: linear-gradient(top, #323539 0%, #1a1c1e 20%);
} .inline-checkbox.checked:before {
content: "X"; font-weight: 900; color: #717980; text-align: center; background-color: #2d3033; background-image: -webkit-linear-gradient(top, #2d3033 0%, #45494e 20%); background-image: -moz-linear-gradient(top, #2d3033 0%, #45494e 20%); background-image: -ms-linear-gradient(top, #2d3033 0%, #45494e 20%); background-image: -o-linear-gradient(top, #2d3033 0%, #45494e 20%); background-image: linear-gradient(top, #2d3033 0%, #45494e 20%);
} .inline-checkbox:hover {
background-color: #323539;
} toolbar {
background-color: #000; margin: 0px; font-family: Menlo, Consolas, monospace; height: calc(2% + 15px);
} .tool-button {
float: left; padding: 0.5em; margin: 0; text-decoration: none; color: #ccc; border-right: 1px solid; border-left: 1px solid; margin-right: 0em;
} .tool-button:hover {
background-color: #333;
} .button-box {
position: absolute; top: 0.5em; right: 0.5em; margin-right: 1em; background-color: rgba(0,0,0,0.5); box-shadow: 2px 2px 4px 2px #17191a; padding: 0; z-index: 3;
} .button-box .full-button, .button-box .inline-text-input, .button-box .inline-checkbox {
float: left; margin: 0; padding: 0.2em;
} .button-box .full-button:active, .button-box .inline-checkbox:active {
margin-top: 0.1em; margin-bottom: -0.1em;
} .button-box .inline-text-input {
width: auto;
} .button-box .inline-checkbox {
border: 1px solid #8f8f8f;
} .button-box .inline-checkbox:before {
border: 1px solid #3d3d3d; height: 50%;
} .button-box .label-icon-left, .button-box .label-icon-right {
margin: 0px 5px;
} .inline-button {
background-color: #1d1f21; color: #ccc; font-family: Menlo, Consolas, monospace; border: 1px solid #8f8f8f; padding: 1em; text-decoration: none; display: block; text-align: center; margin-top: 0.5em; margin-bottom: 0.5em; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: inline-block;
} .inline-button:hover {
color: #ccc; background-color: #323539;
} .inline-button:active {
background-color: #474c51;
} .inline-button > .label-icon-left {
float: left;
} .inline-button > .label-icon-right {
float: right;
} .floating-button {
background-color: #1d1f21; color: #ccc; font-family: Menlo, Consolas, monospace; border: 1px solid #8f8f8f; padding: 1em; text-decoration: none; display: block; text-align: center; margin-top: 0.5em; margin-bottom: 0.5em; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; float: left; margin: 0; padding: 0.2em;
} .floating-button:hover {
color: #ccc; background-color: #323539;
} .floating-button:active {
background-color: #474c51;
} .floating-button > .label-icon-left {
float: left;
} .floating-button > .label-icon-right {
float: right;
} .floating-button:active {
margin-top: 0.1em; margin-bottom: -0.1em;
}