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

Revision as of 17:19, 3 October 2020 (view source) Kvainiute (Talk | contribs) ← Older edit		Revision as of 12:45, 4 October 2020 (view source) Kvainiute (Talk | contribs) Newer edit →
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: 3;
−	transition: 1s;	+	transition: 1s;
		+	font-family: "montserrat-light" !important;
		+	}
		+	#fixedOverlay[bg=none], #fixedOverlay[bg=dark] {
		+	pointer-events: none;
		+	}
		+	#fixedOverlay[bg=none] #bubbles, #fixedOverlay[bg=dark] #bubbles {
		+	pointer-events: none;
	}		}
−
	#fixedOverlay #sidebar {		#fixedOverlay #sidebar {
−	width: 5vw;	+	width: 5vw;
−	height: 100%;	+	height: 100%;
−	position: fixed;	+	position: fixed;
−	color: #FAFAFC;	+	color: #FAFAFC;
−	display: flex;	+	display: flex;
−	justify-content: center;	+	justify-content: center;
	}		}
−
	#fixedOverlay #sidebar #sidebar-wrapper {		#fixedOverlay #sidebar #sidebar-wrapper {
−	width: 40%;	+	width: 40%;
−	height: 100%;	+	height: 100%;
	}		}
−
	#fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container {		#fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container {
−	width: 30%;	+	width: 30%;
−	height: 30%;	+	height: 30%;
−	background: rgba(98, 129, 239, 0.3);	+	background: rgba(98, 129, 239, 0.3);
−	position: absolute;	+	position: absolute;
−	left: 50%;	+	left: 50%;
−	top: 50%;	+	top: 50%;
−	transform: translate(-50%, -50%);	+	transform: translate(-50%, -50%);
−	border-radius: 10px;	+	border-radius: 10px;
−	max-width: 7px;	+	max-width: 7px;
−	opacity: 1;	+	opacity: 1;
−	transition: 0.5s;	+	transition: 0.5s;
	}		}
−	#fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container[hiddenScroll="true"]{	+	#fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container[hiddenScroll=true] {
−	opacity:0	+	opacity: 0;
	}		}
−
	#fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container #scrollbar {		#fixedOverlay #sidebar #sidebar-wrapper #scrollbar-container #scrollbar {
−	width: 100%;	+	width: 100%;
−	background: #6281EF;	+	background: #6281EF;
−	opacity: 100%;	+	opacity: 100%;
−	height: 0%;	+	height: 0%;
−	border-radius: 20px;	+	border-radius: 20px;
	}		}
−
	#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll {		#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll {
−	position: absolute;	+	position: absolute;
−	left: 50%;	+	left: 50%;
−	transform: translateX(-50%);	+	transform: translateX(-50%);
−	bottom: 10vh;	+	bottom: 10vh;
	}		}
−
	#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 {		#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 {
−	padding-top: 10px;	+	padding-top: 10px;
−	transform: rotate(180deg);	+	transform: rotate(180deg);
−	writing-mode: vertical-lr;	+	writing-mode: vertical-lr;
−	text-transform: uppercase;	+	text-transform: uppercase;
−	margin: -2px;	+	margin: -2px;
	}		}
−
	#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll img {		#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll img {
−	width: 100%;	+	width: 100%;
−	text-align: center;	+	text-align: center;
	}		}
−
	#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;
−	transition: 0.5s;	+	transition: 0.5s;
−	height: 70px;	+	height: 70px;
	}		}
−	#fixedOverlay nav[onText=true]{	+	#fixedOverlay nav[onText=true] {
−	background-color: #FAFAFC;	+	background-color: #FAFAFC;
−	box-sizing: border-box;	+	box-sizing: border-box;
−	border-bottom: solid 1px rgba(0,0,0,0.1);	+	border-bottom: solid 1px rgba(0, 0, 0, 0.1);
−	padding-bottom: 10px;	+	padding-bottom: 10px;
−	box-shadow: 0px 1px 5px #999;	+	box-shadow: 0px 1px 5px #999;
		+	}
		+	#fixedOverlay nav .header-part {
		+	margin: 20px;
	}		}
