Difference between revisions of "Template:TU Dresden/CSS"

 
(32 intermediate revisions by 3 users not shown)
Line 106: Line 106:
 
     padding-right: 5%;
 
     padding-right: 5%;
 
     font-family: var(--headfont);
 
     font-family: var(--headfont);
−
     font-size: 50px;
+
     font-size: 46px;
 
     line-height: 170%;
 
     line-height: 170%;
 
     color: var(--bright-bg-color);
 
     color: var(--bright-bg-color);
Line 115: Line 115:
 
     padding-right: 5%;
 
     padding-right: 5%;
 
     font-family: var(--headfont);
 
     font-family: var(--headfont);
−
     font-size: 40px;
+
     font-size: 36px;
 
     line-height: 170%;
 
     line-height: 170%;
 
     color: var(--bright-bg-color);
 
     color: var(--bright-bg-color);
Line 131: Line 131:
 
     margin-left: 10px;  
 
     margin-left: 10px;  
 
     margin-right: 10px;
 
     margin-right: 10px;
 +
    font-family: var(--bodyfont);
 +
    line-height: 150%;
 
}
 
}
  
−
.at-a-glance .boxheading {
+
.at-a-glance h1{
 
     float: right;
 
     float: right;
 
}
 
}
Line 202: Line 204:
 
         background:#8A2BE2;
 
         background:#8A2BE2;
 
}
 
}
−
.contentbox p, .contentbox .pdf-resources, .contentbox .excel-resources, .contentbox ul, .contentbox ol {
+
 
 +
.table-scrollable {
 +
  width: 100%;
 +
  overflow-y: auto;
 +
  margin: 0 0 1em;
 +
}
 +
 
 +
.table-scrollable::-webkit-scrollbar {
 +
  -webkit-appearance: none;
 +
  width: 14px;
 +
  height: 14px;
 +
}
 +
 
 +
.table-scrollable::-webkit-scrollbar-thumb {
 +
  border-radius: 8px;
 +
  border: 3px solid #fff;
 +
  background-color: rgba(0, 0, 0, .3);
 +
}
 +
 
 +
.contentbox p, .contentbox .pdf-resources, .contentbox .excel-resources, .contentbox ul, .contentbox ol, .contentbox .read-more {
 
     display: block;
 
     display: block;
 
     padding: 20px;
 
     padding: 20px;
Line 259: Line 280:
 
     font-size: larger;
 
     font-size: larger;
 
     content: "EXCEL\00a0\00a0\00a0\00a0";
 
     content: "EXCEL\00a0\00a0\00a0\00a0";
 +
}
 +
 +
.read-more:before {
 +
    text-decoration: none;
 +
    color: grey;
 +
    font-weight: bold;
 +
    font-size: larger;
 +
    content: ">> READ MORE";
 
}
 
}
  
Line 269: Line 298:
 
     border-radius: 5px;
 
     border-radius: 5px;
 
     transition: .5s;
 
     transition: .5s;
 +
}
 +
 +
.read-more {
 +
    margin-top: 4px;
 +
    margin-bottom: 4px;
 +
    text-decoration: none;
 +
    width: 100%;
 +
    border: 2px solid var(--logo-pink);
 +
    border-radius: 5px;
 +
    transition: .5s;
 +
    width: 200px;
 +
    margin-left: calc(100% - 220px);
 +
}
 +
 +
.read-more:hover {
 +
    border: 3px solid var(--logo-pink);
 +
    text-decoration: none;
 +
    margin-top: 3px;
 +
    margin-bottom: 3px;
 
}
 
}
  
Line 483: Line 531:
 
}
 
}
  
−
nav ul a:hover, nav ul li:hover .dropbtn{
+
nav ul a:hover, nav ul li:hover .dropbtn, .show .dropbtn{
 
     background-color: var(--logo-pink);
 
     background-color: var(--logo-pink);
 
     box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);
 
     box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);
Line 495: Line 543:
 
}
 
}
  
−
nav ul li:hover .nav-dropdown {
+
nav ul li:hover .nav-dropdown, .show .nav-dropdown {
 
     display: block;
 
     display: block;
 
     box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);  
 
     box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);  
Line 546: Line 594:
 
     box-shadow: 0 3px 6px rgba(0,0,0,0.25),0 6px 16px rgba(0,0,0,0.05);
 
     box-shadow: 0 3px 6px rgba(0,0,0,0.25),0 6px 16px rgba(0,0,0,0.05);
 
     height: 45px;
 
     height: 45px;
 +
}
 +
 +
@media (pointer: coarse) {
 +
    .dropbtn span {
 +
        padding-top: 26px;
 +
        padding-bottom: 26px;
 +
        margin-top: -26px;
 +
        margin-bottom: -26px;
 +
        padding-left: 10px;
 +
        padding-right: 10px;
 +
    }
 +
    .dropbtn span:after {
 +
        transform: rotate(-90deg);
 +
        display: inline-block;
 +
        font-weight: bold;
 +
        font-family: var(--headfont);
 +
        content: '\2039';
 +
    }
 
}
 
}
  
Line 609: Line 675:
 
     height: 210px;
 
     height: 210px;
 
     border-radius: 105px;
 
     border-radius: 105px;
−
     background: var(--logo-dark-blue);
+
     background: rgb(28, 20, 68);
 
     box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);
 
     box-shadow: 0 6px 12px rgba(0,0,0,0.5),0 12px 32px rgba(0,0,0,0.1);
 
     z-index: 3;
 
     z-index: 3;
Line 670: Line 736:
 
     text-align: center;
 
     text-align: center;
 
     width: 100%;
 
     width: 100%;
