mirror of
https://github.com/openfrontio/OpenFrontIO.git
synced 2026-06-21 12:40:46 +00:00
Layout setup (#338)
Create css strucure, clean up the index html and use proper tags. Visualy minor changes, but this allow us maint better visuals and start the css standards that will help us future
This commit is contained in:
Mittanicz
+97
-133
@@ -4,7 +4,6 @@
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>OpenFront (ALPHA)</title>
|
||||
|
||||
<link rel="manifest" href="../../resources/manifest.json" />
|
||||
|
||||
<!-- Critical CSS to prevent FOUC -->
|
||||
@@ -46,44 +45,6 @@
|
||||
filter: blur(4px) brightness(0.7);
|
||||
}
|
||||
|
||||
/* Critical styles to prevent layout shift */
|
||||
.container {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
max-width: 540px !important;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.container__row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.container__row--equal > * {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
|
||||
.logo-glow {
|
||||
fill: url(#logo-gradient);
|
||||
filter: drop-shadow(1px 1px 0px rgb(255, 255, 255))
|
||||
drop-shadow(-1px -1px 0px rgb(255, 255, 255))
|
||||
drop-shadow(1px -1px 0px rgb(255, 255, 255))
|
||||
drop-shadow(-1px 1px 0px rgb(255, 255, 255))
|
||||
drop-shadow(3px 3px 0px rgb(255, 255, 255));
|
||||
}
|
||||
|
||||
.logo-version {
|
||||
color: #2563eb;
|
||||
filter: drop-shadow(1px 1px 0px rgb(255, 255, 255))
|
||||
drop-shadow(-1px -1px 0px rgb(255, 255, 255))
|
||||
drop-shadow(1px -1px 0px rgb(255, 255, 255))
|
||||
drop-shadow(-1px 1px 0px rgb(255, 255, 255));
|
||||
}
|
||||
|
||||
.left-gutter-ad {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
@@ -129,6 +90,7 @@
|
||||
.left-gutter-ad {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.right-gutter-ad {
|
||||
display: none;
|
||||
}
|
||||
@@ -147,9 +109,11 @@
|
||||
></script>
|
||||
<script>
|
||||
window.dataLayer = window.dataLayer || [];
|
||||
|
||||
function gtag() {
|
||||
dataLayer.push(arguments);
|
||||
}
|
||||
|
||||
gtag("js", new Date());
|
||||
gtag("config", "AW-16702609763");
|
||||
</script>
|
||||
@@ -159,71 +123,71 @@
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
</head>
|
||||
|
||||
<body
|
||||
class="h-full select-none font-sans min-h-screen bg-opacity-0 bg-cover bg-center bg-fixed transition-opacity duration-300 ease-in-out flex flex-col"
|
||||
>
|
||||
<!-- Logo section remains the same -->
|
||||
<div
|
||||
class="flex justify-center items-center flex-col w-full bg-gray-900/80 backdrop-blur-md pt-8 pb-2 px-8"
|
||||
>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 1364 259"
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="currentColor"
|
||||
class="max-w-[450px] h-full logo-glow"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient id="logo-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
|
||||
<stop offset="0%" style="stop-color: #2563eb" />
|
||||
<stop offset="100%" style="stop-color: #3b82f6" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<path
|
||||
d="M0,174V51h15.24v-17.14h16.81v-16.98h16.96V0h1266v17.23h17.13v16.81h16.98v16.96h14.88v123h-15.13v17.08h-17.08v17.08h-16.9v17.04H324.9v16.86h-16.9v16.95h-102v-17.12h-17.07v-17.05H48.73v-17.05h-16.89v-16.89H14.94v-16.89H0ZM1297.95,17.35H65.9v16.7h-17.08v17.08h-14.5v123.08h14.85v16.9h17.08v17.08h139.9v17.08h17.08v16.36h67.9v-16.72h17.08v-17.07h989.88v-17.07h17.08v-16.9h14.44V50.8h-14.75v-17.08h-16.9v-16.37Z"
|
||||
/>
|
||||
<path
|
||||
d="M189.1,154.78v17.07h-16.9v16.75h-51.07v-16.42h-16.9v-17.07h-16.97v-84.88h16.63v-17.07h16.9v-16.84h51.07v16.5h17.07v17.07h16.7v84.89h-16.54ZM137.87,53.1v17.15h-16.6v84.86h16.97v16.61h16.89v-16.97h16.6v-84.86h-16.97v-16.79h-16.89Z"
|
||||
/>
|
||||
<path
|
||||
d="M273.91,104.06v-16.73h50.92v16.45h16.85v68.05h-16.44v17.06h-50.96v16.88h16.4v16.96h-67.28v-16.61h16.33v-101.86h-16.38v-16.98h33.4v16.63c6.12,0,11.72,0,17.31,0,0,22.56,0,45.13,0,67.75h33.59v-67.61h-33.73Z"
|
||||
/>
|
||||
<path
|
||||
d="M631.12,188.64v-16.36h16.53V53.2h-16.25v-16.86h118.33v33.29h-16.65v-16.36h-50.72v50.44h33.36v-16.35h16.99v50.25h-16.6v-16.33h-33.73v50.65h16.37v16.72h-67.63Z"
|
||||
/>
|
||||
<path
|
||||
d="M596.78,103.8v84.94h-33.54v-84.39h-34.03v84.25h-33.85v-101.29h84.5v16.49h16.93Z"
|
||||
/>
|
||||
<path
|
||||
d="M1107.12,188.71v-84.34h-34.03v84.37h-33.7v-101.41h84.42v16.41h16.86v84.96h-33.54Z"
|
||||
/>
|
||||
<path
|
||||
d="M988.1,171.78v16.87h-67.88v-16.38h-16.87v-68.06h16.38v-16.87h68.06v16.38h16.87v68.06h-16.55ZM970.78,104.35h-33.39v67.38h33.39v-67.38Z"
|
||||
/>
|
||||
<path
|
||||
d="M460.77,155.38v16.49h-16.58v16.83h-68.05v-16.5h-16.83v-68.05h16.49v-16.83h68.05v16.49h16.83v34.06h-67.31v33.82h33.47v-16.31h33.92ZM393.39,104.18v16.56h33.3v-16.56h-33.3Z"
|
||||
/>
|
||||
<path
|
||||
d="M1209.13,172h-16.9v-67.9h-16.96v-16.9h16.68v-17.08h16.9v-16.82h16.9v33.58h50.98v16.91h-50.4v67.96h16.48v-16.43h50.95v16.54h-16.55v16.76h-68.08v-16.6Z"
|
||||
/>
|
||||
<path
|
||||
d="M834.91,120.94v16.96h-16.65v33.88h16.41v16.96h-67.29v-16.63h16.34v-67.87h-16.4v-16.97h50.42v33.81h17.3l-.14-.14Z"
|
||||
/>
|
||||
<path
|
||||
d="M835.05,121.08v-33.75h33.76v16.43h16.85v33.96h-33.43v-16.79c-6.13,0-11.73,0-17.32,0,0,0,.14.14.14.14Z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="flex justify-center text-sm font-bold mt-[-5px] logo-version">
|
||||
v0.21.0
|
||||
<header class="l-header">
|
||||
<div class="l-header__content">
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
viewBox="0 0 1364 259"
|
||||
width="100%"
|
||||
height="100%"
|
||||
fill="currentColor"
|
||||
class="l-header__logo"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="logo-gradient"
|
||||
x1="0%"
|
||||
y1="0%"
|
||||
x2="100%"
|
||||
y2="0%"
|
||||
>
|
||||
<stop offset="0%" style="stop-color: #2563eb" />
|
||||
<stop offset="100%" style="stop-color: #3b82f6" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g>
|
||||
<path
|
||||
d="M0,174V51h15.24v-17.14h16.81v-16.98h16.96V0h1266v17.23h17.13v16.81h16.98v16.96h14.88v123h-15.13v17.08h-17.08v17.08h-16.9v17.04H324.9v16.86h-16.9v16.95h-102v-17.12h-17.07v-17.05H48.73v-17.05h-16.89v-16.89H14.94v-16.89H0ZM1297.95,17.35H65.9v16.7h-17.08v17.08h-14.5v123.08h14.85v16.9h17.08v17.08h139.9v17.08h17.08v16.36h67.9v-16.72h17.08v-17.07h989.88v-17.07h17.08v-16.9h14.44V50.8h-14.75v-17.08h-16.9v-16.37Z"
|
||||
/>
|
||||
<path
|
||||
d="M189.1,154.78v17.07h-16.9v16.75h-51.07v-16.42h-16.9v-17.07h-16.97v-84.88h16.63v-17.07h16.9v-16.84h51.07v16.5h17.07v17.07h16.7v84.89h-16.54ZM137.87,53.1v17.15h-16.6v84.86h16.97v16.61h16.89v-16.97h16.6v-84.86h-16.97v-16.79h-16.89Z"
|
||||
/>
|
||||
<path
|
||||
d="M273.91,104.06v-16.73h50.92v16.45h16.85v68.05h-16.44v17.06h-50.96v16.88h16.4v16.96h-67.28v-16.61h16.33v-101.86h-16.38v-16.98h33.4v16.63c6.12,0,11.72,0,17.31,0,0,22.56,0,45.13,0,67.75h33.59v-67.61h-33.73Z"
|
||||
/>
|
||||
<path
|
||||
d="M631.12,188.64v-16.36h16.53V53.2h-16.25v-16.86h118.33v33.29h-16.65v-16.36h-50.72v50.44h33.36v-16.35h16.99v50.25h-16.6v-16.33h-33.73v50.65h16.37v16.72h-67.63Z"
|
||||
/>
|
||||
<path
|
||||
d="M596.78,103.8v84.94h-33.54v-84.39h-34.03v84.25h-33.85v-101.29h84.5v16.49h16.93Z"
|
||||
/>
|
||||
<path
|
||||
d="M1107.12,188.71v-84.34h-34.03v84.37h-33.7v-101.41h84.42v16.41h16.86v84.96h-33.54Z"
|
||||
/>
|
||||
<path
|
||||
d="M988.1,171.78v16.87h-67.88v-16.38h-16.87v-68.06h16.38v-16.87h68.06v16.38h16.87v68.06h-16.55ZM970.78,104.35h-33.39v67.38h33.39v-67.38Z"
|
||||
/>
|
||||
<path
|
||||
d="M460.77,155.38v16.49h-16.58v16.83h-68.05v-16.5h-16.83v-68.05h16.49v-16.83h68.05v16.49h16.83v34.06h-67.31v33.82h33.47v-16.31h33.92ZM393.39,104.18v16.56h33.3v-16.56h-33.3Z"
|
||||
/>
|
||||
<path
|
||||
d="M1209.13,172h-16.9v-67.9h-16.96v-16.9h16.68v-17.08h16.9v-16.82h16.9v33.58h50.98v16.91h-50.4v67.96h16.48v-16.43h50.95v16.54h-16.55v16.76h-68.08v-16.6Z"
|
||||
/>
|
||||
<path
|
||||
d="M834.91,120.94v16.96h-16.65v33.88h16.41v16.96h-67.29v-16.63h16.34v-67.87h-16.4v-16.97h50.42v33.81h17.3l-.14-.14Z"
|
||||
/>
|
||||
<path
|
||||
d="M835.05,121.08v-33.75h33.76v16.43h16.85v33.96h-33.43v-16.79c-6.13,0-11.73,0-17.32,0,0,0,.14.14.14.14Z"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
<div class="l-header__highlightText">v0.21.0</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</header>
|
||||
<div class="bg-image"></div>
|
||||
|
||||
<!-- Left gutter ad placement - full height, no empty space -->
|
||||
<div class="left-gutter-ad ad">
|
||||
<google-ad
|
||||
@@ -232,7 +196,6 @@
|
||||
fullWidthResponsive="false"
|
||||
></google-ad>
|
||||
</div>
|
||||
|
||||
<div class="right-gutter-ad ad">
|
||||
<google-ad
|
||||
adSlot="1814331462"
|
||||
@@ -241,10 +204,8 @@
|
||||
></google-ad>
|
||||
</div>
|
||||
|
||||
<dark-mode-button></dark-mode-button>
|
||||
|
||||
<!-- Main container with responsive padding -->
|
||||
<div class="flex justify-center items-center flex-grow">
|
||||
<main class="flex justify-center items-center flex-grow">
|
||||
<div class="container">
|
||||
<div class="container__row">
|
||||
<flag-input class="w-[20%] md:w-[15%]"></flag-input>
|
||||
@@ -311,7 +272,7 @@
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<!-- Game components -->
|
||||
<div id="customMenu" class="mt-4 sm:mt-6 lg:mt-8">
|
||||
@@ -319,20 +280,6 @@
|
||||
</div>
|
||||
<div id="app"></div>
|
||||
<div id="radialMenu" class="radial-menu"></div>
|
||||
|
||||
<!-- Game modals and overlays -->
|
||||
<single-player-modal></single-player-modal>
|
||||
<host-lobby-modal></host-lobby-modal>
|
||||
<join-private-lobby-modal></join-private-lobby-modal>
|
||||
<emoji-table></emoji-table>
|
||||
<leader-board></leader-board>
|
||||
<build-menu></build-menu>
|
||||
<win-modal></win-modal>
|
||||
<game-starting-modal></game-starting-modal>
|
||||
<top-bar></top-bar>
|
||||
<player-panel></player-panel>
|
||||
<help-modal></help-modal>
|
||||
|
||||
<div
|
||||
class="flex flex-column gap-2 fixed right-[10px] top-[10px] z-50 flex flex-col w-32 sm:w-32 lg:w-48"
|
||||
>
|
||||
@@ -356,38 +303,51 @@
|
||||
</div>
|
||||
|
||||
<!-- Footer section -->
|
||||
<div class="w-full bg-gray-900/80 backdrop-blur-md py-4">
|
||||
<div
|
||||
class="max-w-7xl mx-auto px-4 flex justify-between items-center text-white sm:flex-row flex-col sm:gap-0 gap-4"
|
||||
>
|
||||
<div class="flex sm:flex-row flex-col sm:gap-8 gap-2">
|
||||
<footer class="l-footer">
|
||||
<div class="l-footer__content">
|
||||
<div class="l-footer__col">
|
||||
<a
|
||||
href="https://youtu.be/jvHEvbko3uw?si=znspkP84P76B1w5I"
|
||||
data-i18n="main.how_to_play"
|
||||
class="text-white/70 hover:text-white transition-colors duration-300"
|
||||
class="t-link"
|
||||
target="_blank"
|
||||
>How to Play</a
|
||||
>
|
||||
How to Play
|
||||
</a>
|
||||
<a
|
||||
href="https://openfront.miraheze.org/wiki/Main_Page"
|
||||
data-i18n="main.wiki"
|
||||
class="text-white/70 hover:text-white transition-colors duration-300"
|
||||
class="t-link"
|
||||
target="_blank"
|
||||
>Wiki</a
|
||||
>
|
||||
Wiki
|
||||
</a>
|
||||
</div>
|
||||
<div class="text-white/70">
|
||||
<div class="l-footer__col t-text-white">
|
||||
© 2025
|
||||
<a
|
||||
href="https://github.com/openfrontio/OpenFrontIO"
|
||||
class="hover:text-white transition-colors duration-300"
|
||||
class="t-link"
|
||||
target="_blank"
|
||||
>OpenFront.io</a
|
||||
>.
|
||||
>
|
||||
OpenFront.io
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</footer>
|
||||
<!-- Game modals and overlays -->
|
||||
<single-player-modal></single-player-modal>
|
||||
<host-lobby-modal></host-lobby-modal>
|
||||
<join-private-lobby-modal></join-private-lobby-modal>
|
||||
<emoji-table></emoji-table>
|
||||
<leader-board></leader-board>
|
||||
<build-menu></build-menu>
|
||||
<win-modal></win-modal>
|
||||
<game-starting-modal></game-starting-modal>
|
||||
<top-bar></top-bar>
|
||||
<player-panel></player-panel>
|
||||
<help-modal></help-modal>
|
||||
<dark-mode-button></dark-mode-button>
|
||||
<!-- Scripts -->
|
||||
<script>
|
||||
// Remove preload class after everything is loaded
|
||||
@@ -402,6 +362,7 @@
|
||||
const locale = new Intl.Locale(navigator.language);
|
||||
const defaultLang = locale.language;
|
||||
const userLang = localStorage.getItem("lang") || defaultLang;
|
||||
|
||||
async function loadLanguage(lang) {
|
||||
try {
|
||||
const response = await fetch(`/lang/${lang}.json`);
|
||||
@@ -413,6 +374,7 @@
|
||||
return {};
|
||||
}
|
||||
}
|
||||
|
||||
function applyTranslation(translations) {
|
||||
const components = [
|
||||
"single-player-modal",
|
||||
@@ -465,6 +427,7 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function changeLanguage(lang) {
|
||||
// console.log(`Changing language to: ${lang}`);
|
||||
localStorage.setItem("lang", lang);
|
||||
@@ -472,6 +435,7 @@
|
||||
window.translations = translations;
|
||||
applyTranslation(translations);
|
||||
}
|
||||
|
||||
const defaultTranslations = await loadLanguage("en");
|
||||
window.defaultTranslations = defaultTranslations;
|
||||
const translations = await loadLanguage(userLang);
|
||||
|
||||
+7
-115
@@ -1,7 +1,13 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@import url("./styles/core/variables.css");
|
||||
@import url("./styles/core/typography.css");
|
||||
@import url("./styles/layout/header.css");
|
||||
@import url("./styles/layout/footer.css");
|
||||
@import url("./styles/layout/container.css");
|
||||
@import url("./styles/components/button.css");
|
||||
@import url("./styles/components/modal.css");
|
||||
* {
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
@@ -474,117 +480,3 @@ label.option-card:hover {
|
||||
color: #fff;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
/*Base styles*/
|
||||
.c-button {
|
||||
background: #2563eb;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
border: 1px solid transparent;
|
||||
text-align: center;
|
||||
padding: 0.8rem 1rem;
|
||||
border-radius: 8px;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.c-button:hover,
|
||||
.c-button:active,
|
||||
.c-button:focus {
|
||||
background: #1d4ed8;
|
||||
}
|
||||
|
||||
.c-button:disabled {
|
||||
background: linear-gradient(to right, rgb(74, 74, 74), rgb(61, 61, 61));
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.c-button--secondary {
|
||||
background: #dbeafe;
|
||||
color: #202020;
|
||||
}
|
||||
|
||||
.c-button--secondary:hover,
|
||||
.c-button--secondary:active,
|
||||
.c-button--secondary:focus {
|
||||
background: #bfdbfe;
|
||||
}
|
||||
|
||||
.c-button--block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.c-button--blockDesktop {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.c-modal {
|
||||
position: fixed;
|
||||
padding: 1rem;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.c-modal__wrapper {
|
||||
background: #23232382;
|
||||
border-radius: 8px;
|
||||
min-width: 340px;
|
||||
max-width: 860px;
|
||||
}
|
||||
|
||||
.c-modal__header {
|
||||
position: relative;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
font-size: 18px;
|
||||
background: #000000a1;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 1rem 2.4rem 1rem 1.4rem;
|
||||
}
|
||||
|
||||
.c-modal__close {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
.c-modal__content {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
padding: 1.4rem;
|
||||
max-height: 60dvh;
|
||||
overflow-y: scroll;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
/*This will be removed in future*/
|
||||
o-modal o-button {
|
||||
@media (min-width: 1024px) {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,57 @@
|
||||
.c-button {
|
||||
background: var(--primaryColor);
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
display: inline-block;
|
||||
font-size: 16px;
|
||||
border: 1px solid transparent;
|
||||
text-align: center;
|
||||
padding: 0.8rem 1rem;
|
||||
border-radius: 8px;
|
||||
transition: var(--transition);
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
|
||||
.c-button:hover,
|
||||
.c-button:active,
|
||||
.c-button:focus {
|
||||
background: var(--primaryColorHover);
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.c-button:disabled {
|
||||
background: var(--primaryColorDisabled);
|
||||
opacity: 0.7;
|
||||
cursor: not-allowed;
|
||||
transition: var(--transition);
|
||||
}
|
||||
|
||||
.c-button--secondary {
|
||||
background: var(--secondaryColor);
|
||||
color: var(--fontColor);
|
||||
}
|
||||
|
||||
.c-button--secondary:hover,
|
||||
.c-button--secondary:active,
|
||||
.c-button--secondary:focus {
|
||||
background: var(--secondaryColorHover);
|
||||
}
|
||||
|
||||
.c-button--block {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.c-button--blockDesktop {
|
||||
display: block;
|
||||
width: 100%;
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
.c-modal {
|
||||
position: fixed;
|
||||
padding: 1rem;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.c-modal__wrapper {
|
||||
background: #23232382;
|
||||
border-radius: 8px;
|
||||
min-width: 340px;
|
||||
max-width: 860px;
|
||||
}
|
||||
|
||||
.c-modal__header {
|
||||
position: relative;
|
||||
border-top-left-radius: 4px;
|
||||
border-top-right-radius: 4px;
|
||||
font-size: 18px;
|
||||
background: #000000a1;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
padding: 1rem 2.4rem 1rem 1.4rem;
|
||||
}
|
||||
|
||||
.c-modal__close {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
right: 1rem;
|
||||
top: 1rem;
|
||||
}
|
||||
|
||||
.c-modal__content {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
padding: 1.4rem;
|
||||
max-height: 60dvh;
|
||||
overflow-y: scroll;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
/*This will be removed in future*/
|
||||
o-modal o-button {
|
||||
@media (min-width: 1024px) {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,13 @@
|
||||
.t-link {
|
||||
color: #ffffffb3;
|
||||
transition: var(--transition);
|
||||
|
||||
&:hover {
|
||||
color: #fff;
|
||||
transition: var(--transition);
|
||||
}
|
||||
}
|
||||
|
||||
.t-text-white {
|
||||
color: #ffffffb3;
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
:root {
|
||||
--theme: "light";
|
||||
--breakPoint-tablet: 800px;
|
||||
--breakPoint-Desktop: 1024px;
|
||||
--blur-md: 4px;
|
||||
--boxBackgroundColor: #111827cc;
|
||||
--fontColor: #202020;
|
||||
--fontColorLight: #fff;
|
||||
--primaryColor: #2563eb;
|
||||
--primaryColorHover: #1d4ed8;
|
||||
--primaryColorDisabled: linear-gradient(
|
||||
to right,
|
||||
rgb(74, 74, 74),
|
||||
rgb(61, 61, 61)
|
||||
);
|
||||
--secondaryColor: #dbeafe;
|
||||
--secondaryColorHover: #bfdbfe;
|
||||
--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
@@ -0,0 +1,19 @@
|
||||
.container {
|
||||
display: flex;
|
||||
padding: 1rem;
|
||||
max-width: 540px !important;
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
opacity: 1;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
|
||||
.container__row {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.container__row--equal > * {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
@@ -0,0 +1,24 @@
|
||||
.l-footer {
|
||||
background: var(--boxBackgroundColor);
|
||||
backdrop-filter: blur(var(--blur-md));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
|
||||
@media (min-width: 800px) {
|
||||
padding: 12px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.l-footer__content {
|
||||
max-width: 860px;
|
||||
flex-wrap: wrap;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.l-footer__col {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
@@ -0,0 +1,39 @@
|
||||
.l-header {
|
||||
background: var(--boxBackgroundColor);
|
||||
backdrop-filter: blur(var(--blur-md));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding: 24px 24px 12px;
|
||||
|
||||
@media (min-width: 800px) {
|
||||
padding: 24px 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.l-header__content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
max-width: 600px;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.l-header__logo {
|
||||
max-width: 450px;
|
||||
fill: url(#logo-gradient);
|
||||
filter: drop-shadow(1px 1px 0px rgb(255, 255, 255))
|
||||
drop-shadow(-1px -1px 0px rgb(255, 255, 255))
|
||||
drop-shadow(1px -1px 0px rgb(255, 255, 255))
|
||||
drop-shadow(-1px 1px 0px rgb(255, 255, 255))
|
||||
drop-shadow(3px 3px 0px rgb(255, 255, 255));
|
||||
}
|
||||
|
||||
.l-header__highlightText {
|
||||
color: #2563eb;
|
||||
font-weight: 700;
|
||||
filter: drop-shadow(1px 1px 0px rgb(255, 255, 255))
|
||||
drop-shadow(-1px -1px 0px rgb(255, 255, 255))
|
||||
drop-shadow(1px -1px 0px rgb(255, 255, 255))
|
||||
drop-shadow(-1px 1px 0px rgb(255, 255, 255));
|
||||
}
|
||||
Reference in New Issue
Block a user