ItsSkaiya/WaifuBoard
3
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 8 Wiki Activity

added custom titlebar to electron

Browse Source
This commit is contained in:
lenafx
2025-12-05 12:47:19 +01:00
parent db74808e6c
commit 0da70f8e6a
20 changed files with 497 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
views/anime/anime.html
View File

@@ -7,8 +7,20 @@
<title>WaifuBoard</title>
<link rel="stylesheet" href="/views/css/anime/anime.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<script src="/src/scripts/titlebar.js"></script>
<link rel="stylesheet" href="/views/css/titlebar.css">
</head>
<body>
<div id="titlebar"> <div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<span class="app-title">WaifuBoard</span>
</div>
<div class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<div class="modal-overlay" id="desc-modal">
@@ -143,7 +155,6 @@
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/rpc-inapp.js"></script>
<script src="/src/scripts/anime/anime.js"></script>
</body>
</html>

14
views/anime/index.html
View File

@@ -6,9 +6,21 @@
<title>WaifuBoard</title>
<link rel="stylesheet" href="/views/css/anime/home.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/titlebar.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<script src="/src/scripts/titlebar.js"></script>
</head>
<body>
<body >
<div id="titlebar"><div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<span class="app-title">WaifuBoard</span>
</div>
<div class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<nav class="navbar" id="navbar">
<a href="/" class="nav-brand">

17
views/anime/watch.html
View File

@@ -3,7 +3,6 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<base href="/">
<title>WaifuBoard Watch</title>
<link rel="stylesheet" href="/views/css/anime/watch.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
@@ -11,11 +10,21 @@
<link rel="stylesheet" href="https://cdn.plyr.io/3.7.8/plyr.css" />
<script src="https://cdn.plyr.io/3.7.8/plyr.js"></script>
<link rel="icon" href="/public/assets/waifuboards.ico">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/views/css/titlebar.css">
<script src="/src/scripts/titlebar.js"></script>
</head>
<body>
<div id="titlebar"> <div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<span class="app-title">WaifuBoard</span>
</div>
<div class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<header class="top-bar">
<a href="#" id="back-link" class="back-btn">

12
views/books/book.html
View File

@@ -8,8 +8,20 @@
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link rel="stylesheet" href="/views/css/books/book.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/titlebar.css">
<script src="/src/scripts/titlebar.js"></script>
</head>
<body>
<div id="titlebar"> <div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<span class="app-title">WaifuBoard</span>
</div>
<div class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<a href="/books" class="back-btn">

12
views/books/books.html
View File

@@ -4,12 +4,24 @@
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WaifuBoard Books</title>
<link rel="stylesheet" href="/views/css/titlebar.css">
<link rel="stylesheet" href="/views/css/books/books.css">
<script src="/src/scripts/books/books.js" defer></script>
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<script src="/src/scripts/titlebar.js"></script>
</head>
<body>
<div id="titlebar"> <div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<span class="app-title">WaifuBoard</span>
</div>
<div class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<nav class="navbar" id="navbar">
<a href="/" class="nav-brand">

13
views/books/read.html
View File

@@ -7,9 +7,20 @@
<link rel="stylesheet" href="/views/css/books/reader.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/views/css/titlebar.css">
<script src="/src/scripts/titlebar.js"></script>
</head>
<body>
<div id="titlebar"> <div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<span class="app-title">WaifuBoard</span>
</div>
<div class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<header class="top-bar">
<button id="back-btn" class="glass-btn">

74
views/css/anime/watch.css
View File

