Difference between revisions of "Template:Vilnius-Lithuania/CSS/menuOverlay"

 
(44 intermediate revisions by 2 users not shown)
Line 1: Line 1:
 
div[bg=dark] {
 
div[bg=dark] {
−
background-color: rgba(0, 0, 0, 0.85);
+
  background-color: rgba(0, 0, 0, 0.85);
 
}
 
}
  
 
div[bg=none] {
 
div[bg=none] {
−
background-color: none;
+
  background-color: none;
 
}
 
}
  
 
#fixedOverlay {
 
#fixedOverlay {
−
position: fixed;
+
  position: fixed;
−
height: 100%;
+
  height: 100%;
−
width: 100%;
+
  width: 100%;
−
z-index: 100;
+
  z-index: 12;
−
transition: 1s;
+
  top: 18px;
 +
  transition: 1s;
 +
  font-family: "montserrat-light" !important;
 
}
 
}
−
 
+
#fixedOverlay[bg=none], #fixedOverlay[bg=dark] {
−
#fixedOverlay #sidebar {
+
  pointer-events: none;
−
width: 5vw;
+
−
height: 100%;
+
−
position: fixed;
+
−
color: #FAFAFC;
+
 
}
 
}
−
 
+
#fixedOverlay[bg=none] #bubbles, #fixedOverlay[bg=dark] #bubbles {
−
#fixedOverlay #sidebar #sidebar-wrapper {
+
  pointer-events: none;
−
width: 40%;
+
−
height: 100%;
+
−
position: absolute;
+
−
left: 50%;
+
−
transform: translateX(-50%);
+
 
}
 
}
−
 
+
#fixedOverlay .scroll-wrapper {
−
#fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container {
+
  display: flex;
−
width: 30%;
+
  position: fixed;
−
height: 30%;
+
  width: 100%;
−
background: rgba(98, 129, 239, 0.3);
+
  height: 100vh;
−
position: absolute;
+
  justify-content: space-between;
−
left: 50%;
+
  opacity: 1;
−
top: 50%;
+
  transition: 0.5s;
−
transform: translate(-50%, -50%);
+
−
border-radius: 10px;
+
−
max-width: 7px;
+
−
        opacity: 1;
+
−
        transition: 0.5s;
+
 
}
 
}
−
#fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container[hiddenScroll="true"]{
+
#fixedOverlay .scroll-wrapper .scroll-area {
−
        opacity:0
+
  height: 100%;
 +
  width: 5vw;
 +
  display: flex;
 +
  align-items: center;
 +
  justify-content: center;
 
}
 
}
−
 
+
@media screen and (max-width: 767px) {
−
#fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container #scrollbar {
+
  #fixedOverlay .scroll-wrapper .scroll-area {
−
width: 100%;
+
    width: 10vw;
−
background: #6281EF;
+
  }
−
opacity: 100%;
+
−
height: 0%;
+
−
border-radius: 20px;
+
 
}
 
}
−
 
+
#fixedOverlay .scroll-wrapper .scroll-area#sidebar-wrapper #scrollbar-container {
−
#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll {
+
  width: 30%;
−
position: absolute;
+
  height: 30%;
−
left: 50%;
+
  background: rgba(98, 129, 239, 0.3);
−
transform: translateX(-50%);
+
  border-radius: 10px;
−
bottom: 10vh;
+
  max-width: 7px;
 
}
 
}
−
 
+
#fixedOverlay .scroll-wrapper .scroll-area#sidebar-wrapper #scrollbar-container #scrollbar {
−
#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 {
+
  width: 100%;
−
padding-top: 10px;
+
  background: #6281EF;
−
transform: rotate(180deg);
+
  opacity: 100%;
−
writing-mode: vertical-lr;
+
  height: 0%;
−
text-transform: uppercase;
+
  border-radius: 20px;
−
margin: -2px;
+
  transition: background-color 0.5s;
 
}
 
}
−
 
+
#fixedOverlay .scroll-wrapper .scroll-area #backtotop-wrapper {
−
#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll img {
+
  width: 3vw;
−
width: 100%;
+
  pointer-events: all;
−
text-align: center;
+
  cursor: pointer;
 +
  opacity: 0;
 +
  transition: 0.5s ease-out;
 +
  max-width: 20px;
 +
}
 +
@media screen and (max-width: 767px) {
 +
  #fixedOverlay .scroll-wrapper .scroll-area #backtotop-wrapper {
 +
    width: 4vw;
 +
  }
 +
}
 +
#fixedOverlay .scroll-wrapper .scroll-area #backtotop-wrapper.scrolled {
 +
  opacity: 1;
 +
}
 +
#fixedOverlay .scroll-wrapper .scroll-area #backtotop-wrapper svg {
 +
  width: 100%;
 +
}
 +
#fixedOverlay .scroll-wrapper .scroll-area #backtotop-wrapper svg path {
 +
  transition: 0.5s;
 +
}
 +
#fixedOverlay .scroll-wrapper[hiddenScroll=true] {
 +
  opacity: 0;
 +
}
 +
#fixedOverlay .scroll-wrapper[onBlue=true] .scroll-area#sidebar-wrapper #scrollbar-container {
 +
  background: rgba(255, 255, 255, 0.2);
 +
}
 +
