Skip to content

Commit

Permalink
Merge pull request #16 from infiniteloop-inc/T-Kuhn-Update-CSS-Branch
Browse files Browse the repository at this point in the history
updated CSS so the GUI can be viewed on mobile without horizontal scr…
  • Loading branch information
T-Kuhn authored Nov 30, 2017
2 parents fa146be + db33385 commit e6036ae
Show file tree
Hide file tree
Showing 9 changed files with 361 additions and 150 deletions.
2 changes: 1 addition & 1 deletion VERSION
Original file line number Diff line number Diff line change
@@ -1 +1 @@
1.4
1.5
97 changes: 97 additions & 0 deletions html/css/index.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
/* index.php Styles */
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}

#SliderRed .slider-selection {
background: red;
}

#SliderGreen .slider-selection {
background: green;
}

#SliderBlue .slider-selection {
background: blue;
}

#SliderPeriod .slider-selection {
background: #BABABA;
}

#SliderRepeat .slider-selection {
background: #BABABA;
}

.slider-handle {
background-image: -webkit-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
background-image: -o-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0);
}

.block1 { float: left; width: 600px; margin-left: 10px; }
.block2 { float: left; width: 600px; margin-left: 10px; }
.block3 { float: left; width: 600px; margin-left: 10px; }

.sliderBox {margin-left:10px; float: left; width: 250px; }
.buttonBox {float: left; width: 290px; margin-left:10px; }
.innerButtonBox1 {margin: 0 auto; width: 300px}
.innerButtonBox2 {margin: 0 auto; width: 202px}

.innerInputBox {width: 480px}
.horizontalSpacer { margin-top:15px;}

/* TEST */
@media screen and (max-width: 479px) {
.buttonBox {
float: left;
width: 290px;
margin-left:10px;
margin-top:20px;
margin-bottom: 20px;
}
.block1,.block2,.buttonBox,.sliderBox {
max-width: 600px;
width: 100%;
margin-left: 0;
}
.innerInputBox {
max-width: 400px;
width:100%;
}
.innerButtonBox1 {
margin-top:20px;
width: 100%;
}
.innerButtonBox2 {
margin: 0;
}
.slider.slider-horizontal {
margin-left: 15px;
}
.boxLeft {
margin-left: 0;
}
.tooltip.top {
display: none;
}
.panel-body {
padding: 10px;
}

.table {
border
}
.table th {
background-color:#000;
color: #fff;
font-weight: bold;
}
.table td,.table th {
float: left;
display: block;
width: 20%;
height:80px;
word-wrap: break-word;
}
}
59 changes: 59 additions & 0 deletions html/css/log.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
/* log.php Styles */
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}

.block1 { float: left; width: 600px; margin-left: 10px; }
.horizontalSpacer { margin-top:15px;}

@media screen and (max-width: 479px) {
.buttonBox {
float: left;
width: 290px;
margin-left:10px;
margin-top:20px;
margin-bottom: 20px;
}
.block1,.block2,.buttonBox,.sliderBox {
max-width: 600px;
width: 100%;
margin-left: 0;
}
.innerInputBox {
max-width: 400px;
width:100%;
}
.innerButtonBox1 {
margin-top:20px;
width: 100%;
}
.innerButtonBox2 {
margin: 0;
}
.slider.slider-horizontal {
margin-left: 15px;
}
.boxLeft {
margin-left: 0;
}
.tooltip.top {
display: none;
}
.panel-body {
padding: 10px;
}

.table {
border
}
.table th {
background-color:#000;
color: #fff;
font-weight: bold;
}
.table td,.table th {
float: left;
display: block;
width: 20%;
height:80px;
word-wrap: break-word;
}
}
80 changes: 80 additions & 0 deletions html/css/settings.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
/* settings.php Styles */
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}

.dropdown-toggle{
width: 150px !important;
}

#SliderBrightness .slider-selection {
background: #BABABA;
}

.slider-handle {
background-image: -webkit-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
background-image: -o-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0);
}

.DropDownSpan { display: table-cell; vertical-align: middle; }
.block1 { float: left; width: 600px; margin-left: 10px; }
.block2 { float: left; width: 600px; margin-left: 10px; }
.horizontalSpacer { margin-top:15px;}
.buttonBox {float: left; width: 290px; margin-left:10px; }
.boxLeft {margin-left:10px; float: left; width: 350px; display: table; }
.boxRight {float: left; width: 290px; margin-left:10px; }

@media screen and (max-width: 479px) {
.buttonBox {
float: left;
width: 290px;
margin-left:10px;
margin-top:20px;
margin-bottom: 20px;
}
.block1,.block2,.buttonBox,.sliderBox {
max-width: 600px;
width: 100%;
margin-left: 0;
}
.innerInputBox {
max-width: 400px;
width:100%;
}
.innerButtonBox1 {
margin-top:20px;
width: 100%;
}
.innerButtonBox2 {
margin: 0;
}
.slider.slider-horizontal {
margin-left: 15px;
}
.boxLeft {
margin-left: 0;
}
.tooltip.top {
display: none;
}
.panel-body {
padding: 10px;
}

.table {
border
}
.table th {
background-color:#000;
color: #fff;
font-weight: bold;
}
.table td,.table th {
float: left;
display: block;
width: 20%;
height:80px;
word-wrap: break-word;
}
}
97 changes: 97 additions & 0 deletions html/css/status.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
/* status.php Styles */
html,body,h1,h2,h3,h4,h5,h6 {font-family: "Roboto", sans-serif}

#SliderRed .slider-selection {
background: red;
}

#SliderGreen .slider-selection {
background: green;
}

#SliderBlue .slider-selection {
background: blue;
}

#SliderPeriod .slider-selection {
background: #BABABA;
}

#SliderRepeat .slider-selection {
background: #BABABA;
}

.slider-handle {
background-image: -webkit-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
background-image: -o-linear-gradient(top, #dfdfdf 0%, #bebebe 100%);
background-image: linear-gradient(to bottom, #dfdfdf 0%, #bebebe 100%);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdfdfdf', endColorstr='#ffbebebe', GradientType=0);
}

.block1 { float: left; width: 600px; margin-left: 10px; }
.block2 { float: left; width: 600px; margin-left: 10px; }
.block3 { float: left; width: 600px; margin-left: 10px; }

.sliderBox {margin-left:10px; float: left; width: 250px; }
.buttonBox {float: left; width: 290px; margin-left:10px; }

.innerButtonBox1 {margin: 0 auto; width: 300px}
.innerButtonBox2 {margin: 0 auto; width: 202px}
.innerInputBox {width: 480px}
.horizontalSpacer { margin-top:15px;}


@media screen and (max-width: 479px) {
.buttonBox {
float: left;
width: 290px;
margin-left:10px;
margin-top:20px;
margin-bottom: 20px;
}
.block1,.block2,.buttonBox,.sliderBox {
max-width: 600px;
width: 100%;
margin-left: 0;
}
.innerInputBox {
max-width: 400px;
width:100%;
}
.innerButtonBox1 {
margin-top:20px;
width: 100%;
}
.innerButtonBox2 {
margin: 0;
}
.slider.slider-horizontal {
margin-left: 15px;
}
.boxLeft {
margin-left: 0;
}
.tooltip.top {
display: none;
}
.panel-body {
padding: 10px;
}

.table {
border
}
.table th {
background-color:#000;
color: #fff;
font-weight: bold;
}
.table td,.table th {
float: left;
display: block;
width: 20%;
height:80px;
word-wrap: break-word;
}
}
Loading

0 comments on commit e6036ae

Please sign in to comment.