Zengtudor/Nuxt
1
0
Fork 0
mirror of https://github.com/nuxt/nuxt.git synced 2025-01-19 01:45:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(templates): reduce size and fix z-index

Browse Source
This commit is contained in:
Sébastien Chopin 2022-03-30 18:05:50 +02:00
parent e8dfb4185e
commit 02aaa854c5
4 changed files with 4 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/ui-templates/templates/error-404/index.html
View File

@ -6,11 +6,7 @@
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0" name="viewport"/> <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0" name="viewport"/>
<script type="module" src="/styles.ts"></script> <script type="module" src="/styles.ts"></script>
<style> <style>
:root {
--gradient-color: linear-gradient(90deg, #0047E1 0%, #34CDFE 50%, #00DC82 99.48%);
}
.spotlight { .spotlight {
z-index: -1;
background: linear-gradient(45deg, #00DC82 0%, #36E4DA 50%, #0047E1 100%); background: linear-gradient(45deg, #00DC82 0%, #36E4DA 50%, #0047E1 100%);
filter: blur(20vh); filter: blur(20vh);
} }
@ -26,11 +22,10 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: var(--gradient-color); background: linear-gradient(90deg, #0047E1 0%, #34CDFE 50%, #00DC82 100%);
z-index: -2; z-index: -2;
transition: filter 0.1s linear; transition: filter 0.1s linear;
} }
.gradient-border::after { .gradient-border::after {
content: ''; content: '';
position: absolute; position: absolute;
@ -38,11 +33,10 @@
left: -2px; left: -2px;
right: -2px; right: -2px;
bottom: -2px; bottom: -2px;
background: var(--gradient-color); background: linear-gradient(90deg, #0047E1 0%, #34CDFE 50%, #00DC82 100%);
z-index: -1; z-index: -1;
border-radius: 0.5rem; border-radius: 0.5rem;
} }
.gradient-border:hover::before { .gradient-border:hover::before {
filter: blur(10px); filter: blur(10px);
} }

46
packages/ui-templates/templates/error-500/index.html
View File

@ -6,56 +6,10 @@
<meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0" name="viewport"/> <meta content="width=device-width,initial-scale=1.0,minimum-scale=1.0" name="viewport"/>
<script type="module" src="/styles.ts"></script> <script type="module" src="/styles.ts"></script>
<style> <style>
:root {
--gradient-color: linear-gradient(90deg, #0047E1 0%, #34CDFE 50%, #00DC82 99.48%);
}
.spotlight { .spotlight {
z-index: -1;
background: linear-gradient(45deg, #00DC82 0%, #36E4DA 50%, #0047E1 100%); background: linear-gradient(45deg, #00DC82 0%, #36E4DA 50%, #0047E1 100%);
filter: blur(20vh); filter: blur(20vh);
} }
.gradient-border {
position: relative;
background: transparent;
border-radius: 0.5rem;
}
.gradient-border::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gradient-color);
z-index: -2;
transition: filter 0.1s linear;
}
.gradient-border::after {
content: '';
position: absolute;
top: -2px;
left: -2px;
right: -2px;
bottom: -2px;
background: var(--gradient-color);
z-index: -1;
border-radius: 0.5rem;
}
.gradient-border:hover::before {
filter: blur(10px);
}
@media (prefers-color-scheme: light) {
.gradient-border {
background: #F9FAFC;
}
}
@media (prefers-color-scheme: dark) {
.gradient-border {
background: #030D0F;
}
}
</style> </style>
</head> </head>
<body class="font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden "> <body class="font-sans antialiased bg-white dark:bg-black text-black dark:text-white grid min-h-screen place-content-center overflow-hidden ">

4
packages/ui-templates/templates/error-dev/index.html
View File

@ -7,9 +7,9 @@
<script type="module" src="/styles.ts"></script> <script type="module" src="/styles.ts"></script>
<style> <style>
.spotlight { .spotlight {
z-index: -1;
background: linear-gradient(45deg, #00DC82 0%, #36E4DA 50%, #0047E1 100%); background: linear-gradient(45deg, #00DC82 0%, #36E4DA 50%, #0047E1 100%);
filter: blur(40vh); opacity: 0.8;
filter: blur(30vh);
} }
</style> </style>
</head> </head>

1
packages/ui-templates/templates/welcome/index.html
View File

@ -7,7 +7,6 @@
<script type="module" src="/styles.ts"></script> <script type="module" src="/styles.ts"></script>
<style> <style>
.spotlight { .spotlight {
z-index: -1;
background: linear-gradient(45deg, #00DC82 0%, #36E4DA 50%, #0047E1 100%); background: linear-gradient(45deg, #00DC82 0%, #36E4DA 50%, #0047E1 100%);
filter: blur(20vh); filter: blur(20vh);
} }