#fixedOverlay .scroll-wrapper[onBlue=true] .scroll-area#sidebar-wrapper #scrollbar-container #scrollbar {
 +
  background: #FAFAFC;
 +
}
 +
#fixedOverlay .scroll-wrapper[onBlue=true] .scroll-area svg path {
 +
  stroke: #FAFAFC !important;
 
}
 
}
−
 
 
#fixedOverlay nav {
 
#fixedOverlay nav {
−
box-sizing: border-box;
+
  box-sizing: border-box;
−
z-index: 2;
+
  z-index: 2;
−
pointer-events: none;
+
  pointer-events: none;
−
display: block;
+
  display: block;
−
padding-top: 10px;
+
  transition: 0.5s;
−
transition: 0.5s;
+
  height: 87px;
−
        height: 5em;
+
 
}
 
}
−
#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;
 
−
}
 
−
 
 
#fixedOverlay nav #header {
 
#fixedOverlay nav #header {
−
display: flex;
+
  display: flex;
−
justify-content: space-between;
+
  justify-content: space-between;
 +
  height: fit-content;
 
}
 
}
−
 
+
#fixedOverlay nav #header object {
−
#fixedOverlay nav .header-part {
+
  width: 145px;
−
margin: 14px 100px
+
  pointer-events: none;
 
}
 
}
−
 
−
#fixedOverlay nav #header img {
 
−
      height: 3em
 
−
}
 
−
 
 
#fixedOverlay nav #header .active .menu-short {
 
#fixedOverlay nav #header .active .menu-short {
−
transform: translateX(30%) scaleX(0);
+
  transform: translateX(30%) scaleX(0);
 
}
 
}
−
 
 
#fixedOverlay nav #header .active #top-hamb {
 
#fixedOverlay nav #header .active #top-hamb {
−
transform: scale(0.7) translateY(20px) rotate(45deg);
+
  transform: scale(0.7) translateY(17px) rotate(45deg);
 
}
 
}
−
 
 
#fixedOverlay nav #header .active #bottom-hamb {
 
#fixedOverlay nav #header .active #bottom-hamb {
−
transform: scale(0.7) translateY(-9px) rotate(-45deg);
+
  transform: scale(0.7) translateY(-11px) rotate(-45deg);
 
}
 
}
−
 
+
#fixedOverlay nav #header .hamb-wrapper {
−
#fixedOverlay nav #header .menu-wrapper {
+
  height: 50px;
−
cursor: pointer;
+
  background-color: #6281ef;
−
z-index: 11;
+
  border-radius: 100px;
−
box-sizing: border-box;
+
  width: 50px;
−
min-width: 30px;
+
  display: flex;
−
pointer-events: all;
+
  align-items: center;
 +
  justify-content: center;
 +
  margin: 20px 20px 20px 0;
 +
  box-shadow: 0px 0px 6px #999;
 
}
 
}
−
#fixedOverlay nav #header #logo a{
+
#fixedOverlay nav #header .hamb-wrapper .menu-wrapper {
−
        pointer-events: all;
+
  cursor: pointer;
 +
  z-index: 11;
 +
  box-sizing: border-box;
 +
  width: 30px;
 +
  pointer-events: all;
 
}
 
}
−
#fixedOverlay nav #header #logo a:hover,
+
#fixedOverlay nav #header .hamb-wrapper .menu-wrapper .menu-hamb {
−
#fixedOverlay nav #header #logo a:focus{
+
  height: 4px;
−
        text-decoration: none;
+
  border-radius: 5px;
 +
  transition: 0.5s;
 +
  background-color: #FAFAFC;
 
}
 
}
−
 
+
#fixedOverlay nav #header .hamb-wrapper .menu-wrapper .menu-short {
−
#fixedOverlay nav #header .menu-wrapper .menu-hamb {
+
  width: 70%;
−
height: 4px;
+
  margin-bottom: 6px;
−
border-radius: 5px;
+
  margin-top: 6px;
−
transition: 0.5s;
+
  transition: transform 0.1s;
−
background-color: #6281EF;
+
  transition: background-color 0.5s;
 
}
 
}
−
 
+
#fixedOverlay nav #header .hamb-wrapper.white-menu {
−
#fixedOverlay nav #header .menu-wrapper .menu-short {
+
  background-color: #FAFAFC;
−
width: 70%;
+
}
−
margin-bottom: 6px;
+
#fixedOverlay nav #header .hamb-wrapper.white-menu .menu-hamb {
−
margin-top: 6px;
+
  background-color: #6281EF;
−
transition: 0.1s;
+
 
}
 
}
−
#fixedOverlay #bubbles-to-close{
+
#fixedOverlay nav #header .hamb-wrapper.invisible {
−
height: 100%;
+
  box-shadow: none;
−
width: 100%;
+
  background-color: transparent;
−
position: absolute;
+
−
display:none;
+
 
}
 
}
−
#fixedOverlay #bubbles-to-close[open=true]{
+
#fixedOverlay nav #header #logo {
−
display: initial;
+
  transition: 0.5s;
−
pointer-events: all
+
  margin: 20px 0 20px 20px;
 +
}
 +
#fixedOverlay nav #header #logo a {
 +
  pointer-events: all;
 +
  display: block;
 +
}
 +
#fixedOverlay #bubbles-to-close {
 +
  height: 100%;
 +
  width: 100%;
 +
  position: absolute;
 +
  display: none;
 +
}
 +
