Difference between revisions of "Template:CCU Taiwan/css"

Line 253: Line 253:
 
   height: 0%;
 
   height: 0%;
 
}
 
}
 +
section{
 +
  display :flex;
 +
  justify-content: center;
 +
  align-items: center;
 +
  color :rgba(0, 0, 0, 0.5);
 +
  font-size: 2rem;
 +
  z-index: -1;
 +
}
 +
.Quick-navigation {
 +
  position: fixed;
 +
  text-align:left;
 +
  margin: 0;
 +
  top: 50vh;
 +
  left: 3vw;
 +
  transform: translateY(-50%);
 +
  z-index:1;
 +
}
 +
 +
 +
.Quick-navigation a {
 +
padding:3vh;
 +
}
 +
 +
.Quick-navigation-item {
 +
    color: red;
 +
    text-decoration: none;
 +
    font-size: 1.3em;
 +
    transition: color 0.5s;
 +
    padding: 1em;
 +
    display: block;
 +
}
 +
.Quick-navigation-item:hover{
 +
color :#FFF;
 +
}
 +
.Quick-navigation-item.current {
 +
    color :#FFF;
 +
}
 +
.Scroll-progress-indicator {
 +
  transition: all 0.5s;
 +
  left: -10px;
 +
  border-radius :2px;
 +
  position :absolute;
 +
  top :50%;
 +
  opacity: 0;
 +
  padding: 2em;
 +
  transform :translateX(200%) translateY(-50%);
 +
  background-color: blue;
 +
 +
}
 +
.Scroll-progress-indicator.visible {
 +
  transform: translateX(-100%) translateY(-50%);
 +
  opacity: 1;
 +
}
 +
 +
/*#A {
 +
  background-color: crimson;
 +
  height:100vh;
 +
}
 +
#B{
 +
  background-color: purple;
 +
  height: 100vh;
 +
}
 +
#C{
 +
  background-color: green;
 +
  height:50vh;
 +
}
 +
#D{
 +
  background-color: red;
 +
  height: 150vh;
 +
}
 +
#E{
 +
  background-color: white;
 +
  height: 120vh;
 +
}*/
 +
.Scroll-to-top {
 +
  position: fixed;
 +
  right: 20px;
 +
  bottom: 0;
 +
  background-color: rgba(0, 0, 0, 0.2);
 +
  border: none;
 +
  color: rgba(255, 255, 255, 0.5);
 +
  font-size: 1.5rem;
 +
  padding: 0.5em;
 +
  cursor: pointer;
 +
  opacity:  0;
 +
  transform: translateY(100%);
 +
  transition: all 0.3s;
 +
  outline: none;
 +
}
 +
.Scroll-to-top.visible {
 +
  opacity :1;
 +
  transform: translateY(0);
 +
}
 +
 +
.Scroll-to-top:hover {
 +
  color :rgba(255, 255, 255, 0.9);
 +
}
 +
 
</style>
 
</style>
 
</html>
 
</html>

Revision as of 09:26, 20 August 2018