@@ -39,19 +39,12 @@
--plyr-color-main: var(--color-primary);
}
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
padding: 0;
background-color: var(--color-bg-base);
color: var(--color-text-primary);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
line-height: 1.6;
font-family: 'Inter', system-ui, sans-serif;
overflow-x: hidden;
-webkit-font-smoothing: antialiased;
}
@@ -577,35 +570,6 @@ body {
background: transparent;
}
.character-card {
--card-min-width: 280px;
flex: 1 1 var(--card-min-width);
max-width: calc((100% - var(--spacing-lg) * 3) / 4);
min-width: var(--card-min-width);
height: 92px;
display: flex;
align-items: center;
background: var(--color-bg-card);
border: var(--border-subtle);
border-radius: var(--radius-md);
padding: var(--spacing-md);
gap: var(--spacing-md);
transition: all var(--transition-fast);
}
.character-card:hover {
border-color: var(--color-primary);
box-shadow: 0 8px 25px rgba(139, 92, 246, 0.15);
transform: translateY(-2px);
}
.character-card-img { width: 60px; height: 60px; object-fit: cover; border-radius: var(--radius-sm); flex-shrink: 0; }
.character-details { overflow: hidden; flex: 1; }
.character-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actor-name { font-size: 0.875rem; color: var(--color-text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plyr--video { border-radius: var(--radius-xl); }
.plyr__controls { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%) !important; padding: 1rem 1.5rem 1.5rem !important; }
.plyr--full-ui input[type=range] { color: var(--color-primary); }
@@ -624,16 +588,6 @@ body {
text-align: center;
margin-bottom: var(--spacing-lg);
}
.character-card {
max-width: calc((100% - var(--spacing-lg) * 2) / 3);
}
@media (min-width: 1400px) {
.character-card {
max-width: calc((100% - var(--spacing-lg) * 3) / 4);
}
}
}
@media (max-width: 768px) {
@@ -671,21 +625,6 @@ body {
.episode-controls { flex-direction: column; gap: var(--spacing-md); }
.navigation-buttons { width: 100%; justify-content: center; }
.nav-btn { flex: 1; justify-content: center; }
.characters-carousel {
justify-content: flex-start;
gap: var(--spacing-md);
max-height: 194px;
padding: 0;
}
.character-card {
--card-min-width-sm: 45%;
flex: 1 1 var(--card-min-width-sm);
min-width: unset;
max-width: unset;
height: 85px;
}
}
@media (max-width: 480px) {
@@ -712,15 +651,4 @@ body {
flex: 1 1 100%;
}
}
.ui-scale-wrapper {
transform: none;
transform-origin: unset;
width: 100%;
max-width: 100%;
margin: 0 auto;
padding-top: 0;
}

22
views/css/books/books.css
View File

@@ -336,26 +336,4 @@ body {
position: fixed; top: 120px; left: 0; right: 0;
width: 100%; border-radius: 0; max-height: 60vh; border: none; z-index: 2001;
}
}
.adv-search-btn {
position: absolute;
top: 50%; /* Centrado verticalmente */
right: 5px; /* Ajusta la distancia del borde derecho */
transform: translateY(-50%); /* Ajuste fino de centrado */
/* Estilos para que parezca un botón de icono */
background: transparent;
border: none;
cursor: pointer;
padding: 5px; /* Área de clic cómoda */
line-height: 0; /* Elimina espacio extra */
/* Opcional: Dale un color de icono que combine */
transition: color 0.2s;
}
/* 3. Efecto al pasar el ratón (hover) */
.adv-search-btn:hover {
color: var(--color-primary, #fff); /* Cambia de color al pasar el mouse */
}

2
views/css/books/reader.css
View File

@@ -30,7 +30,7 @@
body {
background: var(--bg-base);
color: var(--text-primary);
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
font-family: 'Inter', system-ui, sans-serif;
overflow-x: hidden;
line-height: 1.6;
}

3
views/css/gallery/image.css
View File

@@ -253,6 +253,9 @@
color: white; text-decoration: none; font-weight: 600;
transition: all 0.2s ease;
}
body.electron .back-btn {
top: 115px !important;
}
.back-btn:hover { background: rgba(255, 255, 255, 0.15); transform: translateX(-5px); }
@media (max-width: 768px) {

153
views/css/titlebar.css Normal file
View File

@@ -0,0 +1,153 @@
:root {
--titlebar-height: 40px;
}
* {
box-sizing: border-box;
}
html {
background: #09090b;
visibility: hidden;
}
html.electron {
margin: 0;
box-sizing: border-box;
}
html.electron .navbar,
html.electron .top-bar {
top: var(--titlebar-height) !important;
}
html.electron .back-btn {
top: 55px !important;
}
#back-link {
margin-top: 55px !important;
}
#titlebar {
display: none;
height: var(--titlebar-height);
background: rgba(9, 9, 11, 0.95);
color: white;
align-items: center;
justify-content: space-between;
padding: 0 12px;
-webkit-app-region: drag;
user-select: none;
font-family: 'Inter', system-ui, sans-serif;
border-bottom: 1px solid rgba(139, 92, 246, 0.2);
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 999999;
backdrop-filter: blur(12px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.title-left {
display: flex;
align-items: center !important;
gap: 10px;
}
#titlebar .app-icon {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 6px;
background: rgba(139, 92, 246, 0.15);
border: 1px solid rgba(139, 92, 246, 0.3);
padding: 3px;
}
#titlebar .app-icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.app-title {
font-size: 13px;
font-weight: 600;
color: rgba(255, 255, 255, 0.9);
letter-spacing: -0.2px;
}
.title-right {
display: flex;
height: 100%;
gap: 1px;
}
.title-right button {
-webkit-app-region: no-drag;
border: none;
background: transparent;
color: rgba(255, 255, 255, 0.7);
width: 46px;
height: 100%;
cursor: pointer;
font-size: 16px;
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.title-right button svg {
width: 16px;
height: 16px;
transition: transform 0.2s;
}
.title-right button:hover {
color: white;
}
.title-right button:active {
transform: scale(0.95);
}
.title-right .min:hover {
background: rgba(139, 92, 246, 0.2);
}
.title-right .max:hover {
background: rgba(34, 197, 94, 0.2);
}
.title-right .close:hover {
background: #e81123;
color: white;
}
.title-right button:hover svg {
transform: scale(1.1);
}
html.electron::-webkit-scrollbar {
width: 12px;
}
html.electron::-webkit-scrollbar-track {
background: #09090b;
margin-top: var(--titlebar-height);
}
html.electron::-webkit-scrollbar-thumb {
background: rgba(139, 92, 246, 0.3);
border-radius: 6px;
border: 2px solid #09090b;
}
html.electron::-webkit-scrollbar-thumb:hover {
background: rgba(139, 92, 246, 0.5);
}

12
views/gallery/gallery.html
View File

@@ -11,8 +11,20 @@
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js" async></script>
<link rel="stylesheet" href="/views/css/titlebar.css">
<script src="/src/scripts/titlebar.js"></script>
</head>
<body>
<div id="titlebar"> <div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<span class="app-title">WaifuBoard</span>
</div>
<div class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<nav class="navbar" id="navbar">
<a href="/" class="nav-brand">

12
views/gallery/image.html
View File

@@ -6,12 +6,24 @@
<title id="page-title">WaifuBoard - Gallery Item</title>
<link rel="stylesheet" href="/views/css/anime/home.css">
<link rel="stylesheet" href="/views/css/gallery/gallery.css">
<link rel="stylesheet" href="/views/css/titlebar.css">
<link rel="stylesheet" href="/views/css/gallery/image.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<script src="/src/scripts/titlebar.js"></script>
</head>
<body>
<div id="titlebar"> <div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<span class="app-title">WaifuBoard</span>
</div>
<div class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<nav class="navbar" id="navbar">
<a href="/" class="nav-brand">

13
views/marketplace.html
View File

@@ -8,8 +8,20 @@
<link rel="stylesheet" href="/views/css/marketplace.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="icon" href="/public/assets/waifuboards.ico" type="image/x-icon">
<link rel="stylesheet" href="/views/css/titlebar.css">
<script src="/src/scripts/titlebar.js"></script>
</head>
<body>
<div id="titlebar"> <div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<span class="app-title">WaifuBoard</span>
</div>
<div class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<nav class="navbar" id="navbar">
<a href="/" class="nav-brand">
@@ -107,5 +119,6 @@
<script src="/src/scripts/updateNotifier.js"></script>
<script src="/src/scripts/rpc-inapp.js"></script>
<script src="/src/scripts/marketplace.js"></script>
<script src="/src/scripts/titlebar.js"></script>
</body>
</html>

13
views/schedule.html
View File

@@ -10,9 +10,20 @@
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap" rel="stylesheet">
<link rel="stylesheet" href="/views/css/schedule/schedule.css">
<link rel="stylesheet" href="/views/css/updateNotifier.css">
<link rel="stylesheet" href="/views/css/titlebar.css">
<script src="/src/scripts/titlebar.js"></script>
</head>
<body>
<div id="titlebar"> <div class="title-left">
<img class="app-icon" src="/public/assets/waifuboards.ico" alt=""/>
<span class="app-title">WaifuBoard</span>
</div>
<div class="title-right">
<button class="min">—</button>
<button class="max">🗖</button>
<button class="close">✕</button>
</div>
</div>
<div class="ambient-bg" id="ambientBg"></div>