iot/esp8266-laser
1
0
Fork 0
mirror of https://github.com/0x1d/esp8266-laser.git synced 2025-12-14 18:15:22 +01:00
Code Issues Packages Projects Releases Wiki Activity

stylin

Browse Source
This commit is contained in:
0x1d
2017-11-03 05:11:19 +00:00
parent e41d4a6394
commit caca186710
12 changed files with 172 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
data/index.html
View File

@@ -10,7 +10,7 @@
</head>
<body class="sui">
<div class="content">
<form id="prototypControls" class="spiro-control container collapsible">
<form id="prototypControls" class="spiro-control container collapsible open">
<span class="heading">Laser</span>
<div class="content">
<ul>

134
data/styles.css
View File

@@ -1,7 +1,64 @@
.hidden {
display: none;
}
.shown {
display: block;
}
.sui {
background: #000000;
color: #0eb8c0;
font-family: "Open Sans";
font-size: 16px;
}
.sui * {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
.sui > .content {
padding: 16px;
}
.sui label {
color: #b3b2b2;
}
.sui button {
background: #097479;
color: white;
border: 0;
padding: .8em;
}
.heading {
font-size: 1.2em;
display: block;
margin-bottom: 16px;
}
.container {
background: #333333;
padding: 16px;
border-radius: 4px;
border: solid 1px #555555;
margin-bottom: 8px;
}
.container.collapsible > .heading {
margin-bottom: 0;
}
.container.collapsible > .heading:hover {
cursor: pointer;
}
.container.collapsible > .content {
display: none;
}
.container.collapsible.open > .heading {
margin-bottom: 16px;
}
.container.collapsible.open > .content {
display: block;
}
input[type=range] {
-webkit-appearance: none;
width: 100%;
margin: 8.4px 0;
padding: 0 !important;
}
input[type=range]:focus {
outline: none;
@@ -179,87 +236,24 @@ form .form-row input[type="checkbox"] {
flex: 5;
}
}
.sui {
background: #000000;
color: #0eb8c0;
font-family: "Open Sans";
}
.sui * {
margin: 0;
padding: 0;
}
.sui .hidden {
display: none;
}
.sui .shown {
display: block;
}
.sui input {
padding: .5em;
}
.sui button {
padding: .8em;
}
.sui > .content {
padding: 16px;
}
.sui > .content .heading {
font-size: 1.2em;
display: block;
margin-bottom: 16px;
}
.sui > .content .container {
background: #333333;
padding: 16px;
border-radius: 4px;
border: solid 1px #555555;
margin-bottom: 8px;
}
.sui > .content .container.collapsible > .heading {
margin-bottom: 0;
}
.sui > .content .container.collapsible > .heading:hover {
cursor: pointer;
}
.sui > .content .container.collapsible > .content {
display: none;
}
.sui > .content .container.collapsible.open > .heading {
margin-bottom: 16px;
}
.sui > .content .container.collapsible.open > .content {
display: block;
}
.sui > .content label {
color: #b3b2b2;
}
.sui > .content input[type="text"],
.sui > .content input[type="password"] {
.sui input[type="text"],
.sui input[type="password"] {
height: 16px;
background: transparent;
border: none;
color: #eeeeee;
}
.sui > .content input[type="text"]:focus,
.sui > .content input[type="password"]:focus,
.sui > .content input[type="text"]:hover,
.sui > .content input[type="password"]:hover {
.sui input[type="text"]:focus,
.sui input[type="password"]:focus,
.sui input[type="text"]:hover,
.sui input[type="password"]:hover {
outline: none;
border-bottom: solid 1px #097479;
box-shadow: 3px #097479;
}
.sui > .content input[type="checkbox"] {
.sui input[type="checkbox"] {
transform: scale(2);
}
.sui > .content input[type="range"] {
padding: 0;
}
.sui > .content button {
background: #097479;
color: white;
border: 0;
}
.spiro-control .form-row.info {
padding-bottom: 0px;
margin-bottom: 0px;
}