iot/esp8266-laser
1
0
Fork 0
mirror of https://github.com/0x1d/esp8266-laser.git synced 2025-12-15 18:38:20 +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> </head>
<body class="sui"> <body class="sui">
<div class="content"> <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> <span class="heading">Laser</span>
<div class="content"> <div class="content">
<ul> <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] { input[type=range] {
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; width: 100%;
margin: 8.4px 0; margin: 8.4px 0;
padding: 0 !important;
} }
input[type=range]:focus { input[type=range]:focus {
outline: none; outline: none;
@@ -179,87 +236,24 @@ form .form-row input[type="checkbox"] {
flex: 5; 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 { .sui input {
padding: .5em; padding: .5em;
} }
.sui button { .sui input[type="text"],
padding: .8em; .sui input[type="password"] {
}
.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"] {
height: 16px; height: 16px;
background: transparent; background: transparent;
border: none; border: none;
color: #eeeeee; color: #eeeeee;
} }
.sui > .content input[type="text"]:focus, .sui input[type="text"]:focus,
.sui > .content input[type="password"]:focus, .sui input[type="password"]:focus,
.sui > .content input[type="text"]:hover, .sui input[type="text"]:hover,
.sui > .content input[type="password"]:hover { .sui input[type="password"]:hover {
outline: none; outline: none;
border-bottom: solid 1px #097479; border-bottom: solid 1px #097479;
box-shadow: 3px #097479; box-shadow: 3px #097479;
} }
.sui > .content input[type="checkbox"] { .sui input[type="checkbox"] {
transform: scale(2); 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;
}

2
frontend/pages/index.html
View File

@@ -10,7 +10,7 @@
</head> </head>
<body class="sui"> <body class="sui">
<div class="content"> <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> <span class="heading">Laser</span>
<div class="content"> <div class="content">
<ul> <ul>

36
frontend/styles/base.less Normal file
View File

@@ -0,0 +1,36 @@
.hidden {
display: none;
}
.shown {
display: block;
}
.sui {
background: @color-black;
color: @color-main-light;
font-family: @default-font;
font-size: @default-font-size;
* {
margin: 0;
padding: 0;
-webkit-tap-highlight-color: transparent;
}
> .content {
padding: @default-padding;
}
label {
color: @color-grey;
}
button {
background: @color-main;
color: white;
border: 0;
padding: .8em;
}
}

26
frontend/styles/container.less Normal file
View File

@@ -0,0 +1,26 @@
.container {
background: @color-container;
padding: @default-padding;
border-radius: @default-border-radius;
border: solid 1px @default-border-color;
margin-bottom: @default-margin-small;
&.collapsible {
> .heading {
margin-bottom: 0;
&:hover {
cursor: pointer;
}
}
> .content {
.hidden;
}
&.open {
> .heading {
margin-bottom: @default-margin;
}
> .content {
.shown;
}
}
}
}

24
frontend/styles/form/input.less Normal file
View File

@@ -0,0 +1,24 @@
.sui {
input {
padding: .5em;
}
input[type="text"], input[type="password"] {
height: @input-text-height;
background: transparent;
border: none;
color: @color-white;
&:focus, &:hover {
outline: none;
border-bottom: solid 1px @color-main;
box-shadow: 3px @color-main;
}
}
input[type="checkbox"] {
transform: scale(@input-checkbox-scale);
}
input[type="range"] {
}
}

1
frontend/styles/form/slider.less
View File

@@ -2,6 +2,7 @@ input[type=range] {
-webkit-appearance: none; -webkit-appearance: none;
width: 100%; width: 100%;
margin: 8.4px 0; margin: 8.4px 0;
padding: 0 !important;
} }
input[type=range]:focus { input[type=range]:focus {
outline: none; outline: none;

4
frontend/styles/form/switch.less
View File

@@ -3,7 +3,9 @@
position: relative; position: relative;
display: inline; display: inline;
input {display:none;} input {
display:none;
}
/* The slider */ /* The slider */
.slider { .slider {

5
frontend/styles/heading.less Normal file
View File

@@ -0,0 +1,5 @@
.heading {
font-size: 1.2em;
display: block;
margin-bottom: @default-margin;
}

103
frontend/styles/main.less
View File

@@ -1,99 +1,10 @@
@import "theme.less";
@import "base.less";
@import "heading.less";
@import "container.less";
@import "form/slider.less"; @import "form/slider.less";
@import "form/switch.less"; @import "form/switch.less";
@import "form/layout.less"; @import "form/layout.less";
@import "form/input.less";
@import "theme.less";
.sui {
background: @color-black;
color: @color-main-light;
font-family: @default-font;
* {
margin: 0;
padding: 0;
}
.hidden {
display: none;
}
.shown {
display: block;
}
input {
padding: .5em;
}
button {
padding: .8em;
}
> .content {
padding: @default-padding;
.heading {
font-size: 1.2em;
display: block;
margin-bottom: @default-margin;
}
.container {
background: @color-container;
padding: @default-padding;
border-radius: @default-border-radius;
border: solid 1px @default-border-color;
margin-bottom: @default-margin-small;
&.collapsible {
> .heading {
margin-bottom: 0;
&:hover {
cursor: pointer;
}
}
> .content {
.hidden;
}
&.open {
> .heading {
margin-bottom: @default-margin;
}
> .content {
.shown;
}
}
}
}
label {
color: @color-grey;
}
input[type="text"], input[type="password"] {
height: @input-text-height;
background: transparent;
border: none;
color: @color-white;
&:focus, &:hover {
outline: none;
border-bottom: solid 1px @color-main;
box-shadow: 3px @color-main;
}
}
input[type="checkbox"] {
transform: scale(@input-checkbox-scale);
}
input[type="range"] {
padding: 0;
}
button {
background: @color-main;
color: white;
border: 0;
}
}
}
.spiro-control {
.form-row.info {
padding-bottom: 0px;
margin-bottom: 0px;
}
}

1
frontend/styles/theme.less
View File

@@ -12,6 +12,7 @@
@default-margin-small: 8px; @default-margin-small: 8px;
@default-border-radius: 4px; @default-border-radius: 4px;
@default-border-color: #555555; @default-border-color: #555555;
@default-font-size: 16px;
@input-text-height: 16px; @input-text-height: 16px;
@input-checkbox-scale: 2; @input-checkbox-scale: 2;