#fixedOverlay #bubbles-to-close[open=true] {
 +
  display: initial;
 +
  pointer-events: all;
 
}
 
}
  
 
#bubbles {
 
#bubbles {
−
position: fixed;
+
  position: fixed;
−
height: 100%;
+
  height: 100%;
−
width: 100%;
+
  width: 100%;
 
}
 
}
−
 
+
#bubbles .bubble {
−
#bubbles .bubble .choices {
+
  width: 100%;
−
position: absolute;
+
  height: 100%;
−
left: 50%;
+
  display: flex;
−
top: 50%;
+
  align-items: center;
−
transform: translate(-50%, -50%);
+
  justify-content: center;
−
text-transform: uppercase;
+
−
padding-left: 20px;
+
−
padding-right: 20px;
+
−
pointer-events: all;
+
 
}
 
}
−
 
+
#bubbles .bubble > div {
−
#bubbles .bubble .choices .menu-list {
+
  display: flex;
−
width: fit-content;
+
  align-items: center;
−
list-style: none;
+
  justify-content: center;
−
font-size: 2em;
+
 
}
 
}
−
 
+
#bubbles .bubble > div .choices {
−
#bubbles .bubble .choices .menu-list .main-choice h1 {
+
  text-transform: uppercase;
−
box-shadow: inset 0 0 0 -1px #6281EF;
+
  padding-left: 20px;
−
transition: 0.3s;
+
  padding-right: 20px;
−
padding: 0 5px
+
  pointer-events: all;
 
}
 
}
−
 
+
#bubbles .bubble > div .choices .menu-list {
−
#bubbles .bubble .choices .menu-list .main-choice h1:hover {
+
  width: fit-content;
−
box-shadow: inset 0 -0.5em 0 -1px #6281EF;
+
  list-style: none;
 +
  font-size: 2em;
 
}
 
}
−
 
+
#bubbles .bubble > div .choices .menu-list h1 {
−
#bubbles .bubble .choices .menu-list .active h1 {
+
  margin: 0;
−
box-shadow: inset 0 -0.5em 0 -1px #6281EF;
+
  font-size: 1.2em;
 +
  font-family: "montserrat-bold";
 
}
 
}
−
 
+
#bubbles .bubble > div .choices .menu-list .main-choice h1 {
−
#bubbles .bubble .choices .menu-list h1 {
+
  box-shadow: inset 0 0 0 -1px #6281EF;
−
margin: 0;
+
  transition: 0.3s;
−
font-size: 1.2em;
+
  padding: 0 5px;
−
font-family: 'lato-heavy'
+
 
}
 
}
−
 
+
#bubbles .bubble > div .choices .menu-list .main-choice h1:hover {
−
#bubbles .bubble .choices ol li {
+
  box-shadow: inset 0 -0.5em 0 -1px #6281EF;
−
counter-increment: count-me;
+
−
cursor: pointer;
+
−
padding: 10px;
+
−
width: fit-content;
+
 
}
 
}
−
 
+
#bubbles .bubble > div .choices .menu-list .active h1 {
−
#bubbles .bubble .choices ol li::before {
+
  box-shadow: inset 0 -0.5em 0 -1px #6281EF;
−
content: counter(count-me) ". ";
+
−
max-width: 0px;
+
−
max-height: 0px;
+
−
left: -1.3em;
+
−
position: relative;
+
−
display: flex;
+
 
}
 
}
−
 
+
#bubbles .bubble > div .choices ol li {
−
#bubbles .bubble .choices ul {
+
  counter-increment: count-me;
−
padding-inline-start: 0;
+
  cursor: pointer;
 +
  padding: 10px;
 +
  width: fit-content;
 +
}
 +
#bubbles .bubble > div .choices ol li::before {
 +
  content: counter(count-me) ". ";
 +
  max-width: 0px;
 +
  max-height: 0px;
 +
  left: -1.3em;
 +
  position: relative;
 +
  display: flex;
 +
}
 +
#bubbles .bubble > div .choices ul {
 +
  padding-inline-start: 0;
 
}
 
}
−
 
 
#bubbles #popup-main {
 
#bubbles #popup-main {
−
background-color: #121212;
+
  background-color: #121212;
−
height: 40vw;
+
  height: 40vw;
−
width: 40vw;
+
  width: 40vw;
−
border-radius: 100%;
+
  border-radius: 100%;
−
position: absolute;
+
  transition: 1s;
−
right: -80vw;
+
  z-index: 2;
−
top: -80vh;
+
  transform: translate(100vw, -100vh);
−
transition: 1s;
+
  -webkit-box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57);
−
color: #FAFAFC;
+
  -moz-box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57);
−
z-index: 2;
+
  box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57);
−
-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);
+
#bubbles #popup-main h1 {
−
box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57);
+
  color: #FAFAFC !important;
 
}
 
}
−
 
 
#bubbles #popup-main .menu-list {
 
#bubbles #popup-main .menu-list {
−
font-size: 1.8em;
+
  font-size: 1.8em;
 
}
 
}
−
 
 
#bubbles #popup-main .menu-list li::before {
 
#bubbles #popup-main .menu-list li::before {
−
-webkit-text-fill-color: #121212;
+
  -webkit-text-fill-color: #121212;