−
	#fixedOverlay nav #header {		#fixedOverlay nav #header {
−	display: flex;	+	display: flex;
−	justify-content: space-between;	+	justify-content: space-between;
−	height: 100%;	+	height: 100%;
−	align-items: center;	+	align-items: center;
	}		}
−
−	#fixedOverlay nav .header-part {
−	margin: 20px
−	}
−
	#fixedOverlay nav #header img {		#fixedOverlay nav #header img {
−	width: 145px	+	width: 145px;
	}		}
−
	#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(20px) 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(-9px) rotate(-45deg);
	}		}
−
	#fixedOverlay nav #header .menu-wrapper {		#fixedOverlay nav #header .menu-wrapper {
−	cursor: pointer;	+	cursor: pointer;
−	z-index: 11;	+	z-index: 11;
−	box-sizing: border-box;	+	box-sizing: border-box;
−	min-width: 30px;	+	min-width: 30px;
−	pointer-events: all;	+	pointer-events: all;
	}		}
−	#fixedOverlay nav #header #logo a{
−	pointer-events: all;
−	}
−	#fixedOverlay nav #header #logo a:hover,
−	#fixedOverlay nav #header #logo a:focus{
−	text-decoration: none;
−	}
−
	#fixedOverlay nav #header .menu-wrapper .menu-hamb {		#fixedOverlay nav #header .menu-wrapper .menu-hamb {
−	height: 4px;	+	height: 4px;
−	border-radius: 5px;	+	border-radius: 5px;
−	transition: 0.5s;	+	transition: 0.5s;
−	background-color: #6281EF;	+	background-color: #6281EF;
	}		}
−
	#fixedOverlay nav #header .menu-wrapper .menu-short {		#fixedOverlay nav #header .menu-wrapper .menu-short {
−	width: 70%;	+	width: 70%;
−	margin-bottom: 6px;	+	margin-bottom: 6px;
−	margin-top: 6px;	+	margin-top: 6px;
−	transition: 0.1s;	+	transition: 0.1s;
		+	}
		+	#fixedOverlay nav #header #logo a {
		+	pointer-events: all;
	}		}
−	#fixedOverlay #bubbles-to-close{	+	#fixedOverlay #bubbles-to-close {
−	height: 100%;	+	height: 100%;
−	width: 100%;	+	width: 100%;
−	position: absolute;	+	position: absolute;
−	display:none;	+	display: none;
	}		}
−	#fixedOverlay #bubbles-to-close[open=true]{	+	#fixedOverlay #bubbles-to-close[open=true] {
−	display: initial;	+	display: initial;
−	pointer-events: all	+	pointer-events: all;
	}		}
	#bubbles {		#bubbles {
−	position: fixed;	+	position: fixed;
−	height: 100%;	+	height: 100%;
−	width: 100%;	+	width: 100%;
	}		}
−
	#bubbles .bubble .choices {		#bubbles .bubble .choices {
−	position: absolute;	+	position: absolute;
−	left: 50%;	+	left: 50%;
−	top: 50%;	+	top: 50%;
−	transform: translate(-50%, -50%);	+	transform: translate(-50%, -50%);
−	text-transform: uppercase;	+	text-transform: uppercase;
−	padding-left: 20px;	+	padding-left: 20px;
−	padding-right: 20px;	+	padding-right: 20px;
−	pointer-events: all;	+	pointer-events: all;
	}		}
−
	#bubbles .bubble .choices .menu-list {		#bubbles .bubble .choices .menu-list {
−	width: fit-content;	+	width: fit-content;
−	list-style: none;	+	list-style: none;
−	font-size: 2em;	+	font-size: 2em;
		+	}
		+	#bubbles .bubble .choices .menu-list h1 {
		+	margin: 0;
		+	font-size: 1.2em;
		+	font-family: "montserrat-bold";
	}		}
−
	#bubbles .bubble .choices .menu-list .main-choice h1 {		#bubbles .bubble .choices .menu-list .main-choice h1 {
−	box-shadow: inset 0 0 0 -1px #6281EF;	+	box-shadow: inset 0 0 0 -1px #6281EF;
−	transition: 0.3s;	+	transition: 0.3s;
−	padding: 0 5px	+	padding: 0 5px;
	}		}
