DGNum/Stirling-PDF
14
0
Fork 0
Code Issues 4 Pull requests 1 Projects Releases Packages Wiki Activity

css cleanup

Browse source
This commit is contained in:
Anthony Stirling 2023-06-01 23:12:55 +01:00
parent 019a502490
commit 7bdb2615d4
13 changed files with 292 additions and 326 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
src/main/resources/static/css/errorBanner.css Normal file
View 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
View 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
View 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
View 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
View 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);
}

3
src/main/resources/static/images/heart-fill.svg
View file

@ -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>
Side by side

Before

Width:  |  Height:  |  Size: 215 B

3
src/main/resources/static/images/suit-heart-fill.svg Normal file
View 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>
Side by side

After

Width:  |  Height:  |  Size: 312 B

53
src/main/resources/templates/fragments/common.html
View file

@ -163,58 +163,7 @@ document.addEventListener("DOMContentLoaded", function () {
<div id="level">Level: 1</div>
<img src="favicon.svg" class="player" id="player">
</div>
<style>
#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>
<link rel="stylesheet" href="css/game.css">
</dialog>
</th:block>

118
src/main/resources/templates/fragments/errorBannerPerPage.html
View file

@ -1,23 +1,5 @@
<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;">
<h4 class="alert-heading">Error</h4>
@ -40,105 +22,7 @@
</div>
<!-- Help Modal -->
<style scoped>
#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>
<link rel="stylesheet" href="css/errorBanner.css">
<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">

8
src/main/resources/templates/fragments/footer.html
View file

@ -1,9 +1,9 @@
<div th:fragment="footer">
<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://hub.docker.com/r/frooodle/s-pdf" target="_blank" class="mx-1"><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://github.com/sponsors/Frooodle" target="_blank" class="mx-1"><img src="images/heart-fill.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" title="See Docker Hub"><img src="images/docker.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" 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>
</footer>
</div>

46
src/main/resources/templates/fragments/navbar.html
View file

@ -74,51 +74,7 @@ function compareVersions(version1, version2) {
checkForUpdate();
</script>
<style>
.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>
<link rel="stylesheet" href="css/navbar.css">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container ">

74
src/main/resources/templates/home.html
View file

@ -4,79 +4,7 @@
<th:block th:insert="~{fragments/common :: head(title='')}"></th:block>
<style>
.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>
<link rel="stylesheet" href="css/home.css">
<body>

33
src/main/resources/templates/merge-pdfs.html
View file

@ -26,38 +26,7 @@
<button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{merge.submit}"></button>
</div>
</form>
<style>
.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>
<link rel="stylesheet" href="css/merge.css">
<script>
document.getElementById("fileInput-input").addEventListener("change", function() {
var files = this.files;