mirror of
https://github.com/Viren070/MediaFusion.git
synced 2025-12-01 23:21:11 +01:00
mhdzumair
fa425a00aa
Introduced mechanisms to handle preconfigured sensitive fields with masking and reset options in the UI. Extended User functionality to reuse existing encrypted configuration for sensitive fields when editing. Improved styling and user experience for managing credentials and secure configurations.
581 lines
12 KiB
CSS
581 lines
12 KiB
CSS
body, html {
|
|
margin: 0;
|
|
padding: 0;
|
|
font-family: 'OpenSans', Arial, sans-serif;
|
|
font-weight: 300;
|
|
color: white;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-image: url('/static/images/background.jpg');
|
|
background-size: cover;
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.mode-switch {
|
|
background: rgba(20, 20, 35, 0.7);
|
|
padding: 1.5rem;
|
|
border-radius: 12px;
|
|
transition: all 0.3s ease;
|
|
border: 1px solid rgba(74, 71, 163, 0.2);
|
|
width: 100%;
|
|
}
|
|
|
|
.mode-buttons {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
margin-bottom: 1rem;
|
|
position: relative;
|
|
flex-wrap: wrap; /* Allow buttons to wrap on small screens */
|
|
}
|
|
|
|
.mode-btn {
|
|
background: rgba(74, 71, 163, 0.2);
|
|
color: #E0E0E0;
|
|
border: 1px solid rgba(74, 71, 163, 0.3);
|
|
padding: 0.8rem 1.5rem;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.3s ease;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.5rem;
|
|
font-size: 1rem;
|
|
min-width: 120px; /* Increased for i18n support */
|
|
justify-content: center;
|
|
flex: 1; /* Allow buttons to grow */
|
|
white-space: nowrap; /* Prevent text from wrapping inside button */
|
|
}
|
|
|
|
.mode-btn:hover {
|
|
background: rgba(74, 71, 163, 0.4);
|
|
transform: translateY(-2px);
|
|
}
|
|
.mode-btn:focus-visible {
|
|
outline: 2px solid #fff;
|
|
outline-offset: 2px;
|
|
}
|
|
.mode-btn[aria-pressed="true"] {
|
|
background: #4a47a3;
|
|
color: white;
|
|
border-color: #4a47a3;
|
|
box-shadow: 0 4px 12px rgba(74, 71, 163, 0.3);
|
|
}
|
|
.mode-btn.active {
|
|
background: #4a47a3;
|
|
color: white;
|
|
border-color: #4a47a3;
|
|
box-shadow: 0 4px 12px rgba(74, 71, 163, 0.3);
|
|
}
|
|
|
|
.mode-help {
|
|
color: #E0E0E0;
|
|
cursor: help;
|
|
font-size: 1.2rem;
|
|
opacity: 0.7;
|
|
transition: opacity 0.3s ease;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.mode-help:hover {
|
|
opacity: 1;
|
|
}
|
|
|
|
.mode-description {
|
|
color: #9f9f9f;
|
|
margin: 0.5rem 0 0;
|
|
font-size: 0.9rem;
|
|
padding-left: 0.5rem;
|
|
border-left: 3px solid rgba(74, 71, 163, 0.5);
|
|
}
|
|
|
|
.config-container {
|
|
margin: 2% auto;
|
|
padding: 2%;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
border-radius: 10px;
|
|
max-height: 95vh;
|
|
overflow-y: auto;
|
|
transition: padding 0.3s ease;
|
|
}
|
|
|
|
.section-container {
|
|
margin-bottom: 1rem;
|
|
padding: 1rem;
|
|
background: rgba(0, 0, 0, 0.37);
|
|
border-radius: 8px;
|
|
transition: margin-bottom 0.3s ease, padding 0.3s ease;
|
|
}
|
|
|
|
.section-header {
|
|
color: #E0E0E0;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.section-divider {
|
|
border: 0;
|
|
height: 2px;
|
|
background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(74, 71, 163, 0.75), rgba(0, 0, 0, 0));
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
/* Style for sections that are toggleable */
|
|
|
|
.pro-mode-section {
|
|
opacity: 0;
|
|
transform: translateY(-10px);
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
.pro-mode-section {
|
|
transform: none;
|
|
transition: opacity 0.3s ease-in-out;
|
|
}
|
|
}
|
|
.pro-mode-section[style*="display: block"] {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.btn, button {
|
|
border: none;
|
|
outline: none;
|
|
color: white;
|
|
background: #4a47a3;
|
|
padding: 0.8rem 1.5rem;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
text-align: center;
|
|
font-size: 1rem;
|
|
font-weight: 300;
|
|
cursor: pointer;
|
|
opacity: 0.9;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.btn:hover, button:hover {
|
|
opacity: 1;
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.btn:active, button:active {
|
|
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); /* Smaller shadow for active state */
|
|
}
|
|
|
|
/* Button Grouping */
|
|
.button-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1rem; /* Space between buttons */
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
input[type="text"], input[type="password"], select.form-control {
|
|
border-radius: 4px;
|
|
border: 1px solid #ccc;
|
|
padding: 0.5rem 1rem;
|
|
font-size: 1rem;
|
|
transition: border-color 0.3s ease;
|
|
}
|
|
|
|
input[type="text"]:focus, input[type="password"]:focus, select.form-control:focus {
|
|
border-color: #4a47a3;
|
|
box-shadow: 0 0 8px rgba(74, 71, 163, 0.2);
|
|
}
|
|
|
|
.btn.custom-btn {
|
|
background-color: #4a47a3;
|
|
color: white;
|
|
padding: 0.8rem 1.2rem;
|
|
font-size: 1.1rem;
|
|
border-radius: 4px;
|
|
}
|
|
|
|
.btn.custom-btn:hover {
|
|
background-color: #39358b;
|
|
}
|
|
|
|
.tooltip-inner {
|
|
background-color: #4a47a3;
|
|
color: white;
|
|
}
|
|
|
|
.tooltip-arrow::before {
|
|
border-top-color: #4a47a3;
|
|
}
|
|
|
|
.invalid-feedback {
|
|
display: none;
|
|
color: red;
|
|
}
|
|
|
|
.logo {
|
|
max-width: 300px;
|
|
display: block;
|
|
margin: 0 auto 1.5rem;
|
|
}
|
|
|
|
/* Catalog Style Adjustments */
|
|
.form-check {
|
|
position: relative;
|
|
display: block;
|
|
align-items: center;
|
|
border: 2px solid transparent;
|
|
margin-bottom: 0.5rem;
|
|
padding: 0.2rem;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
transition: transform 0.3s, background-color 0.3s, border-color 0.3s;
|
|
background: rgba(74, 71, 163, 0.2);
|
|
}
|
|
|
|
.form-check:hover {
|
|
transform: translateY(-5px);
|
|
}
|
|
|
|
.form-check-input {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
margin: 0;
|
|
opacity: 0;
|
|
z-index: 2;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.form-check-label {
|
|
padding: 0.5rem;
|
|
border-radius: 5px;
|
|
transition: all 0.3s;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
min-height: 36px; /* Minimum touch target size */
|
|
}
|
|
|
|
.form-check-label::before {
|
|
content: none; /* Remove the round indicator */
|
|
}
|
|
|
|
.form-check-input:checked + .form-check-label {
|
|
background: #4a47a3;
|
|
border-color: #4a47a3;
|
|
color: white;
|
|
position: relative;
|
|
}
|
|
|
|
.form-check-input:checked + .form-check-label::after {
|
|
content: '✔';
|
|
font-size: 1em;
|
|
position: absolute;
|
|
right: 0.5rem;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: white;
|
|
}
|
|
|
|
/* Style for disabled checkboxes */
|
|
.form-check.disabled-checkbox {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.form-check.disabled-checkbox .form-check-input {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.form-check.disabled-checkbox .form-check-label {
|
|
pointer-events: none;
|
|
}
|
|
|
|
|
|
.form-control {
|
|
display: block;
|
|
width: 100%;
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 1rem;
|
|
font-weight: 400;
|
|
line-height: 1.5;
|
|
color: #212529;
|
|
background-color: #fff;
|
|
background-clip: padding-box;
|
|
border: 1px solid #ced4da;
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
border-radius: 0.25rem;
|
|
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
|
|
}
|
|
|
|
/* Styling for the range slider */
|
|
.form-range {
|
|
-webkit-appearance: none; /* Override default look for Chrome, Safari */
|
|
appearance: none;
|
|
width: 100%;
|
|
height: 10px; /* Slider track height */
|
|
background: #ddd; /* Default track background */
|
|
outline: none;
|
|
opacity: 0.7;
|
|
-webkit-transition: .2s;
|
|
transition: opacity .2s;
|
|
border-radius: 5px;
|
|
margin: 1rem 0;
|
|
}
|
|
|
|
.form-range:hover {
|
|
opacity: 1; /* Full opacity on hover */
|
|
}
|
|
|
|
/* Thumb (slider button) styling */
|
|
.form-range::-webkit-slider-thumb {
|
|
-webkit-appearance: none; /* Override default look */
|
|
appearance: none;
|
|
width: 25px; /* Width and height of the slider button */
|
|
height: 25px;
|
|
background: #4a47a3; /* Slider button color */
|
|
cursor: pointer; /* Cursor on hover */
|
|
border-radius: 50%; /* Rounded corners */
|
|
border: 1px solid #ffffff; /* White border */
|
|
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2); /* Slight shadow for depth */
|
|
}
|
|
|
|
.form-range::-moz-range-thumb {
|
|
/* Similar styling for Firefox */
|
|
width: 25px;
|
|
height: 25px;
|
|
background: #4a47a3;
|
|
cursor: pointer;
|
|
border-radius: 50%;
|
|
border: 1px solid #ffffff;
|
|
box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
/* Filled part of the track (to the left of the thumb) */
|
|
.form-range::-webkit-slider-runnable-track {
|
|
width: 100%;
|
|
height: 10px;
|
|
background: linear-gradient(to right, #4a47a3 calc(var(--value) * 100%), #ddd 100%, #ddd 100%);
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.form-range::-moz-range-progress {
|
|
background: #4a47a3;
|
|
height: 10px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
/* Styling for the output span */
|
|
#size_output {
|
|
display: inline-block;
|
|
margin-left: 10px;
|
|
color: #fff;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
#service_url_section, #signup_section, #oauth_section, #token_input {
|
|
margin-top: 1rem;
|
|
}
|
|
|
|
.draggable-catalog {
|
|
cursor: grab; /* Indicates the item can be dragged */
|
|
padding: 10px; /* Optional: Adjust padding for better visual */
|
|
border-radius: 5px; /* Optional: Rounded corners for aesthetics */
|
|
transition: box-shadow 0.2s ease; /* Smooth transition for shadow */
|
|
}
|
|
|
|
.draggable-catalog:hover {
|
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* Shadow effect on hover */
|
|
}
|
|
|
|
/* Style for the element being dragged */
|
|
.sortable-drag {
|
|
background-color: rgba(74, 71, 163, 0.2);
|
|
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* More pronounced shadow for the dragging item */
|
|
}
|
|
|
|
/* Style for the placeholder of the original position */
|
|
.sortable-ghost {
|
|
opacity: 0.4; /* Slightly see-through */
|
|
background-color: #4a47a3; /* Different background to distinguish */
|
|
}
|
|
|
|
/* Fallback URL Container Styles */
|
|
.fallback-url-container {
|
|
background: rgba(0, 0, 0, 0.37);
|
|
color: #E0E0E0; /* Lighter text for readability */
|
|
border-radius: 8px;
|
|
padding: 15px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.fallback-url-container p {
|
|
font-size: 0.9rem;
|
|
margin-bottom: 10px;
|
|
color: #fff;
|
|
}
|
|
|
|
.fallback-url-container label {
|
|
display: block;
|
|
margin-bottom: 10px;
|
|
color: #E0E0E0;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.fallback-url-container textarea {
|
|
background-color: #fff;
|
|
color: #000;
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
font-size: 0.9rem;
|
|
height: auto; /* Adjust based on content */
|
|
resize: none; /* Disable resizing */
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.loading-overlay {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(0, 0, 0, 0.85);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
z-index: 9999;
|
|
backdrop-filter: blur(3px);
|
|
-webkit-backdrop-filter: blur(3px);
|
|
}
|
|
|
|
.loading-content {
|
|
background: rgba(20, 20, 35, 0.7);
|
|
padding: 2rem;
|
|
border-radius: 12px;
|
|
text-align: center;
|
|
border: 1px solid rgba(74, 71, 163, 0.2);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
|
|
min-width: 250px;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.loading-content .spinner-border {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
color: #4a47a3;
|
|
}
|
|
|
|
.loading-content h5 {
|
|
color: #E0E0E0;
|
|
font-weight: 300;
|
|
letter-spacing: 0.5px;
|
|
margin-top: 1rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.loading-content p {
|
|
color: #9f9f9f;
|
|
font-size: 0.9rem;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.configured-field {
|
|
background-color: #f8f9fa;
|
|
}
|
|
|
|
.reset-config-btn {
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
.input-group .reset-config-btn {
|
|
border-top-left-radius: 0;
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
.sort-item {
|
|
background: rgba(var(--bs-primary-rgb), 0.05);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
.sort-item:hover {
|
|
background: rgba(var(--bs-primary-rgb), 0.1);
|
|
}
|
|
|
|
.sort-item.active {
|
|
border-color: var(--bs-primary) !important;
|
|
}
|
|
|
|
.sort-direction-toggle {
|
|
min-width: 140px;
|
|
text-align: left;
|
|
}
|
|
|
|
.sortable-list {
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
@media (max-width: 576px) {
|
|
.sort-direction-toggle {
|
|
min-width: auto;
|
|
}
|
|
}
|
|
|
|
/* Responsive Design */
|
|
@media (max-width: 768px) {
|
|
.config-container {
|
|
padding: 10px;
|
|
}
|
|
|
|
.section-container {
|
|
margin-bottom: 15px;
|
|
padding: 10px;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
.button-container {
|
|
flex-direction: column; /* Stack buttons on smaller screens */
|
|
}
|
|
|
|
.fallback-url-container {
|
|
padding: 10px;
|
|
}
|
|
|
|
.fallback-url-container textarea,
|
|
.fallback-url-container button {
|
|
font-size: 0.8rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 769px) and (max-width: 1200px) {
|
|
.config-container {
|
|
padding: 30px;
|
|
}
|
|
|
|
.section-container {
|
|
margin-bottom: 20px;
|
|
padding: 20px;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.4rem;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1201px) {
|
|
.config-container {
|
|
padding: 50px;
|
|
}
|
|
|
|
.section-container {
|
|
margin-bottom: 30px;
|
|
padding: 30px;
|
|
}
|
|
|
|
h4 {
|
|
font-size: 1.6rem;
|
|
}
|
|
}
|