mirror of
https://github.com/NNTmux/newznab-tmux.git
synced 2026-08-29 00:01:21 +00:00
Fix confirmation modal on cart page
This commit is contained in:
DariusIII
+308
-15
@@ -1,3 +1,37 @@
|
||||
/* Checkbox Styling - Improved for Dark Mode */
|
||||
.form-checkbox {
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.form-checkbox:checked {
|
||||
background-color: rgb(37, 99, 235); /* blue-600 */
|
||||
border-color: rgb(37, 99, 235);
|
||||
}
|
||||
|
||||
.dark .form-checkbox {
|
||||
background-color: rgb(55, 65, 81); /* gray-700 */
|
||||
border-color: rgb(75, 85, 99); /* gray-600 */
|
||||
}
|
||||
|
||||
.dark .form-checkbox:checked {
|
||||
background-color: rgb(59, 130, 246); /* blue-500 */
|
||||
border-color: rgb(59, 130, 246);
|
||||
}
|
||||
|
||||
.dark .form-checkbox:hover {
|
||||
border-color: rgb(96, 165, 250); /* blue-400 */
|
||||
}
|
||||
|
||||
.form-checkbox:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
}
|
||||
|
||||
.dark .form-checkbox:focus {
|
||||
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5);
|
||||
}
|
||||
|
||||
/* Admin Dashboard - Recent Activity Styles */
|
||||
.activity-item {
|
||||
transition: background-color 0.2s ease-in-out, transform 0.2s ease-in-out;
|
||||
@@ -151,24 +185,40 @@ code.api-token::-webkit-scrollbar-thumb:hover {
|
||||
/* Toast Notifications */
|
||||
#toast-container {
|
||||
position: fixed;
|
||||
top: 1rem;
|
||||
top: 5rem;
|
||||
right: 1rem;
|
||||
z-index: 9999;
|
||||
max-width: 400px;
|
||||
z-index: 99999;
|
||||
max-width: 420px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
#toast-container {
|
||||
top: 1rem;
|
||||
right: 0.5rem;
|
||||
left: 0.5rem;
|
||||
max-width: none;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-notification {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 300px;
|
||||
padding: 1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
min-width: 320px;
|
||||
padding: 1rem 1.25rem;
|
||||
margin-bottom: 0.75rem;
|
||||
border-radius: 0.5rem;
|
||||
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
||||
animation: slideIn 0.3s ease-out;
|
||||
transition: all 0.3s ease-in-out;
|
||||
pointer-events: auto;
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
@media (max-width: 640px) {
|
||||
.toast-notification {
|
||||
min-width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.toast-notification.removing {
|
||||
@@ -177,39 +227,43 @@ code.api-token::-webkit-scrollbar-thumb:hover {
|
||||
}
|
||||
|
||||
.toast-notification.success {
|
||||
background-color: rgb(16, 185, 129); /* green-600 */
|
||||
background: linear-gradient(135deg, rgb(16, 185, 129) 0%, rgb(5, 150, 105) 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dark .toast-notification.success {
|
||||
background-color: rgb(5, 150, 105); /* green-700 */
|
||||
background: linear-gradient(135deg, rgb(5, 150, 105) 0%, rgb(4, 120, 87) 100%);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.toast-notification.error {
|
||||
background-color: rgb(239, 68, 68); /* red-600 */
|
||||
background: linear-gradient(135deg, rgb(239, 68, 68) 0%, rgb(220, 38, 38) 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dark .toast-notification.error {
|
||||
background-color: rgb(220, 38, 38); /* red-700 */
|
||||
background: linear-gradient(135deg, rgb(220, 38, 38) 0%, rgb(185, 28, 28) 100%);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.toast-notification.info {
|
||||
background-color: rgb(59, 130, 246); /* blue-600 */
|
||||
background: linear-gradient(135deg, rgb(59, 130, 246) 0%, rgb(37, 99, 235) 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dark .toast-notification.info {
|
||||
background-color: rgb(29, 78, 216); /* blue-700 */
|
||||
background: linear-gradient(135deg, rgb(29, 78, 216) 0%, rgb(30, 64, 175) 100%);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.toast-notification.warning {
|
||||
background-color: rgb(245, 158, 11); /* amber-600 */
|
||||
background: linear-gradient(135deg, rgb(245, 158, 11) 0%, rgb(217, 119, 6) 100%);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dark .toast-notification.warning {
|
||||
background-color: rgb(217, 119, 6); /* amber-700 */
|
||||
background: linear-gradient(135deg, rgb(217, 119, 6) 0%, rgb(180, 83, 9) 100%);
|
||||
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.toast-icon {
|
||||
@@ -258,3 +312,242 @@ code.api-token::-webkit-scrollbar-thumb:hover {
|
||||
}
|
||||
}
|
||||
|
||||
/* Confirmation Modal - Cart Delete Confirmation */
|
||||
.confirmation-modal {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 99999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(0, 0, 0, 0.75);
|
||||
backdrop-filter: blur(4px);
|
||||
animation: fadeIn 0.2s ease-out;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.dark .confirmation-modal {
|
||||
background-color: rgba(0, 0, 0, 0.85);
|
||||
}
|
||||
|
||||
.confirmation-modal-content {
|
||||
background-color: white;
|
||||
border-radius: 0.75rem;
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
|
||||
max-width: 28rem;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
animation: modalSlideIn 0.3s ease-out;
|
||||
}
|
||||
|
||||
.dark .confirmation-modal-content {
|
||||
background-color: rgb(31, 41, 55); /* gray-800 */
|
||||
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.confirmation-modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 1.5rem;
|
||||
border-bottom: 1px solid rgb(229, 231, 235); /* gray-200 */
|
||||
}
|
||||
|
||||
.dark .confirmation-modal-header {
|
||||
border-bottom-color: rgb(55, 65, 81); /* gray-700 */
|
||||
}
|
||||
|
||||
.confirmation-modal-icon {
|
||||
flex-shrink: 0;
|
||||
width: 3rem;
|
||||
height: 3rem;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, rgb(254, 226, 226) 0%, rgb(254, 202, 202) 100%); /* red-100 to red-200 */
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
.dark .confirmation-modal-icon {
|
||||
background: linear-gradient(135deg, rgb(127, 29, 29) 0%, rgb(153, 27, 27) 100%); /* red-900 to red-800 */
|
||||
}
|
||||
|
||||
.confirmation-modal-icon i {
|
||||
color: rgb(220, 38, 38); /* red-600 */
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.dark .confirmation-modal-icon i {
|
||||
color: rgb(248, 113, 113); /* red-400 */
|
||||
}
|
||||
|
||||
.confirmation-modal-title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: 600;
|
||||
color: rgb(17, 24, 39); /* gray-900 */
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.dark .confirmation-modal-title {
|
||||
color: rgb(243, 244, 246); /* gray-100 */
|
||||
}
|
||||
|
||||
.confirmation-modal-body {
|
||||
padding: 1.5rem;
|
||||
color: rgb(55, 65, 81); /* gray-700 */
|
||||
font-size: 0.9375rem;
|
||||
line-height: 1.625;
|
||||
}
|
||||
|
||||
.dark .confirmation-modal-body {
|
||||
color: rgb(209, 213, 219); /* gray-300 */
|
||||
}
|
||||
|
||||
.confirmation-modal-body strong {
|
||||
color: rgb(17, 24, 39); /* gray-900 */
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.dark .confirmation-modal-body strong {
|
||||
color: rgb(243, 244, 246); /* gray-100 */
|
||||
}
|
||||
|
||||
.confirmation-modal-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 0.75rem;
|
||||
padding: 1.25rem 1.5rem;
|
||||
background-color: rgb(249, 250, 251); /* gray-50 */
|
||||
}
|
||||
|
||||
.dark .confirmation-modal-footer {
|
||||
background-color: rgb(17, 24, 39); /* gray-900 */
|
||||
}
|
||||
|
||||
.confirmation-modal-footer .btn-cancel {
|
||||
padding: 0.625rem 1.25rem;
|
||||
background-color: white;
|
||||
border: 1px solid rgb(209, 213, 219); /* gray-300 */
|
||||
border-radius: 0.375rem;
|
||||
color: rgb(55, 65, 81); /* gray-700 */
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.dark .confirmation-modal-footer .btn-cancel {
|
||||
background-color: rgb(55, 65, 81); /* gray-700 */
|
||||
border-color: rgb(75, 85, 99); /* gray-600 */
|
||||
color: rgb(229, 231, 235); /* gray-200 */
|
||||
}
|
||||
|
||||
.confirmation-modal-footer .btn-cancel:hover {
|
||||
background-color: rgb(249, 250, 251); /* gray-50 */
|
||||
border-color: rgb(156, 163, 175); /* gray-400 */
|
||||
}
|
||||
|
||||
.dark .confirmation-modal-footer .btn-cancel:hover {
|
||||
background-color: rgb(75, 85, 99); /* gray-600 */
|
||||
border-color: rgb(107, 114, 128); /* gray-500 */
|
||||
}
|
||||
|
||||
.confirmation-modal-footer .btn-cancel:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.5);
|
||||
}
|
||||
|
||||
.dark .confirmation-modal-footer .btn-cancel:focus {
|
||||
box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.5);
|
||||
}
|
||||
|
||||
.confirmation-modal-footer .btn-confirm {
|
||||
padding: 0.625rem 1.25rem;
|
||||
background: linear-gradient(135deg, rgb(220, 38, 38) 0%, rgb(185, 28, 28) 100%); /* red-600 to red-700 */
|
||||
border: 1px solid rgb(220, 38, 38);
|
||||
border-radius: 0.375rem;
|
||||
color: white;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease-in-out;
|
||||
}
|
||||
|
||||
.dark .confirmation-modal-footer .btn-confirm {
|
||||
background: linear-gradient(135deg, rgb(185, 28, 28) 0%, rgb(153, 27, 27) 100%); /* red-700 to red-800 */
|
||||
border-color: rgb(185, 28, 28);
|
||||
}
|
||||
|
||||
.confirmation-modal-footer .btn-confirm:hover {
|
||||
background: linear-gradient(135deg, rgb(185, 28, 28) 0%, rgb(153, 27, 27) 100%);
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
|
||||
.dark .confirmation-modal-footer .btn-confirm:hover {
|
||||
background: linear-gradient(135deg, rgb(153, 27, 27) 0%, rgb(127, 29, 29) 100%);
|
||||
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
.confirmation-modal-footer .btn-confirm:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.5);
|
||||
}
|
||||
|
||||
.dark .confirmation-modal-footer .btn-confirm:focus {
|
||||
box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.5);
|
||||
}
|
||||
|
||||
.confirmation-modal-footer .btn-confirm:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
@keyframes modalSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(-20px) scale(0.95);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeOut {
|
||||
from {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
/* Mobile responsiveness for confirmation modal */
|
||||
@media (max-width: 640px) {
|
||||
.confirmation-modal-content {
|
||||
margin: 0 1rem;
|
||||
}
|
||||
|
||||
.confirmation-modal-header {
|
||||
padding: 1.25rem 1rem;
|
||||
}
|
||||
|
||||
.confirmation-modal-body {
|
||||
padding: 1.25rem 1rem;
|
||||
}
|
||||
|
||||
.confirmation-modal-footer {
|
||||
padding: 1rem;
|
||||
flex-direction: column-reverse;
|
||||
}
|
||||
|
||||
.confirmation-modal-footer .btn-cancel,
|
||||
.confirmation-modal-footer .btn-confirm {
|
||||
width: 100%;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -53,7 +53,7 @@
|
||||
<tr>
|
||||
<th class="px-4 py-3 text-left" style="width: 30px">
|
||||
<label class="inline-flex items-center cursor-pointer">
|
||||
<input id="check-all" type="checkbox" class="form-checkbox h-4 w-4 text-blue-600">
|
||||
<input id="check-all" type="checkbox" class="form-checkbox h-4 w-4 text-blue-600 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 dark:focus:ring-blue-600 focus:ring-2">
|
||||
</label>
|
||||
</th>
|
||||
<th class="px-4 py-3 text-left text-sm font-semibold text-gray-700 dark:text-gray-300">Name</th>
|
||||
@@ -68,7 +68,7 @@
|
||||
<input id="chk{{ substr($result->release->guid, 0, 7) }}"
|
||||
type="checkbox"
|
||||
name="table_records"
|
||||
class="cart-checkbox form-checkbox h-4 w-4 text-blue-600"
|
||||
class="cart-checkbox form-checkbox h-4 w-4 text-blue-600 bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 rounded focus:ring-blue-500 dark:focus:ring-blue-600 focus:ring-2 cursor-pointer"
|
||||
value="{{ $result->release->guid }}">
|
||||
</td>
|
||||
<td class="px-4 py-3">
|
||||
|
||||
Reference in New Issue
Block a user