first commit

wizard_instructions/Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/base.css

@@ -0,0 +1,661 @@
+@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');
+
+.colors {
+	
+--transparency: 0.7;
+    --base-col0: 56, 142, 60;
+    --base-col1: 211, 47, 47;
+    --base-col2: 251, 192, 45;
+    --base-col3: 25, 118, 210;
+    --base-col4: 123, 31, 162;
+    color-scheme: dark;
+    --star: 253,188,52;
+    --on-green: 38,122,29;
+    --green: 84,170,75;
+    --chat-bg: 30,31,34;
+    --chat-primary: 56, 142, 60;
+    --chat-on-bg: 255,255,255;
+    --chat-on-primary: 255,255,255;
+    --bg: 43,45,49;
+    --on-bg: 255,255,255;
+    --bb: 30,31,34;
+    --on-bb: 255,255,255;
+    --srfc: 49,51,56;
+    --on-srfc: 255,255,255;
+    --primary: 211, 47, 47;
+    --on-primary: 255,255,255;
+    --primary-dark: 183, 28, 28;
+    --on-primary-dark: 255,255,255;
+    --primary-light: 229, 115, 115;
+    --on-primary-light: 0,0,0;
+    --input: 0,0,0;
+    --on-input: 255,255,255;
+}
+
+.teven td { border: 0px; }
+.todd td { border: 0px; }
+
+.teven {
+	background: rgba(255,255,255,0.1);
+}
+.todd {
+	background: rgba(0,0,0,0.1);
+}
+.color1>a {
+	--bs-link-color: #d03234;
+	--bs-link-hover-color: rgb(var(--on-bg));
+	text-decoration: none;
+}
+.color4>a {
+	--bs-link-color: #7a1c9e;
+	--bs-link-hover-color: rgb(var(--on-bg));
+	text-decoration: none;
+}
+.color3>a {
+	--bs-link-color: #2374ce;
+	--bs-link-hover-color: rgb(var(--on-bg));
+	text-decoration: none;
+}
+.color5>a {
+	--bs-link-color: #3c8e43;
+	--bs-link-hover-color: rgb(var(--on-bg));
+	text-decoration: none;
+}
+.color2>a {
+	--bs-link-color: #c8cb58;
+	--bs-link-hover-color: rgb(var(--on-bg));
+	text-decoration: none;
+}
+
+.menu-drawer {
+	width: 360px;
+	background: antiquewhite;		
+	position: absolute;
+	left: 100px;
+	height: 100%;
+	display: none;
+	z-index: 21;
+}
+
+.menu-right {
+    order: 1;
+    right: 0px;
+    left: unset;
+}
+
+.drawer-content{
+	position: relative;
+    height: 100%;
+    overflow-y: scroll;
+}
+
+@media (min-width: 1100px) {
+	.xmenu-drawer {
+		flex: 0 0 360px;
+		background: antiquewhite;
+		position: unset;
+	}
+}
+
+.bg-secondary {
+    --bs-bg-opacity: 0.2;
+}
+.card {
+	--bs-card-bg: rgb(var(--srfc));
+}
+
+a {
+	--bs-link-color: grey;
+	--bs-link-hover-color: rgb(var(--on-bg));
+}
+.clear{
+	clear:both;
+}
+.floatleft {
+	float:left;
+	margin-right: 20px;
+	margin-bottom: 8px;
+	max-width: 100%;
+}
+.table {
+	--bs-body-color: rgb(var(--on-bg));
+	--bs-link-color: grey;
+	--bs-link-hover-color: rgb(var(--on-bg));
+}
+
+.content-center {
+    flex-grow: 1;
+    background: white;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.content-flow {
+    flex-grow: 1;
+    background: rgb(var(--bg));
+	color: rgb(var(--on-bg));
+    display: inline-flex;
+    flex-direction: column;
+	overflow-y: scroll;
+}
+
+body {
+	font-family: Outfit;
+    padding: 0;
+    margin: 0;
+	background: rgb(var(--bg));
+}
+
+.librebold {
+    font-family: "Libre Frannklin", "Helvejtica Neue", helvetica, arial, sans-serif;
+    font-weight: 800;
+    text-transform: uppercase;
+}
+.menu {
+    background: rgb(var(--bb));
+    flex: 0 0 16vh;
+    max-width: 100px;
+    display: flex;
+	flex-direction: column;
+    justify-content: flex-start;
+	box-shadow: 0px 0px 4px black;
+	z-index: 22;
+	font-size: 15px;
+}
+
+.shrinked { max-width: 50px; }
+.shrinked .icn-text { display:none; }
+
+@media (max-height: 480px) {
+.menu {
+	font-size: 13px;
+}
+
+}
+.menu.inner {
+	flex: 1;
+}
+
+.content {
+    flex-grow: 1;
+    background: black;
+    display: inline-flex;
+    flex-direction: column;
+    justify-content: center;
+}
+.hei {
+height: 100%;
+}
+.fix{ 
+	width: 100%;
+	height: 100%;
+	align-content: center;
+	flex-direction: row;
+    object-fit: contain;
+}
+
+div#container {
+    width: 100%;
+    height: 100%;
+    display: flex;
+	align-items: stretch;
+    flex-direction: row;
+}
+
+@media (orientation: portrait) {
+	.main-logo{
+		display:none;
+	}
+	div#container {
+	   flex-direction: column;
+	}	
+	.menu{
+		box-shadow: none;
+		border-top: 1px solid gray;
+		order:1;
+		max-width: unset;
+		xheight: 80px;
+		flex: 0 0 65px;
+		flex-direction: row;
+		justify-content: space-evenly;
+		font-size:15px
+	}
+	
+	.icon-holder svg {
+		height:36px;
+	}
+	.menu-drawer {
+		width: 100%;
+		position: absolute;
+		top: 0px;
+		left: 0px !important;
+		right: 0px;
+		bottom: 65px;
+		height: unset;
+	}
+}
+
+
+/* -----------------  Menu & Tab ---------------------- */
+
+.topmenu {
+	position: fixed;
+	height:100px;
+	background: white;
+	top: 0px;
+	transition: top 0.5s;
+	z-index: 20;
+}
+
+.scroll-down .topmenu {
+	top: -50px;
+}
+
+.scroll-up .topmenu {
+	top: 0px;
+}
+
+/* -----------------  Grid Layout ---------------------- */
+
+.container {
+  /* first breakpoint*/
+  --w1:1200px;
+  --n:8;
+  /* second breakpoint*/
+  --w2:800px;
+  --m:4;
+  /* third breakpoint*/
+  --w3:400px;
+  --p:2;
+
+  xdisplay:grid;
+  grid-template-columns:
+    repeat(auto-fill,
+      minmax(clamp(clamp(clamp(  
+            100%/(var(--n) + 1) + 0.1%,
+              (var(--w1) - 100vw)*1000,
+            100%/(var(--m) + 1) + 0.1%), 
+              (var(--w2) - 100vw)*1000,
+            100%/(var(--p) + 1) + 0.1%), 
+              (var(--w3) - 100vw)*1000,
+            100%), 1fr));
+  gap:10px;
+}
+.container > div {
+  xmin-height:100px;
+  xbackground:white;
+}
+
+.head {
+  --w1:100;
+  --n:1;
+  padding-bottom: 10px;
+}
+.extra {
+  /* first breakpoint*/
+  --w1:900px;
+  --n:8;
+  /* second breakpoint*/
+  --w2:500px;
+  --m:4;
+  /* third  breakpoint*/
+  --w3:300px;
+  --p:2;
+  padding:50px;
+}
+.extra > div {
+  background:green;
+}
+
+
+
+/* nav */
+.main-info { height: 50px; }
+.main-menu {
+	width: 100%;
+	overflow-x: scroll;
+    white-space: nowrap;
+	height: 50px;
+	border-bottom: 1px solid gray;
+	transition: scrollLeft 0.5s;
+	scroll-behavior: smooth;
+	text-align: center;
+	background: white;
+}
+
+.main-menu::-webkit-scrollbar {
+  display: none;
+}
+.main-menu {
+  -ms-overflow-style: none;  /* IE and Edge */
+  scrollbar-width: none;  /* Firefox */
+}
+
+.menu-sel {
+	display: inline-flex;
+    height: 32px;
+    padding: 0px 40px 14px 40px;
+    justify-content: center;
+    align-items: flex-end;
+    box-sizing: unset;
+    cursor: pointer;
+    opacity: 0.7;
+}
+.menu-line {
+	height: 4px;
+	background: white;
+	width: 100%;
+}
+
+.menu-sel.selected {
+    opacity: 1;
+}
+
+.menu-marker {
+	position: relative;
+	height: 4px;
+	width: 10%;
+	left: 0px;
+	transition: left 0.5s, width 0.3s;
+	border-radius: 29px 29px 0px 0px;
+}
+
+.icon-holder {
+	text-align: center;
+	background: none;
+	font-weight: 800;
+}
+.icon-holder svg {
+	padding-top: 25%;
+	width:50%;
+	display: inline-block;
+}
+.top-logo {
+		display:none;
+}
+@media (orientation: portrait) {
+	.top-logo {
+		display:inline-block;
+		width: 72px;
+    float: left;
+    margin-top: 12px;
+	}
+	.icon-holder svg {
+		padding-top: 5px;
+	}
+	.icon-holder {
+		text-align: center;
+		height: 80px;
+		padding-top: 9px;
+		background: none;
+		flex: 1;
+	}
+	#snackbar-container {
+		bottom: 64px !important;
+}
+}
+
+
+
+
+.chat-fixed{
+	display: flex;
+    order: 1;
+    position: unset;
+}
+.chat-float{
+    position: absolute;
+	display: block;
+}
+
+.menu-chat {
+    right: 0px;
+    top: 0px;
+    width: 330px;
+   	min-width: 330px;
+    z-index: 20;
+    background: #efe;
+	height: 100%;
+}
+
+.active-game {
+	position: fixed;
+	z-index:1000;
+	width: 244px;
+	height: 156px;
+	bottom: 20px;
+	left: 20px;
+	background: black;
+	box-shadow: 4px 4px 14px black
+}
+@media (orientation: portrait) {
+	.menu-chat {
+		height: calc(100% - 65px);
+		width: 100%;
+	}
+	.chat-fixed{
+		display: block;
+		position: absolute;
+	}
+	.active-game {
+		position: fixed;
+		z-index:1000;
+		width: 244px;
+		height: 156px;
+		bottom: 68px;
+		left: 2px;
+		background: black;
+	}
+}
+
+html {
+	height: 100%;
+}
+
+body {height:100%;}
+#wrapper {
+height: 100%;
+}
+
+
+
+
+@property --posX {
+  syntax: '<number>'; /* <- defined as type number for the transition to work */
+  initial-value: 0;
+  inherits: false;
+}
+@property --posY {
+  syntax: '<number>'; /* <- defined as type number for the transition to work */
+  initial-value: 0;
+  inherits: false;
+}
+
+
+
+
+
+.logo {
+	width:100%;
+}
+
+@property --gradient-angle {
+  syntax: '<angle>';
+  inherits: false;
+  initial-value: 0deg;
+}
+
+@keyframes rotate-gradient {
+  from { --gradient-angle: 0deg; }
+  to { --gradient-angle: 360deg; }
+}
+
+.square img{ width:100%; z-index:3; position: relative; 
+background: linear-gradient(var(--gradient-angle), #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
+background-size: 400% 400%;
+	z-index:2;
+  animation: rainbow 18s linear infinite, rainotate 21s linear infinite;
+}
+.square {
+	position: relative;
+}
+
+.square:before, .square:after {
+	content: '';
+	position: absolute;
+	left: -2px;
+	top: -2px;
+	background: linear-gradient(45deg, #fb0094, #0000ff, #00ff00,#ffff00, #ff0000, #fb0094, 
+		#0000ff, #00ff00,#ffff00, #ff0000);
+	background-size: 400%;
+	width: calc(100% + 4px);
+	height: calc(100% + 4px);
+	z-index: 1;
+	animation: steam 40s linear infinite;
+}
+
+@keyframes steam {
+	0% {
+		background-position: 0 0;
+	}
+	50% {
+		background-position: 400% 0;
+	}
+	100% {
+		background-position: 0 0;
+	}
+}
+
+.square:after {
+	filter: blur(50px);
+}
+
+@keyframes rainbow { 
+    0%{background-position:0% 82%; --gradient-angle: 0deg;}
+    50%{background-position:100% 19%}
+    100%{background-position:0% 82%; --gradient-angle: 360deg;}
+}
+@keyframes rainotate { 
+    0%{--gradient-angle: 0deg;}
+    100%{--gradient-angle: 360deg;}
+}
+
+
+
+
+
+
+.logoold {
+    box-shadow: #a4f95757 0px 0px 30px 4px;
+    xheight: 100vh;
+    z-index:2;
+    margin: 0;
+    --x: calc(var(--posX, 0) * 1%);
+    --y: calc(var(--posY, 0) * 1%);
+    background-image: linear-gradient(229deg, rgb(211 255 215), rgb(255 9 9)), radial-gradient( 90% 100% at calc( 50% + var(--x)) calc( 0% + var(--y)), rgb(200 200 200), rgb(99 59 141)), radial-gradient(100% 100% at calc( 80% - var(--x)) calc( 0% - var(--y)), rgb(250 255 000), rgb(89 175 175)), radial-gradient(150% 108% at calc(100% + var(--x)) calc( 0% + var(--y)), rgb(020 175 125), rgb(0 255 255)), radial-gradient(90% 100% at calc(100% - var(--x)) calc(30% - var(--y)), rgb(255 235 247), rgb(000 200 255)), linear-gradient(60deg, rgb(255 000 000), rgb(120 086 255));
+    background-blend-mode: overlay, overlay, difference, difference, difference, normal;
+    xwidth: 84vw;
+    xmax-width: 75vh;
+    background-size: 100% 100%;
+    animation: gradient-animation 16s ease infinite, gradient 7.545s ease infinite;
+
+	object-fit: contain;
+	max-width:100%;
+	max-height: 100%;
+}
+
+@keyframes gradient-animation {
+	0% {
+		xbackground-position: 0% 50%;
+		--posX: 0;
+	}
+	50% {
+		xbackground-position: 100% 50%;
+		--posX: 100;
+	}
+	100% {
+		xbackground-position: 0% 50%;
+		--posX: 00;
+	}
+}
+@keyframes gradient {
+	0% {
+		xbackground-position: 0% 50%;
+		--posY: 0;
+	}
+	50% {
+		xbackground-position: 100% 50%;
+		--posY: 100;
+	}
+	100% {
+		xbackground-position: 0% 50%;
+		--posY: 00;
+	}
+}
+
+.logo{
+	
+}
+.center{
+	display: flex;
+    justify-content: center;
+    align-items: center;
+    xpadding-bottom: 110px;
+    height: 70vh;
+}
+.main{
+	display: flex;
+	flex-direction: column;
+    justify-content: center;
+	height: 100vh;
+}
+.padder{
+flex: 1 1;
+background: rgb(var(--bg));
+}
+
+
+.logo-right {
+	padding: 20px 0px;
+	display: flex;
+    align-items: center;
+	gap: 6px;
+	justify-content: right;
+}
+
+.lead-btn {
+	border: 4px solid white;
+    border-radius: 26px;
+    padding: 10px 10px;
+    font-family: arial;
+    text-decoration: none;
+    color: white;
+    font-weight: 600;
+}
+
+
+@media (min-width: 400px) {
+	.logo-right {
+		padding: 20px 0px;
+		display: flex;
+	    align-items: center;
+		gap:12px;
+		justify-content: right;
+	}
+
+	.lead-btn {
+		border: 4px solid white;
+	    border-radius: 26px;
+	    padding: 10px 10px;
+	    font-family: arial;
+	    text-decoration: none;
+	    color: white;
+	    font-weight: 600;
+	}
+}
+
+#page-content-wrapper {
+	display:block;
+	z-index:2;
+}

wizard_instructions/Wizard - Anleitung _ BrettspielWelt - Online Portal für Brettspiele_files/css

@@ -0,0 +1,40 @@
+/* cyrillic-ext */
+@font-face {
+  font-family: 'Libre Franklin';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://www.brettspielwelt.de/p/fonts.gstatic.com/s/librefranklin/v20/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduhLsWkDdDJX-I.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
+}
+/* cyrillic */
+@font-face {
+  font-family: 'Libre Franklin';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://www.brettspielwelt.de/p/fonts.gstatic.com/s/librefranklin/v20/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduhLsWkBNDJX-I.woff2) format('woff2');
+  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+/* vietnamese */
+@font-face {
+  font-family: 'Libre Franklin';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://www.brettspielwelt.de/p/fonts.gstatic.com/s/librefranklin/v20/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduhLsWkD9DJX-I.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'Libre Franklin';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://www.brettspielwelt.de/p/fonts.gstatic.com/s/librefranklin/v20/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduhLsWkDtDJX-I.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'Libre Franklin';
+  font-style: normal;
+  font-weight: 400;
+  src: url(https://www.brettspielwelt.de/p/fonts.gstatic.com/s/librefranklin/v20/jizOREVItHgc8qDIbSTKq4XkRg8T88bjFuXOnduhLsWkANDJ.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}