661 lines
12 KiB
CSS
661 lines
12 KiB
CSS
@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;
|
|
} |