gitadmin/sunscope
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

2.7.1

Browse Source 
Profile style tweaks
This commit is contained in:
fraxle
2026-06-05 05:14:27 +01:00
parent f9b5c2b248
commit 3ebecc841e
2 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/table.css
+11 -8
View File
@@ -174,8 +174,9 @@
position: relative; position: relative;
width: 100%; width: 100%;
padding-top:8px; padding-top:8px;
padding-bottom:4px; padding-bottom:1px;
background-color: #fffcf2; background-color: #fffcf2;
border-top: 1.5px solid #c9b08a;
border-left: 1.5px solid #c9b08a; border-left: 1.5px solid #c9b08a;
border-right: 1.5px solid #c9b08a; border-right: 1.5px solid #c9b08a;
border-bottom: 1.5px solid #c9b08a; border-bottom: 1.5px solid #c9b08a;
@@ -243,12 +244,12 @@
justify-content: center; justify-content: center;
font-size: 22px; font-size: 22px;
line-height: 1; line-height: 1;
opacity: 0.45; opacity: 0.7;
transition: opacity 0.2s; transition: opacity 0.2s;
} }
.profile-btn:hover .profile-btn-scene { .profile-btn:hover .profile-btn-scene {
opacity: 0.7; opacity: 0.8;
} }
.profile-btn.active .profile-btn-scene { .profile-btn.active .profile-btn-scene {
@@ -294,8 +295,9 @@
/* Tab strip above the profile scroll row */ /* Tab strip above the profile scroll row */
.profile-tabs { .profile-tabs {
display: flex; display: flex;
width: 100%; width: 360px;
border-bottom: 1.5px solid #c9b08a; margin-left: auto;
margin-right: auto;
margin-bottom: 0px; margin-bottom: 0px;
} }
.profile-tab { .profile-tab {
@@ -303,11 +305,10 @@
padding: 7px 4px; padding: 7px 4px;
background: transparent; background: transparent;
border: none; border: none;
border-bottom: 2.5px solid transparent; border-bottom: 1.5px solid transparent;
border-left: 1.5px solid #f5edd6; border-left: 1.5px solid #f5edd6;
border-right: 1.5px solid #f5edd6; border-right: 1.5px solid #f5edd6;
border-top: 1.5px solid #f5edd6; border-top: 1.5px solid #f5edd6;
margin-bottom: -1.5px;
font-family: Manrope, sans-serif; font-family: Manrope, sans-serif;
font-size: 11px; font-size: 11px;
font-weight: 700; font-weight: 700;
@@ -317,6 +318,8 @@
cursor: pointer; cursor: pointer;
transition: color 0.15s, border-color 0.15s; transition: color 0.15s, border-color 0.15s;
white-space: nowrap; white-space: nowrap;
border-radius:7px 7px 0px 0px;
z-index:1;
} }
.profile-tab:hover { .profile-tab:hover {
color: #c8922a; color: #c8922a;
@@ -329,7 +332,7 @@
border-left: 1.5px solid #c9b08a; border-left: 1.5px solid #c9b08a;
border-right: 1.5px solid #c9b08a; border-right: 1.5px solid #c9b08a;
border-top: 1.5px solid #c9b08a; border-top: 1.5px solid #c9b08a;
border-radius:7px 7px 0px 0px margin-bottom: -1.5px;
} }
assets/js/components/DayTabs.js
+9 -5
View File
@@ -185,7 +185,7 @@ export function DayTabs({
<button <button
key=${key} key=${key}
class=${`profile-btn${activeProfile === key ? ' active' : ''}${locked ? ' locked' : ''}`} 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` : ''} title=${locked ? `Profile ${profile.label} is part of SunScope Extra` : ''}
onClick=${() => { onClick=${() => {
if (locked) { setProPromptSource(`profile:${key}`); setProPromptDay(0); return; } 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-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>`; </button>`;
})} })}
@@ -201,7 +202,7 @@ export function DayTabs({
<button <button
key=${opt.value} key=${opt.value}
class=${`profile-btn${placeValue === opt.value ? ' active' : ''}${opt.disabled ? ' locked' : ''}`} 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=${() => { onClick=${() => {
if (opt.disabled) { setProPromptSource(`variant:${opt.value}`); setProPromptDay(0); return; } if (opt.disabled) { setProPromptSource(`variant:${opt.value}`); setProPromptDay(0); return; }
try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch(e) {} 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-scene" style=${{ background: opt.scene }}></span>
<span class="profile-btn-label">${opt.name}</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> </button>
`)} `)}
@@ -221,7 +223,7 @@ export function DayTabs({
<button <button
key=${opt.value} key=${opt.value}
class=${`profile-btn${activityValue === opt.value ? ' active' : ''}${opt.disabled ? ' locked' : ''}`} 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=${() => { onClick=${() => {
if (opt.disabled) { setProPromptSource(`variant:${opt.value}`); setProPromptDay(0); return; } if (opt.disabled) { setProPromptSource(`variant:${opt.value}`); setProPromptDay(0); return; }
try { localStorage.setItem('sunscope_profile', 'outdoors'); } catch(e) {} 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-scene" style=${{ background: opt.scene }}></span>
<span class="profile-btn-label">${opt.name}</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> </button>
`)} `)}
@@ -241,7 +244,7 @@ export function DayTabs({
<button <button
key=${opt.value} key=${opt.value}
class=${`profile-btn${workValue === opt.value ? ' active' : ''}${opt.disabled ? ' locked' : ''}`} 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=${() => { onClick=${() => {
if (opt.disabled) { setProPromptSource(`variant:${opt.value}`); setProPromptDay(0); return; } if (opt.disabled) { setProPromptSource(`variant:${opt.value}`); setProPromptDay(0); return; }
if (opt.value === 'farming') { activateProfile('farming'); 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-scene" style=${{ background: opt.scene }}></span>
<span class="profile-btn-label">${opt.name}</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> </button>
`)} `)}