diff --git a/src/App.tsx b/src/App.tsx
index 06ec806..0c04cce 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,12 +1,25 @@
import { BarraSuperior } from "./BarraSuperior";
import { ContenedorHorarios } from "./ContenedorHorarios/";
import { Wallpaper } from "./Wallpaper";
+import { Show } from "solid-js";
+import { css } from "aphrodite";
+import { estilosGlobales } from "./Estilos";
function App() {
+ /// @ts-ignore
+ const soportaBackdropFilter = document.body.style.backdropFilter !== undefined;
+
return (
+
+
+ Tu navegador no soporta "backdrop-filter". Este es solo un efecto
+ visual, no afecta la funcionalidad de la página.
+ No volver a mostrar.
+
+
diff --git a/src/ContenedorHorarios/MiHorario.tsx b/src/ContenedorHorarios/MiHorario.tsx
index f73246a..6ee5e6d 100644
--- a/src/ContenedorHorarios/MiHorario.tsx
+++ b/src/ContenedorHorarios/MiHorario.tsx
@@ -46,11 +46,14 @@ export function MiHorario() {
*/}
+
+
+
;
}
diff --git a/src/Wallpaper.tsx b/src/Wallpaper.tsx
index 5528423..b50c106 100644
--- a/src/Wallpaper.tsx
+++ b/src/Wallpaper.tsx
@@ -5,6 +5,10 @@ import { createSignal, createMemo, createEffect, createState } from "solid-js";
const duracionTransicion = 250;
export function Wallpaper() {
+ /// @ts-ignore
+ const soportaBackdropFilter = document.body.style.backdropFilter !== undefined;
+ console.log("Soporta backdrop-filter?:", soportaBackdropFilter);
+
const estilos = StyleSheet.create({
contenedorCover: {
position: "fixed",
@@ -12,7 +16,8 @@ export function Wallpaper() {
height: "100vh",
top: "0",
left: "0",
- backgroundColor: "#212121"
+ backgroundColor: "#212121",
+ zIndex: -1
},
cover: {
width: "100vw",
@@ -20,7 +25,8 @@ export function Wallpaper() {
backgroundPosition: "center",
backgroundSize: "cover",
zIndex: -1,
- transition: `opacity ${duracionTransicion}ms`
+ transition: `opacity ${duracionTransicion}ms`,
+ filter: soportaBackdropFilter? "": "blur(40px)"
},
coverTransicion: {
opacity: 0
diff --git a/src/index.tsx b/src/index.tsx
index efdd7d0..d545069 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,5 +2,6 @@ import "solid-js";
import { render } from 'solid-js/web';
import App from './App';
import "normalize.css";
+import "./styles/global.css";
render(App, document.getElementById('root') as Node);
diff --git a/src/styles/global.css b/src/styles/global.css
new file mode 100644
index 0000000..0ef6959
--- /dev/null
+++ b/src/styles/global.css
@@ -0,0 +1,3 @@
+body {
+ font-family: Inter, sans-serif;
+}