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

Update Design some more

parent a313ec08
Expand all Hide whitespace changes
Inline Side-by-side
vcm/css/collapse.css
View file @ b4f17acf
.collapsible {
background-color: #777;
background-color: #121212;
color: white;
cursor: pointer;
padding: 18px;
......
vcm/css/menu.css
View file @ b4f17acf
......@@ -77,7 +77,15 @@
cursor: pointer;
}
#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{
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
......@@ -215,4 +223,54 @@
.btn_size{
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 {
padding: .5rem;
margin: .25rem 0;
text-align: left;
color: #000000;
color: #121212;
}
.message-wrap .message-btn {
margin-right: .2rem;
......
vcm/css/vcm_info.css
View file @ b4f17acf
......@@ -39,7 +39,7 @@ body {
}
h1, h2, h3{
font-family: Arial, sans-serif;
font-family: 'Roboto',Arial, sans-serif;
font-weight: bold;
color: #333;
margin: 0;
......
vcm/index.html
View file @ b4f17acf
This diff is collapsed.
vcm/sources/nouislider.css
View file @ b4f17acf
......@@ -72,10 +72,14 @@
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
position: absolute;
border-radius: 10px;
}
.noUi-touch-area {
height: 100%;
width: 100%;
border-radius:10px;
background-color: #121212;
}
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
......@@ -134,7 +138,7 @@
}
.noUi-handle {
border: 1px solid #D9D9D9;
border-radius: 3px;
border-radius: 10px;
background: #FFF;
cursor: default;
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 @@
border: solid white;
border-width: thin;
display: block;
background-color:#000000;
background-color:#121212;
color: white;
cursor: pointer;
padding: 11px;
......
vcm/templates/cus_Menu.js
View file @ b4f17acf
......@@ -135,27 +135,7 @@ function addcont(content){
'<a class="prev" onclick="plusSlides(-1, 0)">&#10094;</a>'+
'<a class="next" onclick="plusSlides(1, 0)">&#10095;</a>'+
'</div>'+
'<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>'
'<br>'
var heatdem = '<div style="width:100%;margin-top:200px;" id="chartNordB"></div>'
......@@ -167,13 +147,14 @@ function addcont(content){
"<div class='btn btn-three' onclick='oldZust()'>"+
"<span>Ist Zustand</span>"+
"</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'>"+
"<input type='checkbox' name='toggle' id='chxboxHighlight' onclick='checkboxHighlight(true);'>"+
"<label for='toggle'><i></i></label>"+
"<span></span>"+
"</div>"+
"</div>"+
"<div class='box-3'>"+
"<div onclick='document.getElementById('chxboxDemand').click()' class='box-3'>"+
"<p>EnergyDemand</p><div class='switch'>"+
"<input type='checkbox' name='toggle' id='chxboxDemand' onclick='checkboxDemand(true);'>"+
"<label for='toggle'><i></i></label>"+
......@@ -256,13 +237,16 @@ var slideId = ["mySlides1", "mySlides2"]
}
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
\ No newline at end of file
function showSlides(n, no) {
var i;
var x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
x[slideIndex[no]-1].style.display = "block";
}
function currentSlide(n) {
showSlides(n, 0);
}
\ No newline at end of file
vcm/templates/custom.css
View file @ b4f17acf
/* Border Colors of the header */
.vcm-border-splash{
border-color: #000000;
border-color: #121212;
}
......@@ -10,11 +10,11 @@
.vcm-btn-base-splash-focus:focus,
.vcm-btn-base-splash-hover.active,
.vcm-btn-base-splash-hover.selected{
background-color: #000000;
background-color: #121212;
}
.vcm-btn-base-splash-hover:hover,
.vcm-btn-base-splash-active:hover{
background-color: #000000;
background-color: #121212;
}
.vcm-font-splash,
.vcm-btn-font-splash,
......@@ -22,13 +22,13 @@
.vcm-btn-font-splash-hover.active,
.vcm-btn-icon-font-splash-hover:hover,
.vcm-btn-icon-font-splash-hover.active{
color: #000000;
color: #121212;
}
/* Header Background Color */
.vcm-header-base {
background-color: #000000;
background-color: #121212;
/* height: 3.5rem; */
}
......@@ -140,7 +140,7 @@
/* Caption text */
.text {
color: #f2f2f2;
background-color: #000000;
background-color: #121212;
font-size: 15px;
padding: 8px 12px;
position: absolute;
......@@ -206,6 +206,7 @@
h1{
font-family: "Roboto", Arial !important;
font-weight: 700 !important;
font-size: x-large;
}
h2{
font-family: "Roboto", Arial !important;
......@@ -218,7 +219,11 @@ h3{
.SideInfo{
margin:1em;
}
#SvgjsText1010{
font-family: "Roboto", Arial !important;
font-weight: 500 !important;
font-size: 18.72px;
}
.contentOne{
font-family: "Roboto", Arial;
......@@ -263,7 +268,7 @@ h1.sticky {
font-size: 20px;
padding:5px;
padding-bottom:15px;
background-color: white;
/* background-color: white; */
z-index: 99;
}
......@@ -296,11 +301,13 @@ div.tour-top-navi {
.box-1 { background-color: #FF6766; }
.box-2 { background-color: #3C3C3C; }
.box-3 {
background-color: #3C3C3C;;
/* background-color: #3C3C3C;; */
width: 100%;
display: flex;
align-items: center;
justify-content: center;}
margin-left: 0.5em;
/* justify-content: center; */
}
.btn {
line-height: 50px;
......@@ -314,16 +321,21 @@ div.tour-top-navi {
.btn_standard_settings{
font-weight:500;
font-style: 'Roboto', sans-serif;
}
.btn-three {
color: #ffffff;
background-color: #3C3C3C;
transition: all 0.5s;
position: relative;
margin: 5px;
width:50%;
}
.btn-three::before {
content: '';
......@@ -379,13 +391,20 @@ div.tour-top-navi {
}
.switch {
width: 180px;
/* width: 180px;
height: 55px;
position: relative;
margin-top: 5px !important;
margin-bottom: 5px !important;
margin-left: 20px !important;
margin-right: 10px !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;
}
.switch label {
......@@ -403,11 +422,11 @@ div.tour-top-navi {
.switch input ~ label i {
display: block;
height: 51px;
width: 51px;
height: 20px;
width: 20px;
position: absolute;
left: 2px;
top: 2px;
/* left: 2px;
top: 2px; */
z-index: 2;
border-radius: inherit;
background: #283446; /* Fallback */
......@@ -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);
-webkit-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 {
content: "";
display: inline-block;
position: absolute;
right: 0px;
top: 17px;
right: -9px;
top: 0px;
width: 18px;
height: 18px;
border-radius: 10px;
......
vcm/templates/custom.js
View file @ b4f17acf
......@@ -402,15 +402,17 @@ function NordbahnhofText() {
}
function NoiseText() {
// document.getElementById("projektOne").style.display = "none";
// document.getElementById("Energiekonzept").style.display = "none";
// document.getElementById("UmfrageOne").style.display = "none";
// document.getElementById("Navigation").style.display = "none";
// document.getElementById("NordbahnhofInfo").style.display = "none";
// document.getElementById("NoiseInfo").style.display = "block";
// document.getElementById("IntroProj").style.display = "none";
// document.getElementById("Expertenmodus").style.display = "none";
function NoiseText(proj) {
if (proj == true){
document.getElementById("projektOne").style.display = "none";
document.getElementById("Energiekonzept").style.display = "none";
document.getElementById("UmfrageOne").style.display = "none";
document.getElementById("Navigation").style.display = "none";
document.getElementById("NordbahnhofInfo").style.display = "none";
document.getElementById("NoiseInfo").style.display = "block";
document.getElementById("IntroProj").style.display = "none";
document.getElementById("Expertenmodus").style.display = "none";
}
showTour();
var viewp = vcs.vcm.Framework.getInstance().viewpoints.NoiseView
......
vcm/templates/sliders.css
View file @ b4f17acf
......@@ -12,18 +12,33 @@
}
.One{
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
background-color: #38943d;
}
.Two{
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
background-color: #699438;
}
.Three{
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
background-color: #d0d40b;
}
.Four{
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
background-color: #db6f09;
}
.Five{
border-width: 2px;
border-radius:4px;
border:solid #121212 ;
background-color: #ad0202;
}
......@@ -42,12 +57,14 @@
}
.my-legend .legend-scale ul li {
font-size: 100%;
color:#121212;
list-style: none;
margin-left: 0;
line-height: 30px;
width:150px;
margin-bottom: 2px;
font-weight: bold;
padding-left:5px;
}
.my-legend ul.legend-labels li span {
display: block;
......
vcm/templates/story/story.css
View file @ b4f17acf
......@@ -18,29 +18,29 @@ p {
/* Border Header */
header{
border-bottom-color: #000000;
border-bottom-color: #121212;
}
.buttonset.one{
background-color: #000000;
background-color: #121212;
}
.buttonset.one:hover{
background-color: #5e5e5e;
}
.buttonset.two{
background-color: #000000;
background-color: #121212;
}
.buttonset.two:hover{
background-color: #5e5e5e;
}
h1{
color: #000000;
color: #121212;
}
h2{
color: black;
color: #121212;
}
.divider{
background: #000000;
background: #121212;
}
/*Hintergrundfarbe Aktive Storyelemente*/
......@@ -51,13 +51,13 @@ h2{
/* Balloon Login Screen*/
.balloon.teaser-balloon h1{
color: #595f3c;
color: #121212;
}
.balloon {
border: 5px solid #000000;
border: 5px solid #121212;
}
.balloon:before {
border-color: #000000 transparent;
border-color: #121212 transparent;
}
/*Hintergrundbild Startscreen*/
#story-frame.startscreen{
......@@ -287,7 +287,7 @@ div.title-fill {
display: block;
position: absolute;
left: -31px;
background-color: #000000;
background-color: #121212;
top: 1em;
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