−
	#bubbles .bubble .choices .menu-list .main-choice h1:hover {		#bubbles .bubble .choices .menu-list .main-choice h1:hover {
−	box-shadow: inset 0 -0.5em 0 -1px #6281EF;	+	box-shadow: inset 0 -0.5em 0 -1px #6281EF;
	}		}
−
	#bubbles .bubble .choices .menu-list .active h1 {		#bubbles .bubble .choices .menu-list .active h1 {
−	box-shadow: inset 0 -0.5em 0 -1px #6281EF;	+	box-shadow: inset 0 -0.5em 0 -1px #6281EF;
	}		}
−
−	#bubbles .bubble .choices .menu-list h1 {
−	margin: 0;
−	font-size: 1.2em;
−	font-family: 'lato-heavy'
−	}
−
	#bubbles .bubble .choices ol li {		#bubbles .bubble .choices ol li {
−	counter-increment: count-me;	+	counter-increment: count-me;
−	cursor: pointer;	+	cursor: pointer;
−	padding: 10px;	+	padding: 10px;
−	width: fit-content;	+	width: fit-content;
	}		}
−
	#bubbles .bubble .choices ol li::before {		#bubbles .bubble .choices ol li::before {
−	content: counter(count-me) ". ";	+	content: counter(count-me) ". ";
−	max-width: 0px;	+	max-width: 0px;
−	max-height: 0px;	+	max-height: 0px;
−	left: -1.3em;	+	left: -1.3em;
−	position: relative;	+	position: relative;
−	display: flex;	+	display: flex;
	}		}
−
	#bubbles .bubble .choices ul {		#bubbles .bubble .choices ul {
−	padding-inline-start: 0;	+	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;	+	position: absolute;
−	right: -80vw;	+	right: -80vw;
−	top: -80vh;	+	top: -80vh;
−	transition: 1s;	+	transition: 1s;
−	color: #FAFAFC;	+	color: #FAFAFC;
−	z-index: 2;	+	z-index: 2;
−	-webkit-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);	+	-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);	+	box-shadow: 0px 0px 27px 0px rgba(0, 0, 0, 0.57);
	}		}
−
	#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;	+	position: absolute;
−	left: -90vw;	+	left: -90vw;
−	bottom: -200vh;	+	bottom: -200vh;
−	transition: 1s;	+	transition: 1s;
−	color: #FAFAFC;	+	color: #FAFAFC;
−	display: table;	+	display: table;
−	overflow: hidden;	+	overflow: hidden;
−	z-index: 3;	+	z-index: 3;
−	transform: translate(-50%, 50%);	+	transform: translate(-50%, 50%);
	}		}
−
	#bubbles #popup-next .project {		#bubbles #popup-next .project {
−	columns: 2;	+	columns: 2;
−	-webkit-columns: 2;	+	-webkit-columns: 2;
−	-moz-columns: 2;	+	-moz-columns: 2;
−	column-gap: 0;	+	column-gap: 0;
	}		}
−
	#bubbles #popup-next .project li {		#bubbles #popup-next .project li {
−	padding-left: 0;	+	padding-left: 0;
−	padding-right: 0;	+	padding-right: 0;
−	font-family: 'lato-heavy'	+	font-family: "montserrat-bold";
	}		}
−
	#bubbles #popup-next .choices {		#bubbles #popup-next .choices {
−	vertical-align: middle;	+	vertical-align: middle;
−	display: table-cell;	+	display: table-cell;
	}		}
−
	#bubbles #popup-next .choices .menu-list {		#bubbles #popup-next .choices .menu-list {
−	font-size: 2em;	+	font-size: 2em;
−	list-style: none;	+	list-style: none;
−	margin: 0 auto;	+	margin: 0 auto;
−	padding-right: 10px;	+	padding-right: 10px;
−	padding-left: 10px;	+	padding-left: 10px;
−	text-align: -webkit-center;	+	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;	+	margin-bottom: 15px;
−	font-family: 'lato-heavy'	+	font-family: "montserrat-bold";
	}		}
