mirror of
https://github.com/Frooodle/Stirling-PDF.git
synced 2025-09-03 17:52:30 +02:00
Merge remote-tracking branch 'origin/main' into metadata
This commit is contained in:
Anthony Stirling
commit
3a7a5a4344
30
.github/workflows/push-docker.yml
vendored
30
.github/workflows/push-docker.yml
vendored
@ -4,6 +4,7 @@ on:
|
||||
push:
|
||||
branches:
|
||||
- master
|
||||
- testGit
|
||||
- main
|
||||
jobs:
|
||||
push:
|
||||
@ -37,20 +38,41 @@ jobs:
|
||||
with:
|
||||
username: ${{ secrets.DOCKER_HUB_USERNAME }}
|
||||
password: ${{ secrets.DOCKER_HUB_API }}
|
||||
|
||||
|
||||
# - name: Check if tag exists
|
||||
# id: checkIdExists
|
||||
# continue-on-error: true
|
||||
# run: |
|
||||
# response=$(curl -s https://hub.docker.com/v2/repositories/frooodle/s-pdf/tags/?name=${{ steps.versionNumber.outputs.versionNumber }})
|
||||
# result=$(echo $response | jq ".results")
|
||||
# if [ "$result" == "[]" ]; then
|
||||
# echo "Tag ${{ steps.versionNumber.outputs.versionNumber }} doesnt exist. Continuing with build and push."
|
||||
# else
|
||||
# echo "Tag ${{ steps.versionNumber.outputs.versionNumber }} already exists. Skipping build and push."
|
||||
# exit 1;
|
||||
# fi
|
||||
|
||||
|
||||
|
||||
- name: Setup buildx
|
||||
run: |
|
||||
docker buildx create --name mybuilder
|
||||
docker buildx use mybuilder
|
||||
|
||||
- name: Build and push versioned amd64 and v8
|
||||
if: github.ref == 'refs/heads/main'
|
||||
run: |
|
||||
docker buildx build --platform="linux/amd64,linux/arm64/v8" --push --tag "frooodle/s-pdf:${{ steps.versionNumber.outputs.versionNumber }}-alpha" .
|
||||
|
||||
|
||||
- name: Build and push versioned amd64 and v8
|
||||
if: github.ref == 'refs/heads/main'
|
||||
- name: Build and push versioned amd64 and v8
|
||||
if: github.ref == 'refs/heads/master'
|
||||
run: |
|
||||
docker buildx build --platform="linux/amd64,linux/arm64/v8" --push --tag "frooodle/s-pdf:${{ steps.versionNumber.outputs.versionNumber }}" .
|
||||
|
||||
|
||||
- name: Build and push latest amd64 and v8
|
||||
if: github.ref == 'refs/heads/master'
|
||||
if: github.ref == 'refs/heads/master'
|
||||
run: |
|
||||
docker buildx build --platform="linux/amd64,linux/arm64/v8" --push --tag "frooodle/s-pdf:latest" .
|
||||
|
||||
|
||||
@ -1,4 +1,6 @@
|
||||
<h1><img src="https://github.com/Frooodle/Stirling-PDF/blob/main/docs/stirling.png?raw=true" width="60" height="60">tirling-PDF</h1>
|
||||
<p align="center"><img src="https://raw.githubusercontent.com/Frooodle/Stirling-PDF/main/docs/stirling.png" width="80" ><br><h1 align="center">Stirling-PDF</h1>
|
||||
</p>
|
||||
|
||||
|
||||
# How to add new languages to Stirling-PDF
|
||||
|
||||
|
||||
@ -1,4 +1,5 @@
|
||||
<h1><img src="https://github.com/Frooodle/Stirling-PDF/blob/main/docs/stirling.png?raw=true" width="60" height="60">tirling-PDF</h1>
|
||||
<p align="center"><img src="https://raw.githubusercontent.com/Frooodle/Stirling-PDF/main/docs/stirling.png" width="80" ><br><h1 align="center">Stirling-PDF</h1>
|
||||
</p>
|
||||
|
||||
|
||||
This is a locally hosted web application that allows you to perform various operations on PDF files, such as splitting and adding images.
|
||||
@ -34,7 +35,7 @@ I will support and fix/add things to this if there is a demand [Discord](https:/
|
||||
|
||||
## How to use
|
||||
|
||||
### Locally
|
||||
### Locally
|
||||
|
||||
Prerequisites
|
||||
- Java 17 or later
|
||||
|
||||
@ -5,7 +5,7 @@ plugins {
|
||||
}
|
||||
|
||||
group = 'stirling.software'
|
||||
version = '0.3.1'
|
||||
version = '0.3.2'
|
||||
sourceCompatibility = '17'
|
||||
|
||||
repositories {
|
||||
|
||||
@ -37,7 +37,7 @@ public class RotationController {
|
||||
|
||||
@PostMapping("/rotate-pdf")
|
||||
public ResponseEntity<byte[]> rotatePDF(@RequestParam("fileInput") MultipartFile pdfFile,
|
||||
@RequestParam("angle") String angle) throws IOException {
|
||||
@RequestParam("angle") Integer angle) throws IOException {
|
||||
|
||||
// Load the PDF document
|
||||
PDDocument document = PDDocument.load(pdfFile.getBytes());
|
||||
@ -50,7 +50,7 @@ public class RotationController {
|
||||
|
||||
while (iterPage.hasNext()) {
|
||||
PDPage page = iterPage.next();
|
||||
page.setRotation(Integer.valueOf(angle));
|
||||
page.setRotation(page.getRotation() + angle);
|
||||
}
|
||||
|
||||
return PdfUtils.pdfDocToWebResponse(document, pdfFile.getName() + "_rotated.pdf");
|
||||
|
||||
@ -34,7 +34,7 @@ public class WatermarkController {
|
||||
}
|
||||
|
||||
@PostMapping("/add-watermark")
|
||||
public ResponseEntity<byte[]> addWatermark(@RequestParam("pdfFile") MultipartFile pdfFile,
|
||||
public ResponseEntity<byte[]> addWatermark(@RequestParam("fileInput") MultipartFile pdfFile,
|
||||
@RequestParam("watermarkText") String watermarkText,
|
||||
@RequestParam(defaultValue = "30", name = "fontSize") float fontSize,
|
||||
@RequestParam(defaultValue = "0", name = "rotation") float rotation,
|
||||
|
||||
210
src/main/resources/messages_de_DE.properties
Normal file
210
src/main/resources/messages_de_DE.properties
Normal file
@ -0,0 +1,210 @@
|
||||
###########
|
||||
# Generic #
|
||||
###########
|
||||
pdfPrompt=PDF auswählen
|
||||
multiPdfPrompt=PDFs auswählen(2+)
|
||||
multiPdfDropPrompt=Wählen Sie alle gewünschten PDFs aus (oder ziehen Sie sie per Drag & Drop hierhin)
|
||||
imgPrompt=Wählen Sie ein Bild
|
||||
genericSubmit=Einreichen
|
||||
processTimeWarning=Achtung: Abhängig von der Dateigröße kann dieser Prozess bis zu einer Minute dauern
|
||||
pageOrderPrompt=Seitenreihenfolge (Geben Sie eine durch Komma getrennte Liste von Seitenzahlen ein):
|
||||
goToPage=Los
|
||||
#############
|
||||
# HOME-PAGE #
|
||||
#############
|
||||
home.desc=Ihr lokal gehosteter One-Stop-Shop für alle Ihre PDF-Anforderungen.
|
||||
|
||||
navbar.convert=Konvertieren
|
||||
navbar.security=Sicherheit
|
||||
navbar.other=Anderes
|
||||
navbar.darkmode=Dark Mode
|
||||
|
||||
home.merge.title=PDFs zusammenführen
|
||||
home.merge.desc=Mehrere PDF-Dateien zu einer einzigen zusammenführen.
|
||||
|
||||
home.split.title=PDFs aufteilen
|
||||
home.split.desc=PDFs in mehrere Dokumente aufteilen.
|
||||
|
||||
home.rotate.title=PDFs drehen
|
||||
home.rotate.desc=Drehen Sie Ihre PDFs ganz einfach.
|
||||
|
||||
home.imageToPdf.title=Bild zu PDF
|
||||
home.imageToPdf.desc=Konvertieren Sie ein Bild (PNG, JPEG, GIF) in ein PDF.
|
||||
|
||||
home.pdfToImage.title=PDF zu Bild
|
||||
home.pdfToImage.desc=Konvertieren Sie ein PDF in ein Bild (PNG, JPEG, GIF).
|
||||
|
||||
home.pdfOrganiser.title=PDF organisieren
|
||||
home.pdfOrganiser.desc=Seiten entfernen und Seitenreihenfolge ändern.
|
||||
|
||||
home.addImage.title=Bild einfügen
|
||||
home.addImage.desc=Fügt ein Bild an eine bestimmte Stelle im PDF ein (Work in progress).
|
||||
|
||||
home.watermark.title=Wasserzeichen hinzufügen
|
||||
home.watermark.desc=Fügen Sie ein eigenes Wasserzeichen zu Ihrem PDF hinzu.
|
||||
|
||||
home.permissions.title=Berechtigungen ändern
|
||||
home.permissions.desc=Die Berechtigungen für Ihr PDF-Dokument verändern.
|
||||
|
||||
home.removePages.title=Seiten entfernen
|
||||
home.removePages.desc=Ungewollte Seiten aus dem PDF entfernen.
|
||||
|
||||
home.addPassword.title=Passwort hinzufügen
|
||||
home.addPassword.desc=Das PDF mit einem Passwort verschlüsseln.
|
||||
|
||||
home.removePassword.title=Passwort entfernen
|
||||
home.removePassword.desc=Den Passwortschutz eines PDFs entfernen.
|
||||
|
||||
home.compressPdfs.title=PDF komprimieren
|
||||
home.compressPdfs.desc=PDF komprimieren um die Dateigröße zu reduzieren.
|
||||
|
||||
|
||||
|
||||
#Add image
|
||||
addImage.title=Bild hinzufügen
|
||||
addImage.header=Ein Bild einfügen (Work in progress)
|
||||
addImage.submit=Bild hinzufügen
|
||||
|
||||
#compress
|
||||
compress.title=Komprimieren
|
||||
compress.header=PDF komprimieren
|
||||
compress.compressLevel=Wert zwischen 1 und 100 (1 ist am meisten komprimiert)
|
||||
compress.submit=Komprimieren
|
||||
|
||||
|
||||
#merge
|
||||
merge.title=Zusammenführen
|
||||
merge.header=Mehrere PDFs zusammenführen (2+)
|
||||
merge.submit=Zusammenführen
|
||||
|
||||
#pdfOrganiser
|
||||
pdfOrganiser.title=Seiten anordnen
|
||||
pdfOrganiser.header=PDF Seitenorganisation
|
||||
#pdfOrganiser.pagesToOrganize=Seitenanordnung (geben Sie eine Kommagetrennte Liste der Seitenzahlen an): # may have forgotten to add this as a translation option?
|
||||
pdfOrganiser.submit=Seiten anordnen
|
||||
|
||||
|
||||
#pageRemover
|
||||
pageRemover.title=Seiten entfernen
|
||||
pageRemover.header=PDF Seiten entfernen
|
||||
pageRemover.pagesToDelete=Seiten zu entfernen (geben Sie eine Kommagetrennte Liste der Seitenzahlen an):
|
||||
pageRemover.submit=Seiten löschen
|
||||
|
||||
#rotate
|
||||
rotate.title=PDF drehen
|
||||
rotate.header=PDF drehen
|
||||
rotate.selectAngle=Wählen Sie den Winkel (in Vielfachen von 90 Grad):
|
||||
rotate.submit=Drehen
|
||||
|
||||
|
||||
|
||||
|
||||
#merge
|
||||
split.title=PDF aufteilen
|
||||
split.header=PDF aufteilen
|
||||
split.desc.1=Die Nummern, die Sie auswählen, sind die Seitenzahlen, an denen Sie aufteilen möchten.
|
||||
split.desc.2=So würde die Auswahl von 1,3,7-8 ein 10-seitiges Dokument in 6 separate PDFs aufteilen, mit:
|
||||
split.desc.3=Dokument #1: Seite 1
|
||||
split.desc.4=Dokument #2: Seite 2 und 3
|
||||
split.desc.5=Dokument #3: Seite 4, 5 und 6
|
||||
split.desc.6=Dokument #4: Seite 7
|
||||
split.desc.7=Dokument #5: Seite 8
|
||||
split.desc.8=Dokument #6: Seite 9 und 10
|
||||
split.splitPages=Geben Sie die Seiten an, an denen aufgeteilt werden soll:
|
||||
split.submit=Aufteilen
|
||||
|
||||
|
||||
#merge
|
||||
imageToPDF.title=Bild zu PDF
|
||||
imageToPDF.header=Bild zu PDF
|
||||
imageToPDF.submit=Umwandeln
|
||||
|
||||
#pdfToImage
|
||||
pdfToImage.title=PDF zu Bild
|
||||
pdfToImage.header=PDF zu Bild
|
||||
pdfToImage.selectText=Bildformat
|
||||
pdfToImage.submit=Umwandeln
|
||||
|
||||
#addPassword
|
||||
addPassword.title=Passwort hinzufügen
|
||||
addPassword.header=Passwort hinzufügen (Verschlüsseln)
|
||||
addPassword.selectText.1=Das zu verschlüsselnde PDF auswählen
|
||||
addPassword.selectText.2=Passwort
|
||||
addPassword.selectText.3=Länge des Schlüssels
|
||||
addPassword.selectText.4=Größere Werte sind stärker, aber niedrigere Werte sind besser kompatibel.
|
||||
addPassword.selectText.5=Zu setzende Berechtigungen
|
||||
addPassword.selectText.6=Das zusammensetzen des PDFs verhindern
|
||||
addPassword.selectText.7=Inhaltsextrahierung verhindern
|
||||
addPassword.selectText.8=Inhaltsextrahierung zur Barrierefreiheit verhindern
|
||||
addPassword.selectText.9=Ausfüllen des Formulars verhindern
|
||||
addPassword.selectText.10=Modifizierung verhindern
|
||||
addPassword.selectText.11=Ändern von Kommentaren verhindern
|
||||
addPassword.selectText.12=Drucken verhindern
|
||||
addPassword.selectText.13=Drucken verschiedener Formate verhindern
|
||||
addPassword.submit=Verschlüsseln
|
||||
|
||||
#watermark
|
||||
watermark.title=Wasserzeichen hinzufügen
|
||||
watermark.header=Wasserzeichen hinzufügen
|
||||
watermark.selectText.1=PDF auswählen, dem ein Wasserzeichen hinzugefügt werden soll:
|
||||
watermark.selectText.2=Wasserzeichen Text:
|
||||
watermark.selectText.3=Schriftgröße:
|
||||
watermark.selectText.4=Drehung (0-360):
|
||||
watermark.selectText.5=breiteSpacer (horizontaler Abstand zwischen den einzelnen Wasserzeichen):
|
||||
watermark.selectText.6=höheSpacer (vertikaler Abstand zwischen den einzelnen Wasserzeichen):
|
||||
watermark.submit=Wasserzeichen hinzufügen
|
||||
|
||||
|
||||
#Change permissions
|
||||
permissions.title=Berechtigungen ändern
|
||||
permissions.header=Berechtigungen ändern
|
||||
permissions.warning=Achtung: Damit diese Berechtigungen nicht geändert werden können, wird empfohlen, sie über die "Passwort hinzufügen"-Seite mit einem Passwort zu versehen
|
||||
permissions.selectText.1=Das zu ändernde PDF auswählen
|
||||
permissions.selectText.2=Zu setzende Berechtigungen
|
||||
permissions.selectText.3=Das zusammensetzen des PDFs verhindern
|
||||
permissions.selectText.4=Inhaltsextrahierung verhindern
|
||||
permissions.selectText.5=Inhaltsextrahierung zur Barrierefreiheit verhindern
|
||||
permissions.selectText.6=Ausfüllen des Formulars verhindern
|
||||
permissions.selectText.7=Modifizierung verhindern
|
||||
permissions.selectText.8=Ändern von Kommentaren verhindern
|
||||
permissions.selectText.9=Drucken verhindern
|
||||
permissions.selectText.10=Drucken verschiedener Formate verhindern
|
||||
permissions.submit=Ändern
|
||||
|
||||
#remove password
|
||||
removePassword.title=Passwort entfernen
|
||||
removePassword.header=Passwort entfernen (Entschlüsseln)
|
||||
removePassword.selectText.1=Das zu entschlüsselnde PDF auswählen
|
||||
removePassword.selectText.2=Passwort
|
||||
removePassword.submit=Entfernen
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@ -6,6 +6,9 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.3.122/build/pdf.min.js"></script>
|
||||
<link href="https://cdn.jsdelivr.net/npm/pdfjs-dist@3.3.122/web/pdf_viewer.min.css" rel="stylesheet">
|
||||
|
||||
<link rel="stylesheet" th:href="@{dark-mode.css}" id="dark-mode-styles">
|
||||
<script>
|
||||
function toggleDarkMode() {
|
||||
@ -93,4 +96,25 @@
|
||||
};
|
||||
}
|
||||
</script>
|
||||
</th:block>
|
||||
|
||||
<th:block th:fragment="fileSelector(name, multiple)">
|
||||
<div class="custom-file-chooser">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" th:name="${name}" th:id="${name}+'-input'" th:multiple="${multiple}">
|
||||
<label class="custom-file-label" th:for="${name}+'-input'" th:text="#{pdfPrompt}"></label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script th:inline="javascript">
|
||||
$([[${"#"+name+"-input"}]]).on("change", function() {
|
||||
const files = $(this).get(0).files;
|
||||
const fileNames = Array.from(files).map(f => f.name).join(", ");
|
||||
if (fileNames) {
|
||||
$(this).siblings(".custom-file-label").addClass("selected").html(fileNames);
|
||||
} else {
|
||||
$(this).siblings(".custom-file-label").addClass("selected").html([[#{pdfPrompt}]]);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</th:block>
|
||||
@ -78,6 +78,8 @@
|
||||
<div class="dropdown-menu" aria-labelledby="languageDropdown">
|
||||
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="en_US">English (US)</a>
|
||||
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="en_GB">English (UK)</a>
|
||||
<a class="dropdown-item lang_dropdown-item" href="" data-language-code="de_DE">German</a>
|
||||
|
||||
</div>
|
||||
</li>
|
||||
|
||||
@ -128,4 +130,4 @@
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -15,27 +15,32 @@
|
||||
<div class="col-md-6">
|
||||
<h2 th:text="#{rotate.header}"></h2>
|
||||
|
||||
<form action="#" th:action="@{rotate-pdf}" th:object="${rotateForm}" method="post" enctype="multipart/form-data">
|
||||
<div th:replace="fragments/common :: fileSelector(name='fileInput', multiple=false)"></div>
|
||||
<input type="hidden" id="angleInput" name="angle" value="0">
|
||||
|
||||
<div id="editSection" style="display: none">
|
||||
<div class="previewContainer">
|
||||
<img id="pdf-preview"/>
|
||||
</div>
|
||||
|
||||
<form action="#" th:action="@{rotate-pdf}" th:object="${rotateForm}"
|
||||
method="post" enctype="multipart/form-data">
|
||||
<div class="custom-file">
|
||||
<input type="file" class="custom-file-input" id="fileInput"
|
||||
name="fileInput" required> <label
|
||||
class="custom-file-label" for="fileInput" th:text="#{pdfPrompt}"></label>
|
||||
<div class="buttonContainer">
|
||||
<button type="button" class="btn btn-secondary" onclick="rotate(-90)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-counterclockwise" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8 3a5 5 0 1 1-4.546 2.914.5.5 0 0 0-.908-.417A6 6 0 1 0 8 2v1z"/>
|
||||
<path d="M8 4.466V.534a.25.25 0 0 0-.41-.192L5.23 2.308a.25.25 0 0 0 0 .384l2.36 1.966A.25.25 0 0 0 8 4.466z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<button type="submit" class="btn btn-primary" th:text="#{rotate.submit}"></button>
|
||||
<button type="button" class="btn btn-secondary" onclick="rotate(90)">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
|
||||
<path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z"/>
|
||||
<path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label for="angle" th:text="#{rotate.selectAngle}"></label> <select id="angle" class="form-control" name="angle">
|
||||
<option value="90">90</option>
|
||||
<option value="180">180</option>
|
||||
<option value="270">270</option>
|
||||
<option value="-90">-90</option>
|
||||
<option value="-180">-180</option>
|
||||
<option value="-270">-270</option>
|
||||
</select> <br>
|
||||
<button type="submit" class="btn btn-primary" th:text="#{rotate.submit}"></button>
|
||||
</form>
|
||||
<th:block th:insert="~{fragments/common :: filelist}"></th:block>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
@ -43,6 +48,84 @@
|
||||
</div>
|
||||
<div th:insert="~{fragments/footer.html :: footer}"></div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const angleInput = document.getElementById("angleInput");
|
||||
const fileInput = document.getElementById("fileInput-input");
|
||||
const preview = document.getElementById("pdf-preview");
|
||||
fileInput.addEventListener("change", async function() {
|
||||
console.log("loading pdf");
|
||||
|
||||
document.querySelector("#editSection").style.display = "";
|
||||
|
||||
var url = URL.createObjectURL(fileInput.files[0])
|
||||
|
||||
const pdf = await pdfjsLib.getDocument(url).promise;
|
||||
const page = await pdf.getPage(1);
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
|
||||
// set the canvas size to the size of the page
|
||||
if (page.rotate == 90 || page.rotate == 270) {
|
||||
canvas.width = page.view[3];
|
||||
canvas.height = page.view[2];
|
||||
} else {
|
||||
canvas.width = page.view[2];
|
||||
canvas.height = page.view[3];
|
||||
}
|
||||
|
||||
// render the page onto the canvas
|
||||
var renderContext = {
|
||||
canvasContext: canvas.getContext("2d"),
|
||||
viewport: page.getViewport({ scale: 1 })
|
||||
};
|
||||
|
||||
await page.render(renderContext).promise;
|
||||
preview.src = canvas.toDataURL();
|
||||
});
|
||||
|
||||
function rotate(deg) {
|
||||
var lastTransform = preview.style.rotate;
|
||||
if (!lastTransform) {
|
||||
lastTransform = "0";
|
||||
}
|
||||
const lastAngle = parseInt(lastTransform.replace(/[^\d-]/g, ''));
|
||||
const newAngle = lastAngle + deg;
|
||||
|
||||
preview.style.rotate = newAngle + "deg";
|
||||
angleInput.value = newAngle;
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
#pdf-preview {
|
||||
margin: 0 auto;
|
||||
display: block;
|
||||
max-width: calc(100% - 30px);
|
||||
max-height: calc(100% - 30px);
|
||||
box-shadow: 0 0 4px rgba(100,100,100,.25);
|
||||
transition: rotate .3s;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
translate: -50% -50%;
|
||||
}
|
||||
.previewContainer {
|
||||
aspect-ratio: 1;
|
||||
width: 100%;
|
||||
border: 1px solid rgba(0,0,0,.125);
|
||||
border-radius: 0.25rem;
|
||||
margin: 1rem 0;
|
||||
padding: 15px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.buttonContainer {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
</style>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user