GTA
/
training-academy
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 3 Wiki Activity

Add stacked layout for Library theme - organized columns with proper spacing and styling

This commit is contained in:
dilgenfritz 2025-11-11 21:00:10 -06:00
parent 2a27dee37b
commit de0d0ab55f
2 changed files with 39 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
index.html
View File

@ -1314,6 +1314,9 @@
console.log('Applying theme:', theme); console.log('Applying theme:', theme);
const characterSides = document.querySelectorAll('.character-side'); const characterSides = document.querySelectorAll('.character-side');
// Remove any existing theme classes
document.body.classList.remove('library-theme');
if (theme === 'none') { if (theme === 'none') {
characterSides.forEach(element => { characterSides.forEach(element => {
element.style.display = 'none'; element.style.display = 'none';
@ -1323,6 +1326,8 @@
} }
if (theme === 'library') { if (theme === 'library') {
// Add library theme class for CSS targeting
document.body.classList.add('library-theme');
// Use random images from user's library // Use random images from user's library
await applyLibraryTheme(characterSides); await applyLibraryTheme(characterSides);
localStorage.setItem('selectedTheme', theme); localStorage.setItem('selectedTheme', theme);

34
src/styles/styles.css
View File

@ -6628,6 +6628,40 @@ button#start-mirror-btn:disabled {
height: 300px; height: 300px;
} }
/* Library Theme - Stacked Layout */
.library-theme .character-side {
width: 120px !important;
height: 160px !important;
background-size: cover !important;
border: 2px solid rgba(255, 255, 255, 0.2);
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.library-theme .character-side.left {
left: 10px !important;
transform: none !important;
}
.library-theme .character-side.right {
right: 10px !important;
transform: none !important;
}
/* Stack left column from top */
.library-theme .character-side.left:nth-of-type(1) { top: 20px !important; }
.library-theme .character-side.left:nth-of-type(3) { top: 190px !important; }
.library-theme .character-side.left:nth-of-type(5) { top: 360px !important; }
.library-theme .character-side.left:nth-of-type(7) { top: 530px !important; }
.library-theme .character-side.left:nth-of-type(9) { top: 700px !important; }
/* Stack right column from top */
.library-theme .character-side.right:nth-of-type(2) { top: 20px !important; }
.library-theme .character-side.right:nth-of-type(4) { top: 190px !important; }
.library-theme .character-side.right:nth-of-type(6) { top: 360px !important; }
.library-theme .character-side.right:nth-of-type(8) { top: 530px !important; }
.library-theme .character-side.right:nth-of-type(10) { top: 700px !important; }
/* Background Characters */ /* Background Characters */
.character-background { .character-background {
position: absolute; position: absolute;