Skip to content

Commit

Permalink
Switch to Boostrap 5.3 dark theme
Browse files Browse the repository at this point in the history
  • Loading branch information
@corbindavenport
corbindavenport committed Mar 23, 2023
1 parent 06dec84 commit 63f2d3c
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 77 deletions.
54 changes: 0 additions & 54 deletions css/photostack.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ nav, .photostack-mobile-toolbar {
body {
overscroll-behavior: contain;
padding-top: 70px;
background-color: #222;
}

#photostack-watermark-preview, #photostack-editor-preview img, #photostack-watermark-editor-preview {
Expand All @@ -26,10 +25,6 @@ body {
top: 70px;
}

hr {
border-color: #444;
}

#photostack-watermark-manager-list {
margin-left: -1rem;
margin-right: -1rem;
Expand All @@ -43,55 +38,6 @@ hr {
max-width: 900px;
}

/* Custom colors */

.bg-photostack {
background-color: #303030 !important;
color: #FFF !important;
}

.bg-photostack .list-group-item {
color: #FFF;
}

.bg-photostack .text-muted,.bg-photostack .form-text, .bg-photostack table {
color: #adb5bd !important;
}

.bg-photostack .btn-close {
filter: invert(100%);
}

.bg-photostack .list-group-item {
background-color: #303030;
}

.bg-photostack * {
border-color: #242424;
}

.bg-photostack .btn {
border-color: #242424;
}

.bg-photostack a {
color: #FFF;
}

.bg-photostack a:hover {
color: #adb5bd;
}

/* Styles for Android app */

.photostack-android-show, .photostack-android .photostack-android-hide {
display: none;
}

.photostack-android .photostack-android-show, .photostack-android-hide {
display: inline-block;
}

/* Mobile toolbar */

.photostack-mobile-toolbar {
Expand Down
46 changes: 23 additions & 23 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<!DOCTYPE html>
<html>
<html data-bs-theme="dark">

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>PhotoStack</title>
<meta name="description" content="PhotoStack can convert, resize, watermark, and crop images in a few clicks.">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<link rel="stylesheet" href="css/photostack.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<script src="js/shared.js"></script>
Expand All @@ -30,7 +30,7 @@

<body>
<!-- Navbar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-photostack fixed-top">
<nav class="navbar navbar-expand-lg bg-secondary fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#">PhotoStack</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
Expand Down Expand Up @@ -69,7 +69,7 @@
<!-- Preview container -->
<div class="col-lg col-md-6 photostack-preview-container">
<!-- Temporary text for when no photos are imported -->
<div class="card photostack-preview-card bg-photostack">
<div class="card photostack-preview-card">
<div class="card-body" style="padding: 0">
<div class="text-center" id="photostack-editor-preview">
<p><br />A preview of your settings will appear here once you import some images.</p>
Expand All @@ -87,7 +87,7 @@
Safari may periodically delete PhotoStack's data, including saved watermarks. Press here for more information.
</div>
<!-- Resize card -->
<div class="card bg-photostack mb-3 mt-3 mt-md-0">
<div class="card mb-3 mt-3 mt-md-0">
<div class="card-header">
Resize
</div>
Expand All @@ -107,7 +107,7 @@
</div>
</div>
<!-- Advertisements card -->
<div class="card bg-photostack mb-3">
<div class="card mb-3">
<div class="card-header">
Advertisements
</div>
Expand All @@ -123,7 +123,7 @@
</div>
</div>
<!-- Watermarks card-->
<div class="card bg-photostack mb-3">
<div class="card mb-3">
<div class="card-header">
Watermark
</div>
Expand All @@ -139,7 +139,7 @@
</div>
</div>
<!-- Border card -->
<div class="card bg-photostack mb-3">
<div class="card mb-3">
<div class="card-header">
Border
</div>
Expand All @@ -151,7 +151,7 @@
</div>
</div>
<!-- Resize card -->
<div class="card bg-photostack mb-3 mt-3 mt-md-0">
<div class="card mb-3 mt-3 mt-md-0">
<div class="card-header">
Crop
</div>
Expand All @@ -178,7 +178,7 @@
</div>
</div>
<!-- Other options card-->
<div class="card bg-photostack mb-3">
<div class="card mb-3">
<div class="card-header">
Miscellaneous
</div>
Expand All @@ -193,7 +193,7 @@
</div>
</div>
<!-- Import/export toolbar for mobile only -->
<div class="photostack-mobile-toolbar d-lg-none d-print-none">
<div class="photostack-mobile-toolbar bg-secondary d-lg-none d-print-none">
<div class="container-fluid">
<div class="row">
<div class="col-4">
Expand Down Expand Up @@ -221,7 +221,7 @@
<!-- Welcome modal -->
<div class="modal fade" id="photostack-welcome-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content bg-photostack">
<div class="modal-content">
<div class="modal-body">
<div style="text-align: center; margin-bottom: 30px; margin-top: 20px;">
<h2>Welcome to PhotoStack!</h2>
Expand All @@ -238,7 +238,7 @@ <h2>Welcome to PhotoStack!</h2>
<!-- About modal -->
<div class="modal fade" id="photostack-about-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content bg-photostack">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="photostack-export-modal-label">About</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
Expand All @@ -260,7 +260,7 @@ <h1>PhotoStack</h1>
<!-- Keyboard shortcuts modal -->
<div class="modal fade" id="photostack-keyboard-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content bg-photostack">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="photostack-export-modal-label">Keyboard shortcuts</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
Expand Down Expand Up @@ -298,7 +298,7 @@ <h5 class="modal-title" id="photostack-export-modal-label">Keyboard shortcuts</h
<!-- Safari storage help modal -->
<div class="modal fade" id="photostack-safari-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
<div class="modal-content bg-photostack">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="photostack-safari-modal-label">Important info for Safari</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
Expand All @@ -314,7 +314,7 @@ <h5 class="modal-title" id="photostack-safari-modal-label">Important info for Sa
<!-- Import modal -->
<div class="modal fade" id="photostack-import-modal" tabindex="-1" role="dialog" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content bg-photostack">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="photostack-export-modal-label">Import images</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
Expand All @@ -332,7 +332,7 @@ <h5 class="modal-title" id="photostack-export-modal-label">Import images</h5>
<!-- Drag and drop modal -->
<div class="modal fade" id="photostack-drag-modal" tabindex="-1" role="dialog" aria-hidden="true" data-keyboard="false" data-backdrop="static">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content bg-photostack">
<div class="modal-content">
<div class="modal-body">
<div class="modal-body">
<p style="text-align: center" class="lead">Drop your files to import them.</p>
Expand All @@ -346,7 +346,7 @@ <h5 class="modal-title" id="photostack-export-modal-label">Import images</h5>
<div class="modal fade" id="photostack-export-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<!-- Initial UI -->
<div class="modal-content bg-photostack photostack-export-modal-initial">
<div class="modal-content photostack-export-modal-initial">
<div class="modal-header">
<h5 class="modal-title" id="photostack-export-modal-label">
Export
Expand Down Expand Up @@ -391,7 +391,7 @@ <h5 class="modal-title" id="photostack-export-modal-label">
</div>
</div>
<!-- Export in progress modal -->
<div class="modal-content bg-photostack photostack-export-modal-loading" style="display:none">
<div class="modal-content photostack-export-modal-loading" style="display:none">
<div class="modal-header">
<h5 class="modal-title" id="photostack-export-modal-label">Export images</h5>
</div>
Expand All @@ -408,7 +408,7 @@ <h5 class="modal-title" id="photostack-export-modal-label">Export images</h5>
</div>
</div>
<!-- Completed export modal -->
<div class="modal-content bg-photostack photostack-export-modal-finished" style="display:none">
<div class="modal-content photostack-export-modal-finished" style="display:none">
<div class="modal-header">
<h5 class="modal-title" id="photostack-export-modal-label">Export images</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
Expand Down Expand Up @@ -437,7 +437,7 @@ <h5 class="modal-title" id="photostack-export-modal-label">Export images</h5>
<!-- Watermark manager modal -->
<div class="modal fade" id="photostack-watermark-manager-modal" tabindex="-1" role="dialog" aria-labelledby="#photostack-watermark-manager-modal-title" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
<div class="modal-content bg-photostack">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="photostack-watermark-manager-modal-title">Watermarks</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
Expand Down Expand Up @@ -466,7 +466,7 @@ <h5 class="modal-title" id="photostack-watermark-manager-modal-title">Watermarks
<div class="modal fade" id="photostack-watermark-editor-modal" tabindex="-1" role="dialog" aria-labelledby="#photostack-watermark-editor-modal-title" aria-hidden="true">
<input type="file" id="photostack-watermark-import-image" accept="image/jpeg,image/png,image/gif">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered" role="document">
<div class="modal-content bg-photostack">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="photostack-watermark-editor-modal-title"></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
Expand Down Expand Up @@ -587,7 +587,7 @@ <h5 class="modal-title" id="photostack-watermark-editor-modal-title"></h5>
<script src="js/modernizr-custom.js"></script> <!-- canvas.toDataURL + Promises + WebP check -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/FileSaver.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jszip.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/localforage.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/pica.min.js"></script>
<script src="js/editor.js"></script>
Expand Down

0 comments on commit 63f2d3c

Please sign in to comment.