rob/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Consolodate less files

Browse source
This commit is contained in:
Robert Marshall 2019-04-28 08:39:12 +01:00
parent fd398246f8
commit 32eef104fb
2 changed files with 338 additions and 351 deletions
Download patch file Download diff file Expand all files Collapse all files

647
Website/wwwroot/css/style.less
View file

@ -6,421 +6,450 @@
* { * {
box-sizing: border-box; box-sizing: border-box;
outline: none; outline: none;
transition: all 0.2s ease; transition: all 0.2s ease;
} }
html{ html {
width:100%; width: 100%;
height:100%; height: 100%;
} }
html,body,h1,h2, button { html,
padding:0; body,
margin:0; h1,
h2,
button {
padding: 0;
margin: 0;
} }
html, button, input, textarea{ html,
font-family: 'Roboto', sans-serif; button,
input,
textarea {
font-family: 'Roboto', sans-serif;
} }
body{ body {
width:100%; width: 100%;
height:100%; height: 100%;
background:@background; background: @background;
display:flex; display: flex;
} }
a { a {
color:@accent; color: @accent;
} }
nav { nav {
img{ img {
vertical-align: middle; vertical-align: middle;
margin-right: 5px; margin-right: 5px;
} }
dt, dd{ dt,
&:hover, &.active{ dd {
background: @control;
cursor: pointer;
cursor: hand;
}
}
dt { &:hover,
padding: 10px 10px; &.active {
} background: @control;
cursor: pointer;
cursor: hand;
}
}
dd { dt {
margin: 0; padding: 10px 10px;
padding: 10px 10px 10px 40px; }
}
a{ dd {
color: black; margin: 0;
text-decoration: none; padding: 10px 10px 10px 40px;
} }
a {
color: black;
text-decoration: none;
}
} }
h2{ h2 {
margin-bottom:10px; margin-bottom: 10px;
a{
color:inherit; a {
} color: inherit;
}
} }
h3{ h3 {
margin-bottom: 10px; margin-bottom: 10px;
&:first-child{ &:first-child {
margin-top: 0px; margin-top: 0px;
} }
} }
hr{ hr {
border: 1px solid @control; border: 1px solid @control;
} }
table{ table {
border-collapse: collapse; border-collapse: collapse;
input[type=text], textarea{ input[type=text],
width: 100%; textarea {
} width: 100%;
}
} }
th{ th {
text-align: left; text-align: left;
} }
td, th{ td,
padding:0 10px 5px 0; th {
vertical-align: top; padding: 0 10px 5px 0;
vertical-align: top;
} }
button{ button {
border:none; border: none;
background:@control; background: @control;
} }
form{ form {
button, input[type=submit]{
border:none;
background:@control;
&:hover{ button,
background: @control2; input[type=submit] {
} border: none;
} background: @control;
&:hover {
background: @control2;
}
}
} }
button:hover{ button:hover {
cursor: pointer; cursor: pointer;
cursor: hand; cursor: hand;
} }
img{ img {
max-width: 100%; max-width: 100%;
} }
p{ p {
&:first-child{ &:first-child {
margin-top: 0; margin-top: 0;
} }
&:last-child{ &:last-child {
margin-bottom:0; margin-bottom: 0;
} }
} }
#menu{ #menu {
background:@background; background: @background;
width:280px; width: 280px;
flex: 0 0 auto; flex: 0 0 auto;
display:flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: -2px 0px 0px 0px @control inset; box-shadow: -2px 0px 0px 0px @control inset;
z-index: 400; z-index: 400;
overflow-x: hidden; overflow-x: hidden;
#nav-container{ #nav-container {
overflow: auto; overflow: auto;
width:100%; width: 100%;
flex:1 1 auto; flex: 1 1 auto;
dl { dl {
margin: 5px 0 0 0; margin: 5px 0 0 0;
} }
} }
.header{ .header {
z-index: 401; z-index: 401;
flex: 0 0 auto; flex: 0 0 auto;
overflow: auto; overflow: auto;
} }
} }
#main{ #main {
flex: 1 1 auto; flex: 1 1 auto;
display:flex; display: flex;
flex-direction: column; flex-direction: column;
overflow:hidden; overflow: hidden;
height:100%; height: 100%;
position:relative; position: relative;
.header{ .header {
flex: 0 0 auto; flex: 0 0 auto;
z-index:1; z-index: 1;
#menu-button{ #menu-button {
display:none; display: none;
} }
>*{ >* {
padding-left: 20px !important; padding-left: 20px !important;
} }
} }
#content{ #content {
flex: 1 1 auto; flex: 1 1 auto;
overflow:auto; overflow: auto;
z-index:0; z-index: 0;
height:100%; height: 100%;
display:flex; display: flex;
flex-direction: column; flex-direction: column;
#body{ #body {
padding:20px; padding: 20px;
//height:100%; //height:100%;
flex: 1; flex: 1;
} }
} }
} }
#buttons-left,#buttons-right{ #buttons-left,
position:absolute; #buttons-right {
padding: 10px; position: absolute;
bottom: 0px; padding: 10px;
bottom: 0px;
button{ button {
margin:10px; margin: 10px;
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.25); box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.25);
vertical-align: middle; vertical-align: middle;
border:none; border: none;
background:@accent; background: @accent;
width:40px; width: 40px;
height:40px; height: 40px;
color: white; color: white;
font-size: 24px; font-size: 24px;
line-height: 24px; line-height: 24px;
} }
} }
#buttons-left{ #buttons-left {
left: 0px; left: 0px;
} }
#buttons-right{ #buttons-right {
right: 0px; right: 0px;
} }
#cookiePopup{ #cookiePopup {
position:absolute; position: absolute;
background:black; background: black;
top:50%; top: 50%;
left:50%; left: 50%;
padding:20px; padding: 20px;
border-radius: 30px; border-radius: 30px;
width:230px; width: 230px;
height:230px; height: 230px;
margin-top:-115px; margin-top: -115px;
margin-left:-115px; margin-left: -115px;
color:white; color: white;
> div{ >div {
margin-top:40px; margin-top: 40px;
text-align: center; text-align: center;
} }
} }
#spinner{ #spinner {
position:absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
right: 0; right: 0;
align-items: center; align-items: center;
text-align: center; text-align: center;
display: flex; display: flex;
z-index: 1000; z-index: 1000;
transition: all ease-in-out 0.5s; transition: all ease-in-out 0.5s;
&.ng-hide{ &.ng-hide {
opacity: 0; opacity: 0;
} }
>img{ >img {
margin: auto; margin: auto;
} }
} }
.scrollLock{ .scrollLock {
overflow:hidden; overflow: hidden;
} }
.header { .header {
height:64px; height: 64px;
background:@primary; background: @primary;
color:white; color: white;
white-space:nowrap; white-space: nowrap;
padding:0 !important; padding: 0 !important;
overflow: hidden; overflow: hidden;
box-shadow: 0 -9px 5px 10px rgba(50, 50, 50, 0.8); box-shadow: 0 -9px 5px 10px rgba(50, 50, 50, 0.8);
>*{ >* {
line-height:64px; line-height: 64px;
font-size:24px; font-size: 24px;
font-weight:400; font-weight: 400;
padding-left: 10px; padding-left: 10px;
white-space: nowrap; white-space: nowrap;
display: inline; display: inline;
vertical-align: middle; vertical-align: middle;
} }
>h2>span{ >h2>span {
display: inline-block; display: inline-block;
} }
>img{ >img {
height:50%; height: 50%;
} }
span{ span {
display: inline-block; display: inline-block;
&:not(:first-child):before{ &:not(:first-child):before {
margin:2px 10px 0 10px; margin: 2px 10px 0 10px;
width:6px; width: 6px;
float:left; float: left;
height:62px; height: 62px;
background: url("/images/chevron.png") no-repeat scroll right center / contain rgba(0, 0, 0, 0); background: url("/images/chevron.png") no-repeat scroll right center / contain rgba(0, 0, 0, 0);
content:""; content: "";
} }
} }
} }
.circle{ .circle {
border-radius: 50%; border-radius: 50%;
display: inline-block; display: inline-block;
text-align: center; text-align: center;
vertical-align: middle; vertical-align: middle;
overflow: hidden; overflow: hidden;
} }
.go, .expand{ .go,
display:none; .expand {
float:right; display: none;
float: right;
} }
.backdrop{ .backdrop {
background: rgba(0,0,0,0.5); background: rgba(0, 0, 0, 0.5);
width: 100%; width: 100%;
height:100%; height: 100%;
position:absolute; position: absolute;
top:0; top: 0;
left:0; left: 0;
z-index:100; z-index: 100;
display:none; display: none;
transition:all ease-in-out 0.5s; transition: all ease-in-out 0.5s;
&.ng-hide{ &.ng-hide {
opacity: 0; opacity: 0;
} }
} }
.errors{ .errors {
background: url(/images/error.svg) no-repeat scroll 10px 10px @Grey-800; background: url(/images/error.svg) no-repeat scroll 10px 10px @Grey-800;
padding:10px; padding: 10px;
padding-left:40px; padding-left: 40px;
color:#fff; color: #fff;
ul{ ul {
margin: 0; margin: 0;
list-style: square; list-style: square;
} }
} }
.row{ .row {
width:100%; width: 100%;
clear:both; clear: both;
>.col { >.col {
width:100%; width: 100%;
float:left; float: left;
} }
&.col-lg-1, &.col-md-1, &.col-sm-1{ &.col-lg-1,
>.col{ &.col-md-1,
width:100%; &.col-sm-1 {
} >.col {
} width: 100%;
}
}
&.col-lg-2, &.col-md-2, &.col-sm-2{ &.col-lg-2,
>.col{ &.col-md-2,
width:50%; &.col-sm-2 {
} >.col {
} width: 50%;
}
}
&.col-lg-3, &.col-md-3, &.col-sm-3{ &.col-lg-3,
>.col{ &.col-md-3,
width:33.3333%; &.col-sm-3 {
} >.col {
} width: 33.3333%;
}
}
&.col-lg-4, &.col-md-4, &.col-sm-4{ &.col-lg-4,
>.col{ &.col-md-4,
width:25%; &.col-sm-4 {
} >.col {
} width: 25%;
}
}
} }
table.alternatingRows{ table.alternatingRows {
tr{ tr {
&:nth-child(1n){ &:nth-child(1n) {
background:@control; background: @control;
} }
&:nth-child(2n){ &:nth-child(2n) {
background:@control2; background: @control2;
} }
} }
} }
td, th{ td,
padding:3px; th {
padding: 3px;
&.number{ &.number {
text-align: right; text-align: right;
} }
} }
div.percentageBar{ div.percentageBar {
width:100%; width: 100%;
height:20px; height: 20px;
background:@LightGreen-400; background: @LightGreen-400;
overflow:hidden; overflow: hidden;
>div{ >div {
background:@Red-400; background: @Red-400;
height:100%; height: 100%;
transition: all 500ms ease-in-out; transition: all 500ms ease-in-out;
} }
} }
@import "blog.less";
@import "gallery.less";

42
Website/wwwroot/css/temperature.less
View file

@ -1,42 +0,0 @@
@import "colours.less";
@gaugeHeight:200px;
@gaugeWidth:200px;
.currentTemp{
background:@Red-100;
height:@gaugeHeight;
width:@gaugeWidth;
position:relative;
//border:1px solid @Grey-900;
display:inline-block;
.background{
position: absolute;
bottom: 0;
left:0;
right:0;
top: 20%;
transition: all 500ms ease-in-out;
}
.reading{
position: relative;
height:@gaugeHeight;
width:@gaugeWidth;
vertical-align:middle;
display:table-cell;
text-align:center;
font-size: 250%;
}
.shadow{
box-shadow: inset 0px 0px 5px 1px rgba(0,0,0,0.75);
border:2px solid @Grey-900;
position: absolute;
bottom: 0;
left:0;
right:0;
top: 0;
}
}