diff --git a/css/base.css b/css/base.css
index b5b927671..e8bcee31b 100644
--- a/css/base.css
+++ b/css/base.css
@@ -3,12 +3,15 @@
padding: 0;
box-sizing: border-box;
font-size: 16px;
- font-family: ".SFNSText-Regular", "BlinkMacSystemFont", "Helvetica Neue",
- "Segoe UI", "Arial", sans-serif;
+ /* font-family: ".SFNSText-Regular", "BlinkMacSystemFont", "Helvetica Neue",
+ "Segoe UI", "Arial", sans-serif; */
+
+ font-family: 'Roboto', monospace;
+ /* font-family: "Amore", cursive; */
}
/* TODO figure out why the default focus color in Electron is orange */
*:focus {
- outline-color: rgb(0, 117, 255);
+ outline-color: rgb(0, 255, 191);
}
.dark-mode *:focus {
outline-color: transparent;
@@ -30,16 +33,16 @@ button {
}
body,
html {
- background-color: #fff;
- color: #000;
+ background-color: #fff; /* Color de fondo para tema claro por defecto */
+ color: #000; /* Color de texto para tema claro por defecto */
height: 100%;
overflow: hidden;
-webkit-user-select: none;
}
body.dark-mode {
- background-color: rgb(33, 37, 43);
- color: lightgrey;
+ background-color: var(--theme-background-color);
+ color: var(--theme-text-color);
}
h1,
@@ -55,6 +58,13 @@ h3 {
h2 {
text-align: left;
font-size: 2.75em;
+ margin: 0.5em 0;
+ font-weight: 300;
+ opacity: 0.8;
+ color: inherit;
+}
+h2:first-of-type {
+ border-top: none;
}
h3 {
text-align: left;
@@ -95,19 +105,64 @@ a {
/* styled scrollbars */
-.has-thin-scrollbar::-webkit-scrollbar {
- height: 0.25em;
+/* Estilo global para todas las scrollbars */
+::-webkit-scrollbar {
+ width: 8px; /* Ancho reducido */
+ height: 8px; /* Alto reducido para scrollbars horizontales */
}
-.has-thin-scrollbar::-webkit-scrollbar-track {
- background-color: rgba(0, 0, 0, 0.05);
+
+::-webkit-scrollbar-track {
+ background: transparent; /* Hacemos el track invisible */
+}
+
+::-webkit-scrollbar-thumb {
+ background-color: rgba(0, 0, 0, 0.3); /* Un color oscuro semitransparente para el thumb */
+ border-radius: 10px; /* Bordes redondeados */
+ border: 2px solid transparent; /* Espacio alrededor del thumb */
+ background-clip: content-box; /* Para que el borde sea transparente y no afecte el color del thumb */
}
-.has-thin-scrollbar::-webkit-scrollbar-thumb {
- background-color: rgba(0, 0, 0, 0.175);
- border-radius: 0.25em;
+
+::-webkit-scrollbar-thumb:hover {
+ background-color: rgba(0, 0, 0, 0.5);
}
-.dark-theme .has-thin-scrollbar::-webkit-scrollbar-track {
- background-color: rgba(255, 255, 255, 0.25);
+
+/* Estilo para el tema oscuro */
+body.dark-mode ::-webkit-scrollbar-thumb {
+ background-color: rgba(20, 18, 18, 0.3); /* Un color claro semitransparente para el thumb en modo oscuro */
}
-.dark-theme .has-thin-scrollbar::-webkit-scrollbar-thumb {
- background-color: rgba(255, 255, 255, 0.6);
+
+body.dark-mode ::-webkit-scrollbar-thumb:hover {
+ background-color: rgba(255, 255, 255, 0.5);
+}
+
+.section-separator {
+ /* Eliminado: restauración del archivo original */
+}
+
+#navbar {
+ display: flex;
+ height: calc(36px + var(--control-space-top));
+ transition: 0.2s background-color; /* <- Importante: ya hay una transición de color */
+ width: 100%;
+ -webkit-user-select: none;
+ position: relative;
+ outline: none;
+ z-index: 2;
+ padding-top: var(--control-space-top);
+ padding-left: var(--control-space-left);
+ padding-right: var(--control-space-right);
+ background-color: var(--navbar-light); /* Color para tema claro por defecto */
+}
+
+/* Estilos de la barra de navegación */
+/* #navbar {
+ background-color: var(--navbar-light) !important;
+}
+
+body.dark-theme #navbar {
+ background-color: var(--navbar-dark) !important;
+} */
+
+.dark-theme #navbar { /* O body.dark-theme #navbar si es más consistente con el resto */
+ background-color: var(--navbar-dark); /* Color para tema oscuro */
}
diff --git a/css/custom-theme.css b/css/custom-theme.css
new file mode 100644
index 000000000..3fbad4be0
--- /dev/null
+++ b/css/custom-theme.css
@@ -0,0 +1,135 @@
+:root {
+ /* --- Dark Developer Theme --- */
+
+ /* Colores principales */
+ --primary-color: #61AFEF; /* Azul Eléctrico (Atom/VSCode) */
+ --secondary-color: #98C379; /* Verde Suave (Atom/VSCode) */
+ --accent-color: #E5C07B; /* Amarillo/Dorado Suave (Atom/VSCode) */
+ --danger-color: #E06C75; /* Rojo para cierres/alertas (Atom/VSCode) */
+
+ /* Colores de fondo */
+ --background-light: #FAFAFA; /* Gris muy claro (para tema claro opcional) */
+ --background-dark: rgb(15, 23, 42); /* NUEVO FONDO OSCURO */
+
+ /* Colores de texto */
+ --text-light: #333333; /* Gris oscuro (para tema claro opcional) */
+ --text-dark: #ABB2BF; /* Gris claro (Atom/VSCode) */
+
+ /* Colores de la barra de navegación (Dark) */
+ --navbar-light: #E0E0E0; /* Mantener un fallback para tema claro */
+ --navbar-dark: #21252B; /* Ligeramente más claro que el fondo oscuro */
+
+ /* Colores de pestañas (Dark) */
+ --tab-active-dark: rgba(97, 175, 239, 0.15); /* Azul primario con opacidad */
+ --tab-hover-dark: rgba(97, 175, 239, 0.1); /* Azul primario con menor opacidad */
+ /* Para pestañas inactivas, generalmente toman el color de --navbar-dark o un gris muy sutil */
+
+ /* Fallbacks para tema claro (pueden mantenerse o ajustarse si se usa el tema claro) */
+ --tab-active-light: rgba(97, 175, 239, 0.1);
+ --tab-hover-light: rgba(0, 0, 0, 0.05);
+
+ --rgb-dark-base: 15, 23, 42; /* Definimos los componentes RGB */
+ --tw-bg-opacity: 1; /* Tu variable de opacidad, default a 1 */
+ --background-dark: rgba(var(--rgb-dark-base), var(--tw-bg-opacity));
+}
+
+/* Tema claro (configuración básica) */
+body {
+ --theme-background-color: var(--background-light);
+ --theme-text-color: var(--text-light);
+ --theme-accent-color: var(--primary-color);
+ position: relative; /* Necesario para que el z-index del ::before funcione correctamente */
+ background-color: var(--theme-background-color);
+ color: var(--theme-text-color); /* Asegura que el color de texto del tema se aplique */
+}
+
+/* Tema oscuro (enfoque principal) */
+body.dark-theme, body.dark-mode { /* Unificado y asegura que ambas clases activen estos estilos */
+ --theme-background-color: var(--background-dark);
+ --theme-text-color: rgb(204, 214, 246); /* NUEVO color de texto para modo oscuro */
+ --theme-accent-color: var(--secondary-color); /* O --primary-color según preferencia */
+}
+
+/* CSS para el efecto Spotlight sobre el fondo oscuro */
+body.dark-theme::before {
+ content: "";
+ position: fixed; /* Se mueve con la ventana, no con el scroll del body */
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: radial-gradient(
+ circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), /* Tamaño del spotlight y posición (default centro) */
+ rgba(255, 255, 255, 0.08) 0%, /* Luz blanca muy sutil en el centro */
+ transparent 70% /* Se desvanece a transparente, mostrando el fondo oscuro del body */
+ );
+ pointer-events: none; /* Para que no interfiera con los clics en la página */
+ z-index: 0; /* Sutilmente por encima del fondo del body pero detrás del contenido principal */
+ /* Ajustar si es necesario. Si el contenido del body tiene z-index, este podría necesitar ser más alto o más bajo. */
+}
+
+/* Estilos de la barra de navegación */
+#navbar {
+ background-color: var(--navbar-light) !important; /* Fallback tema claro */
+}
+
+body.dark-theme #navbar {
+ background-color: var(--navbar-dark) !important;
+}
+
+/* Estilos de las pestañas */
+.tab-item {
+ /* Los estilos de pestañas inactivas en tema oscuro suelen heredar de #navbar o tener un color muy sutil */
+ /* Se podría añadir una variable --tab-inactive-dark si se quiere más control */
+}
+
+.tab-item.active {
+ background-color: var(--tab-active-light) !important; /* Fallback tema claro */
+}
+
+body.dark-theme .tab-item.active {
+ background-color: var(--tab-active-dark) !important;
+}
+
+.tab-item:hover {
+ background-color: var(--tab-hover-light) !important; /* Fallback tema claro */
+}
+
+body.dark-theme .tab-item:hover {
+ background-color: var(--tab-hover-dark) !important;
+}
+
+/* Estilos de botones de acción de la navbar (ej. nueva pestaña) */
+.navbar-action-button {
+ color: var(--theme-text-color) !important;
+}
+
+body.dark-theme .navbar-action-button {
+ color: var(--text-dark) !important; /* Asegurar que los iconos usen el color de texto del tema oscuro */
+}
+
+.navbar-action-button:hover {
+ background-color: var(--theme-accent-color) !important;
+ color: var(--background-dark) !important; /* Texto oscuro sobre fondo de acento */
+}
+
+body.dark-theme .navbar-action-button:hover {
+ background-color: var(--primary-color) !important; /* Usar primario para hover en tema dark */
+ color: var(--background-dark) !important;
+}
+
+/* Botones de ventana (Minimizar, Maximizar, Cerrar) */
+/* Estos son más complejos de temar con variables globales ya que dependen de la plataforma */
+/* Sin embargo, podemos intentar influir en el color de los iconos si son fuentes */
+.window-controls .element {
+ /* color: var(--text-dark); */ /* Intento para iconos de ventana en dark mode */
+}
+
+/* Estilos de la barra de búsqueda */
+#searchbar {
+ background-color: var(--navbar-light) !important; /* Fallback tema claro */
+}
+
+body.dark-theme #searchbar {
+ background-color: var(--navbar-dark) !important;
+}
\ No newline at end of file
diff --git a/css/tabBar.css b/css/tabBar.css
index e956064a5..fe7479da2 100644
--- a/css/tabBar.css
+++ b/css/tabBar.css
@@ -1,6 +1,6 @@
#navbar {
display: flex;
- height: calc(36px + var(--control-space-top));
+ height: calc(28px + var(--control-space-top));
transition: 0.2s background-color;
width: 100%;
-webkit-user-select: none;
@@ -101,8 +101,8 @@ body.linux #menu-button {
flex: 1;
min-width: 125px;
transition: 0.2s transform;
- line-height: 36px;
- height: 36px;
+ line-height: 28px;
+ height: 28px;
overflow: hidden;
word-break: break-all;
position: relative;
@@ -185,7 +185,7 @@ body:not(.touch)
.tab-item .tab-icon {
position: relative;
- font-size: 0.875em;
+ font-size: 0.75em;
box-sizing: border-box;
display: flex;
justify-content: center;
@@ -194,8 +194,8 @@ body:not(.touch)
}
.tab-item .tab-icon:not(.permission-request-icon):hover:after {
content: "";
- width: 24px;
- height: 24px;
+ width: 20px;
+ height: 20px;
border-radius: 50%;
background: rgba(0, 0, 0, 0.075);
position: absolute;
@@ -204,11 +204,13 @@ body:not(.touch)
transform: translate(-50%, -50%);
z-index: -1;
}
-.dark-theme .tab-item .tab-icon:hover:after {
+.dark-theme .tab-item .tab-icon:not(.permission-request-icon):hover:after {
background: rgba(255, 255, 255, 0.15);
}
.tab-item.active:not(:only-child) {
background: rgba(0, 0, 0, 0.06);
+ display: block;
+ margin-top: 2px;
}
.dark-theme .tab-item.active:not(:only-child) {
background: rgba(255, 255, 255, 0.2);
@@ -285,15 +287,18 @@ body:not(.touch)
.navbar-action-button {
padding: 0 1rem;
- height: 36px;
- margin-top: -0.5px;
- font-size: 1.4em !important;
+ height: 28px;
+ margin-top: 0;
+ font-size: 1em !important;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
}
body.windows .navbar-action-button:not(:disabled):hover {
background-color: rgba(0, 0, 0, 0.075);
}
body.windows.dark-theme .navbar-action-button:not(:disabled):hover {
- background: rgba(255, 255, 255, 0.075);
+ background: rgba(255, 255, 255, 0.15);
}
.navbar-action-button.invisible {
visibility: hidden;
@@ -307,15 +312,16 @@ body.windows.dark-theme .navbar-action-button:not(:disabled):hover {
.navbar-right-actions #add-tab-button {
padding: 0;
- width: 36px;
- font-size: 1.6em !important;
+ width: auto;
+ font-size: 1.3em !important;
+ color: var(--accent-color);
}
/* audio button */
.tab-item .tab-audio-button {
vertical-align: text-bottom;
padding: 0;
- font-size: 1.1em !important;
+ font-size: 1em !important;
}
/* reader button */
@@ -323,7 +329,7 @@ body.windows.dark-theme .navbar-action-button:not(:disabled):hover {
.tab-item .reader-button {
display: none;
vertical-align: text-bottom;
- font-size: 1.1em !important;
+ font-size: 1em !important;
order: -1;
}
.tab-item.active .reader-button.can-reader {
@@ -373,7 +379,7 @@ body.windows.dark-theme .navbar-action-button:not(:disabled):hover {
/* in Carbon, close icon is a bit smaller than other icons, enlarge it in order to match with other icons */
.tab-item .tab-close-button {
- font-size: 1.25em;
+ font-size: 1.0em;
box-sizing: border-box;
order: 1;
}
@@ -432,3 +438,37 @@ body:not(.dark-theme) .progress-bar {
transform: translateX(0%);
transition: transform 500ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
+
+.tab-bar, .navbar-action-button, .tab-item {
+ font-family: 'MesloLGL Nerd Font', 'MesloLGL NF', 'MesloLGLDZ Nerd Font', 'MesloLGLDZ NF', monospace;
+}
+
+body.windows:not(.separate-titlebar) .windows-caption-buttons {
+ display: flex;
+ position: absolute;
+ top: var(--control-space-top);
+ right: 0;
+ z-index: 10;
+}
+
+.windows-caption-buttons .element {
+ line-height: 28px;
+ width: 36px;
+ stroke: #000;
+ padding: 0 5px;
+ box-sizing: content-box;
+ fill: transparent;
+ text-align: center;
+}
+
+#switch-task-button svg {
+ width: 0.8em;
+ height: 0.8em;
+ display: block;
+ margin-top: 2px;
+}
+
+/* Nueva regla para el color del icono en hover */
+/* .tab-item .tab-icon:not(.permission-request-icon):hover { <---- ESTA SECCION COMPLETA DEBE SER ELIMINADA
+ color: var(--accent-color);
+} */
diff --git a/css/taskOverlay.css b/css/taskOverlay.css
index 0b2f0965f..841a33edb 100644
--- a/css/taskOverlay.css
+++ b/css/taskOverlay.css
@@ -53,18 +53,38 @@
top: var(--control-space-top);
right: var(--control-space-right);
z-index: 4;
- padding: 0.5em;
+ padding: 0 8px;
+ height: 28px;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
#switch-task-button.active {
color: royalblue !important;
}
+#switch-task-button:hover {
+ background-color: rgba(0, 0, 0, 0.075);
+}
+
+#switch-task-button:hover svg {
+ /* fill: var(--accent-color); <- Eliminado */
+}
+
+.dark-theme #switch-task-button:hover {
+ background-color: rgba(255, 255, 255, 0.15);
+}
+
+.dark-theme #switch-task-button:hover svg {
+ /* fill: var(--accent-color); <- Eliminado */
+}
+
#switch-task-button svg {
- width: 0.8em;
- height: 0.8em;
+ width: 0.7em;
+ height: 0.7em;
display: block;
- margin-top: 2px;
}
#task-overlay {
display: flex;
diff --git a/css/windowControls.css b/css/windowControls.css
index 94f9a16f5..040dc2d20 100644
--- a/css/windowControls.css
+++ b/css/windowControls.css
@@ -74,7 +74,7 @@ body.windows:not(.separate-titlebar) .windows-caption-buttons {
}
.windows-caption-buttons .element {
- line-height: 36px;
+ line-height: 28px;
width: 36px;
stroke: #000;
padding: 0 5px;
@@ -96,14 +96,20 @@ body:not(.task-overlay-is-shown).dark-theme .windows-caption-buttons .element {
transition: background-color 0.1s linear, color 0.1s linear;
}
.windows-caption-buttons .element:hover {
- background-color: rgba(196, 196, 196, 0.4);
+ background-color: rgba(0, 0, 0, 0.075);
transition: none;
}
+
+body:not(.task-overlay-is-shown).dark-theme .windows-caption-buttons .element:hover {
+ background-color: rgba(255, 255, 255, 0.15);
+}
+
.windows-caption-buttons .element:active {
background-color: rgba(168, 168, 168, 0.5);
}
.windows-caption-buttons .element.caption-close:hover {
background-color: #e81123;
+ stroke: #fff;
}
.windows-caption-buttons .element.caption-close:hover > svg,
.windows-caption-buttons .element.caption-close:active > svg {
diff --git a/index.html b/index.html
index d0e97bc17..33d782586 100644
--- a/index.html
+++ b/index.html
@@ -4,10 +4,11 @@
- Min
+ Apu
+
@@ -346,5 +347,6 @@
+