2.7.1
Profile style tweaks
This commit is contained in:
+11
-8
@@ -174,8 +174,9 @@
|
||||
position: relative;
|
||||
width: 100%;
|
||||
padding-top:8px;
|
||||
padding-bottom:4px;
|
||||
padding-bottom:1px;
|
||||
background-color: #fffcf2;
|
||||
border-top: 1.5px solid #c9b08a;
|
||||
border-left: 1.5px solid #c9b08a;
|
||||
border-right: 1.5px solid #c9b08a;
|
||||
border-bottom: 1.5px solid #c9b08a;
|
||||
@@ -243,12 +244,12 @@
|
||||
justify-content: center;
|
||||
font-size: 22px;
|
||||
line-height: 1;
|
||||
opacity: 0.45;
|
||||
opacity: 0.7;
|
||||
transition: opacity 0.2s;
|
||||
}
|
||||
|
||||
.profile-btn:hover .profile-btn-scene {
|
||||
opacity: 0.7;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.profile-btn.active .profile-btn-scene {
|
||||
@@ -294,8 +295,9 @@
|
||||
/* Tab strip above the profile scroll row */
|
||||
.profile-tabs {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
border-bottom: 1.5px solid #c9b08a;
|
||||
width: 360px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.profile-tab {
|
||||
@@ -303,11 +305,10 @@
|
||||
padding: 7px 4px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
border-bottom: 2.5px solid transparent;
|
||||
border-bottom: 1.5px solid transparent;
|
||||
border-left: 1.5px solid #f5edd6;
|
||||
border-right: 1.5px solid #f5edd6;
|
||||
border-top: 1.5px solid #f5edd6;
|
||||
margin-bottom: -1.5px;
|
||||
font-family: Manrope, sans-serif;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
@@ -317,6 +318,8 @@
|
||||
cursor: pointer;
|
||||
transition: color 0.15s, border-color 0.15s;
|
||||
white-space: nowrap;
|
||||
border-radius:7px 7px 0px 0px;
|
||||
z-index:1;
|
||||
}
|
||||
.profile-tab:hover {
|
||||
color: #c8922a;
|
||||
@@ -329,7 +332,7 @@
|
||||
border-left: 1.5px solid #c9b08a;
|
||||
border-right: 1.5px solid #c9b08a;
|
||||
border-top: 1.5px solid #c9b08a;
|
||||
border-radius:7px 7px 0px 0px
|
||||
margin-bottom: -1.5px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -185,7 +185,7 @@ export function DayTabs({
|
||||
<button
|
||||
key=${key}
|
||||
class=${`profile-btn${activeProfile === key ? ' active' : ''}${locked ? ' locked' : ''}`}
|
||||
style=${{ opacity: locked ? 0.6 : 1, cursor: locked ? 'not-allowed' : 'pointer', position: 'relative' }}
|
||||
style=${{ filter: locked ? 'grayscale(100%)' : 'none', cursor: 'pointer', position: 'relative' }}
|
||||
title=${locked ? `Profile ${profile.label} is part of SunScope Extra` : ''}
|
||||
onClick=${() => {
|
||||
if (locked) { setProPromptSource(`profile:${key}`); setProPromptDay(0); return; }
|
||||
@@ -193,7 +193,8 @@ export function DayTabs({
|
||||
}}
|
||||
>
|
||||
<span class="profile-btn-scene" style=${{ background: profile.scene }}>${profile.scene.includes('url(') ? null : profile.icon}</span>
|
||||
<span class="profile-btn-label">${profile.label}${locked ? ' locked' : ''}</span>
|
||||
<span class="profile-btn-label">${profile.label}</span>
|
||||
${locked && html`<span style=${{ position: 'absolute', top: '3px', right: '5px', fontSize: '10px', opacity: 0.85 }}>🔒</span>`}
|
||||
</button>`;
|
||||
})}
|
||||
|
||||
@@ -201,7 +202,7 @@ export function DayTabs({
|
||||
<button
|
||||
key=${opt.value}
|
||||
class=${`profile-btn${placeValue === opt.value ? ' active' : ''}${opt.disabled ? ' locked' : ''}`}
|
||||
style=${{ opacity: opt.disabled ? 0.6 : 1, cursor: opt.disabled ? 'not-allowed' : 'pointer', position: 'relative' }}
|
||||
style=${{ filter: opt.disabled ? 'grayscale(100%)' : 'none', cursor: 'pointer', position: 'relative' }}
|
||||
onClick=${() => {
|
||||
if (opt.disabled) { setProPromptSource(`variant:${opt.value}`); setProPromptDay(0); return; }
|
||||
try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch(e) {}
|
||||
@@ -214,6 +215,7 @@ export function DayTabs({
|
||||
>
|
||||
<span class="profile-btn-scene" style=${{ background: opt.scene }}></span>
|
||||
<span class="profile-btn-label">${opt.name}</span>
|
||||
${opt.disabled && html`<span style=${{ position: 'absolute', top: '3px', right: '5px', fontSize: '10px', opacity: 0.85 }}>🔒</span>`}
|
||||
</button>
|
||||
`)}
|
||||
|
||||
@@ -221,7 +223,7 @@ export function DayTabs({
|
||||
<button
|
||||
key=${opt.value}
|
||||
class=${`profile-btn${activityValue === opt.value ? ' active' : ''}${opt.disabled ? ' locked' : ''}`}
|
||||
style=${{ opacity: opt.disabled ? 0.6 : 1, cursor: opt.disabled ? 'not-allowed' : 'pointer', position: 'relative' }}
|
||||
style=${{ filter: opt.disabled ? 'grayscale(100%)' : 'none', cursor: 'pointer', position: 'relative' }}
|
||||
onClick=${() => {
|
||||
if (opt.disabled) { setProPromptSource(`variant:${opt.value}`); setProPromptDay(0); return; }
|
||||
try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch(e) {}
|
||||
@@ -234,6 +236,7 @@ export function DayTabs({
|
||||
>
|
||||
<span class="profile-btn-scene" style=${{ background: opt.scene }}></span>
|
||||
<span class="profile-btn-label">${opt.name}</span>
|
||||
${opt.disabled && html`<span style=${{ position: 'absolute', top: '3px', right: '5px', fontSize: '10px', opacity: 0.85 }}>🔒</span>`}
|
||||
</button>
|
||||
`)}
|
||||
|
||||
@@ -241,7 +244,7 @@ export function DayTabs({
|
||||
<button
|
||||
key=${opt.value}
|
||||
class=${`profile-btn${workValue === opt.value ? ' active' : ''}${opt.disabled ? ' locked' : ''}`}
|
||||
style=${{ opacity: opt.disabled ? 0.6 : 1, cursor: opt.disabled ? 'not-allowed' : 'pointer', position: 'relative' }}
|
||||
style=${{ filter: opt.disabled ? 'grayscale(100%)' : 'none', cursor: 'pointer', position: 'relative' }}
|
||||
onClick=${() => {
|
||||
if (opt.disabled) { setProPromptSource(`variant:${opt.value}`); setProPromptDay(0); return; }
|
||||
if (opt.value === 'farming') { activateProfile('farming'); return; }
|
||||
@@ -255,6 +258,7 @@ export function DayTabs({
|
||||
>
|
||||
<span class="profile-btn-scene" style=${{ background: opt.scene }}></span>
|
||||
<span class="profile-btn-label">${opt.name}</span>
|
||||
${opt.disabled && html`<span style=${{ position: 'absolute', top: '3px', right: '5px', fontSize: '10px', opacity: 0.85 }}>🔒</span>`}
|
||||
</button>
|
||||
`)}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user