−
-webkit-text-stroke-width: 1px;
+
  -webkit-text-stroke-width: 1px;
−
-webkit-text-stroke-color: #FAFAFC;
+
  -webkit-text-stroke-color: #FAFAFC;
−
line-height: 0.6em;
+
  line-height: 0.6em;
−
        font-size: 2em;
+
  font-size: 2em;
 
}
 
}
−
 
 
#bubbles #popup-main .menu-list .active::before {
 
#bubbles #popup-main .menu-list .active::before {
−
-webkit-text-fill-color: #FAFAFC;
+
  -webkit-text-fill-color: #FAFAFC;
 
}
 
}
−
 
 
#bubbles #popup-next {
 
#bubbles #popup-next {
−
background-color: #6281EF;
+
  background-color: #6281EF;
−
height: 70vw;
+
  height: 70vw;
−
width: 70vw;
+
  width: 70vw;
−
border-radius: 100%;
+
  border-radius: 100%;
−
position: absolute;
+
  transition: 1s;
−
left: -90vw;
+
  color: #FAFAFC;
−
bottom: -200vh;
+
  overflow: hidden;
−
transition: 1s;
+
  z-index: 3;
−
color: #FAFAFC;
+
  transform: translate(-100vw, 100vh);
−
display: table;
+
−
overflow: hidden;
+
−
z-index: 3;
+
−
transform: translate(-50%, 50%);
+
 
}
 
}
−
 
+
#bubbles #popup-next .choices .menu-list {
−
#bubbles #popup-next .project {
+
  font-size: 2em;
−
columns: 2;
+
  list-style: none;
−
-webkit-columns: 2;
+
  margin: 0 auto;
−
-moz-columns: 2;
+
  padding-right: 10px;
−
column-gap: 0;
+
  padding-left: 10px;
 +
  text-align: center;
 +
  text-align: -moz-center;
 +
  text-align: -webkit-center;
 
}
 
}
  
−
#bubbles #popup-next .project li {
+
#bubbles #popup-next.project .choices .menu-list li:first-child {
−
padding-left: 0;
+
  padding-top: 25px;
−
padding-right: 0;
+
  /* TODO: maybe remove?? Kamile pls comment on this */
−
font-family: 'lato-heavy'
+
−
}
+
−
 
+
−
#bubbles #popup-next .choices {
+
−
vertical-align: middle;
+
−
display: table-cell;
+
−
}
+
−
 
+
−
#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;
+
 
}
 
}
  
 
#bubbles #popup-next .choices .menu-list li {
 
#bubbles #popup-next .choices .menu-list li {
−
width: fit-content;
+
  width: fit-content;
−
margin-bottom: 15px;
+
  padding-bottom: 25px;
−
font-family: 'lato-heavy'
+
  font-family: "montserrat-bold";
 +
  line-height: 1;
 
}
 
}
−
 
 
#bubbles #popup-next .choices .menu-list li a {
 
#bubbles #popup-next .choices .menu-list li a {
−
box-shadow: inset 0 0 0 -1px #3356CE;
+
  box-shadow: inset 0 0 0 -1px #3356CE;
−
transition: 0.3s;
+
  transition: 0.3s;
−
padding: 0 5px
+
  padding: 0 5px;
 
}
 
}
−
 
 
#bubbles #popup-next .choices .menu-list li a:hover {
 
#bubbles #popup-next .choices .menu-list li a:hover {
−
box-shadow: inset 0 -0.5em 0 -1px #3356CE;
+
  box-shadow: inset 0 -0.5em 0 -1px #3356CE;
 
}
 
}
−
 
 
#bubbles #popup-next .choices .menu-list a {
 
#bubbles #popup-next .choices .menu-list a {
−
color: #FAFAFC;
+
  color: #FAFAFC;
−
text-decoration: none;
+
  text-decoration: none;
−
white-space: nowrap;
+
  white-space: nowrap;
 
}
 
}
−
 
+
#bubbles #popup-next.wl .menu-list {
−
#bubbles #bub_first .active {
+
  display: grid;
−
right: -7vw;
+
  grid-template-columns: repeat(2, 1fr);
−
top: -3vh;
+
  grid-template-rows: repeat(3, 1fr);
 +
  grid-column-gap: 0px;
 +
  grid-row-gap: 0px;
 +
  grid-auto-flow: column;
 +
  text-align: left;
 
}
 
}
−
 
+
#bubbles #popup-next.wl .menu-list li {
−
#bubbles #bub_second .active {
+
  width: initial;
−
left: 50vw;
+
  font-family: "montserrat-bold";
−
bottom: 50vh;
+
 
}
 
}
−
 
+
#bubbles #popup-next.wl .menu-list li a {
−
#fixedOverlay[bg=none],
+
  padding: 0 0 5px 0;
−
#fixedOverlay[bg=none] #bubbles {
+
}
−
pointer-events: none;
+
#bubbles #popup-next.wl .menu-list .right-align {
 +
  text-align: right;
 +
  padding-right: 10px;
 +
}
 +
#bubbles #popup-next.wl .menu-list .left-align {
 +
  padding-left: 10px;
 +
  border-left: solid 2px #FAFAFC;
 +
}
 +
#bubbles #popup-main.active {
 +
  transform: translate(37vw, -23vh);
 +
}
 +
#bubbles #popup-next.active {
 +
  transform: translate(-10vw, -100vh);
 
}
 
}
  
