mirror of
https://github.com/PretendoNetwork/website.git
synced 2026-08-23 09:07:40 -05:00
fix: navbar widget cut off on scroll
This commit is contained in:
limes
@@ -13,8 +13,6 @@ import { Popover } from 'reka-ui/namespaced';
|
||||
import type { LocaleObject } from '@nuxtjs/i18n';
|
||||
const { locales, setLocale, locale } = useI18n();
|
||||
|
||||
/* TODO: Mobile stuff */
|
||||
|
||||
// en-US first, other en locales next, alphabetically sorted locales third, conlangs/other stuff last.
|
||||
function scoreLocale(cObj: LocaleObject): number {
|
||||
const c = cObj.code;
|
||||
@@ -535,27 +533,26 @@ onMounted(() => {
|
||||
mode="svg"
|
||||
/>
|
||||
</Popover.Trigger>
|
||||
<Popover.Portal>
|
||||
<Popover.Content
|
||||
as="div"
|
||||
align="end"
|
||||
side="bottom"
|
||||
:side-offset="16"
|
||||
class="locale-dropdown"
|
||||
|
||||
<Popover.Content
|
||||
as="div"
|
||||
align="end"
|
||||
side="bottom"
|
||||
:side-offset="16"
|
||||
class="locale-dropdown"
|
||||
>
|
||||
<button
|
||||
v-for="locale in sortedLocales"
|
||||
:key="locale.code"
|
||||
class="option"
|
||||
@click="
|
||||
setLocale(locale.code);
|
||||
close();
|
||||
"
|
||||
>
|
||||
<button
|
||||
v-for="locale in sortedLocales"
|
||||
:key="locale.code"
|
||||
class="option"
|
||||
@click="
|
||||
setLocale(locale.code);
|
||||
close();
|
||||
"
|
||||
>
|
||||
{{ locale.name }}
|
||||
</button>
|
||||
</Popover.Content>
|
||||
</Popover.Portal>
|
||||
{{ locale.name }}
|
||||
</button>
|
||||
</Popover.Content>
|
||||
</Popover.Root>
|
||||
</div>
|
||||
|
||||
@@ -573,46 +570,44 @@ onMounted(() => {
|
||||
:alt="user.mii?.name ?? ''"
|
||||
>
|
||||
</Popover.Trigger>
|
||||
<Popover.Portal>
|
||||
<Popover.Content
|
||||
as="div"
|
||||
align="end"
|
||||
side="bottom"
|
||||
:side-offset="16"
|
||||
class="navbar-user-widget"
|
||||
>
|
||||
<div class="user-avatar">
|
||||
<img
|
||||
:src="user.mii?.imageUrl ?? '#'"
|
||||
:alt="user.mii?.name ?? ''"
|
||||
>
|
||||
<Popover.Content
|
||||
as="div"
|
||||
align="end"
|
||||
side="bottom"
|
||||
:side-offset="16"
|
||||
class="navbar-user-widget"
|
||||
>
|
||||
<div class="user-avatar">
|
||||
<img
|
||||
:src="user.mii?.imageUrl ?? '#'"
|
||||
:alt="user.mii?.name ?? ''"
|
||||
>
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div
|
||||
v-if="user.mii"
|
||||
class="mii-name"
|
||||
>
|
||||
{{ user.mii.name }}
|
||||
</div>
|
||||
<div class="user-info">
|
||||
<div
|
||||
v-if="user.mii"
|
||||
class="mii-name"
|
||||
>
|
||||
{{ user.mii.name }}
|
||||
</div>
|
||||
<div class="pnid">
|
||||
{{ user.username }}
|
||||
</div>
|
||||
<div class="pnid">
|
||||
{{ user.username }}
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a href="/account">
|
||||
<button class="button primary">
|
||||
{{ $t("nav.accountWidget.settings") }}
|
||||
</button>
|
||||
</a>
|
||||
<button
|
||||
class="button logout"
|
||||
@click="authUtils.logout()"
|
||||
>
|
||||
{{ $t("nav.accountWidget.logout") }}
|
||||
</div>
|
||||
<div class="buttons">
|
||||
<a href="/account">
|
||||
<button class="button primary">
|
||||
{{ $t("nav.accountWidget.settings") }}
|
||||
</button>
|
||||
</div>
|
||||
</Popover.Content>
|
||||
</Popover.Portal>
|
||||
</a>
|
||||
<button
|
||||
class="button logout"
|
||||
@click="authUtils.logout()"
|
||||
>
|
||||
{{ $t("nav.accountWidget.logout") }}
|
||||
</button>
|
||||
</div>
|
||||
</Popover.Content>
|
||||
</Popover.Root>
|
||||
</div>
|
||||
|
||||
@@ -652,7 +647,7 @@ header {
|
||||
}
|
||||
|
||||
header * {
|
||||
z-index: 1;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.logo-link {
|
||||
@@ -673,22 +668,26 @@ header::before {
|
||||
}
|
||||
|
||||
header:has(.nav-menu-viewport[data-state="open"]),
|
||||
.locale-dropdown[data-state="open"],
|
||||
.navbar-user-widget[data-state="open"] {
|
||||
header:has(.locale-dropdown-toggle[data-state="open"]),
|
||||
header:has(.user-widget-toggle[data-state="open"]) {
|
||||
box-shadow: 0 0 0 600vw rgba(27, 31, 59, 0.8);
|
||||
background: rgba(27, 31, 59, 1);;
|
||||
}
|
||||
|
||||
header.transparent:has(.nav-menu-viewport[data-state="open"]) {
|
||||
background: rgba(27, 31, 59, 0.85);;
|
||||
header.transparent:has(.nav-menu-viewport[data-state="open"]),
|
||||
header.transparent:has(.locale-dropdown-toggle[data-state="open"]),
|
||||
header.transparent:has(.user-widget-toggle[data-state="open"]) {
|
||||
background: rgba(27, 31, 59, 0.8) !important;
|
||||
}
|
||||
|
||||
header.transparent,
|
||||
header.transparent::before {
|
||||
background: rgba(27, 31, 59, 0);
|
||||
background: rgba(27, 31, 59, 0) !important;
|
||||
}
|
||||
|
||||
header button {
|
||||
all: unset;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
header .left-section {
|
||||
@@ -1133,8 +1132,6 @@ header .right-section {
|
||||
text-align: center;
|
||||
|
||||
margin-top: 0;
|
||||
|
||||
box-shadow: 0 0 10px -2px var(--bg-shade-0);
|
||||
}
|
||||
|
||||
.navbar-user-widget {
|
||||
@@ -1307,794 +1304,3 @@ header .right-section {
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<!--
|
||||
<header :class="{ 'transparent': scrollY === 0 }">
|
||||
<div
|
||||
class="left-section"
|
||||
>
|
||||
|
||||
<div class="bottom">
|
||||
<a
|
||||
href="https://discord.gg/pretendo"
|
||||
target="_blank"
|
||||
aria-label="A link to our Discord server"
|
||||
>
|
||||
<Icon
|
||||
name="fa7-brands:discord"
|
||||
size="32"
|
||||
mode="svg"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://twitter.com/PretendoNetwork"
|
||||
target="_blank"
|
||||
aria-label="A link to our Twitter account"
|
||||
>
|
||||
<Icon
|
||||
name="fa7-brands:twitter"
|
||||
size="32"
|
||||
mode="svg"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/PretendoNetwork"
|
||||
target="_blank"
|
||||
aria-label="A link to our GitHub organization"
|
||||
>
|
||||
<Icon
|
||||
name="fa7-brands:github"
|
||||
size="32"
|
||||
mode="svg"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav>
|
||||
<div
|
||||
class="dropdown-button-wrapper hide-on-mobile"
|
||||
>
|
||||
<button
|
||||
:class="{ 'dropdown-button': true, active: openDropdown === 'about' }"
|
||||
@click="handleDropdownButton('about')"
|
||||
>
|
||||
{{ $t("nav.about") }}
|
||||
</button>
|
||||
<button
|
||||
:class="{ 'dropdown-button': true, active: openDropdown === 'docs' }"
|
||||
@click="handleDropdownButton('docs')"
|
||||
@mouseenter="handleDropdownButton('docs')"
|
||||
>
|
||||
{{ $t("nav.docs") }}
|
||||
</button>
|
||||
</div>
|
||||
<a
|
||||
href="/progress"
|
||||
class="hide-on-mobile"
|
||||
>
|
||||
<button>{{ $t("nav.progress") }}</button>
|
||||
</a>
|
||||
<a
|
||||
href="https://forum.pretendo.network"
|
||||
class="hide-on-mobile"
|
||||
>
|
||||
<button>{{ $t("nav.forum") }}</button>
|
||||
</a>
|
||||
<a
|
||||
href="/account/upgrade"
|
||||
class="donate"
|
||||
>
|
||||
<button>
|
||||
<Icon
|
||||
name="ph:heart-fill"
|
||||
size="32"
|
||||
mode="svg"
|
||||
/>
|
||||
<span>{{ $t("nav.donate") }}</span>
|
||||
</button>
|
||||
</a>
|
||||
|
||||
<div class="dropdown">
|
||||
<div
|
||||
v-if="openDropdown === 'about'"
|
||||
ref="dropdownRef"
|
||||
class="dropdown-content"
|
||||
@click="handleDropdownButton(false)"
|
||||
>
|
||||
<div class="top">
|
||||
<a href="/#credits">
|
||||
<div class="icon">
|
||||
<Icon
|
||||
name="ph:users-four-fill"
|
||||
size="32"
|
||||
mode="svg"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="title">{{ $t("nav.credits") }}</p>
|
||||
<p class="caption">{{ $t("nav.dropdown.captions.credits") }}</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/#about">
|
||||
<div class="icon">
|
||||
<Icon
|
||||
name="ph:info-fill"
|
||||
size="32"
|
||||
mode="svg"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="title">{{ $t("nav.about") }}</p>
|
||||
<p class="caption">{{ $t("nav.dropdown.captions.about") }}</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/#faq">
|
||||
<div class="icon">
|
||||
<Icon
|
||||
name="ph:question-fill"
|
||||
size="32"
|
||||
mode="svg"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="title">{{ $t("nav.faq") }}</p>
|
||||
<p class="caption">{{ $t("nav.dropdown.captions.faq") }}</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/blog">
|
||||
<div class="icon">
|
||||
<Icon
|
||||
name="ph:newspaper-fill"
|
||||
size="32"
|
||||
mode="svg"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="title">{{ $t("nav.blog") }}</p>
|
||||
<p class="caption">{{ $t("nav.dropdown.captions.blog") }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="bottom">
|
||||
<a
|
||||
href="https://invite.gg/pretendo"
|
||||
target="_blank"
|
||||
aria-label="A link to our Discord server"
|
||||
>
|
||||
<Icon
|
||||
name="fa7-brands:discord"
|
||||
size="32"
|
||||
mode="svg"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://twitter.com/PretendoNetwork"
|
||||
target="_blank"
|
||||
aria-label="A link to our Twitter account"
|
||||
>
|
||||
<Icon
|
||||
name="fa7-brands:twitter"
|
||||
size="32"
|
||||
mode="svg"
|
||||
/>
|
||||
</a>
|
||||
<a
|
||||
href="https://github.com/PretendoNetwork"
|
||||
target="_blank"
|
||||
aria-label="A link to our GitHub organization"
|
||||
>
|
||||
<Icon
|
||||
name="fa7-brands:github"
|
||||
size="32"
|
||||
mode="svg"
|
||||
/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="openDropdown === 'docs'"
|
||||
ref="dropdownRef"
|
||||
class="dropdown-content"
|
||||
@click="handleDropdownButton(false)"
|
||||
>
|
||||
<div class="top">
|
||||
<a href="/docs">
|
||||
<div class="icon">
|
||||
<Icon
|
||||
name="ph:download-simple-fill"
|
||||
size="32"
|
||||
mode="svg"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="title">{{ $t("docs.quickLinks.links[0].header") }}</p>
|
||||
<p class="caption">{{ $t("docs.quickLinks.links[0].caption") }}</p>
|
||||
</div>
|
||||
</a>
|
||||
<a href="/docs/errors">
|
||||
<div class="icon">
|
||||
<Icon
|
||||
name="ph:warning-fill"
|
||||
size="32"
|
||||
mode="svg"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<p class="title">{{ $t("docs.quickLinks.links[1].header") }}</p>
|
||||
<p class="caption">{{ $t("docs.quickLinks.links[1].caption") }}</p>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
</header>
|
||||
</template>-->
|
||||
<!--
|
||||
<style>
|
||||
header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 2.5%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 95%;
|
||||
margin-top: 35px;
|
||||
z-index: 60;
|
||||
transition: box-shadow 180ms, background 180ms;
|
||||
}
|
||||
|
||||
header * {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
header::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -35px;
|
||||
left: -10vw;
|
||||
width: 120vw;
|
||||
height: calc(100% + 35px + 35px);
|
||||
background: rgba(27, 31, 59, 0.98);
|
||||
transition: background 180ms;
|
||||
}
|
||||
|
||||
header.transparent,
|
||||
header.transparent::before {
|
||||
background: rgba(27, 31, 59, 0);
|
||||
}
|
||||
|
||||
header.dropdown-active {
|
||||
background: rgba(27, 31, 59, 0.98);
|
||||
box-shadow: 0 0 0 600vw rgba(27, 31, 59, 0.8);
|
||||
}
|
||||
|
||||
header .dropdown-arrow {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
width: 0;
|
||||
border-style: solid;
|
||||
border-color: var(--bg-shade-3) transparent;
|
||||
border-width: 0 14px 14px;
|
||||
bottom: -26px;
|
||||
margin-left: -10px;
|
||||
margin-bottom: -10px;
|
||||
transition: left 180ms, margin-bottom 180ms, opacity 180ms;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
header.dropdown-active .dropdown-arrow {
|
||||
opacity: 1;
|
||||
display: block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
header a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
header .logo-link,
|
||||
header .logo-link svg {
|
||||
display: block;
|
||||
}
|
||||
|
||||
header div.left-section {
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header nav {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
margin-left: 40px;
|
||||
}
|
||||
|
||||
header button.dropdown-button.hide-on-desktop {
|
||||
display: none;
|
||||
background: none;
|
||||
padding: 0;
|
||||
margin-right: 12px;
|
||||
transition: transform 200ms;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
header button.dropdown-button.hide-on-desktop.active {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
header div.dropdown-button-wrapper {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
}
|
||||
|
||||
/* these are safezones where the dropdown will not close */
|
||||
header div.dropdown-button-wrapper::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -16px;
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
right: -12px;
|
||||
}
|
||||
|
||||
header div.dropdown-button-wrapper::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
bottom: -32px;
|
||||
left: 0;
|
||||
right: -12px;
|
||||
}
|
||||
|
||||
header nav button {
|
||||
background: none;
|
||||
color: var(--text-shade-1);
|
||||
margin: 0 17px;
|
||||
padding: 0;
|
||||
}
|
||||
header nav button:hover {
|
||||
background: none;
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
header nav button.active {
|
||||
background: none;
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
header nav a.donate button {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
font-weight: bold;
|
||||
background: #332b61;
|
||||
color: var(--accent-shade-3);
|
||||
padding: 2px 12px;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
header nav a.donate button svg {
|
||||
height: 1rem;
|
||||
width: 1rem;
|
||||
}
|
||||
|
||||
header nav a.donate button:hover {
|
||||
background: var(--accent-shade-0);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
header nav button.dropdown-button.active::after {
|
||||
transform: scaleY(-1);
|
||||
filter: none;
|
||||
}
|
||||
|
||||
header div.dropdown {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
margin-top: 24px;
|
||||
left: 0;
|
||||
background: var(--bg-shade-3);
|
||||
border-radius: 8px;
|
||||
|
||||
width: 420px;
|
||||
height: fit-content;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
header div.dropdown * {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
header div.dropdown-content {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
pointer-events: auto;
|
||||
transition: opacity 180ms;
|
||||
}
|
||||
|
||||
header div.dropdown .top {
|
||||
background: var(--bg-shade-3);
|
||||
|
||||
padding: 32px 18px;
|
||||
}
|
||||
|
||||
header div.dropdown .top a {
|
||||
position: relative;
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
gap: 16px;
|
||||
justify-content: start;
|
||||
align-items: center;
|
||||
color: var(--text-shade-1);
|
||||
padding: 16px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
header div.dropdown .top a .icon {
|
||||
background: var(--bg-shade-2);
|
||||
color: var(--accent-shade-3);
|
||||
height: 56px;
|
||||
width: 56px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
header div.dropdown .top a:hover .icon {
|
||||
background: #151b44;
|
||||
color: var(--accent-shade-1);
|
||||
}
|
||||
|
||||
header div.dropdown .top a .icon svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
margin: 12px;
|
||||
}
|
||||
|
||||
header div.dropdown .top a .title {
|
||||
margin: 0;
|
||||
font-weight: bold;
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
header div.dropdown .top a .caption {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
header div.dropdown .top a:hover {
|
||||
background: var(--bg-shade-2-5);
|
||||
}
|
||||
|
||||
header div.dropdown .top a:hover::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 24px;
|
||||
width: 24px;
|
||||
height: 100%;
|
||||
background: no-repeat center url("/assets/images/arrow-right.svg");
|
||||
/* garbage to make it look the same color */
|
||||
filter: brightness(0) invert(60%) sepia(70%) saturate(453%) hue-rotate(208deg) brightness(113%) contrast(97%);
|
||||
}
|
||||
|
||||
header div.dropdown .top a:hover .title {
|
||||
color: var(--accent-shade-3);
|
||||
}
|
||||
|
||||
header div.dropdown .bottom {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
justify-content: center;
|
||||
gap: 24px;
|
||||
background: var(--bg-shade-3-5);
|
||||
padding: 22px;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
header div.dropdown .bottom a {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
background: var(--bg-shade-3);
|
||||
color: var(--text-shade-3);
|
||||
border-radius: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
header div.dropdown .bottom a:hover {
|
||||
background: var(--bg-shade-2);
|
||||
}
|
||||
|
||||
header div.dropdown .bottom a svg {
|
||||
width: 24px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
header div.dropdown .top a.show-on-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header .right-section {
|
||||
display: grid;
|
||||
grid-auto-flow: column;
|
||||
align-items: center;
|
||||
gap: 24px;
|
||||
margin-left: auto;
|
||||
z-index: 2;
|
||||
color: var(--text-shade-1);
|
||||
}
|
||||
|
||||
header .locale-dropdown-toggle {
|
||||
width: fit-content;
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
padding: 0;
|
||||
margin: auto;
|
||||
transition: color 150ms;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
header .locale-dropdown-toggle:hover,
|
||||
header .locale-dropdown-toggle.active {
|
||||
color: var(--text-shade-3);
|
||||
background: none;
|
||||
}
|
||||
|
||||
header .user-widget-wrapper {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
header .user-widget-wrapper a.login-link {
|
||||
color: var(--text-shade-1);
|
||||
text-decoration: none;
|
||||
display: block;
|
||||
height: 32px;
|
||||
transition: color 150ms;
|
||||
}
|
||||
|
||||
header .user-widget-wrapper a.login-link:hover {
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
header .user-widget-wrapper.logged-in {
|
||||
position: relative;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
header .user-widget-wrapper.logged-in .user-widget-toggle {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
background: var(--text-shade-0);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
header .user-widget-wrapper .user-widget-toggle img,
|
||||
.user-widget .user-avatar img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.user-widget {
|
||||
max-height: 0;
|
||||
overflow: hidden;
|
||||
|
||||
box-sizing: border-box;
|
||||
transition: max-height 300ms, padding 200ms, opacity 150ms;
|
||||
|
||||
background: var(--bg-shade-2);
|
||||
border-radius: 8px;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
|
||||
box-shadow: 0 0 10px -2px var(--bg-shade-0);
|
||||
}
|
||||
|
||||
.user-widget[data-state="open"] {
|
||||
max-height: 100vh;
|
||||
padding: 36px;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.user-widget .user-avatar {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
margin: auto;
|
||||
background: var(--text-shade-0);
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.user-widget .user-info {
|
||||
color: var(--text-shade-1);
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.user-widget .user-info .mii-name {
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
.user-widget .buttons {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.user-widget .button {
|
||||
margin-top: 12px;
|
||||
width: 100%;
|
||||
padding: 8px 60px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.locale-dropdown-toggle {
|
||||
appearance: none;
|
||||
background: none;
|
||||
border: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
transition: color 150ms;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.locale-dropdown-toggle:hover,
|
||||
.locale-dropdown-toggle.active {
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
|
||||
.options-container {
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
right: 0;
|
||||
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
gap: 2px;
|
||||
width: min(90vw, 240px);
|
||||
max-height: min(90vh, 20rem);
|
||||
overflow-y: scroll;
|
||||
|
||||
margin-top: 24px;
|
||||
|
||||
border-radius: 5px;
|
||||
background-color: var(--bg-shade-3);
|
||||
order: 1;
|
||||
}
|
||||
|
||||
.option {
|
||||
all: unset;
|
||||
font: inherit;
|
||||
color: var(--text-shade-2);
|
||||
padding: 12px 15px;
|
||||
cursor: pointer;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.option:hover {
|
||||
background: var(--bg-shade-4);
|
||||
}
|
||||
|
||||
.locale-dropdown {
|
||||
position: relative;
|
||||
width: min-content;
|
||||
height: fit-content
|
||||
}
|
||||
|
||||
header .user-widget .button.logout {
|
||||
background: var(--bg-shade-3);
|
||||
color: var(--text-shade-3);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
@media screen and (max-width: 900px) {
|
||||
header {
|
||||
position: relative !important;
|
||||
justify-content: flex-end !important;
|
||||
width: 90% !important;
|
||||
left: 5% !important;
|
||||
}
|
||||
|
||||
header .left-section {
|
||||
margin-right: auto !important;
|
||||
}
|
||||
|
||||
header .right-section {
|
||||
margin-left: 24px !important;
|
||||
}
|
||||
|
||||
header nav a.donate button {
|
||||
margin: 0 !important;
|
||||
}
|
||||
|
||||
header .dropdown {
|
||||
left: 0 !important;
|
||||
width: 90vw !important;
|
||||
}
|
||||
|
||||
header div.dropdown .top {
|
||||
display: grid !important;
|
||||
grid-template-columns: 1fr 1fr !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 600px) {
|
||||
header div.dropdown .top {
|
||||
grid-template-columns: 1fr !important;
|
||||
}
|
||||
|
||||
header div.dropdown .top {
|
||||
padding: 16px 9px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 500px) {
|
||||
header nav a.donate button span {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header nav a.donate button {
|
||||
padding: 6px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 420px) {
|
||||
header nav a.donate button {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
header .right-section {
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
|
||||
header div.dropdown {
|
||||
right: -80px;
|
||||
}
|
||||
|
||||
header div.dropdown .top a {
|
||||
padding: 8px;
|
||||
}
|
||||
|
||||
header div.dropdown .top a .icon {
|
||||
height: 40px;
|
||||
width: 40px;
|
||||
}
|
||||
|
||||
header div.dropdown .top a .icon svg {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
margin: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 330px) {
|
||||
header .logo-link svg text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
header .logo-link svg {
|
||||
width: 39.876px;
|
||||
}
|
||||
|
||||
header .logo-link {
|
||||
margin-right: 6px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
-->
|
||||
|
||||
Reference in New Issue
Block a user