Marlin_Firmware/Marlin/configurator/css/configurator.css
Scott Lahteine e74138b2be More robust fetch code, download buttons
- Fetch code now handles github, local, or http: access
- Download button creates a time-stamped inline download
- More complete error messages
- Show warnings when approaching the hourly fetch quota (limit
reloading!)
- Added my test domain (where the _htaccess is deployed)
- `_htaccess` file added to set Access-Control-Allow-Origin “*”
- Marlin logo with css
- Limit selectable areas to avoid annoying selections
- Messages now persist until dismissed
- Default repo for files set to thinkyhead, ‘marlin_configurator’ branch
- Cosmetic changes
2015-02-11 04:59:07 -08:00

269 lines
6.2 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

/* configurator.css */
/* Styles for Marlin Configurator */
.clear { clear: both; }
/* Prevent selection except PRE tags */
* {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
pre {
-webkit-touch-callout: text;
-webkit-user-select: text;
-khtml-user-select: text;
-moz-user-select: text;
-ms-user-select: text;
user-select: text;
}
body { margin: 0; padding: 0; background: #56A; color: #000; font-family: monospace; }
#main {
max-width: 1000px;
margin: 0 auto;
padding: 0 4%; width: 92%;
}
h1, h2, h3, h4, h5, h6 { clear: both; }
h1, p.info { font-family: sans-serif; }
h1 {
background: transparent url(logo.png) right top no-repeat;
height: 38px;
margin-bottom: -30px;
}
p.info { padding: 0; color: #000; }
p.info span { color: #800; }
#message { text-align: center; }
#message { width: 80%; margin: 0 auto 0.25em; color: #FF0; }
#message p { padding: 2px 0; }
#message p.error, #message p.message { color: #F00; background: #FF4; font-weight: bold; border-radius: 0.8em; }
#message p.message { color: #080; background: #CFC; }
#message p.message span {
color: #A00;
background: rgba(255, 255, 255, 1);
border: 1px solid rgba(0,0,0,0.5);
border-radius: 1em;
float: right;
margin-right: 0.5em;
padding: 0 3px;
font-family: sans-serif;
font-size: small;
position: relative;
top: -1px;
}
#help strong { color: #0DD; }
img { display: none; }
/* Forms */
#config_form {
display: block;
background: #EEE;
padding: 6px 20px 20px;
color: #000;
position: relative;
border-top-right-radius: 1.5em;
}
fieldset {
height: 16.1em;
overflow-y: scroll;
overflow-x: hidden;
margin-top: 10px;
}
label, input, select, textarea { display: block; float: left; margin: 1px 0; }
label.newline, textarea, fieldset { clear: both; }
label {
width: 140px; /* label area */
height: 1em;
padding: 10px 460px 10px 1em;
margin-right: -450px;
text-align: right;
}
input[type="text"], select { margin: 0.75em 0 0; }
input[type="checkbox"], input[type="radio"], input[type="file"] { margin: 1em 0 0; }
input[type="checkbox"], input[type="radio"].enabler { margin-left: 1em; }
input:disabled { color: #BBB; }
ul.tabs { padding: 0; list-style: none; }
ul.tabs li { display: inline; }
ul.tabs li a,
ul.tabs li a.active:hover,
ul.tabs li a.active:active {
display: block;
float: left;
background: #1E4059;
color: #CCC;
font-size: 110%;
border-radius: 0.25em 0.25em 0 0;
margin: 0 4px 0 0;
padding: 2px 8px;
text-decoration: none;
font-family: georgia,"times new roman",times;
}
ul.tabs li a.active:link,
ul.tabs li a.active:visited {
background: #DDD;
color: #06F;
cursor: default;
margin-top: -4px;
padding-bottom: 4px;
padding-top: 4px;
}
ul.tabs li a:hover,
ul.tabs li a:active {
background: #000;
color: #FFF;
}
fieldset { display: none; border: 1px solid #AAA; border-radius: 1em; }
fieldset legend { display: none; }
.hilightable span {
display: block;
float: left;
width: 100%;
height: 1.3em;
background: rgba(225,255,0,1);
margin: 0 -100% -1em 0;
}
#serial_stepper { padding-top: 0.75em; display: block; float: left; }
#SERIAL_PORT { display: none; }
/* Tooltips */
#tooltip {
display: none;
max-width: 30em;
padding: 8px;
border: 2px solid #73d699;
border-radius: 1em;
position: absolute;
z-index: 999;
font-family: sans-serif;
font-size: 85%;
color: #000;
line-height: 1.1;
background: #e2ff99; /* Old browsers */
background: -moz-linear-gradient(top, #e2ff99 0%, #73d699 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e2ff99), color-stop(100%,#73d699)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #e2ff99 0%,#73d699 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #e2ff99 0%,#73d699 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #e2ff99 0%,#73d699 100%); /* IE10+ */
background: linear-gradient(to bottom, #e2ff99 0%,#73d699 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2ff99', endColorstr='#73d699',GradientType=0 ); /* IE6-9 */
-webkit-box-shadow: 0px 6px 25px -4px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 6px 25px -4px rgba(0,0,0,0.75);
box-shadow: 0px 6px 25px -4px rgba(0,0,0,0.75);
}
#tooltip>span {
position: absolute;
content: "";
width: 0;
height: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid #73d699;
z-index: 999;
bottom: -10px;
left: 20px;
}
#tooltip>strong { color: #00B; }
/* Tooltips Checkbox */
#tipson { float: right; font-weight: bold; font-size: 100%; font-family: helvetica; }
#tipson input { float: none; display: inline; }
/* Config Text */
pre.config {
height: 25em;
padding: 10px;
border: 2px solid #888;
border-radius: 5px;
overflow: auto;
clear: both;
background-color: #FFF;
color: #000;
font-family: "Fira Mono";
font-size: small;
}
/* Pre Headers */
h2 {
width: 100%;
margin: 12px -300px 4px 0;
padding: 0;
float: left;
}
/* Disclosure Widget */
span.disclose, a.download {
display: block;
float: right;
margin-top: 12px;
}
span.disclose {
margin-right: -10px; /* total width */
margin-left: 14px;
width: 0;
height: 0;
position: relative;
left: 3px;
top: 3px;
cursor: pointer;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 10px solid #000;
}
span.disclose.closed {
margin-right: -8px; /* total width */
margin-left: 10px;
left: 0;
top: 0;
border-top: 8px solid transparent;
border-bottom: 8px solid transparent;
border-right: 10px solid #000;
}
span.disclose.almost {
-ms-transform: rotate(45deg); /* IE 9 */
-webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
transform: rotate(45deg);
}
span.disclose.closed.almost {
left: 1px;
top: 3px;
-ms-transform: rotate(315deg); /* IE 9 */
-webkit-transform: rotate(315deg); /* Chrome, Safari, Opera */
transform: rotate(315deg);
}
/* Download Button */
a.download {
visibility: hidden;
padding: 2px;
border: 1px solid #494;
border-radius: 4px;
margin: 12px 0 0;
background: #FFF;
color: #494;
font-family: sans-serif;
font-size: small;
font-weight: bold;
text-decoration: none;
}