Re-implement existing website template (from PHP). Add all assets.
This commit is contained in:
parent
a87a334bc7
commit
ddf6c5b8ce
60 changed files with 2514 additions and 87 deletions
31
Website/wwwroot/css/animations.less
Normal file
31
Website/wwwroot/css/animations.less
Normal file
|
@ -0,0 +1,31 @@
|
|||
.ng-leave {
|
||||
opacity:1;
|
||||
|
||||
&.ng-leave-active {
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
|
||||
.ng-enter{
|
||||
opacity:0;
|
||||
|
||||
&.ng-enter-active {
|
||||
opacity:1;
|
||||
}
|
||||
}
|
||||
|
||||
.ng-hide-add{
|
||||
opacity:1;
|
||||
|
||||
&.ng-hide-add-active{
|
||||
opacity:0;
|
||||
}
|
||||
}
|
||||
|
||||
.ng-hide-remove{
|
||||
opacity:0;
|
||||
|
||||
&.ng-hide-remove-active{
|
||||
opacity:1;
|
||||
}
|
||||
}
|
24
Website/wwwroot/css/blog.less
Normal file
24
Website/wwwroot/css/blog.less
Normal file
|
@ -0,0 +1,24 @@
|
|||
.ng-leave {
|
||||
opacity: 1;
|
||||
}
|
||||
.ng-leave.ng-leave-active {
|
||||
opacity: 0;
|
||||
}
|
||||
.ng-enter {
|
||||
opacity: 0;
|
||||
}
|
||||
.ng-enter.ng-enter-active {
|
||||
opacity: 1;
|
||||
}
|
||||
.ng-hide-add {
|
||||
opacity: 1;
|
||||
}
|
||||
.ng-hide-add.ng-hide-add-active {
|
||||
opacity: 0;
|
||||
}
|
||||
.ng-hide-remove {
|
||||
opacity: 0;
|
||||
}
|
||||
.ng-hide-remove.ng-hide-remove-active {
|
||||
opacity: 1;
|
||||
}
|
23
Website/wwwroot/css/colours.less
Normal file
23
Website/wwwroot/css/colours.less
Normal file
|
@ -0,0 +1,23 @@
|
|||
@import "material_colours.less";
|
||||
|
||||
@background:@Grey-50;
|
||||
|
||||
@primary-100:@Red-100;
|
||||
@primary-200:@Red-200;
|
||||
@primary-300:@Red-300;
|
||||
@primary-400:@Red-400;
|
||||
@primary-500:@Red-500;
|
||||
@primary-600:@Red-600;
|
||||
@primary-700:@Red-700;
|
||||
@primary-800:@Red-800;
|
||||
@primary-900:@Red-900;
|
||||
|
||||
@accent-100:@Teal-100;
|
||||
@accent-200:@Teal-200;
|
||||
@accent-400:@Teal-400;
|
||||
@accent-700:@Teal-700;
|
||||
|
||||
@primary:@primary-600;
|
||||
@accent:@accent-400;
|
||||
@control:@Grey-200;
|
||||
@control2:@Grey-300;
|
35
Website/wwwroot/css/contextMenu.less
Normal file
35
Website/wwwroot/css/contextMenu.less
Normal file
|
@ -0,0 +1,35 @@
|
|||
@import "colours.less";
|
||||
|
||||
.contextMenu{
|
||||
position: absolute;
|
||||
float:left;
|
||||
background:@background;
|
||||
border:1px solid @Grey-500;
|
||||
border-radius:3px;
|
||||
padding: 3px 0;
|
||||
box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.5);
|
||||
-webkit-user-select: none; /* Chrome all / Safari all */
|
||||
-moz-user-select: none; /* Firefox all */
|
||||
-ms-user-select: none; /* IE 10+ */
|
||||
user-select: none;
|
||||
cursor:default;
|
||||
z-index:10000;
|
||||
|
||||
.menuItem{
|
||||
padding: 0 5px;
|
||||
position:relative;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover{
|
||||
background: @accent-200;
|
||||
}
|
||||
|
||||
&:not(:last-child){
|
||||
border-bottom: 1px solid @Grey-200;
|
||||
}
|
||||
|
||||
.arrow{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
198
Website/wwwroot/css/gallery.less
Normal file
198
Website/wwwroot/css/gallery.less
Normal file
|
@ -0,0 +1,198 @@
|
|||
@import "colours.less";
|
||||
|
||||
#tabs{
|
||||
background:@primary;
|
||||
margin:-20px;
|
||||
margin-bottom:10px;
|
||||
position:fixed;
|
||||
width:100%;
|
||||
box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.8);
|
||||
overflow-x:auto;
|
||||
white-space:nowrap;
|
||||
|
||||
a{
|
||||
display:inline-block;
|
||||
color:@primary-100;
|
||||
padding:15px 30px;
|
||||
text-decoration:none;
|
||||
text-transform: uppercase;
|
||||
|
||||
&.active{
|
||||
color:#fff;
|
||||
border-bottom:3px solid #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.album{
|
||||
width:33.33%;
|
||||
/*float:left;*/
|
||||
display:inline-block;
|
||||
vertical-align:top;
|
||||
|
||||
div{
|
||||
margin:5px;
|
||||
padding:5px;
|
||||
background:@control2;
|
||||
}
|
||||
|
||||
span{
|
||||
display:block;
|
||||
text-align:center;
|
||||
color:@Grey-800;
|
||||
overflow:hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.imageSelector{
|
||||
.image{
|
||||
width:25%;
|
||||
display:inline-block;
|
||||
vertical-align:top;
|
||||
text-align:center;
|
||||
|
||||
&.selected {
|
||||
>div{
|
||||
background:@primary-300;
|
||||
|
||||
&:hover{
|
||||
background:@primary-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
input[type=checkbox]{
|
||||
display:none;
|
||||
}
|
||||
|
||||
>div{
|
||||
margin:5px;
|
||||
padding:5px;
|
||||
background:@control2;
|
||||
|
||||
&:hover{
|
||||
background:@Grey-400;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#album-viewer{
|
||||
height:100%;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
|
||||
#album-description{
|
||||
flex: 0 0 auto;
|
||||
|
||||
.expander{
|
||||
padding:5px;
|
||||
background:@control2;
|
||||
|
||||
&:after{
|
||||
float:right;
|
||||
content: "+";
|
||||
}
|
||||
|
||||
&.expanded:after{
|
||||
content: '-';
|
||||
}
|
||||
}
|
||||
|
||||
.text{
|
||||
background:@control;
|
||||
padding:5px;
|
||||
|
||||
&.ng-hide{
|
||||
//opacity: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#album-thumbnails{
|
||||
flex: 0 0 auto;
|
||||
overflow-x:auto;
|
||||
overflow-y:hidden;
|
||||
white-space:nowrap;
|
||||
text-align:center;
|
||||
|
||||
img{
|
||||
width:100px;
|
||||
border:3px solid transparent;
|
||||
|
||||
&.selected{
|
||||
border:3px solid @primary-300;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#album-images{
|
||||
flex: 1 1 auto;
|
||||
overflow:auto;
|
||||
position:relative;
|
||||
|
||||
.image{
|
||||
position:absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
overflow:hidden;
|
||||
text-align:center;
|
||||
|
||||
img{
|
||||
max-height: 100%;
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#galleryUpload{
|
||||
|
||||
.upload{
|
||||
font-size:2em;
|
||||
padding:5px;
|
||||
}
|
||||
|
||||
.dragDrop{
|
||||
min-height:200px;
|
||||
border-color: @background;
|
||||
background-position: center;
|
||||
background-size: 100px;
|
||||
margin-bottom:5px;
|
||||
|
||||
&.dragOver{
|
||||
border: 3px dashed @Grey-700;
|
||||
background-image: url("/images/upload.svg");
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
}
|
||||
|
||||
.newImage{
|
||||
display:flex;
|
||||
margin-bottom:5px;
|
||||
|
||||
.information{
|
||||
flex:1;
|
||||
}
|
||||
|
||||
.preview{
|
||||
flex:1;
|
||||
position: relative;
|
||||
|
||||
.imageContainer{
|
||||
position:absolute;
|
||||
top:0;
|
||||
bottom:0;
|
||||
right:0;
|
||||
text-align:right;
|
||||
|
||||
img{
|
||||
height:100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
272
Website/wwwroot/css/material_colours.less
Normal file
272
Website/wwwroot/css/material_colours.less
Normal file
|
@ -0,0 +1,272 @@
|
|||
@Red-50:#ffebee;
|
||||
@Red-100:#ffcdd2;
|
||||
@Red-200:#ef9a9a;
|
||||
@Red-300:#e57373;
|
||||
@Red-400:#ef5350;
|
||||
@Red-500:#f44336;
|
||||
@Red-600:#e53935;
|
||||
@Red-700:#d32f2f;
|
||||
@Red-800:#c62828;
|
||||
@Red-900:#b71c1c;
|
||||
@Red-A100:#ff8a80;
|
||||
@Red-A200:#ff5252;
|
||||
@Red-A400:#ff1744;
|
||||
@Red-A700:#d50000;
|
||||
|
||||
@Pink-50:#fce4ec;
|
||||
@Pink-100:#f8bbd0;
|
||||
@Pink-200:#f48fb1;
|
||||
@Pink-300:#f06292;
|
||||
@Pink-400:#ec407a;
|
||||
@Pink-500:#e91e63;
|
||||
@Pink-600:#d81b60;
|
||||
@Pink-700:#c2185b;
|
||||
@Pink-800:#ad1457;
|
||||
@Pink-900:#880e4f;
|
||||
@Pink-A100:#ff80ab;
|
||||
@Pink-A200:#ff4081;
|
||||
@Pink-A400:#f50057;
|
||||
@Pink-A700:#c51162;
|
||||
|
||||
@Purple-50:#f3e5f5;
|
||||
@Purple-100:#e1bee7;
|
||||
@Purple-200:#ce93d8;
|
||||
@Purple-300:#ba68c8;
|
||||
@Purple-400:#ab47bc;
|
||||
@Purple-500:#9c27b0;
|
||||
@Purple-600:#8e24aa;
|
||||
@Purple-700:#7b1fa2;
|
||||
@Purple-800:#6a1b9a;
|
||||
@Purple-900:#4a148c;
|
||||
@Purple-A100:#ea80fc;
|
||||
@Purple-A200:#e040fb;
|
||||
@Purple-A400:#d500f9;
|
||||
@Purple-A700:#aa00ff;
|
||||
|
||||
@DeepPurple-50:#ede7f6;
|
||||
@DeepPurple-50100:#d1c4e9;
|
||||
@DeepPurple-50200:#b39ddb;
|
||||
@DeepPurple-50300:#9575cd;
|
||||
@DeepPurple-50400:#7e57c2;
|
||||
@DeepPurple-50500:#673ab7;
|
||||
@DeepPurple-50600:#5e35b1;
|
||||
@DeepPurple-50700:#512da8;
|
||||
@DeepPurple-50800:#4527a0;
|
||||
@DeepPurple-50900:#311b92;
|
||||
@DeepPurple-50A100:#b388ff;
|
||||
@DeepPurple-50A200:#7c4dff;
|
||||
@DeepPurple-50A400:#651fff;
|
||||
@DeepPurple-50A700:#6200ea;
|
||||
|
||||
@Indigo-50:#e8eaf6;
|
||||
@Indigo-100:#c5cae9;
|
||||
@Indigo-200:#9fa8da;
|
||||
@Indigo-300:#7986cb;
|
||||
@Indigo-400:#5c6bc0;
|
||||
@Indigo-500:#3f51b5;
|
||||
@Indigo-600:#3949ab;
|
||||
@Indigo-700:#303f9f;
|
||||
@Indigo-800:#283593;
|
||||
@Indigo-900:#1a237e;
|
||||
@Indigo-A100:#8c9eff;
|
||||
@Indigo-A200:#536dfe;
|
||||
@Indigo-A400:#3d5afe;
|
||||
@Indigo-A700:#304ffe;
|
||||
|
||||
@Blue-50:#e3f2fd;
|
||||
@Blue-100:#bbdefb;
|
||||
@Blue-200:#90caf9;
|
||||
@Blue-300:#64b5f6;
|
||||
@Blue-400:#42a5f5;
|
||||
@Blue-500:#2196f3;
|
||||
@Blue-600:#1e88e5;
|
||||
@Blue-700:#1976d2;
|
||||
@Blue-800:#1565c0;
|
||||
@Blue-900:#0d47a1;
|
||||
@Blue-A100:#82b1ff;
|
||||
@Blue-A200:#448aff;
|
||||
@Blue-A400:#2979ff;
|
||||
@Blue-A700:#2962ff;
|
||||
|
||||
@LightBlue-50:#e1f5fe;
|
||||
@LightBlue-100:#b3e5fc;
|
||||
@LightBlue-200:#81d4fa;
|
||||
@LightBlue-300:#4fc3f7;
|
||||
@LightBlue-400:#29b6f6;
|
||||
@LightBlue-500:#03a9f4;
|
||||
@LightBlue-600:#039be5;
|
||||
@LightBlue-700:#0288d1;
|
||||
@LightBlue-800:#0277bd;
|
||||
@LightBlue-900:#01579b;
|
||||
@LightBlue-A100:#80d8ff;
|
||||
@LightBlue-A200:#40c4ff;
|
||||
@LightBlue-A400:#00b0ff;
|
||||
@LightBlue-A700:#0091ea;
|
||||
|
||||
@Cyan-50:#e0f7fa;
|
||||
@Cyan-100:#b2ebf2;
|
||||
@Cyan-200:#80deea;
|
||||
@Cyan-300:#4dd0e1;
|
||||
@Cyan-400:#26c6da;
|
||||
@Cyan-500:#00bcd4;
|
||||
@Cyan-600:#00acc1;
|
||||
@Cyan-700:#0097a7;
|
||||
@Cyan-800:#00838f;
|
||||
@Cyan-900:#006064;
|
||||
@Cyan-A100:#84ffff;
|
||||
@Cyan-A200:#18ffff;
|
||||
@Cyan-A400:#00e5ff;
|
||||
@Cyan-A700:#00b8d4;
|
||||
|
||||
@Teal-50:#e0f2f1;
|
||||
@Teal-100:#b2dfdb;
|
||||
@Teal-200:#80cbc4;
|
||||
@Teal-300:#4db6ac;
|
||||
@Teal-400:#26a69a;
|
||||
@Teal-500:#009688;
|
||||
@Teal-600:#00897b;
|
||||
@Teal-700:#00796b;
|
||||
@Teal-800:#00695c;
|
||||
@Teal-900:#004d40;
|
||||
@Teal-A100:#a7ffeb;
|
||||
@Teal-A200:#64ffda;
|
||||
@Teal-A400:#1de9b6;
|
||||
@Teal-A700:#00bfa5;
|
||||
|
||||
@Green-50:#e8f5e9;
|
||||
@Green-100:#c8e6c9;
|
||||
@Green-200:#a5d6a7;
|
||||
@Green-300:#81c784;
|
||||
@Green-400:#66bb6a;
|
||||
@Green-500:#4caf50;
|
||||
@Green-600:#43a047;
|
||||
@Green-700:#388e3c;
|
||||
@Green-800:#2e7d32;
|
||||
@Green-900:#1b5e20;
|
||||
@Green-A100:#b9f6ca;
|
||||
@Green-A200:#69f0ae;
|
||||
@Green-A400:#00e676;
|
||||
@Green-A700:#00c853;
|
||||
|
||||
@LightGreen-50:#f1f8e9;
|
||||
@LightGreen-100:#dcedc8;
|
||||
@LightGreen-200:#c5e1a5;
|
||||
@LightGreen-300:#aed581;
|
||||
@LightGreen-400:#9ccc65;
|
||||
@LightGreen-500:#8bc34a;
|
||||
@LightGreen-600:#7cb342;
|
||||
@LightGreen-700:#689f38;
|
||||
@LightGreen-800:#558b2f;
|
||||
@LightGreen-900:#33691e;
|
||||
@LightGreen-A100:#ccff90;
|
||||
@LightGreen-A200:#b2ff59;
|
||||
@LightGreen-A400:#76ff03;
|
||||
@LightGreen-A700:#64dd17;
|
||||
|
||||
@Lime-50:#f9fbe7;
|
||||
@Lime-100:#f0f4c3;
|
||||
@Lime-200:#e6ee9c;
|
||||
@Lime-300:#dce775;
|
||||
@Lime-400:#d4e157;
|
||||
@Lime-500:#cddc39;
|
||||
@Lime-600:#c0ca33;
|
||||
@Lime-700:#afb42b;
|
||||
@Lime-800:#9e9d24;
|
||||
@Lime-900:#827717;
|
||||
@Lime-A100:#f4ff81;
|
||||
@Lime-A200:#eeff41;
|
||||
@Lime-A400:#c6ff00;
|
||||
@Lime-A700:#aeea00;
|
||||
|
||||
@Yellow-50:#fffde7;
|
||||
@Yellow-100:#fff9c4;
|
||||
@Yellow-200:#fff59d;
|
||||
@Yellow-300:#fff176;
|
||||
@Yellow-400:#ffee58;
|
||||
@Yellow-500:#ffeb3b;
|
||||
@Yellow-600:#fdd835;
|
||||
@Yellow-700:#fbc02d;
|
||||
@Yellow-800:#f9a825;
|
||||
@Yellow-900:#f57f17;
|
||||
@Yellow-A100:#ffff8d;
|
||||
@Yellow-A200:#ffff00;
|
||||
@Yellow-A400:#ffea00;
|
||||
@Yellow-A700:#ffd600;
|
||||
|
||||
@Amber-50:#fff8e1;
|
||||
@Amber-100:#ffecb3;
|
||||
@Amber-200:#ffe082;
|
||||
@Amber-300:#ffd54f;
|
||||
@Amber-400:#ffca28;
|
||||
@Amber-500:#ffc107;
|
||||
@Amber-600:#ffb300;
|
||||
@Amber-700:#ffa000;
|
||||
@Amber-800:#ff8f00;
|
||||
@Amber-900:#ff6f00;
|
||||
@Amber-A100:#ffe57f;
|
||||
@Amber-A200:#ffd740;
|
||||
@Amber-A400:#ffc400;
|
||||
@Amber-A700:#ffab00;
|
||||
|
||||
@Orange-50:#fff3e0;
|
||||
@Orange-100:#ffe0b2;
|
||||
@Orange-200:#ffcc80;
|
||||
@Orange-300:#ffb74d;
|
||||
@Orange-400:#ffa726;
|
||||
@Orange-500:#ff9800;
|
||||
@Orange-600:#fb8c00;
|
||||
@Orange-700:#f57c00;
|
||||
@Orange-800:#ef6c00;
|
||||
@Orange-900:#e65100;
|
||||
@Orange-A100:#ffd180;
|
||||
@Orange-A200:#ffab40;
|
||||
@Orange-A400:#ff9100;
|
||||
@Orange-A700:#ff6d00;
|
||||
|
||||
@DeepOrange-50:#fbe9e7;
|
||||
@DeepOrange-100:#ffccbc;
|
||||
@DeepOrange-200:#ffab91;
|
||||
@DeepOrange-300:#ff8a65;
|
||||
@DeepOrange-400:#ff7043;
|
||||
@DeepOrange-500:#ff5722;
|
||||
@DeepOrange-600:#f4511e;
|
||||
@DeepOrange-700:#e64a19;
|
||||
@DeepOrange-800:#d84315;
|
||||
@DeepOrange-900:#bf360c;
|
||||
@DeepOrange-A100:#ff9e80;
|
||||
@DeepOrange-A200:#ff6e40;
|
||||
@DeepOrange-A400:#ff3d00;
|
||||
@DeepOrange-A700:#dd2c00;
|
||||
|
||||
@Brown-50:#efebe9;
|
||||
@Brown-100:#d7ccc8;
|
||||
@Brown-200:#bcaaa4;
|
||||
@Brown-300:#a1887f;
|
||||
@Brown-400:#8d6e63;
|
||||
@Brown-500:#795548;
|
||||
@Brown-600:#6d4c41;
|
||||
@Brown-700:#5d4037;
|
||||
@Brown-800:#4e342e;
|
||||
@Brown-900:#3e2723;
|
||||
|
||||
@Grey-50:#fafafa;
|
||||
@Grey-100:#f5f5f5;
|
||||
@Grey-200:#eeeeee;
|
||||
@Grey-300:#e0e0e0;
|
||||
@Grey-400:#bdbdbd;
|
||||
@Grey-500:#9e9e9e;
|
||||
@Grey-600:#757575;
|
||||
@Grey-700:#616161;
|
||||
@Grey-800:#424242;
|
||||
@Grey-900:#212121;
|
||||
|
||||
@BlueGrey-50:#eceff1;
|
||||
@BlueGrey-100:#cfd8dc;
|
||||
@BlueGrey-200:#b0bec5;
|
||||
@BlueGrey-300:#90a4ae;
|
||||
@BlueGrey-400:#78909c;
|
||||
@BlueGrey-500:#607d8b;
|
||||
@BlueGrey-600:#546e7a;
|
||||
@BlueGrey-700:#455a64;
|
||||
@BlueGrey-800:#37474f;
|
||||
@BlueGrey-900:#263238;
|
|
@ -1,49 +0,0 @@
|
|||
html {
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
header {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
flex-wrap: wrap;
|
||||
background: red;
|
||||
padding: 10px;
|
||||
|
||||
#logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 24px;
|
||||
height: 50px;
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
nav {
|
||||
margin-top: 10px;
|
||||
margin-left: auto;
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
|
||||
li {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
main {
|
||||
background: green;
|
||||
margin: auto;
|
||||
max-width: 800px;
|
||||
padding: 20px;
|
||||
}
|
50
Website/wwwroot/css/style-med.less
Normal file
50
Website/wwwroot/css/style-med.less
Normal file
|
@ -0,0 +1,50 @@
|
|||
@import "colours.less";
|
||||
|
||||
body{
|
||||
display:initial;
|
||||
}
|
||||
|
||||
#menu{
|
||||
left:0;
|
||||
position:fixed;
|
||||
height:100%;
|
||||
box-shadow:-10px 0px 5px 10px @Grey-900;
|
||||
transition:all ease-in-out 0.4s;
|
||||
|
||||
&.ng-hide{
|
||||
left:-280px;
|
||||
}
|
||||
}
|
||||
|
||||
#main{
|
||||
.header{
|
||||
#menu-button{
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#buttons-left, #buttons-right{
|
||||
button{
|
||||
width:60px;
|
||||
height:60px;
|
||||
}
|
||||
}
|
||||
|
||||
.backdrop{
|
||||
display: initial;
|
||||
}
|
||||
|
||||
.row{
|
||||
|
||||
>.col {
|
||||
width:100%;
|
||||
float:left;
|
||||
}
|
||||
|
||||
&.col-lg-1>.col, &.col-lg-2>.col, &.col-lg-3>.col, &.col-lg-4>.col{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
47
Website/wwwroot/css/style-small.less
Normal file
47
Website/wwwroot/css/style-small.less
Normal file
|
@ -0,0 +1,47 @@
|
|||
dl{
|
||||
margin-top: 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
#main{
|
||||
.header {
|
||||
span:not(:last-child){
|
||||
display:none;
|
||||
}
|
||||
|
||||
>*{
|
||||
padding-left: 15px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#nav-container{
|
||||
top:48px;
|
||||
}
|
||||
|
||||
.header{
|
||||
height: 48px;
|
||||
|
||||
> *{
|
||||
line-height: 48px;
|
||||
font-size:18px;
|
||||
}
|
||||
span:not(:first-child):before{
|
||||
content:none;
|
||||
}
|
||||
}
|
||||
|
||||
.row{
|
||||
>.col {
|
||||
width:100%;
|
||||
float:left;
|
||||
}
|
||||
|
||||
&.col-md-1>.col, &.col-md-2>.col, &.col-md-3>.col, &.col-md-4>.col{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
table{
|
||||
width:100%;
|
||||
}
|
426
Website/wwwroot/css/style.less
Normal file
426
Website/wwwroot/css/style.less
Normal file
|
@ -0,0 +1,426 @@
|
|||
@import "colours.less";
|
||||
@import "animations.less";
|
||||
@import "contextMenu.less";
|
||||
|
||||
@import url(//fonts.googleapis.com/css?family=Roboto);
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
html{
|
||||
width:100%;
|
||||
height:100%;
|
||||
}
|
||||
|
||||
html,body,h1,h2, button {
|
||||
padding:0;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
html, button, input, textarea{
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
|
||||
body{
|
||||
width:100%;
|
||||
height:100%;
|
||||
background:@background;
|
||||
display:flex;
|
||||
}
|
||||
|
||||
a {
|
||||
color:@accent;
|
||||
}
|
||||
|
||||
nav {
|
||||
img{
|
||||
vertical-align: middle;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
dt, dd{
|
||||
&:hover, &.active{
|
||||
background: @control;
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
}
|
||||
|
||||
dt {
|
||||
padding: 10px 10px;
|
||||
}
|
||||
|
||||
dd {
|
||||
margin: 0;
|
||||
padding: 10px 10px 10px 40px;
|
||||
}
|
||||
|
||||
a{
|
||||
color: black;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
h2{
|
||||
margin-bottom:10px;
|
||||
a{
|
||||
color:inherit;
|
||||
}
|
||||
}
|
||||
|
||||
h3{
|
||||
margin-bottom: 10px;
|
||||
|
||||
&:first-child{
|
||||
margin-top: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
hr{
|
||||
border: 1px solid @control;
|
||||
}
|
||||
|
||||
table{
|
||||
border-collapse: collapse;
|
||||
|
||||
input[type=text], textarea{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
th{
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
td, th{
|
||||
padding:0 10px 5px 0;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
button{
|
||||
border:none;
|
||||
background:@control;
|
||||
}
|
||||
|
||||
form{
|
||||
button, input[type=submit]{
|
||||
border:none;
|
||||
background:@control;
|
||||
|
||||
&:hover{
|
||||
background: @control2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button:hover{
|
||||
cursor: pointer;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
img{
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
p{
|
||||
&:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&:last-child{
|
||||
margin-bottom:0;
|
||||
}
|
||||
}
|
||||
|
||||
#menu{
|
||||
background:@background;
|
||||
width:280px;
|
||||
flex: 0 0 auto;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
box-shadow: -2px 0px 0px 0px @control inset;
|
||||
z-index: 400;
|
||||
overflow-x: hidden;
|
||||
|
||||
#nav-container{
|
||||
overflow: auto;
|
||||
width:100%;
|
||||
flex:1 1 auto;
|
||||
|
||||
dl {
|
||||
margin: 5px 0 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
.header{
|
||||
z-index: 401;
|
||||
flex: 0 0 auto;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
|
||||
#main{
|
||||
flex: 1 1 auto;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
overflow:hidden;
|
||||
height:100%;
|
||||
position:relative;
|
||||
|
||||
.header{
|
||||
flex: 0 0 auto;
|
||||
z-index:1;
|
||||
|
||||
#menu-button{
|
||||
display:none;
|
||||
}
|
||||
|
||||
>*{
|
||||
padding-left: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
#content{
|
||||
flex: 1 1 auto;
|
||||
overflow:auto;
|
||||
z-index:0;
|
||||
height:100%;
|
||||
display:flex;
|
||||
flex-direction: column;
|
||||
|
||||
#body{
|
||||
padding:20px;
|
||||
//height:100%;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
#buttons-left,#buttons-right{
|
||||
position:absolute;
|
||||
padding: 10px;
|
||||
bottom: 0px;
|
||||
|
||||
button{
|
||||
margin:10px;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
box-shadow: 0px 2px 3px 0px rgba(0,0,0,0.25);
|
||||
vertical-align: middle;
|
||||
border:none;
|
||||
background:@accent;
|
||||
width:40px;
|
||||
height:40px;
|
||||
color: white;
|
||||
font-size: 24px;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
#buttons-left{
|
||||
left: 0px;
|
||||
}
|
||||
|
||||
#buttons-right{
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
#cookiePopup{
|
||||
position:absolute;
|
||||
background:black;
|
||||
top:50%;
|
||||
left:50%;
|
||||
padding:20px;
|
||||
border-radius: 30px;
|
||||
width:230px;
|
||||
height:230px;
|
||||
margin-top:-115px;
|
||||
margin-left:-115px;
|
||||
color:white;
|
||||
|
||||
> div{
|
||||
margin-top:40px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
#spinner{
|
||||
position:absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
display: flex;
|
||||
z-index: 1000;
|
||||
transition: all ease-in-out 0.5s;
|
||||
|
||||
&.ng-hide{
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
>img{
|
||||
margin: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.scrollLock{
|
||||
overflow:hidden;
|
||||
}
|
||||
|
||||
.header {
|
||||
height:64px;
|
||||
background:@primary;
|
||||
color:white;
|
||||
white-space:nowrap;
|
||||
padding:0 !important;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 -9px 5px 10px rgba(50, 50, 50, 0.8);
|
||||
|
||||
>*{
|
||||
line-height:64px;
|
||||
font-size:24px;
|
||||
font-weight:400;
|
||||
padding-left: 10px;
|
||||
white-space: nowrap;
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
|
||||
>h2>span{
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
>img{
|
||||
height:50%;
|
||||
}
|
||||
|
||||
span{
|
||||
display: inline-block;
|
||||
|
||||
&:not(:first-child):before{
|
||||
margin:2px 10px 0 10px;
|
||||
width:6px;
|
||||
float:left;
|
||||
height:62px;
|
||||
background: url("/images/chevron.png") no-repeat scroll right center / contain rgba(0, 0, 0, 0);
|
||||
content:"";
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.circle{
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.go, .expand{
|
||||
display:none;
|
||||
float:right;
|
||||
}
|
||||
|
||||
.backdrop{
|
||||
background: rgba(0,0,0,0.5);
|
||||
width: 100%;
|
||||
height:100%;
|
||||
position:absolute;
|
||||
top:0;
|
||||
left:0;
|
||||
z-index:100;
|
||||
display:none;
|
||||
transition:all ease-in-out 0.5s;
|
||||
|
||||
&.ng-hide{
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.errors{
|
||||
background: url(/images/error.svg) no-repeat scroll 10px 10px @Grey-800;
|
||||
padding:10px;
|
||||
padding-left:40px;
|
||||
color:#fff;
|
||||
|
||||
ul{
|
||||
margin: 0;
|
||||
list-style: square;
|
||||
}
|
||||
}
|
||||
|
||||
.row{
|
||||
width:100%;
|
||||
clear:both;
|
||||
|
||||
>.col {
|
||||
width:100%;
|
||||
float:left;
|
||||
}
|
||||
|
||||
&.col-lg-1, &.col-md-1, &.col-sm-1{
|
||||
>.col{
|
||||
width:100%;
|
||||
}
|
||||
}
|
||||
|
||||
&.col-lg-2, &.col-md-2, &.col-sm-2{
|
||||
>.col{
|
||||
width:50%;
|
||||
}
|
||||
}
|
||||
|
||||
&.col-lg-3, &.col-md-3, &.col-sm-3{
|
||||
>.col{
|
||||
width:33.3333%;
|
||||
}
|
||||
}
|
||||
|
||||
&.col-lg-4, &.col-md-4, &.col-sm-4{
|
||||
>.col{
|
||||
width:25%;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.alternatingRows{
|
||||
tr{
|
||||
&:nth-child(1n){
|
||||
background:@control;
|
||||
}
|
||||
|
||||
&:nth-child(2n){
|
||||
background:@control2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
td, th{
|
||||
padding:3px;
|
||||
|
||||
&.number{
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
div.percentageBar{
|
||||
width:100%;
|
||||
height:20px;
|
||||
background:@LightGreen-400;
|
||||
overflow:hidden;
|
||||
|
||||
>div{
|
||||
background:@Red-400;
|
||||
height:100%;
|
||||
transition: all 500ms ease-in-out;
|
||||
}
|
||||
}
|
42
Website/wwwroot/css/temperature.less
Normal file
42
Website/wwwroot/css/temperature.less
Normal file
|
@ -0,0 +1,42 @@
|
|||
@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;
|
||||
}
|
||||
}
|
Loading…
Add table
Add a link
Reference in a new issue