Skip to content
GitLab
Commit b4f17acf authored by Patrick's avatar Patrick
Browse files

Update Design some more

parent a313ec08
Expand all Show whitespace changes
Inline Side-by-side
vcm/css/collapse.css
View file @ b4f17acf
.collapsible { .collapsible {
background-color: #777; background-color: #121212;
color: white; color: white;
cursor: pointer; cursor: pointer;
padding: 18px; padding: 18px;
......
vcm/css/menu.css
View file @ b4f17acf
...@@ -77,7 +77,15 @@ ...@@ -77,7 +77,15 @@
cursor: pointer; cursor: pointer;
} }
#tourstart-btn, #balloon-startscreen{ #tourstart-btn, #balloon-startscreen{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); /* box-shadow: 0 8px 8px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); */
/* box-shadow:
0 2.8px 2.2px rgba(0, 0, 0, 0.034),
0 6.7px 5.3px rgba(0, 0, 0, 0.048),
0 12.5px 10px rgba(0, 0, 0, 0.06),
0 22.3px 17.9px rgba(0, 0, 0, 0.072),
0 41.8px 33.4px rgba(0, 0, 0, 0.086),
0 100px 80px rgba(0, 0, 0, 0.12)
; */
} }
.btn-three{ .btn-three{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19); box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
...@@ -216,3 +224,53 @@ ...@@ -216,3 +224,53 @@
.btn_size{ .btn_size{
padding: 7px !important; padding: 7px !important;
} }
.subcontent{
padding:0px !important;
}
.column3 {
float: left;
width: 33.33%;
padding: 10px;
position: relative;
text-align: center;
color: white;
/* height: 350px; Should be removed. Only for demonstration */
}
.top-left {
position: absolute;
top: 8px;
/* left: 16px; */
background-color: #121212;
padding: 4px;
padding-left: 7px;
padding-right: 7px;
border-top-right-radius: 4px;
border-bottom-right-radius: 4px;
font-family: 'Roboto', sans-serif;
font-weight:500;
}
.imagecol3{
/* border-color:#121212; */
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
}
#colum_projects1{
}
#colum_projects2{
}
#colum_projects3{
}
/* Clear floats after the columns */
.row3:after {
content: "";
display: table;
clear: both;
}
\ No newline at end of file
vcm/css/vcm.css
View file @ b4f17acf
...@@ -771,7 +771,7 @@ img.scale { ...@@ -771,7 +771,7 @@ img.scale {
padding: .5rem; padding: .5rem;
margin: .25rem 0; margin: .25rem 0;
text-align: left; text-align: left;
color: #000000; color: #121212;
} }
.message-wrap .message-btn { .message-wrap .message-btn {
margin-right: .2rem; margin-right: .2rem;
......
vcm/css/vcm_info.css
View file @ b4f17acf
...@@ -39,7 +39,7 @@ body { ...@@ -39,7 +39,7 @@ body {
} }
h1, h2, h3{ h1, h2, h3{
font-family: Arial, sans-serif; font-family: 'Roboto',Arial, sans-serif;
font-weight: bold; font-weight: bold;
color: #333; color: #333;
margin: 0; margin: 0;
......
vcm/index.html
View file @ b4f17acf
This diff is collapsed.
vcm/sources/nouislider.css
View file @ b4f17acf
...@@ -72,10 +72,14 @@ ...@@ -72,10 +72,14 @@
-webkit-backface-visibility: hidden; -webkit-backface-visibility: hidden;
backface-visibility: hidden; backface-visibility: hidden;
position: absolute; position: absolute;
border-radius: 10px;
} }
.noUi-touch-area { .noUi-touch-area {
height: 100%; height: 100%;
width: 100%; width: 100%;
border-radius:10px;
background-color: #121212;
} }
.noUi-state-tap .noUi-connect, .noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin { .noUi-state-tap .noUi-origin {
...@@ -134,7 +138,7 @@ ...@@ -134,7 +138,7 @@
} }
.noUi-handle { .noUi-handle {
border: 1px solid #D9D9D9; border: 1px solid #D9D9D9;
border-radius: 3px; border-radius: 10px;
background: #FFF; background: #FFF;
cursor: default; cursor: default;
box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB; box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
......
vcm/templates/cus_Menu.css
View file @ b4f17acf
...@@ -20,7 +20,7 @@ ...@@ -20,7 +20,7 @@
border: solid white; border: solid white;
border-width: thin; border-width: thin;
display: block; display: block;
background-color:#000000; background-color:#121212;
color: white; color: white;
cursor: pointer; cursor: pointer;
padding: 11px; padding: 11px;
......
vcm/templates/cus_Menu.js
View file @ b4f17acf
...@@ -135,27 +135,7 @@ function addcont(content){ ...@@ -135,27 +135,7 @@ function addcont(content){
'<a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>'+ '<a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>'+
'<a class="next" onclick="plusSlides(1, 0)">&#10095;</a>'+ '<a class="next" onclick="plusSlides(1, 0)">&#10095;</a>'+
'</div>'+ '</div>'+
'<br>'+ '<br>'
'<!-- The dots/circles -->'+
'<div style="text-align:center">'+
'<span class="dot" onclick="currentSlide(1)"></span>'+
'<span class="dot" onclick="currentSlide(2)"></span>'+
'<span class="dot" onclick="currentSlide(3)"></span>'+
'<span class="dot" onclick="currentSlide(4)"></span>'+
'<span class="dot" onclick="currentSlide(5)"></span>'+
'<span class="dot" onclick="currentSlide(6)"></span>'+
'<span class="dot" onclick="currentSlide(7)"></span>'+
'<span class="dot" onclick="currentSlide(8)"></span>'+
'<span class="dot" onclick="currentSlide(9)"></span>'+
'<span class="dot" onclick="currentSlide(10)"></span>'+
'<span class="dot" onclick="currentSlide(11)"></span>'+
'<span class="dot" onclick="currentSlide(12)"></span>'+
'<span class="dot" onclick="currentSlide(13)"></span>'+
'<span class="dot" onclick="currentSlide(14)"></span>'+
'<span class="dot" onclick="currentSlide(15)"></span>'+
'<span class="dot" onclick="currentSlide(16)"></span>'+
'<span class="dot" onclick="currentSlide(17)"></span>'+
'</div>'
var heatdem = '<div style="width:100%;margin-top:200px;" id="chartNordB"></div>' var heatdem = '<div style="width:100%;margin-top:200px;" id="chartNordB"></div>'
...@@ -167,13 +147,14 @@ function addcont(content){ ...@@ -167,13 +147,14 @@ function addcont(content){
"<div class='btn btn-three' onclick='oldZust()'>"+ "<div class='btn btn-three' onclick='oldZust()'>"+
"<span>Ist Zustand</span>"+ "<span>Ist Zustand</span>"+
"</div><br></div>"+ "</div><br></div>"+
"<div class='box-3'>"+ "<div onclick='document.getElementById('chxboxHighlight').click()' class='box-3'>"+
"<p>Highlight &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p><div class='switch'>"+ "<p>Highlight &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </p><div class='switch'>"+
"<input type='checkbox' name='toggle' id='chxboxHighlight' onclick='checkboxHighlight(true);'>"+ "<input type='checkbox' name='toggle' id='chxboxHighlight' onclick='checkboxHighlight(true);'>"+
"<label for='toggle'><i></i></label>"+ "<label for='toggle'><i></i></label>"+
"<span></span>"+
"</div>"+ "</div>"+
"</div>"+ "</div>"+
"<div class='box-3'>"+ "<div onclick='document.getElementById('chxboxDemand').click()' class='box-3'>"+
"<p>EnergyDemand</p><div class='switch'>"+ "<p>EnergyDemand</p><div class='switch'>"+
"<input type='checkbox' name='toggle' id='chxboxDemand' onclick='checkboxDemand(true);'>"+ "<input type='checkbox' name='toggle' id='chxboxDemand' onclick='checkboxDemand(true);'>"+
"<label for='toggle'><i></i></label>"+ "<label for='toggle'><i></i></label>"+
...@@ -256,7 +237,7 @@ var slideId = ["mySlides1", "mySlides2"] ...@@ -256,7 +237,7 @@ var slideId = ["mySlides1", "mySlides2"]
} }
function showSlides(n, no) { function showSlides(n, no) {
var i; var i;
var x = document.getElementsByClassName(slideId[no]); var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1} if (n > x.length) {slideIndex[no] = 1}
...@@ -265,4 +246,7 @@ var slideId = ["mySlides1", "mySlides2"] ...@@ -265,4 +246,7 @@ var slideId = ["mySlides1", "mySlides2"]
x[i].style.display = "none"; x[i].style.display = "none";
} }
x[slideIndex[no]-1].style.display = "block"; x[slideIndex[no]-1].style.display = "block";
} }
\ No newline at end of file function currentSlide(n) {
showSlides(n, 0);
}
\ No newline at end of file
vcm/templates/custom.css
View file @ b4f17acf
/* Border Colors of the header */ /* Border Colors of the header */
.vcm-border-splash{ .vcm-border-splash{
border-color: #000000; border-color: #121212;
} }
...@@ -10,11 +10,11 @@ ...@@ -10,11 +10,11 @@
.vcm-btn-base-splash-focus:focus, .vcm-btn-base-splash-focus:focus,
.vcm-btn-base-splash-hover.active, .vcm-btn-base-splash-hover.active,
.vcm-btn-base-splash-hover.selected{ .vcm-btn-base-splash-hover.selected{
background-color: #000000; background-color: #121212;
} }
.vcm-btn-base-splash-hover:hover, .vcm-btn-base-splash-hover:hover,
.vcm-btn-base-splash-active:hover{ .vcm-btn-base-splash-active:hover{
background-color: #000000; background-color: #121212;
} }
.vcm-font-splash, .vcm-font-splash,
.vcm-btn-font-splash, .vcm-btn-font-splash,
...@@ -22,13 +22,13 @@ ...@@ -22,13 +22,13 @@
.vcm-btn-font-splash-hover.active, .vcm-btn-font-splash-hover.active,
.vcm-btn-icon-font-splash-hover:hover, .vcm-btn-icon-font-splash-hover:hover,
.vcm-btn-icon-font-splash-hover.active{ .vcm-btn-icon-font-splash-hover.active{
color: #000000; color: #121212;
} }
/* Header Background Color */ /* Header Background Color */
.vcm-header-base { .vcm-header-base {
background-color: #000000; background-color: #121212;
/* height: 3.5rem; */ /* height: 3.5rem; */
} }
...@@ -140,7 +140,7 @@ ...@@ -140,7 +140,7 @@
/* Caption text */ /* Caption text */
.text { .text {
color: #f2f2f2; color: #f2f2f2;
background-color: #000000; background-color: #121212;
font-size: 15px; font-size: 15px;
padding: 8px 12px; padding: 8px 12px;
position: absolute; position: absolute;
...@@ -206,6 +206,7 @@ ...@@ -206,6 +206,7 @@
h1{ h1{
font-family: "Roboto", Arial !important; font-family: "Roboto", Arial !important;
font-weight: 700 !important; font-weight: 700 !important;
font-size: x-large;
} }
h2{ h2{
font-family: "Roboto", Arial !important; font-family: "Roboto", Arial !important;
...@@ -218,7 +219,11 @@ h3{ ...@@ -218,7 +219,11 @@ h3{
.SideInfo{ .SideInfo{
margin:1em; margin:1em;
} }
#SvgjsText1010{
font-family: "Roboto", Arial !important;
font-weight: 500 !important;
font-size: 18.72px;
}
.contentOne{ .contentOne{
font-family: "Roboto", Arial; font-family: "Roboto", Arial;
...@@ -263,7 +268,7 @@ h1.sticky { ...@@ -263,7 +268,7 @@ h1.sticky {
font-size: 20px; font-size: 20px;
padding:5px; padding:5px;
padding-bottom:15px; padding-bottom:15px;
background-color: white; /* background-color: white; */
z-index: 99; z-index: 99;
} }
...@@ -296,11 +301,13 @@ div.tour-top-navi { ...@@ -296,11 +301,13 @@ div.tour-top-navi {
.box-1 { background-color: #FF6766; } .box-1 { background-color: #FF6766; }
.box-2 { background-color: #3C3C3C; } .box-2 { background-color: #3C3C3C; }
.box-3 { .box-3 {
background-color: #3C3C3C;; /* background-color: #3C3C3C;; */
width: 100%; width: 100%;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center;} margin-left: 0.5em;
/* justify-content: center; */
}
.btn { .btn {
line-height: 50px; line-height: 50px;
...@@ -314,16 +321,21 @@ div.tour-top-navi { ...@@ -314,16 +321,21 @@ div.tour-top-navi {
.btn_standard_settings{
font-weight:500;
font-style: 'Roboto', sans-serif;
}
.btn-three { .btn-three {
color: #ffffff; color: #ffffff;
background-color: #3C3C3C;
transition: all 0.5s; transition: all 0.5s;
position: relative; position: relative;
margin: 5px; margin: 5px;
width:50%;
} }
.btn-three::before { .btn-three::before {
content: ''; content: '';
...@@ -379,12 +391,19 @@ div.tour-top-navi { ...@@ -379,12 +391,19 @@ div.tour-top-navi {
} }
.switch { .switch {
width: 180px; /* width: 180px;
height: 55px; height: 55px;
position: relative; position: relative;
margin-top: 5px !important; margin-top: 5px !important;
margin-bottom: 5px !important; margin-bottom: 5px !important;
margin-left: 20px !important; margin-left: 20px !important;
margin-right: 10px !important; */
width: 60px;
height: 20px;
position: relative;
margin-top: 15px !important;
margin-bottom: 4px !important;
margin-left: 20px !important;
margin-right: 10px !important; margin-right: 10px !important;
} }
...@@ -403,11 +422,11 @@ div.tour-top-navi { ...@@ -403,11 +422,11 @@ div.tour-top-navi {
.switch input ~ label i { .switch input ~ label i {
display: block; display: block;
height: 51px; height: 20px;
width: 51px; width: 20px;
position: absolute; position: absolute;
left: 2px; /* left: 2px;
top: 2px; top: 2px; */
z-index: 2; z-index: 2;
border-radius: inherit; border-radius: inherit;
background: #283446; /* Fallback */ background: #283446; /* Fallback */
...@@ -415,14 +434,28 @@ div.tour-top-navi { ...@@ -415,14 +434,28 @@ div.tour-top-navi {
box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 8px rgba(0,0,0,0.3), 0 12px 12px rgba(0,0,0,0.4); box-shadow: inset 0 1px 0 rgba(255,255,255,0.2), 0 0 8px rgba(0,0,0,0.3), 0 12px 12px rgba(0,0,0,0.4);
-webkit-transition: all .5s ease; -webkit-transition: all .5s ease;
transition: all .5s ease; transition: all .5s ease;
/* display: block;
height: 20px;
width: 20px;
position: absolute; */
/* left: 2px; */
/* top: 2px; */
/* z-index: 2;
border-radius: inherit;
background: #283446;
background: linear-gradient(#36455b, #283446);
box-shadow: inset 0 1px 0 rgb(255 255 255 / 20%), 0 0 8px rgb(0 0 0 / 30%), 0 12px 12px rgb(0 0 0 / 40%);
-webkit-transition: all .5s ease;
transition: all .5s ease; */
} }
.switch label + span { .switch label + span {
content: ""; content: "";
display: inline-block; display: inline-block;
position: absolute; position: absolute;
right: 0px; right: -9px;
top: 17px; top: 0px;
width: 18px; width: 18px;
height: 18px; height: 18px;
border-radius: 10px; border-radius: 10px;
......
vcm/templates/custom.js
View file @ b4f17acf
...@@ -402,15 +402,17 @@ function NordbahnhofText() { ...@@ -402,15 +402,17 @@ function NordbahnhofText() {
} }
function NoiseText() { function NoiseText(proj) {
// document.getElementById("projektOne").style.display = "none"; if (proj == true){
// document.getElementById("Energiekonzept").style.display = "none"; document.getElementById("projektOne").style.display = "none";
// document.getElementById("UmfrageOne").style.display = "none"; document.getElementById("Energiekonzept").style.display = "none";
// document.getElementById("Navigation").style.display = "none"; document.getElementById("UmfrageOne").style.display = "none";
// document.getElementById("NordbahnhofInfo").style.display = "none"; document.getElementById("Navigation").style.display = "none";
// document.getElementById("NoiseInfo").style.display = "block"; document.getElementById("NordbahnhofInfo").style.display = "none";
// document.getElementById("IntroProj").style.display = "none"; document.getElementById("NoiseInfo").style.display = "block";
// document.getElementById("Expertenmodus").style.display = "none"; document.getElementById("IntroProj").style.display = "none";
document.getElementById("Expertenmodus").style.display = "none";
}
showTour(); showTour();
var viewp = vcs.vcm.Framework.getInstance().viewpoints.NoiseView var viewp = vcs.vcm.Framework.getInstance().viewpoints.NoiseView
......
vcm/templates/sliders.css
View file @ b4f17acf
...@@ -12,18 +12,33 @@ ...@@ -12,18 +12,33 @@
} }
.One{ .One{
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
background-color: #38943d; background-color: #38943d;
} }
.Two{ .Two{
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
background-color: #699438; background-color: #699438;
} }
.Three{ .Three{
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
background-color: #d0d40b; background-color: #d0d40b;
} }
.Four{ .Four{
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
background-color: #db6f09; background-color: #db6f09;
} }
.Five{ .Five{
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
background-color: #ad0202; background-color: #ad0202;
} }
...@@ -42,12 +57,14 @@ ...@@ -42,12 +57,14 @@
} }
.my-legend .legend-scale ul li { .my-legend .legend-scale ul li {
font-size: 100%; font-size: 100%;
color:#121212;
list-style: none; list-style: none;
margin-left: 0; margin-left: 0;
line-height: 30px; line-height: 30px;
width:150px; width:150px;
margin-bottom: 2px; margin-bottom: 2px;
font-weight: bold; font-weight: bold;
padding-left:5px;
} }
.my-legend ul.legend-labels li span { .my-legend ul.legend-labels li span {
display: block; display: block;
......
vcm/templates/story/story.css
View file @ b4f17acf
...@@ -18,29 +18,29 @@ p { ...@@ -18,29 +18,29 @@ p {
/* Border Header */ /* Border Header */
header{ header{
border-bottom-color: #000000; border-bottom-color: #121212;
} }
.buttonset.one{ .buttonset.one{
background-color: #000000; background-color: #121212;
} }
.buttonset.one:hover{ .buttonset.one:hover{
background-color: #5e5e5e; background-color: #5e5e5e;
} }
.buttonset.two{ .buttonset.two{
background-color: #000000; background-color: #121212;
} }
.buttonset.two:hover{ .buttonset.two:hover{
background-color: #5e5e5e; background-color: #5e5e5e;
} }
h1{ h1{
color: #000000; color: #121212;
} }
h2{ h2{
color: black; color: #121212;
} }
.divider{ .divider{
background: #000000; background: #121212;
} }
/*Hintergrundfarbe Aktive Storyelemente*/ /*Hintergrundfarbe Aktive Storyelemente*/
...@@ -51,13 +51,13 @@ h2{ ...@@ -51,13 +51,13 @@ h2{
/* Balloon Login Screen*/ /* Balloon Login Screen*/
.balloon.teaser-balloon h1{ .balloon.teaser-balloon h1{
color: #595f3c; color: #121212;
} }
.balloon { .balloon {
border: 5px solid #000000; border: 5px solid #121212;
} }
.balloon:before { .balloon:before {
border-color: #000000 transparent; border-color: #121212 transparent;
} }
/*Hintergrundbild Startscreen*/ /*Hintergrundbild Startscreen*/
#story-frame.startscreen{ #story-frame.startscreen{
...@@ -287,7 +287,7 @@ div.title-fill { ...@@ -287,7 +287,7 @@ div.title-fill {
display: block; display: block;
position: absolute; position: absolute;
left: -31px; left: -31px;
background-color: #000000; background-color: #121212;
top: 1em; top: 1em;
padding:.45rem .55rem; padding:.45rem .55rem;
} }
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

Dies ist die Gitlab-Instanz des Transferportals der Hochschule für Technik Stuttgart. Hier geht es zurück zum Portal