Template:Vilnius-Lithuania/CSS/menuOverlay

div[bg=dark] { background-color: rgba(0, 0, 0, 0.85); }

div[bg=none] { background-color: none; }

  1. fixedOverlay {

position: fixed; height: 100%; width: 100%; z-index: 100; transition: 1s; }

  1. fixedOverlay #sidebar {

width: 5vw; height: 100%; position: fixed; color: #FAFAFC; }

  1. fixedOverlay #sidebar #sidebar-wrapper {

width: 40%; height: 100%; position: absolute; left: 50%; transform: translateX(-50%); }

  1. fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container {

width: 30%; height: 30%; background: rgba(98, 129, 239, 0.3); position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-radius: 10px; max-width: 7px; 

       opacity: 1;
       transition: 0.5s;

}

  1. fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container[hiddenScroll="true"]{
       opacity:0

}

  1. fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container #scrollbar {

width: 100%; background: #6281EF; opacity: 100%; height: 0%; border-radius: 20px; }

  1. fixedOverlay #sidebar #sidebar-wrapper #indicateScroll {

position: absolute; left: 50%; transform: translateX(-50%); bottom: 10vh; }

  1. fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 {

padding-top: 10px; transform: rotate(180deg); writing-mode: vertical-lr; text-transform: uppercase; margin: -2px; }

  1. fixedOverlay #sidebar #sidebar-wrapper #indicateScroll img {

width: 100%; text-align: center; }

  1. fixedOverlay nav {

box-sizing: border-box; z-index: 2; pointer-events: none; display: block; padding-top: 10px; transition: 0.5s; }

  1. fixedOverlay nav[onText=true]{

background-color: #FAFAFC; box-sizing: border-box; border-bottom: solid 1px rgba(0,0,0,0.1); padding-bottom: 10px; box-shadow: 0px 1px 5px #999; }

  1. fixedOverlay nav #header {

display: flex; justify-content: space-between; }

  1. fixedOverlay nav .header-part {

margin: 14px 100px }

  1. fixedOverlay nav #header h1 {

margin: 0px; font-family: "lato-heavy"; font-size: 24px; color: #6281EF; }

  1. fixedOverlay nav #header .active .menu-short {

transform: translateX(30%) scaleX(0); }

  1. fixedOverlay nav #header .active #top-hamb {

transform: scale(0.7) translateY(20px) rotate(45deg); }

  1. fixedOverlay nav #header .active #bottom-hamb {

transform: scale(0.7) translateY(-9px) rotate(-45deg); }

  1. fixedOverlay nav #header .menu-wrapper {

cursor: pointer; z-index: 11; box-sizing: border-box; min-width: 30px; pointer-events: all; }

  1. fixedOverlay nav #header #logo a{
       pointer-events: all;

}

  1. fixedOverlay nav #header #logo a:hover,
  2. fixedOverlay nav #header #logo a:focus{
       text-decoration: none;

}

  1. fixedOverlay nav #header .menu-wrapper .menu-hamb {

height: 4px; border-radius: 5px; transition: 0.5s; background-color: #6281EF; }

  1. fixedOverlay nav #header .menu-wrapper .menu-short {

width: 70%; margin-bottom: 6px; margin-top: 6px; transition: 0.1s; }

  1. fixedOverlay #bubbles-to-close{

height: 100%; width: 100%; position: absolute; display:none; }

  1. fixedOverlay #bubbles-to-close[open=true]{

display: initial; pointer-events: all }

  1. bubbles {

position: fixed; height: 100%; width: 100%; }

  1. bubbles .bubble .choices {

position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-transform: uppercase; padding-left: 20px; padding-right: 20px; pointer-events: all; }

  1. bubbles .bubble .choices .menu-list {

width: fit-content; list-style: none; font-size: 2em; }

  1. bubbles .bubble .choices .menu-list .main-choice h1 {

box-shadow: inset 0 0 0 -1px #6281EF; transition: 0.3s; padding: 0 5px }

  1. bubbles .bubble .choices .menu-list .main-choice h1:hover {

box-shadow: inset 0 -0.5em 0 -1px #6281EF; }

  1. bubbles .bubble .choices .menu-list .active h1 {

box-shadow: inset 0 -0.5em 0 -1px #6281EF; }

  1. bubbles .bubble .choices .menu-list h1 {

margin: 0; font-size: 1.2em; font-family: 'lato-heavy' }

  1. bubbles .bubble .choices ol li {

counter-increment: count-me; cursor: pointer; padding: 10px; width: fit-content; }

  1. bubbles .bubble .choices ol li::before {

content: counter(count-me) ". "; max-width: 0px; max-height: 0px; left: -1.3em; position: relative; display: flex; }

  1. bubbles .bubble .choices ul {

padding-inline-start: 0; }

  1. bubbles #popup-main {

background-color: #121212; height: 40vw; width: 40vw; border-radius: 100%; position: absolute; right: -80vw; top: -80vh; transition: 1s; color: #FAFAFC; z-index: 2; -webkit-box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57); -moz-box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57); box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57); }

  1. bubbles #popup-main .menu-list {

font-size: 1.8em; }

  1. bubbles #popup-main .menu-list li::before {

-webkit-text-fill-color: #121212; -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #FAFAFC; line-height: 0.6em; 

       font-size: 2em;

}

  1. bubbles #popup-main .menu-list .active::before {

-webkit-text-fill-color: #FAFAFC; }

  1. bubbles #popup-next {

background-color: #6281EF; height: 70vw; width: 70vw; border-radius: 100%; position: absolute; left: -90vw; bottom: -200vh; transition: 1s; color: #FAFAFC; display: table; overflow: hidden; z-index: 3; transform: translate(-50%, 50%); }

  1. bubbles #popup-next .project {

columns: 2; -webkit-columns: 2; -moz-columns: 2; column-gap: 0; }

  1. bubbles #popup-next .project li {

