diff --git a/data/index.html b/data/index.html index 2a1d07a..0508149 100644 --- a/data/index.html +++ b/data/index.html @@ -10,7 +10,7 @@
-
+ Laser
    diff --git a/data/styles.css b/data/styles.css index 84c65d3..7d3d1be 100644 --- a/data/styles.css +++ b/data/styles.css @@ -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; -} diff --git a/frontend/pages/index.html b/frontend/pages/index.html index 2a1d07a..0508149 100644 --- a/frontend/pages/index.html +++ b/frontend/pages/index.html @@ -10,7 +10,7 @@
    - + Laser
      diff --git a/frontend/styles/base.less b/frontend/styles/base.less new file mode 100644 index 0000000..6c08b7a --- /dev/null +++ b/frontend/styles/base.less @@ -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; + } +} \ No newline at end of file diff --git a/frontend/styles/container.less b/frontend/styles/container.less new file mode 100644 index 0000000..9af4f50 --- /dev/null +++ b/frontend/styles/container.less @@ -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; + } + } + } +} \ No newline at end of file diff --git a/frontend/styles/form/input.less b/frontend/styles/form/input.less new file mode 100644 index 0000000..80f1f5e --- /dev/null +++ b/frontend/styles/form/input.less @@ -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"] { + + } +} \ No newline at end of file diff --git a/frontend/styles/form/layout.less b/frontend/styles/form/layout.less index 0eead58..8ad18d7 100644 --- a/frontend/styles/form/layout.less +++ b/frontend/styles/form/layout.less @@ -30,17 +30,17 @@ form { .form-row input[type="range"] { } - @media screen and (min-width: 768px) { + @media screen and (min-width: 768px) { .form-row > input, .form-row > span { flex: 3; } } - @media screen and (min-width: 992px) { + @media screen and (min-width: 992px) { .form-row > input, .form-row > span { flex: 4; } } - @media screen and (min-width: 1200px) { + @media screen and (min-width: 1200px) { .form-row > input, .form-row > span { flex: 5; } diff --git a/frontend/styles/form/slider.less b/frontend/styles/form/slider.less index d4624bf..7f3776f 100644 --- a/frontend/styles/form/slider.less +++ b/frontend/styles/form/slider.less @@ -2,6 +2,7 @@ input[type=range] { -webkit-appearance: none; width: 100%; margin: 8.4px 0; + padding: 0 !important; } input[type=range]:focus { outline: none; diff --git a/frontend/styles/form/switch.less b/frontend/styles/form/switch.less index fcc3adf..07377dd 100644 --- a/frontend/styles/form/switch.less +++ b/frontend/styles/form/switch.less @@ -3,7 +3,9 @@ position: relative; display: inline; - input {display:none;} + input { + display:none; + } /* The slider */ .slider { diff --git a/frontend/styles/heading.less b/frontend/styles/heading.less new file mode 100644 index 0000000..991dc7e --- /dev/null +++ b/frontend/styles/heading.less @@ -0,0 +1,5 @@ +.heading { + font-size: 1.2em; + display: block; + margin-bottom: @default-margin; +} \ No newline at end of file diff --git a/frontend/styles/main.less b/frontend/styles/main.less index 1c1c2ff..88bfafb 100644 --- a/frontend/styles/main.less +++ b/frontend/styles/main.less @@ -1,99 +1,10 @@ +@import "theme.less"; + +@import "base.less"; +@import "heading.less"; +@import "container.less"; + @import "form/slider.less"; @import "form/switch.less"; @import "form/layout.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; - } -} \ No newline at end of file +@import "form/input.less"; diff --git a/frontend/styles/theme.less b/frontend/styles/theme.less index a46ea0d..e51ba9e 100644 --- a/frontend/styles/theme.less +++ b/frontend/styles/theme.less @@ -12,6 +12,7 @@ @default-margin-small: 8px; @default-border-radius: 4px; @default-border-color: #555555; +@default-font-size: 16px; @input-text-height: 16px; @input-checkbox-scale: 2;