−
#fixedOverlay[bg=dark],
+
#problem-page {
−
#bubbles {
+
  background-color: #FAFAFC;
−
pointer-events: none;
+
  width: 100%;
 +
  height: 100vh;
 
}
 
}
  
 
@media only screen and (min-width: 768px) and (max-width: 1023px) {
 
@media only screen and (min-width: 768px) and (max-width: 1023px) {
−
#bubbles #popup-main {
+
  #bubbles #popup-main {
−
background-color: #121212;
+
    background-color: #121212;
−
height: 60vh;
+
    height: 60vh;
−
width: 60vh;
+
    width: 60vh;
−
right: -100vw;
+
  }
−
top: -100vh;
+
  #bubbles #popup-main .menu-list {
−
}
+
    font-size: 18px;
−
#bubbles #popup-main .menu-list {
+
  }
−
font-size: 18px;
+
  #bubbles #popup-main .menu-list h1 {
−
}
+
    font-size: 1.2em;
−
#bubbles #popup-main .menu-list h1 {
+
  }
−
font-size: 1.2em;
+
  #bubbles #popup-main .menu-list li::before {
−
}
+
    line-height: 22px;
−
#bubbles #popup-main .menu-list li::before {
+
  }
−
line-height: 22px;
+
  #bubbles #popup-next {
−
}
+
    height: 100vw;
−
#bubbles #popup-next {
+
    width: 100%;
−
height: 100vw;
+
  }
−
width: 100vw;
+
  #bubbles #popup-next .menu-list {
−
}
+
    font-size: 1.5em;
−
#bubbles #popup-next .choices .menu-list {
+
  }
−
font-size: 1.5em;
+
  #bubbles #popup-next .menu-list li {
−
}
+
    padding: 5px;
−
#bubbles #popup-next .choices .menu-list li {
+
  }
−
padding: 5px;
+
  #bubbles #popup-next .wl li {
−
}
+
    padding-left: 0;
−
#bubbles #popup-next .project {
+
    padding-right: 0;
−
columns: 2;
+
  }
−
-webkit-columns: 2;
+
  #bubbles #popup-main.active {
−
-moz-columns: 2;
+
    transform: translate(37vw, -23vh);
−
column-gap: 0;
+
  }
−
}
+
  #bubbles #popup-next.active {
−
#bubbles #popup-next .project li {
+
    transform: translate(-10vw, -70vh);
−
padding-left: 0;
+
  }
−
padding-right: 0;
+
 
−
margin-bottom: 3px
+
  #fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 {
−
}
+
    font-size: 0.65em;
−
#bubbles #bub_first .active {
+
  }
−
right: -7vw;
+
  #fixedOverlay nav #header h1 {
−
top: -4vh;
+
    font-size: 18px;
−
}
+
  }
−
#bubbles #bub_second .active {
+
  #fixedOverlay nav #header .active #top-hamb {
−
left: 40vw;
+
    transform: scale(0.7) translateY(17px) rotate(45deg);
−
bottom: 40vh;
+
  }
−
}
+
  #fixedOverlay nav #header .active #bottom-hamb {
−
#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 {
+
    transform: scale(0.7) translateY(-11px) rotate(-45deg);
−
font-size: 0.65em;
+
  }
−
}
+
  #fixedOverlay nav #header .menu-wrapper .menu-hamb {
−
#fixedOverlay nav #header h1 {
+
    height: 3px;
−
font-size: 18px;
+
  }
−
}
+
  #fixedOverlay nav #header .menu-wrapper .menu-short {
−
#fixedOverlay nav #header .active #top-hamb {
+
    margin-bottom: 5px;
−
transform: scale(0.7) translateY(15px) rotate(45deg);
+
    margin-top: 5px;
−
}
+
  }
−
#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: 767px) {
 +
  #bubbles .bubble .choices {
 +
    padding-left: 10px;
 +
    padding-right: 10px;
 +
  }
 +
  #bubbles .bubble .choices ol li {
 +
    padding: 7px;
 +
  }
 +
  #bubbles #popup-main {
 +
    background-color: #121212;
 +
    height: 100vw;
 +
    width: 100vw;
 +
    right: -100vw;
 +
    top: -100vh;
 +
  }
 +
  #bubbles #popup-main .menu-list {
 +
    font-size: 18px;
 +
  }
 +
  #bubbles #popup-main .menu-list h1 {
 +
    font-size: 1.2em;
 +
  }
 +
  #bubbles #popup-next {
 +
    height: 100vw;
 +
    width: 100%;
 +
  }
 +
  #bubbles #popup-next .choices .menu-list {
 +
    font-size: 1.2em;
 +
  }
 +
  #bubbles #popup-next .choices .menu-list li {
 +
    margin-bottom: 3px;
 +
  }
 +
  #bubbles #popup-next .wl {
 +
    column-gap: 0;
 +
  }
 +
  #bubbles #popup-next .wl li {
 +
    padding-left: 0;
 +
    padding-right: 0;
 +
  }
 +
  #bubbles #popup-main.active {
 +
    transform: translate(20vw, -24vh);
 +
  }
 +
  #bubbles #popup-next.active {
 +
    transform: translate(0vw, -70vh);
 +
  }
  
−
 
+
  #fixedOverlay nav {
