mirror of
https://github.com/bunkerity/bunkerweb
synced 2026-05-24 09:28:37 +00:00
Start separating overrides made in template files (css, js, ...)
This commit is contained in:
Théophile Diot
parent
059702b03d
commit
ead4cc91ba
9 changed files with 875 additions and 1950 deletions
|
|
@ -14,4 +14,5 @@ SECURITY.md
|
|||
src/ui/app/templates/*
|
||||
src/common/core/*/ui/*
|
||||
src/ui/app/static/libs/*
|
||||
src/ui/app/static/css/core.css
|
||||
examples/
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
192
src/ui/app/static/css/overrides.css
Normal file
192
src/ui/app/static/css/overrides.css
Normal file
|
|
@ -0,0 +1,192 @@
|
|||
@charset "UTF-8";
|
||||
:root,
|
||||
[data-bs-theme="light"] {
|
||||
--bs-bw-green: #2eac68;
|
||||
--bs-bw-blue: #0b5577;
|
||||
--bs-primary: #0b354a;
|
||||
--bs-secondary: #35728e;
|
||||
--bs-bw-green-rgb: 46, 172, 104;
|
||||
--bs-primary-rgb: 11, 53, 74;
|
||||
--bs-secondary-rgb: 53, 114, 142;
|
||||
--bs-primary-text-emphasis: #07354a;
|
||||
--bs-secondary-text-emphasis: #395d6e;
|
||||
--bs-link-color: #0b354a;
|
||||
--bs-link-color-rgb: 11, 53, 74;
|
||||
--bs-link-hover-color: #2eac68;
|
||||
--bs-link-hover-color-rgb: 46, 172, 104;
|
||||
}
|
||||
|
||||
.offcanvas,
|
||||
.offcanvas-xxl,
|
||||
.offcanvas-xl,
|
||||
.offcanvas-lg,
|
||||
.offcanvas-md,
|
||||
.offcanvas-sm {
|
||||
--bs-offcanvas-zindex: 1090;
|
||||
--bs-offcanvas-width: 400px;
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background-color: var(--bs-secondary);
|
||||
border-color: var(--bs-secondary);
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background-color: var(--bs-secondary) !important;
|
||||
border-color: var(--bs-secondary) !important;
|
||||
}
|
||||
.btn-check:focus + .btn-secondary,
|
||||
.btn-secondary:focus,
|
||||
.btn-secondary.focus {
|
||||
background-color: var(--bs-secondary);
|
||||
border-color: var(--bs-secondary);
|
||||
}
|
||||
.btn-check:checked + .btn-secondary,
|
||||
.btn-check:active + .btn-secondary,
|
||||
.btn-secondary:active,
|
||||
.btn-secondary.active,
|
||||
.btn-secondary.show.dropdown-toggle,
|
||||
.show > .btn-secondary.dropdown-toggle {
|
||||
background-color: var(--bs-secondary) !important;
|
||||
border-color: var(--bs-secondary) !important;
|
||||
}
|
||||
.btn-secondary.disabled,
|
||||
.btn-secondary:disabled {
|
||||
background-color: var(--bs-secondary) !important;
|
||||
border-color: var(--bs-secondary) !important;
|
||||
}
|
||||
|
||||
.btn-group .btn-secondary,
|
||||
.input-group .btn-secondary {
|
||||
border-right: var(--bs-border-width) solid var(--bs-secondary);
|
||||
border-left: var(--bs-border-width) solid var(--bs-secondary);
|
||||
}
|
||||
|
||||
.btn-group-vertical .btn-secondary {
|
||||
border-top-color: var(--bs-secondary);
|
||||
border-bottom-color: var(--bs-secondary);
|
||||
}
|
||||
|
||||
.btn-outline-secondary {
|
||||
color: var(--bs-secondary);
|
||||
border-color: var(--bs-secondary);
|
||||
}
|
||||
.btn-outline-secondary:hover {
|
||||
background-color: var(--bs-secondary) !important;
|
||||
border-color: var(--bs-secondary) !important;
|
||||
}
|
||||
.btn-check:focus + .btn-outline-secondary,
|
||||
.btn-outline-secondary:focus {
|
||||
background-color: var(--bs-secondary);
|
||||
border-color: var(--bs-secondary);
|
||||
}
|
||||
.btn-check:checked + .btn-outline-secondary,
|
||||
.btn-check:active + .btn-outline-secondary,
|
||||
.btn-outline-secondary:active,
|
||||
.btn-outline-secondary.active,
|
||||
.btn-outline-secondary.dropdown-toggle.show {
|
||||
background-color: var(--bs-secondary) !important;
|
||||
border-color: var(--bs-secondary) !important;
|
||||
}
|
||||
.btn-outline-secondary.disabled,
|
||||
.btn-outline-secondary:disabled {
|
||||
color: var(--bs-secondary) !important;
|
||||
border-color: var(--bs-secondary) !important;
|
||||
}
|
||||
|
||||
.btn-outline-secondary .badge {
|
||||
background: var(--bs-secondary);
|
||||
border-color: var(--bs-secondary);
|
||||
}
|
||||
|
||||
.btn-outline-secondary:hover .badge,
|
||||
.btn-outline-secondary:focus:hover .badge,
|
||||
.btn-outline-secondary:active .badge,
|
||||
.btn-outline-secondary.active .badge,
|
||||
.show > .btn-outline-secondary.dropdown-toggle .badge {
|
||||
color: var(--bs-secondary);
|
||||
}
|
||||
|
||||
.alert-secondary {
|
||||
color: var(--bs-secondary);
|
||||
}
|
||||
.alert-secondary .btn-close {
|
||||
background-image: url("data:image/svg+xml,%3Csvg width='150px' height='151px' viewBox='0 0 150 151' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3Cpolygon id='path-1' points='131.251657 0 74.9933705 56.25 18.7483426 0 0 18.75 56.2450278 75 0 131.25 18.7483426 150 74.9933705 93.75 131.251657 150 150 131.25 93.7549722 75 150 18.75'%3E%3C/polygon%3E%3C/defs%3E%3Cg id='🎨-%5BSetup%5D:-Colors-&-Shadows' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cg id='Artboard' transform='translate(-225.000000, -250.000000)'%3E%3Cg id='Icon-Color' transform='translate(225.000000, 250.500000)'%3E%3Cuse fill='%2335728e' xlink:href='%23path-1'%3E%3C/use%3E%3Cuse fill-opacity='0.5' fill='%2335728e' xlink:href='%23path-1'%3E%3C/use%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
||||
}
|
||||
.alert-secondary .alert-link {
|
||||
color: var(--bs-secondary);
|
||||
}
|
||||
|
||||
.alert-secondary hr {
|
||||
color: var(--bs-secondary) !important;
|
||||
}
|
||||
.alert-secondary .alert-icon {
|
||||
background-color: var(--bs-secondary);
|
||||
}
|
||||
|
||||
.list-group-item-secondary {
|
||||
border-color: var(--bs-secondary);
|
||||
color: var(--bs-secondary) !important;
|
||||
}
|
||||
|
||||
a.list-group-item-secondary,
|
||||
button.list-group-item-secondary {
|
||||
color: var(--bs-secondary);
|
||||
}
|
||||
a.list-group-item-secondary:hover,
|
||||
a.list-group-item-secondary:focus,
|
||||
button.list-group-item-secondary:hover,
|
||||
button.list-group-item-secondary:focus {
|
||||
border-color: var(--bs-secondary);
|
||||
color: var(--bs-secondary);
|
||||
}
|
||||
a.list-group-item-secondary.active,
|
||||
button.list-group-item-secondary.active {
|
||||
border-color: var(--bs-secondary) !important;
|
||||
background-color: var(--bs-secondary) !important;
|
||||
}
|
||||
|
||||
.bg-secondary.toast .toast-header .btn-close,
|
||||
.bg-secondary.bs-toast .toast-header .btn-close {
|
||||
background-color: var(--bs-secondary) !important;
|
||||
}
|
||||
|
||||
@keyframes colorPhase {
|
||||
0% {
|
||||
box-shadow: 0 1px 20px 1px var(--bs-primary); /* Primary shadow */
|
||||
}
|
||||
50% {
|
||||
box-shadow: 0 1px 20px 1px var(--bs-bw-green); /* Secondary shadow */
|
||||
}
|
||||
100% {
|
||||
box-shadow: 0 1px 20px 1px var(--bs-primary); /* Primary shadow */
|
||||
}
|
||||
}
|
||||
|
||||
.buy-now .btn-buy-now {
|
||||
position: fixed;
|
||||
bottom: 3rem;
|
||||
right: 1.625rem;
|
||||
z-index: 1080;
|
||||
box-shadow: 0 1px 20px 1px var(--bs-primary); /* Initial shadow */
|
||||
background-color: var(--bs-bw-green); /* Initial background color */
|
||||
color: #fff;
|
||||
animation: colorPhase 3s infinite; /* Apply the color phasing animation */
|
||||
transition:
|
||||
background-color 0.3s ease-in-out,
|
||||
box-shadow 0.3s ease-in-out; /* Smooth transitions */
|
||||
}
|
||||
|
||||
.buy-now .btn-buy-now:hover {
|
||||
background-color: var(
|
||||
--bs-bw-green
|
||||
) !important; /* Keep the primary color on hover */
|
||||
}
|
||||
|
||||
.avatar.avatar-offline:after {
|
||||
background-color: var(--bs-secondary);
|
||||
}
|
||||
|
||||
.navbar.bg-secondary .search-input-wrapper .search-input,
|
||||
.navbar.bg-secondary .search-input-wrapper .search-toggler {
|
||||
background-color: var(--bs-secondary) !important;
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
/**
|
||||
* Perfect Scrollbar
|
||||
*/
|
||||
"use strict";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function () {
|
||||
(function () {
|
||||
const verticalExample = document.getElementById("vertical-example"),
|
||||
horizontalExample = document.getElementById("horizontal-example"),
|
||||
horizVertExample = document.getElementById("both-scrollbars-example");
|
||||
|
||||
// Vertical Example
|
||||
// --------------------------------------------------------------------
|
||||
if (verticalExample) {
|
||||
new PerfectScrollbar(verticalExample, {
|
||||
wheelPropagation: false,
|
||||
});
|
||||
}
|
||||
|
||||
// Horizontal Example
|
||||
// --------------------------------------------------------------------
|
||||
if (horizontalExample) {
|
||||
new PerfectScrollbar(horizontalExample, {
|
||||
wheelPropagation: false,
|
||||
suppressScrollY: true,
|
||||
});
|
||||
}
|
||||
|
||||
// Both vertical and Horizontal Example
|
||||
// --------------------------------------------------------------------
|
||||
if (horizVertExample) {
|
||||
new PerfectScrollbar(horizVertExample, {
|
||||
wheelPropagation: false,
|
||||
});
|
||||
}
|
||||
})();
|
||||
});
|
||||
|
|
@ -1,11 +0,0 @@
|
|||
/**
|
||||
* Form Basic Inputs
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
(function () {
|
||||
// Indeterminate checkbox
|
||||
const checkbox = document.getElementById("defaultCheck2");
|
||||
checkbox.indeterminate = true;
|
||||
})();
|
||||
|
|
@ -1,29 +0,0 @@
|
|||
/**
|
||||
* Account Settings - Account
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", function (e) {
|
||||
(function () {
|
||||
const deactivateAcc = document.querySelector("#formAccountDeactivation");
|
||||
|
||||
// Update/reset user image of account page
|
||||
let accountUserImage = document.getElementById("uploadedAvatar");
|
||||
const fileInput = document.querySelector(".account-file-input"),
|
||||
resetFileInput = document.querySelector(".account-image-reset");
|
||||
|
||||
if (accountUserImage) {
|
||||
const resetImage = accountUserImage.src;
|
||||
fileInput.onchange = () => {
|
||||
if (fileInput.files[0]) {
|
||||
accountUserImage.src = window.URL.createObjectURL(fileInput.files[0]);
|
||||
}
|
||||
};
|
||||
resetFileInput.onclick = () => {
|
||||
fileInput.value = "";
|
||||
accountUserImage.src = resetImage;
|
||||
};
|
||||
}
|
||||
})();
|
||||
});
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
/**
|
||||
* UI Modals
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
(function () {
|
||||
// On hiding modal, remove iframe video/audio to stop playing
|
||||
const youTubeModal = document.querySelector("#youTubeModal"),
|
||||
youTubeModalVideo = youTubeModal.querySelector("iframe");
|
||||
youTubeModal.addEventListener("hidden.bs.modal", function () {
|
||||
youTubeModalVideo.setAttribute("src", "");
|
||||
});
|
||||
|
||||
// Function to get and auto play youTube video
|
||||
const autoPlayYouTubeModal = function () {
|
||||
const modalTriggerList = [].slice.call(
|
||||
document.querySelectorAll('[data-bs-toggle="modal"]'),
|
||||
);
|
||||
modalTriggerList.map(function (modalTriggerEl) {
|
||||
modalTriggerEl.onclick = function () {
|
||||
const theModal = this.getAttribute("data-bs-target"),
|
||||
videoSRC = this.getAttribute("data-theVideo"),
|
||||
videoSRCauto = `${videoSRC}?autoplay=1`,
|
||||
modalVideo = document.querySelector(`${theModal} iframe`);
|
||||
if (modalVideo) {
|
||||
modalVideo.setAttribute("src", videoSRCauto);
|
||||
}
|
||||
};
|
||||
});
|
||||
};
|
||||
|
||||
// Calling function on load
|
||||
autoPlayYouTubeModal();
|
||||
})();
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
// /**
|
||||
// * UI Tooltips & Popovers
|
||||
// */
|
||||
|
||||
"use strict";
|
||||
|
||||
(function () {
|
||||
const popoverTriggerList = [].slice.call(
|
||||
document.querySelectorAll('[data-bs-toggle="popover"]'),
|
||||
);
|
||||
const popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
|
||||
// added { html: true, sanitize: false } option to render button in content area of popover
|
||||
return new bootstrap.Popover(popoverTriggerEl, {
|
||||
html: true,
|
||||
sanitize: false,
|
||||
});
|
||||
});
|
||||
})();
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
/**
|
||||
* UI Toasts
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
(function () {
|
||||
// Bootstrap toasts example
|
||||
// --------------------------------------------------------------------
|
||||
const toastPlacementExample = document.querySelector(".toast-placement-ex"),
|
||||
toastPlacementBtn = document.querySelector("#showToastPlacement");
|
||||
let selectedType, selectedPlacement, toastPlacement;
|
||||
|
||||
// Dispose toast when open another
|
||||
function toastDispose(toast) {
|
||||
if (toast && toast._element !== null) {
|
||||
if (toastPlacementExample) {
|
||||
toastPlacementExample.classList.remove(selectedType);
|
||||
DOMTokenList.prototype.remove.apply(
|
||||
toastPlacementExample.classList,
|
||||
selectedPlacement,
|
||||
);
|
||||
}
|
||||
toast.dispose();
|
||||
}
|
||||
}
|
||||
// Placement Button click
|
||||
if (toastPlacementBtn) {
|
||||
toastPlacementBtn.onclick = function () {
|
||||
if (toastPlacement) {
|
||||
toastDispose(toastPlacement);
|
||||
}
|
||||
selectedType = document.querySelector("#selectTypeOpt").value;
|
||||
selectedPlacement = document
|
||||
.querySelector("#selectPlacement")
|
||||
.value.split(" ");
|
||||
|
||||
toastPlacementExample.classList.add(selectedType);
|
||||
DOMTokenList.prototype.add.apply(
|
||||
toastPlacementExample.classList,
|
||||
selectedPlacement,
|
||||
);
|
||||
toastPlacement = new bootstrap.Toast(toastPlacementExample);
|
||||
toastPlacement.show();
|
||||
};
|
||||
}
|
||||
})();
|
||||
Loading…
Reference in a new issue