−
	#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 #bub_first .active {		#bubbles #bub_first .active {
−	right: -7vw;	+	right: -7vw;
−	top: -3vh;	+	top: -3vh;
	}		}
−
	#bubbles #bub_second .active {		#bubbles #bub_second .active {
−	left: 50vw;	+	left: 50vw;
−	bottom: 50vh;	+	bottom: 50vh;
	}		}
−	#fixedOverlay[bg=none],	+	#intro-page {
−	#fixedOverlay[bg=none] #bubbles {	+	background-color: #121212;
−	pointer-events: none;	+	width: 100%;
		+	height: 100vh;
		+	}
		+	#intro-page #intro-header {
		+	padding-top: 10vh;
		+	width: 120%;
		+	margin: 0 auto;
		+	}
		+	#intro-page #intro-header img {
		+	width: 100%;
		+	position: relative;
		+	left: 50%;
		+	margin-left: -70vw;
		+	}
		+	#intro-page #intro {
		+	z-index: 1;
		+	background-color: transparent;
		+	height: 70vh;
		+	width: 70vh;
		+	position: absolute;
		+	left: 50%;
		+	top: 50%;
		+	transform: translate(-50%, -50%);
		+	border-radius: 100%;
		+	}
		+	#intro-page #intro #title-wrapper {
		+	position: absolute;
		+	left: 50%;
		+	top: 50%;
		+	transform: translate(-50%, -50%);
		+	}
		+	#intro-page #intro h1 {
		+	text-transform: uppercase;
		+	color: #FAFAFC;
		+	font-size: 70px;
		+	font-family: "montserrat-bold";
		+	text-align: center;
		+	margin: 0;
	}		}
−	#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;	+	right: -100vw;
−	top: -100vh;	+	top: -100vh;
−	}	+	}
−	#bubbles #popup-main .menu-list {	+	#bubbles #popup-main .menu-list {
−	font-size: 18px;	+	font-size: 18px;
−	}	+	}
−	#bubbles #popup-main .menu-list h1 {	+	#bubbles #popup-main .menu-list h1 {
−	font-size: 1.2em;	+	font-size: 1.2em;
−	}	+	}
−	#bubbles #popup-main .menu-list li::before {	+	#bubbles #popup-main .menu-list li::before {
−	line-height: 22px;	+	line-height: 22px;
−	}	+	}
−	#bubbles #popup-next {	+	#bubbles #popup-next {
−	height: 100vw;	+	height: 100vw;
−	width: 100vw;	+	width: 100vw;
−	}	+	}
−	#bubbles #popup-next .choices .menu-list {	+	#bubbles #popup-next .menu-list {
−	font-size: 1.5em;	+	font-size: 1.5em;
−	}	+	}
−	#bubbles #popup-next .choices .menu-list li {	+	#bubbles #popup-next .menu-list li {
−	padding: 5px;	+	padding: 5px;
−	}	+	}
−	#bubbles #popup-next .project {	+	#bubbles #popup-next .project {
−	columns: 2;	+	columns: 2;
−	-webkit-columns: 2;	+	-webkit-columns: 2;
−	-moz-columns: 2;	+	-moz-columns: 2;
−	column-gap: 0;	+	column-gap: 0;
−	}	+	}
−	#bubbles #popup-next .project li {	+	#bubbles #popup-next .project li {
−	padding-left: 0;	+	padding-left: 0;
−	padding-right: 0;	+	padding-right: 0;
−	margin-bottom: 3px	+	margin-bottom: 3px;
−	}	+	}
−	#bubbles #bub_first .active {	+	#bubbles #bub_first .active {
−	right: -7vw;	+	right: -7vw;
−	top: -4vh;	+	top: -4vh;
−	}	+	}
−	#bubbles #bub_second .active {	+	#bubbles #bub_second .active {
−	left: 40vw;	+	left: 40vw;
−	bottom: 40vh;	+	bottom: 40vh;
−	}	+	}
−	#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 {	+
−	font-size: 0.65em;	+	#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 {
−	}	+	font-size: 0.65em;
−	#fixedOverlay nav #header h1 {	+	}
−	font-size: 18px;	+	#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 #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 .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-hamb {
−	}	+	height: 3px;
−	#fixedOverlay nav #header .menu-wrapper .menu-short {	+	}
−	margin-bottom: 5px;	+	#fixedOverlay nav #header .menu-wrapper .menu-short {
−	margin-top: 5px;	+	margin-bottom: 5px;
−	}	+	margin-top: 5px;
		+	}
	}		}
		+	@media only screen and (max-width: 767px) {
		+	#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;
		+	}