−
/*  Smartphones in landscape mode */
+
    height: fit-content;
−
 
+
  }
−
 
+
  #fixedOverlay nav[onText=true] {
−
/*  Smartphones in portrait mode  */
+
    background-color: #FAFAFC;
−
 
+
    box-shadow: 0px 1px 7px #555;
−
@media only screen and (max-width: 767px) {
+
  }
−
#fixedOverlay nav .header-part {
+
  #fixedOverlay nav[onText=true] #header .hamb-wrapper {
−
margin: 5px 30px
+
    background-color: transparent;
−
}
+
    box-shadow: none;
−
#bubbles #popup-main {
+
    height: unset;
−
background-color: #121212;
+
    width: unset;
−
height: 60vh;
+
  }
−
width: 60vh;
+
  #fixedOverlay nav[onText=true] #header .hamb-wrapper .menu-wrapper .menu-hamb {
−
right: -100vw;
+
    background-color: #6281ef;
−
top: -100vh;
+
  }
−
}
+
  #fixedOverlay nav .header-part {
−
#bubbles #popup-main .menu-list {
+
    margin: 0 10px;
−
font-size: 18px;
+
  }
−
}
+
  #fixedOverlay nav #header .active #top-hamb {
−
#bubbles #popup-main .menu-list h1 {
+
    transform: scale(0.7) translateY(17px) rotate(45deg);
−
font-size: 1.3em;
+
  }
−
}
+
  #fixedOverlay nav #header .active #bottom-hamb {
−
#bubbles #popup-next {
+
    transform: scale(0.7) translateY(-11px) rotate(-45deg);
−
height: 100vw;
+
  }
−
width: 100vw;
+
  #fixedOverlay nav #header .menu-wrapper .menu-hamb {
−
}
+
    height: 3px;
−
#bubbles #popup-next .choices .menu-list {
+
  }
−
font-size: 1.45em;
+
  #fixedOverlay nav #header .menu-wrapper .menu-hamb.white-menu {
−
}
+
    background-color: #6281EF;
−
#bubbles #popup-next .choices .menu-list li {
+
  }
−
margin-bottom: 3px
+
  #fixedOverlay nav #header .menu-wrapper .menu-short {
−
}
+
    margin-bottom: 5px;
−
#bubbles #popup-next .choices li {
+
    margin-top: 5px;
−
padding: 5px;
+
  }
−
}
+
  #fixedOverlay #sidebar {
−
#bubbles #popup-next .project {
+
    width: 10vw;
−
column-gap: 0;
+
  }
−
}
+
  #fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 {
−
#bubbles #popup-next .project li {
+
    font-size: 0.65em;
−
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;
+
−
}
+
−
#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) {
 
@media only screen and (max-width: 420px) and (max-height: 600px) {
−
      #bubbles #popup-main .menu-list li::before{
+
  #bubbles #popup-main .menu-list libefore {
−
              font-size: 1.8em;
+
    font-size: 1.8em;
−
line-height: 0.5em;
+
    line-height: 0.5em;
−
      }
+
  }
−
#bubbles #popup-next .choices .menu-list {
+
  #bubbles #popup-main .menu-list h1 {
−
font-size: 1.2em;
+
    font-size: 1em;
−
}
+
  }
−
#bubbles #popup-main .menu-list h1 {
+
  #bubbles #popup-next .choices .menu-list {
−
font-size: 1em;
+
    font-size: 0.9em;
−
}
+
  }
 
}
 
}

