header: unify dropdown menus, nav text colors, minor fixes
All checks were successful
CI / update (push) Successful in 13s
All checks were successful
CI / update (push) Successful in 13s
Rework UserHeader and LanguageSelector dropdowns to use wrapper + triangle pattern with theme-aware backgrounds. Use solid grey for inactive nav text instead of semi-transparent. Reduce instruction info box shadow. Add emoji font to CompactCard favorites.
This commit is contained in:
@@ -183,43 +183,43 @@
|
||||
border-color: var(--nav-btn-border-hover, rgba(255,255,255,0.4));
|
||||
background: var(--nav-hover-bg, rgba(255,255,255,0.1));
|
||||
}
|
||||
.language-options{
|
||||
.options-wrap {
|
||||
--bg_color: rgba(46, 52, 64, 0.95);
|
||||
--opt-text: rgba(255,255,255,0.7);
|
||||
--opt-text-hover: white;
|
||||
--opt-hover-bg: rgba(255,255,255,0.1);
|
||||
--opt-active-bg: rgba(136, 192, 208, 0.25);
|
||||
--opt-border: rgba(255,255,255,0.08);
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(100% + 10px);
|
||||
background-color: var(--bg_color);
|
||||
backdrop-filter: blur(16px);
|
||||
-webkit-backdrop-filter: blur(16px);
|
||||
width: 8ch;
|
||||
padding: 0.35rem;
|
||||
top: calc(100% + 2px);
|
||||
z-index: 1000;
|
||||
display: none;
|
||||
border: 1px solid var(--opt-border);
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
|
||||
}
|
||||
.language-options::after {
|
||||
content: "";
|
||||
.options-wrap::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0.8rem;
|
||||
border: 8px solid transparent;
|
||||
border-bottom-color: var(--bg_color);
|
||||
border-top: 0;
|
||||
position: absolute;
|
||||
top: -8px;
|
||||
right: 0.8rem;
|
||||
}
|
||||
.language-options {
|
||||
box-sizing: border-box;
|
||||
border-radius: 8px;
|
||||
margin-top: 8px;
|
||||
background-color: var(--bg_color);
|
||||
width: 8ch;
|
||||
padding: 0.35rem;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
|
||||
}
|
||||
/* Show via JS toggle */
|
||||
.language-options.open {
|
||||
.options-wrap.open {
|
||||
display: block;
|
||||
}
|
||||
/* Show via CSS focus-within (no-JS fallback) */
|
||||
.language-selector:focus-within .language-options {
|
||||
.language-selector:focus-within .options-wrap {
|
||||
display: block;
|
||||
}
|
||||
.language-options a{
|
||||
@@ -248,16 +248,16 @@
|
||||
font-weight: 700;
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.language-options {
|
||||
.options-wrap {
|
||||
--bg_color: rgba(20, 20, 20, 0.92);
|
||||
}
|
||||
}
|
||||
:global(:root[data-theme="dark"]) .language-options {
|
||||
:global(:root[data-theme="dark"]) .options-wrap {
|
||||
--bg_color: rgba(20, 20, 20, 0.92);
|
||||
}
|
||||
/* Light mode dropdown */
|
||||
@media (prefers-color-scheme: light) {
|
||||
:global(:root:not([data-theme])) .language-options {
|
||||
:global(:root:not([data-theme])) .options-wrap {
|
||||
--bg_color: rgba(255, 255, 255, 0.95);
|
||||
--opt-text: rgba(0,0,0,0.6);
|
||||
--opt-text-hover: var(--nord0);
|
||||
@@ -266,7 +266,7 @@
|
||||
--opt-border: rgba(0,0,0,0.08);
|
||||
}
|
||||
}
|
||||
:global(:root[data-theme="light"]) .language-options {
|
||||
:global(:root[data-theme="light"]) .options-wrap {
|
||||
--bg_color: rgba(255, 255, 255, 0.95);
|
||||
--opt-text: rgba(0,0,0,0.6);
|
||||
--opt-text-hover: var(--nord0);
|
||||
@@ -280,7 +280,8 @@
|
||||
<button bind:this={langButton} onclick={toggle_language_options} class="language-button">
|
||||
{displayLang.toUpperCase()}
|
||||
</button>
|
||||
<div class="language-options" class:open={isOpen}>
|
||||
<div class="options-wrap" class:open={isOpen}>
|
||||
<div class="language-options">
|
||||
<a
|
||||
href={dePath}
|
||||
class:active={displayLang === 'de'}
|
||||
@@ -297,3 +298,4 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
let { user, recipeLang = 'rezepte', lang = 'de' } = $props();
|
||||
|
||||
function toggle_options(){
|
||||
const el = document.querySelector("#options")
|
||||
const el = document.querySelector("#options-wrap")
|
||||
el.hidden = !el.hidden
|
||||
}
|
||||
|
||||
@@ -14,8 +14,8 @@
|
||||
const userButton = document.querySelector("#button")
|
||||
|
||||
if(userButton && !userButton.contains(e.target)){
|
||||
const options = document.querySelector("#options");
|
||||
if (options) options.hidden = true;
|
||||
const wrap = document.querySelector("#options-wrap");
|
||||
if (wrap) wrap.hidden = true;
|
||||
}
|
||||
})
|
||||
})
|
||||
@@ -44,123 +44,104 @@
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
/* (A) SPEECH BOX */
|
||||
.speech {
|
||||
/* (A1) FONT */
|
||||
font-size: 1.1em;
|
||||
|
||||
/* (A2) COLORS */
|
||||
color: #fff;
|
||||
background: var(--bg_color);
|
||||
|
||||
/* (A3) DIMENSIONS + POSITION */
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* (B) ADD SPEECH "CALLOUT TAIL" */
|
||||
/* (B1) USE ::AFTER TO CREATE THE "TAIL" */
|
||||
.speech::after {
|
||||
/* (B1-1) ATTACH TRANSPARENT BORDERS */
|
||||
content: "";
|
||||
border: 20px solid transparent;
|
||||
|
||||
/* (B1-2) NECESSARY TO POSITION THE "TAIL" */
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
/* (C) DIFFERENT TAIL POSITIONS */
|
||||
/* (C1) TOP */
|
||||
.top.speech::after {
|
||||
/* (C1-1) UP TRIANGLE */
|
||||
border-bottom-color: var(--bg_color);
|
||||
border-top: 0;
|
||||
|
||||
/* (C1-2) POSITION AT TOP */
|
||||
top: -10px; left:84.5%;
|
||||
margin-left: -20px;
|
||||
}
|
||||
|
||||
|
||||
button {
|
||||
--margin-right: 0;
|
||||
position: relative;
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
border-radius: 50%;
|
||||
margin-right: var(--margin-right);
|
||||
background-color: var(--nord4);
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
cursor: pointer;
|
||||
}
|
||||
.options-wrap {
|
||||
--menu-bg: rgba(46, 52, 64, 0.95);
|
||||
--menu-border: rgba(255,255,255,0.08);
|
||||
--menu-text: rgba(255,255,255,0.9);
|
||||
--menu-text-hover: var(--nord11);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: calc(100% + 2px);
|
||||
z-index: 10;
|
||||
}
|
||||
.options-wrap::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0.35rem;
|
||||
border: 8px solid transparent;
|
||||
border-bottom-color: var(--menu-bg);
|
||||
border-top: 0;
|
||||
}
|
||||
#options {
|
||||
--bg_color: var(--nord3);
|
||||
box-sizing: border-box;
|
||||
border-radius: 5px;
|
||||
position: absolute;
|
||||
right: calc( -1*var(--margin-right) + 0.25rem);
|
||||
top: calc(100% + 10px);
|
||||
background-color: var(--bg_color);
|
||||
margin-top: 8px;
|
||||
background-color: var(--menu-bg);
|
||||
color: var(--menu-text);
|
||||
border-radius: 8px;
|
||||
width: 30ch;
|
||||
padding: 1rem;
|
||||
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.3);
|
||||
}
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.options-wrap {
|
||||
--menu-bg: rgba(20, 20, 20, 0.92);
|
||||
}
|
||||
}
|
||||
:global(:root[data-theme="dark"]) .options-wrap {
|
||||
--menu-bg: rgba(20, 20, 20, 0.92);
|
||||
}
|
||||
@media (prefers-color-scheme: light) {
|
||||
:global(:root:not([data-theme])) .options-wrap {
|
||||
--menu-bg: rgba(255, 255, 255, 0.95);
|
||||
--menu-border: rgba(0,0,0,0.08);
|
||||
--menu-text: var(--color-text-primary);
|
||||
--menu-text-hover: var(--nord11);
|
||||
}
|
||||
}
|
||||
:global(:root[data-theme="light"]) .options-wrap {
|
||||
--menu-bg: rgba(255, 255, 255, 0.95);
|
||||
--menu-border: rgba(0,0,0,0.08);
|
||||
--menu-text: var(--color-text-primary);
|
||||
--menu-text-hover: var(--nord11);
|
||||
}
|
||||
#options ul {
|
||||
color: white;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1rem;
|
||||
width: 100%;
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
#options li {
|
||||
margin-block: 0.5rem;
|
||||
margin-block: 0.4rem;
|
||||
text-align: left;
|
||||
}
|
||||
#options li a {
|
||||
text-decoration: none;
|
||||
color: white;
|
||||
color: var(--menu-text);
|
||||
text-align: left;
|
||||
transition: var(--transition-fast);
|
||||
}
|
||||
#options li:hover a {
|
||||
color: var(--red);
|
||||
color: var(--menu-text-hover);
|
||||
}
|
||||
/* (B2) BOTTOM "CALLOUT TAIL" */
|
||||
h2 {
|
||||
margin-block: 0;
|
||||
font-size: 1.2rem;
|
||||
font-size: 1.1rem;
|
||||
}
|
||||
h2 + p {
|
||||
padding-top: 0;
|
||||
margin-top: 0;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
@media screen and (max-width: 800px){
|
||||
#options{
|
||||
top: unset;
|
||||
bottom: calc(100% + 15px);
|
||||
left: 50%;
|
||||
right: unset;
|
||||
transform: translateX(-50%);
|
||||
z-index: 10;
|
||||
}
|
||||
.top.speech::after {
|
||||
border: 20px solid transparent;
|
||||
border-top-color: var(--bg_color);
|
||||
border-bottom-width: 0;
|
||||
top: unset;
|
||||
bottom: -20px;
|
||||
left: 50%;
|
||||
margin-left: -20px;
|
||||
}
|
||||
font-size: 1rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
{#if user}
|
||||
<button onclick={toggle_options} style="background-image: url(https://bocken.org/static/user/thumb/{user.nickname}.webp)" id=button>
|
||||
<div id=options class="speech top" hidden>
|
||||
<div class="options-wrap" hidden id=options-wrap>
|
||||
<div id=options>
|
||||
<h2>{user.name}</h2>
|
||||
<p>({user.nickname})</p>
|
||||
<ul>
|
||||
@@ -171,6 +152,7 @@ h2 + p{
|
||||
<li><a href="/logout?callbackUrl={encodeURIComponent(getLogoutCallbackUrl($page.url.pathname))}">Log Out</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</button>
|
||||
{:else}
|
||||
<a class=entry href="/login?callbackUrl={encodeURIComponent($page.url.pathname + $page.url.search)}">Login</a>
|
||||
|
||||
@@ -144,6 +144,7 @@
|
||||
top: 0.5em;
|
||||
left: 0.5em;
|
||||
font-size: 1.1rem;
|
||||
font-family: "Noto Color Emoji", "Noto Color Emoji Subset", emoji, sans-serif;
|
||||
filter: drop-shadow(0 0 3px rgba(0,0,0,0.8));
|
||||
z-index: 2;
|
||||
pointer-events: none;
|
||||
|
||||
@@ -130,7 +130,7 @@ ol li::marker{
|
||||
flex-grow: 0;
|
||||
padding: 1em;
|
||||
background-color: var(--color-bg-tertiary);
|
||||
box-shadow: var(--shadow-md);
|
||||
box-shadow: var(--shadow-sm);
|
||||
max-width: 30%
|
||||
}
|
||||
@media screen and (max-width: 500px){
|
||||
|
||||
Reference in New Issue
Block a user