−		+	#fixedOverlay nav .header-part {
−	/*  Smartphones in landscape mode */	+	margin: 5px 30px;
−		+	}
−		+	#fixedOverlay nav #header h1 {
−	/*  Smartphones in portrait mode  */	+	font-size: 18px;
−		+	}
−	@media only screen and (max-width: 767px) {	+	#fixedOverlay nav #header .active #top-hamb {
−	#fixedOverlay nav .header-part {	+	transform: scale(0.7) translateY(15px) rotate(45deg);
−	margin: 5px 30px	+	}
−	}	+	#fixedOverlay nav #header .active #bottom-hamb {
−	#bubbles #popup-main {	+	transform: scale(0.7) translateY(-8px) rotate(-45deg);
−	background-color: #121212;	+	}
−	height: 60vh;	+	#fixedOverlay nav #header .menu-wrapper .menu-hamb {
−	width: 60vh;	+	height: 3px;
−	right: -100vw;	+	}
−	top: -100vh;	+	#fixedOverlay nav #header .menu-wrapper .menu-short {
−	}	+	margin-bottom: 5px;
−	#bubbles #popup-main .menu-list {	+	margin-top: 5px;
−	font-size: 18px;	+	}
−	}	+	#fixedOverlay #sidebar {
−	#bubbles #popup-main .menu-list h1 {	+	width: 10vw;
−	font-size: 1.3em;	+	}
−	}	+	#fixedOverlay #sidebar #sidebar-wrapper #indicateScroll h3 {
−	#bubbles #popup-next {	+	font-size: 0.65em;
−	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;	+
−	}	+
−	#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: 1.2em;
−	}	+	}
	}		}

---

Revision as of 12:45, 4 October 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: 3;
 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 #sidebar {

 width: 5vw;
 height: 100%;
 position: fixed;
 color: #FAFAFC;
 display: flex;
 justify-content: center;

}

1. fixedOverlay #sidebar #sidebar-wrapper {

 width: 40%;
 height: 100%;

}

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;
 transition: 0.5s;
 height: 70px;

}

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-part {

 margin: 20px;

}

1. fixedOverlay nav #header {

 display: flex;
 justify-content: space-between;
 height: 100%;
 align-items: center;

}

1. fixedOverlay nav #header img {

 width: 145px;

}

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 .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 nav #header #logo a {

 pointer-events: all;

}

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 h1 {

 margin: 0;
 font-size: 1.2em;
 font-family: "montserrat-bold";

}

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 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: "montserrat-bold";

}

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: "montserrat-bold";

}

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. intro-page {

 background-color: #121212;
 width: 100%;
 height: 100vh;

}

1. intro-page #intro-header {

 padding-top: 10vh;
 width: 120%;
 margin: 0 auto;

}

1. intro-page #intro-header img {

 width: 100%;
 position: relative;
 left: 50%;
 margin-left: -70vw;

}

1. intro-page #intro {

 z-index: 1;
 background-color: transparent;
 height: 70vh;
 width: 70vh;
 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);
 border-radius: 100%;

}

1. intro-page #intro #title-wrapper {

 position: absolute;
 left: 50%;
 top: 50%;
 transform: translate(-50%, -50%);

}

1. intro-page #intro h1 {

 text-transform: uppercase;
 color: #FAFAFC;
 font-size: 70px;
 font-family: "montserrat-bold";
 text-align: center;
 margin: 0;

}

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;
   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 .menu-list {
   font-size: 1.5em;
 }
 #bubbles #popup-next .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;
 }

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

 #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;
 }

 #fixedOverlay nav .header-part {
   margin: 5px 30px;
 }
 #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;
 }
 #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: 1.2em;
 }

}