Latest revision as of 23:18, 18 December 2020

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: 12;
 top: 18px;
 transition: 1s;
 font-family: "montserrat-light" !important;

}

  1. fixedOverlay[bg=none], #fixedOverlay[bg=dark] {
 pointer-events: none;

}

  1. fixedOverlay[bg=none] #bubbles, #fixedOverlay[bg=dark] #bubbles {
 pointer-events: none;

}

  1. fixedOverlay .scroll-wrapper {
 display: flex;
 position: fixed;
 width: 100%;
 height: 100vh;
 justify-content: space-between;
 opacity: 1;
 transition: 0.5s;

}

  1. fixedOverlay .scroll-wrapper .scroll-area {
 height: 100%;
 width: 5vw;
 display: flex;
 align-items: center;
 justify-content: center;

} @media screen and (max-width: 767px) { 

 #fixedOverlay .scroll-wrapper .scroll-area {
   width: 10vw;
 }

}

  1. fixedOverlay .scroll-wrapper .scroll-area#sidebar-wrapper #scrollbar-container {
 width: 30%;
 height: 30%;
 background: rgba(98, 129, 239, 0.3);
 border-radius: 10px;
 max-width: 7px;

}

  1. fixedOverlay .scroll-wrapper .scroll-area#sidebar-wrapper #scrollbar-container #scrollbar {
 width: 100%;
 background: #6281EF;
 opacity: 100%;
 height: 0%;
 border-radius: 20px;
 transition: background-color 0.5s;

}

  1. fixedOverlay .scroll-wrapper .scroll-area #backtotop-wrapper {
 width: 3vw;
 pointer-events: all;
 cursor: pointer;
 opacity: 0;
 transition: 0.5s ease-out;
 max-width: 20px;

} @media screen and (max-width: 767px) { 

 #fixedOverlay .scroll-wrapper .scroll-area #backtotop-wrapper {
   width: 4vw;
 }

}

  1. fixedOverlay .scroll-wrapper .scroll-area #backtotop-wrapper.scrolled {
 opacity: 1;

}

  1. fixedOverlay .scroll-wrapper .scroll-area #backtotop-wrapper svg {
 width: 100%;

}

  1. fixedOverlay .scroll-wrapper .scroll-area #backtotop-wrapper svg path {
 transition: 0.5s;

}

  1. fixedOverlay .scroll-wrapper[hiddenScroll=true] {
 opacity: 0;

}

  1. fixedOverlay .scroll-wrapper[onBlue=true] .scroll-area#sidebar-wrapper #scrollbar-container {
 background: rgba(255, 255, 255, 0.2);

}

  1. fixedOverlay .scroll-wrapper[onBlue=true] .scroll-area#sidebar-wrapper #scrollbar-container #scrollbar {
 background: #FAFAFC;

}

  1. fixedOverlay .scroll-wrapper[onBlue=true] .scroll-area svg path {
 stroke: #FAFAFC !important;

}

  1. fixedOverlay nav {
 box-sizing: border-box;
 z-index: 2;
 pointer-events: none;
 display: block;
 transition: 0.5s;
 height: 87px;

}

  1. fixedOverlay nav #header {
 display: flex;
 justify-content: space-between;
 height: fit-content;

}

  1. fixedOverlay nav #header object {
 width: 145px;
 pointer-events: none;

}

  1. fixedOverlay nav #header .active .menu-short {
 transform: translateX(30%) scaleX(0);

}

  1. fixedOverlay nav #header .active #top-hamb {
 transform: scale(0.7) translateY(17px) rotate(45deg);

}

  1. fixedOverlay nav #header .active #bottom-hamb {
 transform: scale(0.7) translateY(-11px) rotate(-45deg);

}

  1. fixedOverlay nav #header .hamb-wrapper {
 height: 50px;
 background-color: #6281ef;
 border-radius: 100px;
 width: 50px;
 display: flex;
 align-items: center;
 justify-content: center;
 margin: 20px 20px 20px 0;
 box-shadow: 0px 0px 6px #999;

}

  1. fixedOverlay nav #header .hamb-wrapper .menu-wrapper {
 cursor: pointer;
 z-index: 11;
 box-sizing: border-box;
 width: 30px;
 pointer-events: all;

}

  1. fixedOverlay nav #header .hamb-wrapper .menu-wrapper .menu-hamb {
 height: 4px;
 border-radius: 5px;
 transition: 0.5s;
 background-color: #FAFAFC;

}

  1. fixedOverlay nav #header .hamb-wrapper .menu-wrapper .menu-short {
 width: 70%;
 margin-bottom: 6px;
 margin-top: 6px;
 transition: transform 0.1s;
 transition: background-color 0.5s;

}

  1. fixedOverlay nav #header .hamb-wrapper.white-menu {
 background-color: #FAFAFC;

}

  1. fixedOverlay nav #header .hamb-wrapper.white-menu .menu-hamb {
 background-color: #6281EF;

}

  1. fixedOverlay nav #header .hamb-wrapper.invisible {
 box-shadow: none;
 background-color: transparent;

}

  1. fixedOverlay nav #header #logo {
 transition: 0.5s;
 margin: 20px 0 20px 20px;

}

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

}

  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 {
 width: 100%;
 height: 100%;
 display: flex;
 align-items: center;
 justify-content: center;

}

  1. bubbles .bubble > div {
 display: flex;
 align-items: center;
 justify-content: center;

}

  1. bubbles .bubble > div .choices {
 text-transform: uppercase;
 padding-left: 20px;
 padding-right: 20px;
 pointer-events: all;

}

  1. bubbles .bubble > div .choices .menu-list {
 width: fit-content;
 list-style: none;
 font-size: 2em;

}

  1. bubbles .bubble > div .choices .menu-list h1 {
 margin: 0;
 font-size: 1.2em;
 font-family: "montserrat-bold";

}

  1. bubbles .bubble > div .choices .menu-list .main-choice h1 {
 box-shadow: inset 0 0 0 -1px #6281EF;
 transition: 0.3s;
 padding: 0 5px;

}

  1. bubbles .bubble > div .choices .menu-list .main-choice h1:hover {
 box-shadow: inset 0 -0.5em 0 -1px #6281EF;

}

  1. bubbles .bubble > div .choices .menu-list .active h1 {
 box-shadow: inset 0 -0.5em 0 -1px #6281EF;

}

  1. bubbles .bubble > div .choices ol li {
 counter-increment: count-me;
 cursor: pointer;
 padding: 10px;
 width: fit-content;

}

  1. bubbles .bubble > div .choices ol li::before {
 content: counter(count-me) ". ";
 max-width: 0px;
 max-height: 0px;
 left: -1.3em;
 position: relative;
 display: flex;

}

  1. bubbles .bubble > div .choices ul {
 padding-inline-start: 0;

}

  1. bubbles #popup-main {
 background-color: #121212;
 height: 40vw;
 width: 40vw;
 border-radius: 100%;
 transition: 1s;
 z-index: 2;
 transform: translate(100vw, -100vh);
 -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 h1 {
 color: #FAFAFC !important;

}

  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%;
 transition: 1s;
 color: #FAFAFC;
 overflow: hidden;
 z-index: 3;
 transform: translate(-100vw, 100vh);

}

  1. bubbles #popup-next .choices .menu-list {
 font-size: 2em;
 list-style: none;
 margin: 0 auto;
 padding-right: 10px;
 padding-left: 10px;
 text-align: center;
 text-align: -moz-center;
 text-align: -webkit-center;

}

  1. bubbles #popup-next.project .choices .menu-list li:first-child {
 padding-top: 25px;
 /* TODO: maybe remove?? Kamile pls comment on this */

}

  1. bubbles #popup-next .choices .menu-list li {
 width: fit-content;
 padding-bottom: 25px;
 font-family: "montserrat-bold";
 line-height: 1;

}

  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 #popup-next.wl .menu-list {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 grid-template-rows: repeat(3, 1fr);
 grid-column-gap: 0px;
 grid-row-gap: 0px;
 grid-auto-flow: column;
 text-align: left;

}

  1. bubbles #popup-next.wl .menu-list li {
 width: initial;
 font-family: "montserrat-bold";

}

  1. bubbles #popup-next.wl .menu-list li a {
 padding: 0 0 5px 0;

}

  1. bubbles #popup-next.wl .menu-list .right-align {
 text-align: right;
 padding-right: 10px;

}

  1. bubbles #popup-next.wl .menu-list .left-align {
 padding-left: 10px;
 border-left: solid 2px #FAFAFC;

}

  1. bubbles #popup-main.active {
 transform: translate(37vw, -23vh);

}

  1. bubbles #popup-next.active {
 transform: translate(-10vw, -100vh);

}

  1. problem-page {
 background-color: #FAFAFC;
 width: 100%;
 height: 100vh;

}

