almost complete wifi page redesign
This commit is contained in:
Executable
+31
@@ -0,0 +1,31 @@
|
||||
html {
|
||||
font-family: Arial, sans-serif;
|
||||
color: #D0D0D0;
|
||||
background: #131315;
|
||||
}
|
||||
|
||||
html, body {
|
||||
@include naked();
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
a, a:visited, a:link {
|
||||
cursor: pointer;
|
||||
color: #5abfff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: #5abfff;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
[onclick] {
|
||||
cursor: pointer;
|
||||
}
|
||||
Executable
+91
@@ -0,0 +1,91 @@
|
||||
.Box {
|
||||
display: block;
|
||||
max-width: 900px;
|
||||
|
||||
margin-top: dist(0);
|
||||
padding: dist(-1) dist(0);
|
||||
|
||||
@include media($phone) {
|
||||
margin-top: dist(-1);
|
||||
}
|
||||
|
||||
h1 + & {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
border-radius: 3px;
|
||||
background-color: rgba(white, .07);
|
||||
|
||||
&.wide {
|
||||
width: initial;
|
||||
max-width: initial;
|
||||
}
|
||||
|
||||
&.medium {
|
||||
max-width: 1200px;
|
||||
}
|
||||
|
||||
//.Valfield {
|
||||
// display: inline-block;
|
||||
// min-width: 10em;
|
||||
//}
|
||||
|
||||
&.str {
|
||||
position: relative;
|
||||
|
||||
.Row.buttons {
|
||||
position: absolute;
|
||||
right: dist(0);
|
||||
top: 2.7em;
|
||||
margin: 12px auto;
|
||||
}
|
||||
|
||||
@include media($tablet-min) {
|
||||
.Row.buttons {
|
||||
//position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
//margin: 12px auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include media($phone) {
|
||||
.Box.mobcol {
|
||||
h2 {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
content: '▸';
|
||||
|
||||
top:50%;
|
||||
font-size: 120%;
|
||||
font-weight: bold;
|
||||
transform: translate(0,-50%) rotate(90deg);
|
||||
}
|
||||
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
|
||||
&.expanded h2::after {
|
||||
transform: translate(-25%,-50%) rotate(-90deg);
|
||||
margin-bottom: dist(0);
|
||||
}
|
||||
|
||||
.Row {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.expanded .Row {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
Executable
+45
@@ -0,0 +1,45 @@
|
||||
#content {
|
||||
flex-grow: 1;
|
||||
position: relative;
|
||||
|
||||
padding: dist(0);
|
||||
@include media($phone) {
|
||||
padding: dist(-1);
|
||||
}
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
& > * {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: fsize(7);
|
||||
margin-top: 0;
|
||||
margin-bottom: dist(0);
|
||||
}
|
||||
|
||||
@include media($phone) {
|
||||
h1 {
|
||||
font-size: fsize(5);
|
||||
margin-bottom: dist(-1);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: fsize(3);
|
||||
margin-bottom: dist(-1);
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: dist(-2);
|
||||
}
|
||||
|
||||
tbody th {
|
||||
text-align: right;
|
||||
width: $form-label-w;
|
||||
color: $c-form-label-fg;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,76 @@
|
||||
|
||||
ul > * {
|
||||
padding-top: .1em;
|
||||
padding-bottom: .1em;
|
||||
}
|
||||
|
||||
h1,h2 {
|
||||
@include noselect();
|
||||
}
|
||||
|
||||
h1 {
|
||||
text-align: center;
|
||||
font-size: fsize(6);
|
||||
margin-top: 0;
|
||||
margin-bottom: dist(0);
|
||||
|
||||
@include media($phone) {
|
||||
font-size: fsize(3);
|
||||
margin-bottom: dist(-1);
|
||||
}
|
||||
|
||||
@include media($tablet) {
|
||||
font-size: fsize(5);
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: fsize(2);
|
||||
margin-bottom: dist(-1);
|
||||
//&:first-child{margin-top:0}
|
||||
}
|
||||
|
||||
td, th {
|
||||
padding: dist(-2);
|
||||
white-space: nowrap;
|
||||
|
||||
@include media($phone) {
|
||||
padding: dist(-3);
|
||||
}
|
||||
}
|
||||
|
||||
tbody th {
|
||||
text-align: right;
|
||||
width: $form-label-w;
|
||||
color: $c-form-label-fg;
|
||||
|
||||
@include media($phone) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
tbody td {
|
||||
input[type="text"], input[type="number"] {
|
||||
width: 10em;
|
||||
|
||||
@include media($phone) {
|
||||
width: 8em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
body {
|
||||
position: relative;
|
||||
|
||||
padding: dist(0);
|
||||
@include media($phone) {
|
||||
padding: dist(-1);
|
||||
}
|
||||
|
||||
overflow-y: auto;
|
||||
|
||||
& > * {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
}
|
||||
Executable
+9
@@ -0,0 +1,9 @@
|
||||
@import "base";
|
||||
|
||||
@import "outer-wrap";
|
||||
@import "menu";
|
||||
@import "content";
|
||||
@import "loader";
|
||||
|
||||
@import "box";
|
||||
@import "modal";
|
||||
@@ -0,0 +1,18 @@
|
||||
// Loader wheel in top right corner
|
||||
#loader {
|
||||
position: absolute;
|
||||
right: dist(1);
|
||||
top: dist(1);
|
||||
|
||||
transition: opacity .2s;
|
||||
opacity: 0;
|
||||
|
||||
@include media($phone) {
|
||||
top: dist(0);
|
||||
right: dist(0);
|
||||
}
|
||||
|
||||
&.show {
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
Executable
+98
@@ -0,0 +1,98 @@
|
||||
#menu {
|
||||
$menu-bg: #3983CD;
|
||||
$menu-hl: #5badff; //#1bd886;
|
||||
$menu-fg: white;
|
||||
|
||||
flex: 0 0 15rem;
|
||||
background: $menu-bg;
|
||||
|
||||
& > * {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
padding: dist(-1) dist(0);
|
||||
|
||||
@include nowrap;
|
||||
@include noselect;
|
||||
}
|
||||
|
||||
#brand {
|
||||
color: $menu-fg;
|
||||
background: darken($menu-bg, 10%);
|
||||
font-size: 120%;
|
||||
text-align: center;
|
||||
position:relative;
|
||||
transition: none;
|
||||
font-weight: bold;
|
||||
|
||||
margin-bottom: dist(0);
|
||||
|
||||
@include media($phone) {
|
||||
background: $menu-bg;
|
||||
cursor: pointer;
|
||||
margin-bottom: dist(-2);
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
color: rgba(black, .4);
|
||||
right: dist(0);
|
||||
content: '▸';
|
||||
|
||||
top:50%;
|
||||
font-size: 120%;
|
||||
font-weight: bold;
|
||||
transform: translate(0,-50%) rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
&.expanded #brand {
|
||||
background: darken($menu-bg, 10%);
|
||||
|
||||
@include media($phone) {
|
||||
&:after { transform: translate(-25%,-50%) rotate(-90deg) }
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
font-size: 130%;
|
||||
color: $menu-fg;
|
||||
|
||||
transition: background-color 0.2s;
|
||||
text-shadow: 0 0 5px rgba(black, .4);
|
||||
|
||||
&:hover, &.selected {
|
||||
background: $menu-hl;
|
||||
text-shadow: 0 0 5px rgba(black, .6);
|
||||
}
|
||||
|
||||
&.selected {
|
||||
position: relative;
|
||||
box-shadow: 0 0 5px rgba(black, .5);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "▸";
|
||||
padding-right: .5rem;
|
||||
position: relative;
|
||||
top: -0.1rem;
|
||||
}
|
||||
|
||||
@include media($phone) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.expanded a { display:block }
|
||||
|
||||
@include media($tablet) {
|
||||
#brand {
|
||||
font-size: 95%;
|
||||
margin-bottom: dist(-1);
|
||||
}
|
||||
|
||||
a { font-size: 105%; }
|
||||
|
||||
flex-basis: 10rem;
|
||||
|
||||
& > * { padding: dist(-2) dist(-1); }
|
||||
}
|
||||
}
|
||||
Executable
+76
@@ -0,0 +1,76 @@
|
||||
.Modal {
|
||||
position: fixed;
|
||||
width: 100%; height: 100%;
|
||||
left: 0; top: 0; right: 0; bottom: 0;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
transition: opacity .5s;
|
||||
background: rgba(black, .65);
|
||||
opacity: 0;
|
||||
&.visible { opacity: 1 }
|
||||
&.hidden { display: none }
|
||||
}
|
||||
|
||||
.Dialog {
|
||||
margin: dist(-1);
|
||||
padding: dist(0);
|
||||
overflow: hidden;
|
||||
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
flex: 0 1 30rem;
|
||||
//min-height: 15rem;
|
||||
|
||||
background: #1c1c1e;
|
||||
border-left: 6px solid $c-form-highlight;
|
||||
border-right: 6px solid $c-form-highlight;
|
||||
box-shadow: 0 0 2px 0 #434349, 0 0 6px 0 black;
|
||||
|
||||
border-radius: 6px;
|
||||
|
||||
h1,h2 {
|
||||
margin-top:0;
|
||||
}
|
||||
|
||||
p:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// "toast"
|
||||
.NotifyMsg {
|
||||
position: fixed;
|
||||
bottom: dist(2);
|
||||
padding: dist(-1) dist(0);
|
||||
|
||||
// center horizontally
|
||||
left: 50%;
|
||||
@include translate(-50%,0);
|
||||
// hack to remove blur in chrome
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
-webkit-transform: translateZ(0) scale(1.0, 1.0);
|
||||
|
||||
background: #37a349;
|
||||
&.error {
|
||||
background: #d03e42;
|
||||
}
|
||||
|
||||
color: white;
|
||||
text-shadow: 0 0 2px black;
|
||||
box-shadow: 0 0 6px 0 rgba(black, .6);
|
||||
border-radius: 5px;
|
||||
|
||||
max-width: 80%;
|
||||
|
||||
@include media($phone) {
|
||||
width: calc(100% - #{dist(0)});
|
||||
}
|
||||
|
||||
transition: opacity .5s;
|
||||
opacity: 0;
|
||||
&.visible { opacity: 1 }
|
||||
&.hidden { display: none }
|
||||
}
|
||||
Executable
+22
@@ -0,0 +1,22 @@
|
||||
/* Main outer container */
|
||||
#outer {
|
||||
display: flex;
|
||||
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
overflow: hidden;
|
||||
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
@include media($phone) {
|
||||
#outer {
|
||||
display: block;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user