Jump to content

MediaWiki:Main Page.css: Difference between revisions

From Ditzy Wiki
Created page with "#Iframe1, #Iframe2 { position: fixed; top: 50%; width: 160px; height: 601px; transition: transform 0.5s ease, opacity 0.5s ease; opacity: 0; pointer-events: none; z-index: 5; } #Iframe1 { left: 0; transform: translate(-160px, -50%); } #Iframe2 { right: 0; transform: translate(160px, -50%); } .vector-sticky-header-visible #Iframe1 { transform: translate(0, -50%); opacity: 1; pointer-events: auto; } .vector-sticky..."
 
No edit summary
Line 1: Line 1:
h1 {
  text-shadow: #FC0 1px 0 10px;
    display: inline-block;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
 
  h1:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }
#Iframe1, #Iframe2 {
#Iframe1, #Iframe2 {
     position: fixed;
     position: fixed;

Revision as of 13:57, 15 March 2026

h1 {
   text-shadow: #FC0 1px 0 10px;
    display: inline-block;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  
  h1:hover {
    transform: scale(1.08) translateY(-2px);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  }



#Iframe1, #Iframe2 {
    position: fixed;
    top: 50%;
    width: 160px;
    height: 601px;
    transition: transform 0.5s ease, opacity 0.5s ease;
    opacity: 0;
    pointer-events: none;
    z-index: 5;
}
#Iframe1 {
    left: 0;
    transform: translate(-160px, -50%);
}
#Iframe2 {
    right: 0;
    transform: translate(160px, -50%);
}
.vector-sticky-header-visible #Iframe1 {
    transform: translate(0, -50%);
    opacity: 1;
    pointer-events: auto;
}
.vector-sticky-header-visible #Iframe2 {
    transform: translate(0, -50%);
    opacity: 1;
    pointer-events: auto;
}
#DoomUI {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100vw;
    z-index: 5;
    transform: translateY(100px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.vector-sticky-header-visible #DoomUI {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}
body.footer-visible #Iframe1,
body.footer-visible #Iframe2,
body.footer-visible #DoomUI {
    opacity: 0;
    pointer-events: none;
}
body.footer-visible #Iframe1 {
    transform: translate(-160px, -50%);
}
body.footer-visible #Iframe2 {
    transform: translate(160px, -50%);
}
body.footer-visible #DoomUI {
    transform: translateY(100px);
}