reactor(DevWeb): Set global CSS in a separate CSS file

This commit is contained in:
Lucàs
2024-04-20 10:41:34 +02:00
parent 55f5d14db8
commit 08c2280619
2 changed files with 6 additions and 47 deletions
@@ -14,18 +14,7 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@1.0.0/css/bulma.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
<style>
:root {
--bulma-primary-h: 0;
--bulma-primary-s: 70%;
--bulma-primary-l: 35%;
}
.hero {
background: url("${pageContext.request.contextPath}/static/img/Home.svg") lightgray 50% / cover no-repeat;
}
</style>
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/global.css">
<jsp:invoke fragment="head"/>
</head>
@@ -1,39 +1,9 @@
:root {
--color-red-800: #991B1B;
--color-rose-700: #BE123C;
--sizes-button-input-nav-larger-padding-v: 12px;
--sizes-button-input-nav-larger-padding-h: 32px;
--sizes-button-input-nav-larger-gap: 12px;
--Button-Border-radius: 8px;
--Button-Light-Default-Border: rgba(255, 255, 255, 0.00);
--Button-Light-Default-Background: rgba(255, 255, 255, 0.30);
--bulma-primary-h: 0;
--bulma-primary-s: 70%;
--bulma-primary-l: 35%;
}
html{
height: 100%;
width: 100%;
}
body {
width: 100%;
height: 832px;
flex-shrink: 0;
.hero {
background: url("../img/Home.svg") lightgray 50% / cover no-repeat;
opacity: 0.6;
color: #FFF;
}
a.button, input.button button.button{
display: flex;
padding: var(--sizes-button-input-nav-larger-padding-v) var(--sizes-button-input-nav-larger-padding-h);
justify-content: center;
align-items: center;
gap: var(--sizes-button-input-nav-larger-gap);
border-radius: var(--Button-Border-radius);
border: 1px solid var(--Button-Light-Default-Border);
background: var(--Button-Light-Default-Background);
color: #FFF;
text-decoration: none;
height: fit-content;
}
}