mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2024-11-19 05:40:10 +01:00
css cleanup
This commit is contained in:
Anthony Stirling
parent
019a502490
commit
7bdb2615d4
94
src/main/resources/static/css/errorBanner.css
Normal file
94
src/main/resources/static/css/errorBanner.css
Normal file
@ -0,0 +1,94 @@
|
|||||||
|
#errorContainer {
|
||||||
|
margin: 20px; /* adjust this value as needed */
|
||||||
|
}
|
||||||
|
|
||||||
|
#helpModalDialog {
|
||||||
|
width: 90%;
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#helpModal h1 {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
#helpModal p {
|
||||||
|
text-align: center;
|
||||||
|
margin-top: 2em;
|
||||||
|
}
|
||||||
|
|
||||||
|
#helpModal .button:hover {
|
||||||
|
background-color: #005b7f;
|
||||||
|
}
|
||||||
|
|
||||||
|
#helpModal .features-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(21rem, 3fr));
|
||||||
|
gap: 25px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#helpModal .feature-card {
|
||||||
|
border: 1px solid rgba(0, 0, 0, .125);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
padding: 1.25rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
#helpModal .feature-card .card-text {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
#support-section {
|
||||||
|
background-color: #f9f9f9;
|
||||||
|
padding: 4rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
#support-section h1 {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#support-section p {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#button-group {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
#github-button, #discord-button {
|
||||||
|
display: inline-block;
|
||||||
|
padding: 1rem 2rem;
|
||||||
|
margin: 1rem;
|
||||||
|
background-color: #008CBA;
|
||||||
|
color: #fff;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
text-align: center;
|
||||||
|
text-decoration: none;
|
||||||
|
border-radius: 3rem;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
#github-button:hover, #discord-button:hover, #home-button:hover {
|
||||||
|
background-color: #005b7f;
|
||||||
|
}
|
||||||
|
|
||||||
|
#home-button {
|
||||||
|
display: block;
|
||||||
|
width: 200px;
|
||||||
|
height: 50px;
|
||||||
|
margin: 2em auto;
|
||||||
|
background-color: #008CBA;
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 50px;
|
||||||
|
text-decoration: none;
|
||||||
|
font-weight: bold;
|
||||||
|
border-radius: 25px;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
}
|
||||||
49
src/main/resources/static/css/game.css
Normal file
49
src/main/resources/static/css/game.css
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
#game-container {
|
||||||
|
position: relative;
|
||||||
|
width: 100vh;
|
||||||
|
height: 0;
|
||||||
|
padding-bottom: 75%; /* 4:3 aspect ratio */
|
||||||
|
background-color: transparent;
|
||||||
|
margin: auto;
|
||||||
|
overflow: hidden;
|
||||||
|
border: 2px solid black; /* Add border */
|
||||||
|
}
|
||||||
|
|
||||||
|
.pdf, .player, .projectile {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
.pdf {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
.player {
|
||||||
|
width: 50px;
|
||||||
|
height: 50px;
|
||||||
|
}
|
||||||
|
.projectile {
|
||||||
|
background-color: black !important;
|
||||||
|
width: 5px;
|
||||||
|
height: 10px;
|
||||||
|
}
|
||||||
|
#score, #level, #lives, #high-score {
|
||||||
|
color: black;
|
||||||
|
font-family: sans-serif;
|
||||||
|
position: absolute;
|
||||||
|
font-size: calc(14px + 0.25vw); /* Reduced font size */
|
||||||
|
}
|
||||||
|
#score {
|
||||||
|
top: 10px;
|
||||||
|
left: 10px;
|
||||||
|
}
|
||||||
|
#lives {
|
||||||
|
top: 10px;
|
||||||
|
left: calc(7vw); /* Adjusted position */
|
||||||
|
}
|
||||||
|
#high-score {
|
||||||
|
top: 10px;
|
||||||
|
left: calc(14vw); /* Adjusted position */
|
||||||
|
}
|
||||||
|
#level {
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
70
src/main/resources/static/css/home.css
Normal file
70
src/main/resources/static/css/home.css
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
.features-container {
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: repeat(auto-fill, minmax(21rem, 3fr));
|
||||||
|
gap: 25px 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card {
|
||||||
|
border: 2px solid rgba(0, 0, 0, .25);
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
padding: 1.25rem;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-start;
|
||||||
|
background: rgba(13, 110, 253, 0.05);
|
||||||
|
transition: transform 0.3s, border 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card a {
|
||||||
|
text-decoration: none;
|
||||||
|
color: inherit;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card .card-text {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card:hover {
|
||||||
|
border: 1px solid rgba(0, 0, 0, .5);
|
||||||
|
cursor: pointer;
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.feature-card:hover .card-title {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
.card-title.text-primary {
|
||||||
|
color: #000; /* Replace with your desired shade of blue */
|
||||||
|
}
|
||||||
|
|
||||||
|
.home-card-icon {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
transform: translateY(-5px);
|
||||||
|
}
|
||||||
|
.home-card-icon-colour {
|
||||||
|
filter: invert(0.2) sepia(2) saturate(50) hue-rotate(190deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.favorite-icon {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Only show the favorite icons when the parent card is being hovered over */
|
||||||
|
.feature-card:hover .favorite-icon {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.favorite-icon img {
|
||||||
|
filter: brightness(0);
|
||||||
|
}
|
||||||
|
|
||||||
|
.jumbotron {
|
||||||
|
padding: 3rem 3rem; /* Reduce vertical padding */
|
||||||
|
}
|
||||||
25
src/main/resources/static/css/merge.css
Normal file
25
src/main/resources/static/css/merge.css
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
.list-group-item {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.filename {
|
||||||
|
flex-grow: 1;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrows {
|
||||||
|
flex-shrink: 0;
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.move-up span,
|
||||||
|
.move-down span {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 1.2em;
|
||||||
|
}
|
||||||
42
src/main/resources/static/css/navbar.css
Normal file
42
src/main/resources/static/css/navbar.css
Normal file
@ -0,0 +1,42 @@
|
|||||||
|
.main-icon {
|
||||||
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
vertical-align: middle;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
vertical-align: middle;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon+.icon {
|
||||||
|
margin-left: -4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-text {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item-separator {
|
||||||
|
position: relative;
|
||||||
|
margin: 0 4px; /* Adjust the margin as needed */
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-item-separator::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 10%; /* Adjust the top and bottom margins as needed */
|
||||||
|
bottom: 10%;
|
||||||
|
width: 1px;
|
||||||
|
background-color: #ccc; /* Adjust the color as needed */
|
||||||
|
}
|
||||||
|
|
||||||
|
.navbar-icon {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
@ -1,3 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" width="50px" height="50px" viewBox="-8 -4 32 19">
|
|
||||||
<path stroke="#007bff" fill="#007bff" d="M8 1.314C12.438-3.248 23.534 4.735 8 15-7.534 4.736 3.562-3.248 8 1.314z"/>
|
|
||||||
</svg>
|
|
||||||
|
Before Width: | Height: | Size: 215 B |
3
src/main/resources/static/images/suit-heart-fill.svg
Normal file
3
src/main/resources/static/images/suit-heart-fill.svg
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" width="43" height="43" fill="#007bff" class="bi bi-suit-heart-fill" viewBox="0 0 16 16">
|
||||||
|
<path d="M4 1c2.21 0 4 1.755 4 3.92C8 2.755 9.79 1 12 1s4 1.755 4 3.92c0 3.263-3.234 4.414-7.608 9.608a.513.513 0 0 1-.784 0C3.234 9.334 0 8.183 0 4.92 0 2.755 1.79 1 4 1z"/>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 312 B |
@ -163,58 +163,7 @@ document.addEventListener("DOMContentLoaded", function () {
|
|||||||
<div id="level">Level: 1</div>
|
<div id="level">Level: 1</div>
|
||||||
<img src="favicon.svg" class="player" id="player">
|
<img src="favicon.svg" class="player" id="player">
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<link rel="stylesheet" href="css/game.css">
|
||||||
#game-container {
|
|
||||||
position: relative;
|
|
||||||
width: 100vh;
|
|
||||||
height: 0;
|
|
||||||
padding-bottom: 75%; /* 4:3 aspect ratio */
|
|
||||||
background-color: transparent;
|
|
||||||
margin: auto;
|
|
||||||
overflow: hidden;
|
|
||||||
border: 2px solid black; /* Add border */
|
|
||||||
}
|
|
||||||
|
|
||||||
.pdf, .player, .projectile {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
.pdf {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
.player {
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
.projectile {
|
|
||||||
background-color: black !important;
|
|
||||||
width: 5px;
|
|
||||||
height: 10px;
|
|
||||||
}
|
|
||||||
#score, #level, #lives, #high-score {
|
|
||||||
color: black;
|
|
||||||
font-family: sans-serif;
|
|
||||||
position: absolute;
|
|
||||||
font-size: calc(14px + 0.25vw); /* Reduced font size */
|
|
||||||
}
|
|
||||||
#score {
|
|
||||||
top: 10px;
|
|
||||||
left: 10px;
|
|
||||||
}
|
|
||||||
#lives {
|
|
||||||
top: 10px;
|
|
||||||
left: calc(7vw); /* Adjusted position */
|
|
||||||
}
|
|
||||||
#high-score {
|
|
||||||
top: 10px;
|
|
||||||
left: calc(14vw); /* Adjusted position */
|
|
||||||
}
|
|
||||||
#level {
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
</dialog>
|
</dialog>
|
||||||
</th:block>
|
</th:block>
|
||||||
|
|
||||||
|
|||||||
@ -1,23 +1,5 @@
|
|||||||
<th:block th:fragment="errorBannerPerPage">
|
<th:block th:fragment="errorBannerPerPage">
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
#github-button,
|
|
||||||
#discord-button {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
background-color: #008CBA;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: 3rem;
|
|
||||||
transition: all 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
#github-button:hover,
|
|
||||||
#discord-button:hover {
|
|
||||||
background-color: #005b7f;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div id="errorContainer" class="alert alert-danger alert-dismissible fade show" role="alert" style="display: none;">
|
<div id="errorContainer" class="alert alert-danger alert-dismissible fade show" role="alert" style="display: none;">
|
||||||
<h4 class="alert-heading">Error</h4>
|
<h4 class="alert-heading">Error</h4>
|
||||||
@ -40,105 +22,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Help Modal -->
|
<!-- Help Modal -->
|
||||||
<style scoped>
|
<link rel="stylesheet" href="css/errorBanner.css">
|
||||||
#errorContainer {
|
|
||||||
margin: 20px; /* adjust this value as needed */
|
|
||||||
}
|
|
||||||
|
|
||||||
#helpModalDialog {
|
|
||||||
width: 90%;
|
|
||||||
max-width: 800px;
|
|
||||||
}
|
|
||||||
#helpModal h1 {
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 10%;
|
|
||||||
}
|
|
||||||
|
|
||||||
#helpModal p {
|
|
||||||
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
#helpModal .button:hover {
|
|
||||||
background-color: #005b7f;
|
|
||||||
}
|
|
||||||
|
|
||||||
#helpModal .features-container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(21rem, 3fr));
|
|
||||||
gap: 25px 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#helpModal .feature-card {
|
|
||||||
border: 1px solid rgba(0, 0, 0, .125);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
padding: 1.25rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
}
|
|
||||||
|
|
||||||
#helpModal .feature-card .card-text {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
#support-section {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
padding: 4rem;
|
|
||||||
margin-top: 1rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
#support-section h1 {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#support-section p {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
#button-group {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
#github-button, #discord-button {
|
|
||||||
display: inline-block;
|
|
||||||
padding: 1rem 2rem;
|
|
||||||
margin: 1rem;
|
|
||||||
background-color: #008CBA;
|
|
||||||
color: #fff;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
border-radius: 3rem;
|
|
||||||
transition: all 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
#github-button:hover, #discord-button:hover, #home-button:hover {
|
|
||||||
background-color: #005b7f;
|
|
||||||
}
|
|
||||||
|
|
||||||
#home-button {
|
|
||||||
display: block;
|
|
||||||
width: 200px;
|
|
||||||
height: 50px;
|
|
||||||
margin: 2em auto;
|
|
||||||
background-color: #008CBA;
|
|
||||||
color: white;
|
|
||||||
text-align: center;
|
|
||||||
line-height: 50px;
|
|
||||||
text-decoration: none;
|
|
||||||
font-weight: bold;
|
|
||||||
border-radius: 25px;
|
|
||||||
transition: all 0.3s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
|
<div class="modal fade" id="helpModal" tabindex="-1" role="dialog" aria-labelledby="helpModalLabel" aria-hidden="true">
|
||||||
<div class="modal-dialog modal-dialog-centered" role="document" id="helpModalDialog">
|
<div class="modal-dialog modal-dialog-centered" role="document" id="helpModalDialog">
|
||||||
|
|||||||
@ -1,9 +1,9 @@
|
|||||||
<div th:fragment="footer">
|
<div th:fragment="footer">
|
||||||
<footer id="footer" class="text-center py-3">
|
<footer id="footer" class="text-center py-3">
|
||||||
<a href="https://github.com/Frooodle/Stirling-PDF" target="_blank" class="mx-1"><img src="images/github.svg"></img></a>
|
<a href="https://github.com/Frooodle/Stirling-PDF" target="_blank" class="mx-1" title="Visit Github Repository"><img src="images/github.svg"></img></a>
|
||||||
<a href="https://hub.docker.com/r/frooodle/s-pdf" target="_blank" class="mx-1"><img src="images/docker.svg"></img></a>
|
<a href="https://hub.docker.com/r/frooodle/s-pdf" target="_blank" class="mx-1" title="See Docker Hub"><img src="images/docker.svg"></img></a>
|
||||||
<a href="https://discord.gg/Cn8pWhQRxZ" target="_blank" class="mx-1"><img src="images/discord.svg"></img></a>
|
<a href="https://discord.gg/Cn8pWhQRxZ" target="_blank" class="mx-1" title="Join Discord Channel"><img src="images/discord.svg"></img></a>
|
||||||
<a href="https://github.com/sponsors/Frooodle" target="_blank" class="mx-1"><img src="images/heart-fill.svg"></img></a>
|
<a href="https://github.com/sponsors/Frooodle" target="_blank" class="mx-1" title="Donate"><img src="images/suit-heart-fill.svg"></img></a>
|
||||||
<div th:if="${@appName} != 'Stirling PDF'" class="mt-2" style="color: grey;">Powered by Stirling PDF</div>
|
<div th:if="${@appName} != 'Stirling PDF'" class="mt-2" style="color: grey;">Powered by Stirling PDF</div>
|
||||||
</footer>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
@ -74,51 +74,7 @@ function compareVersions(version1, version2) {
|
|||||||
checkForUpdate();
|
checkForUpdate();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style>
|
<link rel="stylesheet" href="css/navbar.css">
|
||||||
|
|
||||||
.main-icon {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
vertical-align: middle;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
.icon {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
vertical-align: middle;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon + .icon {
|
|
||||||
margin-left: -4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-text {
|
|
||||||
margin-left: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item-separator {
|
|
||||||
position: relative;
|
|
||||||
margin: 0 4px; /* Adjust the margin as needed */
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-item-separator::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: 10%; /* Adjust the top and bottom margins as needed */
|
|
||||||
bottom: 10%;
|
|
||||||
width: 1px;
|
|
||||||
background-color: #ccc; /* Adjust the color as needed */
|
|
||||||
}
|
|
||||||
.navbar-icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
transform: translateY(-2px);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
<nav class="navbar navbar-expand-lg navbar-light bg-light">
|
||||||
<div class="container ">
|
<div class="container ">
|
||||||
|
|||||||
@ -4,79 +4,7 @@
|
|||||||
|
|
||||||
<th:block th:insert="~{fragments/common :: head(title='')}"></th:block>
|
<th:block th:insert="~{fragments/common :: head(title='')}"></th:block>
|
||||||
|
|
||||||
<style>
|
<link rel="stylesheet" href="css/home.css">
|
||||||
.features-container {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(auto-fill, minmax(21rem, 3fr));
|
|
||||||
gap: 25px 30px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-card {
|
|
||||||
border: 2px solid rgba(0, 0, 0, .25);
|
|
||||||
border-radius: 0.25rem;
|
|
||||||
padding: 1.25rem;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
background: rgba(13, 110, 253, 0.05);
|
|
||||||
transition: transform 0.3s, border 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-card a {
|
|
||||||
text-decoration: none;
|
|
||||||
color: inherit;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-card .card-text {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-card:hover {
|
|
||||||
border: 1px solid rgba(0, 0, 0, .5);
|
|
||||||
cursor: pointer;
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.feature-card:hover .card-title {
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
.card-title.text-primary {
|
|
||||||
color: #000; /* Replace with your desired shade of blue */
|
|
||||||
}
|
|
||||||
|
|
||||||
.home-card-icon {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
transform: translateY(-5px);
|
|
||||||
}
|
|
||||||
.home-card-icon-colour {
|
|
||||||
filter: invert(0.2) sepia(2) saturate(50) hue-rotate(190deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
.favorite-icon {
|
|
||||||
display: none;
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Only show the favorite icons when the parent card is being hovered over */
|
|
||||||
.feature-card:hover .favorite-icon {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.favorite-icon img {
|
|
||||||
filter: brightness(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.jumbotron {
|
|
||||||
padding: 3rem 3rem; /* Reduce vertical padding */
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
|
|
||||||
|
|||||||
@ -26,38 +26,7 @@
|
|||||||
<button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{merge.submit}"></button>
|
<button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{merge.submit}"></button>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</form>
|
||||||
<style>
|
<link rel="stylesheet" href="css/merge.css">
|
||||||
|
|
||||||
.list-group-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.filename {
|
|
||||||
flex-grow: 1;
|
|
||||||
white-space: nowrap;
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrows {
|
|
||||||
flex-shrink: 0;
|
|
||||||
display: flex;
|
|
||||||
justify-content: flex-end;
|
|
||||||
}
|
|
||||||
|
|
||||||
.move-up span,
|
|
||||||
.move-down span {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1.2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<script>
|
<script>
|
||||||
document.getElementById("fileInput-input").addEventListener("change", function() {
|
document.getElementById("fileInput-input").addEventListener("change", function() {
|
||||||
var files = this.files;
|
var files = this.files;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user