@media only screen and (min-width: 768px) and (max-width: 1023px) { 

 #bubbles #popup-main {
   background-color: #121212;
   height: 60vh;
   width: 60vh;
 }
 #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: 100%;
 }
 #bubbles #popup-next .menu-list {
   font-size: 1.5em;
 }
 #bubbles #popup-next .menu-list li {
   padding: 5px;
 }
 #bubbles #popup-next .wl li {
   padding-left: 0;
   padding-right: 0;
 }
 #bubbles #popup-main.active {
   transform: translate(37vw, -23vh);
 }
 #bubbles #popup-next.active {
   transform: translate(-10vw, -70vh);
 }

 #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(17px) rotate(45deg);
 }
 #fixedOverlay nav #header .active #bottom-hamb {
   transform: scale(0.7) translateY(-11px) 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: 767px) { 

 #bubbles .bubble .choices {
   padding-left: 10px;
   padding-right: 10px;
 }
 #bubbles .bubble .choices ol li {
   padding: 7px;
 }
 #bubbles #popup-main {
   background-color: #121212;
   height: 100vw;
   width: 100vw;
   right: -100vw;
   top: -100vh;
 }
 #bubbles #popup-main .menu-list {
   font-size: 18px;
 }
 #bubbles #popup-main .menu-list h1 {
   font-size: 1.2em;
 }
 #bubbles #popup-next {
   height: 100vw;
   width: 100%;
 }
 #bubbles #popup-next .choices .menu-list {
   font-size: 1.2em;
 }
 #bubbles #popup-next .choices .menu-list li {
   margin-bottom: 3px;
 }
 #bubbles #popup-next .wl {
   column-gap: 0;
 }
 #bubbles #popup-next .wl li {
   padding-left: 0;
   padding-right: 0;
 }
 #bubbles #popup-main.active {
   transform: translate(20vw, -24vh);
 }
 #bubbles #popup-next.active {
   transform: translate(0vw, -70vh);
 }

 #fixedOverlay nav {
   height: fit-content;
 }
 #fixedOverlay nav[onText=true] {
   background-color: #FAFAFC;
   box-shadow: 0px 1px 7px #555;
 }
 #fixedOverlay nav[onText=true] #header .hamb-wrapper {
   background-color: transparent;
   box-shadow: none;
   height: unset;
   width: unset;
 }
 #fixedOverlay nav[onText=true] #header .hamb-wrapper .menu-wrapper .menu-hamb {
   background-color: #6281ef;
 }
 #fixedOverlay nav .header-part {
   margin: 0 10px;
 }
 #fixedOverlay nav #header .active #top-hamb {
   transform: scale(0.7) translateY(17px) rotate(45deg);
 }
 #fixedOverlay nav #header .active #bottom-hamb {
   transform: scale(0.7) translateY(-11px) rotate(-45deg);
 }
 #fixedOverlay nav #header .menu-wrapper .menu-hamb {
   height: 3px;
 }
 #fixedOverlay nav #header .menu-wrapper .menu-hamb.white-menu {
   background-color: #6281EF;
 }
 #fixedOverlay nav #header .menu-wrapper .menu-short {
   margin-bottom: 5px;
   margin-top: 5px;
 }
 #fixedOverlay #sidebar {
   width: 10vw;
 }
 #fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 {
   font-size: 0.65em;
 }

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

 #bubbles #popup-main .menu-list libefore {
   font-size: 1.8em;
   line-height: 0.5em;
 }
 #bubbles #popup-main .menu-list h1 {
   font-size: 1em;
 }
 #bubbles #popup-next .choices .menu-list {
   font-size: 0.9em;
 }

}