−
    bottom: 45px;
 
 
     position: absolute;
 
     position: absolute;
 
}
 
}
Line 682: Line 747:
 
     text-align: center;
 
     text-align: center;
 
     width: 100%;
 
     width: 100%;
−
     bottom: 15px;
+
     bottom: 10px;
 
     position: absolute;
 
     position: absolute;
 
}
 
}
Line 953: Line 1,018:
 
         width: 100%;
 
         width: 100%;
 
         box-shadow: none;
 
         box-shadow: none;
−
        height: 70px;
 
 
     }
 
     }
  
Line 969: Line 1,033:
 
     .navbar {
 
     .navbar {
 
         display: none;
 
         display: none;
 +
    }
 +
 +
    nav ul a:hover, nav ul li:hover .dropbtn, .show .dropbtn{
 +
        height: 70px;
 +
    }
 +
 +
    a.active, nav ul li.active .dropbtn{
 +
        height: 70px;
 
     }
 
     }
  
Line 988: Line 1,060:
 
.view {
 
.view {
 
     width: 400px;
 
     width: 400px;
−
     height: 400px;
+
     height: 450px;
−
    margin: 10px;
+
 
     float: left;
 
     float: left;
 
     overflow: hidden;
 
     overflow: hidden;
 
     position: relative;
 
     position: relative;
 
     text-align: center;
 
     text-align: center;
−
    box-shadow: 1px 1px 2px #e6e6e6;
 
 
     cursor: default;
 
     cursor: default;
 
      
 
      
Line 1,011: Line 1,081:
 
}
 
}
 
.view h2 {
 
.view h2 {
−
    text-transform: uppercase;
 
 
     color: #fff;
 
     color: #fff;
 
     text-align: center;
 
     text-align: center;
Line 1,021: Line 1,090:
 
}
 
}
 
.view p {
 
.view p {
−
     font-family: Georgia, serif;
+
     font-family: Arial, serif;
−
    font-style: italic;
+
     font-size: 15px;
−
     font-size: 12px;
+
 
     position: relative;
 
     position: relative;
 
     color: #fff;
 
     color: #fff;
Line 1,029: Line 1,097:
 
     text-align: center
 
     text-align: center
 
}
 
}
 +
 
.view a.info {
 
.view a.info {
 
     display: inline-block;
 
     display: inline-block;
Line 1,035: Line 1,104:
 
     background: #000;
 
     background: #000;
 
     color: #fff;
 
     color: #fff;
−
    text-transform: uppercase;
 
−
    box-shadow: 0 0 1px #000
 
 
}
 
}
 
.view a.info:hover {
 
.view a.info:hover {
 
     box-shadow: 0 0 5px #000
 
     box-shadow: 0 0 5px #000
 
}
 
}
−
.view-third img {
+
.view-eighth .mask {  
−
    transition: all 0.2s ease-in;
+
        background-color: rgba(0,0,0,0.6);
−
}
+
top: -200px;
−
.view-third .mask {  
+
−
background-color: rgba(0,0,0,0.6);
+
 
opacity: 0;
 
opacity: 0;
−
transform: translate(460px, -100px) rotate(180deg);
+
transition: all 0.3s ease-out 0.5s;
−
transition: all 0.2s 0.4s ease-in-out;
+
 
}
 
}
−
.view-third h2{
+
.view-eighth h2{
−
transform: translateY(-100px);
+
    transform: translateY(-200px);
−
transition: all 0.2s ease-in-out;
+
transition: all 0.2s ease-in-out 0.1s;
 
}
 
}
−
.view-third p {  
+
.view-eighth p {  
−
transform: translateX(300px) rotate(90deg);
+
    transform: translateY(-200px);
−
transition: all 0.2s ease-in-out;
+
transition: all 0.2s ease-in-out 0.2s;
 
}
 
}
−
.view-third a.info {  
+
.view-eighth a.info {  
−
transform: translateY(-200px);
+
    transform: translateY(-200px);
−
transition: all 0.2s ease-in-out;
+
transition: all 0.2s ease-in-out 0.3s;
 
}  
 
}  
−
 
+
.view-eighth:hover .mask {  
−
.view-third:hover .mask {  
+
opacity: 1;
−
opacity:1;  
+
top: 0px;  
−
transition-delay: 0s;
+
transition-delay: 0s;  
−
transform: translate(0px, 0px);
+
    animation: bounceY 0.9s linear;
 +
}
 +
.view-eighth:hover h2 {
 +
    transform: translateY(0px);
 +
transition-delay: 0.4s;
 
}
 
}
−
.view-third:hover h2 {  
+
.view-eighth:hover p {  
−
transform: translateY(0px);  
+
transform: translateY(0px);
−
transition-delay: 0.5s;  
+
transition-delay: 0.2s;
 
}
 
}
−
.view-third:hover p {  
+
.view-eighth:hover a.info {  
−
     transform: translateX(0px) rotate(0deg);
+
     transform: translateY(0px);
−
transition-delay: 0.4s;
+
transition-delay: 0s;
 
}
 
}
−
.view-third:hover a.info {  
+
@keyframes bounceY {
−
transform: translateY(0px);
+
    0% { transform: translateY(-205px);}
−
transition-delay: 0.3s;
+
    40% { transform: translateY(-100px);}
 +
    65% { transform: translateY(-52px);}
 +
    82% { transform: translateY(-25px);}
 +
    92% { transform: translateY(-12px);}
 +
    55%, 75%, 87%, 97%, 100% { transform: translateY(0px);}
 
}
 
}
  
 
</style>
 
</style>
 
</html>
 
</html>

Latest revision as of 23:25, 15 December 2017