Merge pull request #1960 from versity/ben/webui-css

fix: webui move explorer styling to theme.css
This commit is contained in:
Ben McClelland
2026-03-10 11:51:50 -07:00
committed by GitHub
2 changed files with 17 additions and 21 deletions
+6 -5
View File
@@ -16,7 +16,6 @@
/*
* theme.css — Global shared styles for all pages.
* Page-specific styles remain inline in their respective HTML files.
*/
body {
@@ -35,13 +34,11 @@ body {
border-left: 4px solid #0076CD;
}
/* Modal */
.modal-backdrop {
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(4px);
}
/* Custom Dropdown */
.custom-dropdown {
display: none;
position: absolute;
@@ -71,7 +68,7 @@ body {
background-color: rgba(0, 118, 205, 0.1);
color: #0076CD;
}
/* Dropup variant — opens upward */
.custom-dropdown.dropup {
bottom: 100%;
top: auto;
@@ -79,7 +76,6 @@ body {
margin-bottom: 4px;
}
/* Toggle Switch */
.toggle-switch {
position: relative;
display: inline-block;
@@ -192,3 +188,8 @@ input:checked + .toggle-slider:before {
.advanced-options.show {
max-height: 500px;
}
/* Explorer */
.drop-zone-active { background: rgba(0, 118, 205, 0.1); border-color: #0076CD; }
.file-row:hover { background: #f9fafb; }
.file-row.selected { background: #e6f3fa; }
+11 -16
View File
@@ -25,11 +25,6 @@ under the License.
<link rel="stylesheet" href="assets/css/fonts.css">
<link rel="stylesheet" href="assets/css/theme.css">
<link rel="icon" type="image/png" href="assets/images/favicon.png">
<style>
.drop-zone-active { background: rgba(0, 118, 205, 0.1); border-color: #0076CD; }
.file-row:hover { background: #f9fafb; }
.file-row.selected { background: #e6f3fa; }
</style>
</head>
<body class="min-h-screen bg-surface">
<script src="js/api.js"></script>
@@ -278,7 +273,7 @@ under the License.
<!-- Object Info Modal -->
<div id="info-modal" class="hidden fixed inset-0 z-50">
<div class="modal-backdrop absolute inset-0" style="background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);" onclick="closeModal('info-modal')"></div>
<div class="modal-backdrop absolute inset-0" onclick="closeModal('info-modal')"></div>
<div class="absolute inset-0 flex items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-2xl w-full max-w-3xl relative max-h-[90vh] flex flex-col">
<div class="flex items-center justify-between p-6 border-b border-gray-100 flex-shrink-0">
@@ -378,7 +373,7 @@ under the License.
<!-- Object Versions Modal -->
<div id="versions-modal" class="hidden fixed inset-0 z-50">
<div class="modal-backdrop absolute inset-0" style="background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);" onclick="closeModal('versions-modal')"></div>
<div class="modal-backdrop absolute inset-0" onclick="closeModal('versions-modal')"></div>
<div class="absolute inset-0 flex items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl relative max-h-[90vh] flex flex-col">
<div class="flex items-center justify-between p-6 border-b border-gray-100 flex-shrink-0">
@@ -412,7 +407,7 @@ under the License.
<!-- Delete Confirmation Modal -->
<div id="delete-modal" class="hidden fixed inset-0 z-50">
<div class="modal-backdrop absolute inset-0" style="background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);" onclick="closeModal('delete-modal')"></div>
<div class="modal-backdrop absolute inset-0" onclick="closeModal('delete-modal')"></div>
<div class="absolute inset-0 flex items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-2xl w-full max-w-md relative">
<div class="p-6">
@@ -438,7 +433,7 @@ under the License.
<!-- Create Folder Modal -->
<div id="create-folder-modal" class="hidden fixed inset-0 z-50">
<div class="modal-backdrop absolute inset-0" style="background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);" onclick="closeModal('create-folder-modal')"></div>
<div class="modal-backdrop absolute inset-0" onclick="closeModal('create-folder-modal')"></div>
<div class="absolute inset-0 flex items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-2xl w-full max-w-md relative">
<div class="flex items-center justify-between p-6 border-b border-gray-100">
@@ -468,7 +463,7 @@ under the License.
<!-- Create Bucket Modal -->
<div id="create-bucket-modal" class="hidden fixed inset-0 z-50">
<div class="modal-backdrop absolute inset-0" style="background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);" onclick="closeModal('create-bucket-modal')"></div>
<div class="modal-backdrop absolute inset-0" onclick="closeModal('create-bucket-modal')"></div>
<div class="absolute inset-0 flex items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-2xl w-full max-w-md relative">
<div class="flex items-center justify-between p-6 border-b border-gray-100">
@@ -498,7 +493,7 @@ under the License.
<!-- Delete Bucket Modal -->
<div id="delete-bucket-modal" class="hidden fixed inset-0 z-50">
<div class="modal-backdrop absolute inset-0" style="background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);" onclick="closeModal('delete-bucket-modal')"></div>
<div class="modal-backdrop absolute inset-0" onclick="closeModal('delete-bucket-modal')"></div>
<div class="absolute inset-0 flex items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-2xl w-full max-w-md relative">
<div class="p-6">
@@ -532,7 +527,7 @@ under the License.
<!-- Bucket Info Modal -->
<div id="bucket-info-modal" class="hidden fixed inset-0 z-50">
<div class="modal-backdrop absolute inset-0" style="background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);" onclick="closeModal('bucket-info-modal')"></div>
<div class="modal-backdrop absolute inset-0" onclick="closeModal('bucket-info-modal')"></div>
<div class="absolute inset-0 flex items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-2xl w-full max-w-2xl relative max-h-[90vh] overflow-y-auto">
<div class="flex items-center justify-between p-6 border-b border-gray-100 sticky top-0 bg-white z-10">
@@ -606,7 +601,7 @@ under the License.
<!-- Versioning Modal -->
<div id="versioning-modal" class="hidden fixed inset-0 z-50">
<div class="modal-backdrop absolute inset-0" style="background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);" onclick="closeModal('versioning-modal')"></div>
<div class="modal-backdrop absolute inset-0" onclick="closeModal('versioning-modal')"></div>
<div class="absolute inset-0 flex items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-2xl w-full max-w-md relative">
<div class="flex items-center justify-between p-6 border-b border-gray-100">
@@ -648,7 +643,7 @@ under the License.
<!-- Object Lock Modal -->
<div id="object-lock-modal" class="hidden fixed inset-0 z-50">
<div class="modal-backdrop absolute inset-0" style="background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);" onclick="closeModal('object-lock-modal')"></div>
<div class="modal-backdrop absolute inset-0" onclick="closeModal('object-lock-modal')"></div>
<div class="absolute inset-0 flex items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-2xl w-full max-w-md relative">
<div class="flex items-center justify-between p-6 border-b border-gray-100">
@@ -712,7 +707,7 @@ under the License.
<!-- Bucket Policy Modal -->
<div id="bucket-policy-modal" class="hidden fixed inset-0 z-50">
<div class="modal-backdrop absolute inset-0" style="background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);" onclick="closeModal('bucket-policy-modal')"></div>
<div class="modal-backdrop absolute inset-0" onclick="closeModal('bucket-policy-modal')"></div>
<div class="absolute inset-0 flex items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-2xl w-full max-w-5xl relative max-h-[90vh] flex flex-col">
<div class="flex items-center justify-between p-6 border-b border-gray-100 flex-shrink-0">
@@ -884,7 +879,7 @@ under the License.
<!-- Multipart Uploads Modal -->
<div id="multipart-uploads-modal" class="hidden fixed inset-0 z-50">
<div class="modal-backdrop absolute inset-0" style="background: rgba(0,0,0,0.5); backdrop-filter: blur(4px);" onclick="closeModal('multipart-uploads-modal')"></div>
<div class="modal-backdrop absolute inset-0" onclick="closeModal('multipart-uploads-modal')"></div>
<div class="absolute inset-0 flex items-center justify-center p-4">
<div class="bg-white rounded-xl shadow-2xl w-full max-w-4xl relative max-h-[90vh] flex flex-col">
<div class="flex items-center justify-between p-6 border-b border-gray-100 flex-shrink-0">