You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
237 lines
8.4 KiB
CSS
237 lines
8.4 KiB
CSS
/* Helper function to set up our fonts */
|
|
webfont(family, file, weight = 'normal', style='normal') {
|
|
@font-face {
|
|
font-family: family;
|
|
src: url('/fonts/' + file + ".eot");
|
|
src: url('/fonts/' + file + ".eot?#iefix") format('embedded-opentype'),
|
|
url('/fonts/' + file + ".woff") format('woff'),
|
|
url('/fonts/' + file + ".ttf") format('truetype'),
|
|
url('/fonts/' + file + ".svg#" + family) format('svg');
|
|
font-weight: weight;
|
|
font-style: style;
|
|
}
|
|
}
|
|
/* Set up all the web-fonts we host */
|
|
webfont('engravers_gothic_fsregular', 'EngraversGothic-Regular-webfont');
|
|
webfont('C64ProMono', 'C64_Pro_Mono-STYLE');
|
|
webfont('C64Pro', 'C64_Pro-STYLE');
|
|
|
|
/* Basic style */
|
|
html, body {
|
|
height: 100%;
|
|
font-family: "Segoe UI", "Arial", "Helvetica", sans-serif;
|
|
/* Prevent highlighting/selecting text */
|
|
-webkit-touch-callout: none;
|
|
-webkit-user-select: none;
|
|
-moz-user-select: none;
|
|
-ms-user-select: none;
|
|
user-select: none;
|
|
cursor: default;
|
|
}
|
|
.body { margin: 10px; }
|
|
.nav, .pagination, .carousel, .panel-title a { cursor: pointer; }
|
|
|
|
/* Wrapper for page content to push down footer */
|
|
#wrap {
|
|
min-height: 100%;
|
|
height: auto !important;
|
|
height: 100%;
|
|
margin: 0 auto -70px; /* Negative indent footer by its height */
|
|
padding: 0 0 60px; /* Pad bottom by footer height */
|
|
}
|
|
|
|
/* Set the fixed height of the footer here */
|
|
#footer {
|
|
height: 70px;
|
|
background-color: #f5f5f5;
|
|
}
|
|
|
|
/* The keyboard background */
|
|
#keyboard {
|
|
padding: 9px;
|
|
position: relative;
|
|
border: solid 1px #ddd;
|
|
border-radius: 6px;
|
|
background-color: #eee;
|
|
min-height: 56px;
|
|
box-sizing: content-box;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
#keyboard div {
|
|
position: absolute;
|
|
border-color: black;
|
|
box-sizing: border-box;
|
|
background-clip: padding-box;
|
|
}
|
|
#keyboard .hover .keyborder { border-color: green !important; border-style: solid; }
|
|
#keyboard .selected .keyborder { border-color: red !important; border-style: solid; }
|
|
#keyboard .ghosted { opacity: 0.5; }
|
|
|
|
/* Key labels */
|
|
.keylabel>div { display: table-cell; position: static !important; }
|
|
.keylabel3>div, .keylabel4>div, .keylabel6>div, .keylabel8>div { text-align: right; }
|
|
.keylabel7>div, .keylabel8>div { vertical-align: middle; }
|
|
.keylabel2>div, .keylabel4>div { vertical-align: bottom; }
|
|
.keylabel5, .keylabel6 { top: 100%; margin-top: -1px; font-size: 10px !important; white-space: nowrap; overflow: hidden;}
|
|
.keylabel1.centerx-true>div, .keylabel2.centerx-true>div, .keylabel5.centerf-true>div, .keylabel7.centerx-true>div { text-align: center; }
|
|
.keylabel1.centery-true>div, .keylabel3.centery-true>div { vertical-align: middle; }
|
|
|
|
for i in (1..9) {
|
|
.keylabel.textsize{i} {
|
|
font-size: (6+2*i)px;
|
|
line-height: 1em;
|
|
}
|
|
}
|
|
.keylabels { font-family: "Helvetica", "Arial", sans-serif; }
|
|
.keylabel hr { display: inline; }
|
|
.keylabel hr:before {
|
|
position: relative;
|
|
display: block;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
content: "\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500\2500";
|
|
}
|
|
|
|
/* Keycap-Profile Modifications */
|
|
.SA .keylabels, .DSA .keylabels {
|
|
font-family: 'engravers_gothic_fsregular'; /* substitute for Gorton Modified */
|
|
}
|
|
|
|
.DSA .keylabel5, .DSA .keylabel6, .SA .keylabel5, .SA .keylabel6 { margin-top: -1px; font-size: 9px !important; }
|
|
.DCS .keytop, .OEM .keytop {
|
|
background: linear-gradient(to right, #00000000 0%, #0000001A 40%, #0000001A 60%, #00000000 100%);
|
|
background-repeat: no-repeat;
|
|
}
|
|
.DSA .keytop, .SA .keytop {
|
|
background: radial-gradient(ellipse at center, #0000001A 0%, #0000001A 10%, #00000000 100%);
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.DCS.SPACE .keytop, .OEM.SPACE .keytop, .DSA.SPACE .keytop, .SA.SPACE .keytop {
|
|
background: linear-gradient(to bottom, #0000001A 0%, #00000000 20%, #00000000 40%, #0000001A 100%);
|
|
background-repeat: no-repeat;
|
|
}
|
|
.DSA.DISH .keytop, .DSA.HOMING .keytop, .SA.HOMING .keytop {
|
|
background: radial-gradient(circle, #0000001C 50%, #0000000A 60%);
|
|
background-repeat: no-repeat;
|
|
}
|
|
.HOMING .keytop .keylabels {
|
|
background-image: url("nub.png");
|
|
background-repeat: no-repeat;
|
|
background-position: center 90%;
|
|
}
|
|
.DSA.HOMING .keytop .keylabels, .SA.HOMING .keytop .keylabels { background-image: none; }
|
|
|
|
span.PETSCII {
|
|
font-family: "C64ProMono";
|
|
font-size: 6px !important;
|
|
border: solid 1px;
|
|
letter-spacing: 0px;
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
/* color swatches */
|
|
#swatches { list-style-type: none; }
|
|
.swatch {
|
|
display: inline-block;
|
|
position: relative;
|
|
width: 16px;
|
|
height: 32px;
|
|
border: solid 1px #888;
|
|
margin-right: -1px;
|
|
margin-bottom: -6px;
|
|
padding: 0px;
|
|
}
|
|
#swatches.disabled .swatch { background-color: rgb(235,235,228) !important; }
|
|
#swatches [data-hint]:after { white-space: nowrap; }
|
|
|
|
.swatch .highlight { display: none; }
|
|
.swatch.selected-bg .highlight.bg { display: block; z-index: 100; width: 6px; height: 6px; border: solid 1px black; background: white; opacity: 0.75; position: absolute; left: 7px; top: 23px; }
|
|
.swatch.selected-fg .highlight.fg { display: block; z-index: 100; width: 6px; height: 6px; border: solid 1px white; background: black; opacity: 0.75; position: absolute; left: 1px; top: 23px; }
|
|
|
|
/* general styles */
|
|
.hidden { display: none; }
|
|
.error { border: solid 2px rgb(217,83,79); }
|
|
#selectionRectangle { position: absolute; border: dashed 2px red; }
|
|
#rotationCrosshairs {
|
|
display: none;
|
|
position: absolute;
|
|
margin: 0px;
|
|
padding: 0px;
|
|
font-size: 25px;
|
|
line-height: 23px;
|
|
width: 25px;
|
|
height: 25px;
|
|
color: black;
|
|
text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
|
|
}
|
|
|
|
#rawdata, #rawdata-error, #noteseditor { font-family: "Consolas", "Courier New", "Courier", monospace; }
|
|
#rawdata { width: 100%; }
|
|
#rawdata-error { white-space: pre; }
|
|
|
|
#tab-content {
|
|
border-left: 1px solid #ddd;
|
|
border-right: 1px solid #ddd;
|
|
border-bottom: 1px solid #ddd;
|
|
padding-top: 15px;
|
|
padding-bottom: 15px;
|
|
margin-left: 0px;
|
|
}
|
|
#properties.row { padding-left: 30px; }
|
|
|
|
/* Tooltip modifications */
|
|
.hint--rounded:after { width: 300px; }
|
|
.hint:after, [data-hint]:after { white-space: pre-line; }
|
|
.hint:before, .hint:after, [data-hint]:before, [data-hint]:after { -webkit-transition: 0.1s ease; -moz-transition: 0.1s ease; transition: 0.1s ease; }
|
|
|
|
/* Help Dialog */
|
|
.modal-xl .modal-dialog { width: 80vw; }
|
|
.modal-xxl .modal-dialog { width: 90vw; }
|
|
|
|
/* Our "README" dialog; we want the body of the dialog itself to be scrollable */
|
|
.markdownDialog .modal-dialog { margin: 30 auto; } /*60px*/
|
|
.markdownDialog .modal-header { height: 55px; }
|
|
.markdownDialog .modal-footer { height: 74px; margin-top: 0px; }
|
|
.markdownDialog .modal-body {
|
|
padding-bottom: 15px;
|
|
height: calc(100vh - 205px) !important;
|
|
overflow-y: auto !important;
|
|
}
|
|
|
|
.drag-over { border: dotted 3px red !important; box-sizing: border-box; }
|
|
|
|
/* Only show the keyboard layout itself when printing */
|
|
@media print {
|
|
html, body { overflow: hidden; height: 100%; margin: 0 !important; padding: 0 !important; }
|
|
#wrap > .navbar, #wrap > .body > .btn-group, #keyboard ~ *, #keyboard + *, #footer, #helpDialog, #markdownDialog { display: none; margin: 0 !important; padding: 0 !important; }
|
|
div.body { margin: 0 !important; padding: 0 !important; }
|
|
a { color: black; text-decoration: none; }
|
|
#keyboard {
|
|
border: none;
|
|
background-color: inherit !important;
|
|
transform: scale(0.75,0.75);
|
|
position: absolute !important;
|
|
left: 0px;
|
|
top: 0px;
|
|
padding-left: 0px; padding-top: 0px;
|
|
}
|
|
}
|
|
|
|
/* the default (-15px) causes overflow problems */
|
|
.navbar-right { margin-right: 0; }
|
|
|
|
/* densely pack the form */
|
|
.form-horizontal .form-inline, .form-horizontal > .form-group.form-group-sm > .form-outdent { margin-left: -15px; }
|
|
.form-horizontal .form-inline .form-group { margin-left: 0; margin-right: 0; }
|
|
.form-group { margin-bottom: 2px; }
|
|
.form-control.input-sm, .input-group-sm > .form-control { height: 26px; padding: 2px; }
|
|
.input-group-sm > .input-group-btn > .btn { height: 26px; padding: 2px; min-width: 16px; }
|
|
.input-group-sm > .input-group-addon { height: 26px; padding: 2px; min-width: 16px; }
|
|
.form-horizontal .form-group-sm .checkbox { padding-top: 3px; min-height: 26px; }
|
|
|
|
#swap-colors { position: absolute; top: 11px; left: 200px; z-index: 1; }
|
|
.color-name { display: inline-block; min-width: 3em; font-size: 10px; white-space: nowrap; }
|