padding-left: 0; padding-right: 0; font-family: 'lato-heavy' }

  1. bubbles #popup-next .choices {

vertical-align: middle; display: table-cell; }

  1. bubbles #popup-next .choices .menu-list {

font-size: 2em; list-style: none; margin: 0 auto; padding-right: 10px; padding-left: 10px; text-align: -webkit-center; }

  1. bubbles #popup-next .choices .menu-list li {

width: fit-content; margin-bottom: 15px; font-family: 'lato-heavy' }

  1. bubbles #popup-next .choices .menu-list li a {

box-shadow: inset 0 0 0 -1px #3356CE; transition: 0.3s; padding: 0 5px }

  1. bubbles #popup-next .choices .menu-list li a:hover {

box-shadow: inset 0 -0.5em 0 -1px #3356CE; }

  1. bubbles #popup-next .choices .menu-list a {

color: #FAFAFC; text-decoration: none; white-space: nowrap; }

  1. bubbles #bub_first .active {

right: -7vw; top: -3vh; }

  1. bubbles #bub_second .active {

left: 50vw; bottom: 50vh; }

  1. fixedOverlay[bg=none],
  2. fixedOverlay[bg=none] #bubbles {

pointer-events: none; }

  1. fixedOverlay[bg=dark],
  2. bubbles {

pointer-events: none; }

@media only screen and (min-width: 768px) and (max-width: 1023px) { #bubbles #popup-main { background-color: #121212; height: 60vh; width: 60vh; right: -100vw; top: -100vh; } #bubbles #popup-main .menu-list { font-size: 18px; } #bubbles #popup-main .menu-list h1 { font-size: 1.2em; } #bubbles #popup-main .menu-list li::before { line-height: 22px; } #bubbles #popup-next { height: 100vw; width: 100vw; } #bubbles #popup-next .choices .menu-list { font-size: 1.5em; } #bubbles #popup-next .choices .menu-list li { padding: 5px; } #bubbles #popup-next .project { columns: 2; -webkit-columns: 2; -moz-columns: 2; column-gap: 0; } #bubbles #popup-next .project li { padding-left: 0; padding-right: 0; margin-bottom: 3px } #bubbles #bub_first .active { right: -7vw; top: -4vh; } #bubbles #bub_second .active { left: 40vw; bottom: 40vh; } #fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 { font-size: 0.65em; } #fixedOverlay nav #header h1 { font-size: 18px; } #fixedOverlay nav #header .active #top-hamb { transform: scale(0.7) translateY(15px) rotate(45deg); } #fixedOverlay nav #header .active #bottom-hamb { transform: scale(0.7) translateY(-8px) rotate(-45deg); } #fixedOverlay nav #header .menu-wrapper .menu-hamb { height: 3px; } #fixedOverlay nav #header .menu-wrapper .menu-short { margin-bottom: 5px; margin-top: 5px; } }


/* Smartphones in landscape mode */


/* Smartphones in portrait mode */

@media only screen and (max-width: 767px) { #fixedOverlay nav .header-part { margin: 5px 30px } #bubbles #popup-main { background-color: #121212; height: 60vh; width: 60vh; right: -100vw; top: -100vh; } #bubbles #popup-main .menu-list { font-size: 18px; } #bubbles #popup-main .menu-list h1 { font-size: 1.3em; } #bubbles #popup-next { height: 100vw; width: 100vw; } #bubbles #popup-next .choices .menu-list { font-size: 1.45em; } #bubbles #popup-next .choices .menu-list li { margin-bottom: 3px } #bubbles #popup-next .choices li { padding: 5px; } #bubbles #popup-next .project { column-gap: 0; } #bubbles #popup-next .project li { padding-left: 0; padding-right: 0; margin-bottom: 3px } #bubbles #bub_first .active { right: -22vw; top: -6vh; } #bubbles #bub_second .active { left: 50vw; bottom: 25vh; }

  1. fixedOverlay #sidebar{

width:10vw } #fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 { font-size: 0.65em; } #fixedOverlay nav #header h1 { font-size: 18px; } #fixedOverlay nav #header .active #top-hamb { transform: scale(0.7) translateY(15px) rotate(45deg); } #fixedOverlay nav #header .active #bottom-hamb { transform: scale(0.7) translateY(-8px) rotate(-45deg); } #fixedOverlay nav #header .menu-wrapper .menu-hamb { height: 3px; } #fixedOverlay nav #header .menu-wrapper .menu-short { margin-bottom: 5px; margin-top: 5px; } }

@media only screen and (max-width: 420px) and (max-height: 600px) { 

      #bubbles #popup-main .menu-list li::before{
              font-size: 1.8em;

line-height: 0.5em; 

      }

#bubbles #popup-next .choices .menu-list { font-size: 1.2em; } #bubbles #popup-main .menu-list h1 { font-size: 1em; } }