From 4dfac2f46f652d31a368e602a7f238fc3bfeb761 Mon Sep 17 00:00:00 2001 From: Rectos VX Date: Sun, 5 May 2024 14:50:36 +0400 Subject: [PATCH 1/8] Add: New theme css system --- .../static/css/theme/componentes.css | 883 ++++++++++++++++++ src/main/resources/static/css/theme/theme.css | 34 + .../resources/static/css/theme/theme.dark.css | 73 ++ .../static/css/theme/theme.light.css | 73 ++ 4 files changed, 1063 insertions(+) create mode 100644 src/main/resources/static/css/theme/componentes.css create mode 100644 src/main/resources/static/css/theme/theme.css create mode 100644 src/main/resources/static/css/theme/theme.dark.css create mode 100644 src/main/resources/static/css/theme/theme.light.css diff --git a/src/main/resources/static/css/theme/componentes.css b/src/main/resources/static/css/theme/componentes.css new file mode 100644 index 00000000..94ad0a36 --- /dev/null +++ b/src/main/resources/static/css/theme/componentes.css @@ -0,0 +1,883 @@ +/* Dark Mode Styles */ +body, +select, +textarea { + background-color: var(--md-sys-color-surface); + color: var(--md-sys-color-on-surface); + transition: background 0.5s ease, color 0.5s ease, border 0.5s ease; +} + +/*.global-buttons-container input:disabled::-webkit-input-placeholder { !* WebKit browsers *!*/ +/* color: #98A0AB;*/ +/*}*/ +/*.global-buttons-container input:disabled:-moz-placeholder { !* Mozilla Firefox 4 to 18 *!*/ +/* color: #98A0AB;*/ +/*}*/ +/*.global-buttons-container input:disabled::-moz-placeholder { !* Mozilla Firefox 19+ *!*/ +/* color: #98A0AB;*/ +/*}*/ +/*.global-buttons-container input:disabled:-ms-input-placeholder { !* Internet Explorer 10+ *!*/ +/* color: #98A0AB;*/ +/*}*/ +/* Scrollbar */ +*::-webkit-scrollbar { + background: var(--md-sys-color-surface); + width: 1rem; +} + +*::-webkit-scrollbar-track { + background: var(--md-sys-color-surface); +} + +*::-webkit-scrollbar-thumb { + border-radius: 2rem; + background-color: var(--md-sys-color-surface-5); + border: 5px solid var(--md-sys-color-surface-5); +} + +/* Alerts */ +.alert { + border-radius: 3rem; +} + +/* Table */ +td { + word-break: break-word; +} + +.input-group-append { + margin: 0rem 0.5rem !important; +} + +.card-header { + background-color: transparent; + border-bottom: none; +} + +#bg-card { + background-color: var(--md-sys-color-surface-5); + border-radius: 3rem; + padding: 2.5rem; +} + +.card { + padding: 1.25rem; + border-radius: 2rem; + background-color: var(--md-sys-color-surface-5); + border: none; +} + +/* Modal */ +.modal-content { + background-color: var(--md-sys-color-surface); + border-radius: 2rem; + border: transparent; +} + +.modal-header, +.modal-body, +.modal-footer { + background-color: var(--md-sys-color-surface-5); + padding: 1.5rem 2rem; + border: none; +} + +.modal-header { + border-radius: 2rem 2rem 0rem 0rem; +} + +.modal-footer { + border-radius: 0rem 0rem 2rem 2rem; +} + +/* Icon fill */ +.material-symbols-rounded { + vertical-align: text-top; +} + +/* Navbar Icon*/ +.nav-icon { + color: var(--md-sys-color-surface); +} + +.sign .nav-icon, +.sign.tool-header-icon { + color: var(--md-nav-on-section-color-sign); + background-color: var(--md-nav-section-color-sign); +} + +.organize .nav-icon, +.organize.tool-header-icon { + color: var(--md-nav-on-section-color-organize); + background-color: var(--md-nav-section-color-organize); +} + +.convert .nav-icon, +.convert.tool-header-icon { + color: var(--md-nav-on-section-color-convert); + background-color: var(--md-nav-section-color-convert); +} + +.security .nav-icon, +.security.tool-header-icon { + color: var(--md-nav-on-section-color-security); + background-color: var(--md-nav-section-color-security); +} + +.other .nav-icon, +.other.tool-header-icon { + color: var(--md-nav-on-section-color-other); + background-color: var(--md-nav-section-color-other); +} + +.advance .nav-icon, +.advance.tool-header-icon { + color: var(--md-nav-on-section-color-advance); + background-color: var(--md-nav-section-color-advance); +} + +.image .nav-icon, +.image.tool-header-icon { + color: var(--md-nav-on-section-color-image); + background-color: var(--md-nav-section-color-image); +} + +.word .nav-icon, +.word.tool-header-icon { + color: var(--md-nav-on-section-color-word); + background-color: var(--md-nav-section-color-word); +} + +.ppt .nav-icon, +.ppt.tool-header-icon { + color: var(--md-nav-on-section-color-ppt); + background-color: var(--md-nav-section-color-ppt); +} + +/* Tool Page Header*/ +.tool-header { + margin-bottom: 2rem; +} + +.tool-header .tool-header-icon { + margin: 0px 1rem; + height: 4rem; + width: 4rem; + border-radius: 25px; + font-size: 3rem; + padding: 0.5rem; + vertical-align: middle; + pointer-events: none; + user-select: none; + -webkit-user-select: none; + -webkit-tap-highlight-color: rgb(0 0 0 / 0%); +} + +.tool-header .tool-header-text { + font-size: 2.5rem; + font-weight: 400; + vertical-align: middle; +} + +/* Home Card Colors*/ +.feature-card .nav-icon { + vertical-align: middle; + font-size: 2rem !important; + padding: 0.5rem; + border-radius: 1.25rem; + color: var(--md-sys-color-surface); +} + +.feature-card .sign .nav-icon { + color: var(--md-nav-on-section-color-sign); + background-color: var(--md-nav-section-color-sign); +} + +.feature-card .organize .nav-icon { + color: var(--md-nav-on-section-color-organize); + background-color: var(--md-nav-section-color-organize); +} + +.feature-card .convert .nav-icon { + color: var(--md-nav-on-section-color-convert); + background-color: var(--md-nav-section-color-convert); +} + +.feature-card .security .nav-icon { + color: var(--md-nav-on-section-color-security); + background-color: var(--md-nav-section-color-security); +} + +.feature-card .other .nav-icon { + color: var(--md-nav-on-section-color-other); + background-color: var(--md-nav-section-color-other); +} + +.feature-card .advance .nav-icon { + color: var(--md-nav-on-section-color-advance); + background-color: var(--md-nav-section-color-advance); +} + +.feature-card .image .nav-icon { + color: var(--md-nav-on-section-color-image); + background-color: var(--md-nav-section-color-image); +} + +.feature-card .word .nav-icon { + color: var(--md-nav-on-section-color-word); + background-color: var(--md-nav-section-color-word); +} + +.feature-card .ppt .nav-icon { + color: var(--md-nav-on-section-color-ppt); + background-color: var(--md-nav-section-color-ppt); +} + +/* Buttons Components */ +.btn { + border-radius: 1.25rem; +} + +.btn-close { + width: auto; + height: auto; + color: var(--md-sys-color-on-surface); + background: transparent; +} + +.btn-close:hover { + color: var(--md-sys-color-on-surface); +} + +/* Primary btn */ +.btn-primary { + color: var(--md-sys-color-on-primary); + background-color: var(--md-sys-color-primary); + border-color: var(--md-sys-color-primary); + box-shadow: none !important; +} + +.btn-primary.disabled, +.btn-primary:disabled { + color: var(--md-sys-color-on-primary); + background-color: var(--md-sys-color-primary); + border-color: var(--md-sys-color-primary); +} + +.btn-primary:hover { + color: var(--md-sys-color-on-primary); + background-color: var(--md-sys-color-primary); + border-color: var(--md-sys-color-primary); + box-shadow: var(--md-sys-elevation-3) !important; +} + +.btn-check:active+.btn-primary, +.btn-check:checked+.btn-primary, +.btn-primary.active, +.btn-primary:active, +.show>.btn-primary.dropdown-toggle { + color: var(--md-sys-color-on-primary); + background-color: var(--md-sys-color-primary); + border-color: var(--md-sys-color-primary); + box-shadow: var(--md-sys-elevation-3) !important; +} + +.btn-check:focus+.btn-primary, +.btn-primary:focus { + color: var(--md-sys-color-on-primary); + background-color: var(--md-sys-color-primary); + border-color: var(--md-sys-color-primary); + box-shadow: var(--md-sys-elevation-3) !important; +} + +/* Secondary btn */ +.btn-secondary { + color: var(--md-sys-color-on-secondary); + background-color: var(--md-sys-color-secondary); + border-color: var(--md-sys-color-secondary); + box-shadow: none !important; +} + +.btn-secondary.disabled, +.btn-secondary:disabled { + color: var(--md-sys-color-on-secondary); + background-color: var(--md-sys-color-secondary); + border-color: var(--md-sys-color-secondary); +} + +.btn-secondary:hover { + color: var(--md-sys-color-on-secondary); + background-color: var(--md-sys-color-secondary); + border-color: var(--md-sys-color-secondary); + box-shadow: var(--md-sys-elevation-3) !important; +} + +.btn-check:active+.btn-secondary, +.btn-check:checked+.btn-secondary, +.btn-secondary.active, +.btn-secondary:active, +.show>.btn-secondary.dropdown-toggle { + color: var(--md-sys-color-on-secondary); + background-color: var(--md-sys-color-secondary); + border-color: var(--md-sys-color-secondary); + box-shadow: var(--md-sys-elevation-3) !important; +} + +.btn-check:focus+.btn-secondary, +.btn-secondary:focus { + color: var(--md-sys-color-on-secondary); + background-color: var(--md-sys-color-secondary); + border-color: var(--md-sys-color-secondary); + box-shadow: var(--md-sys-elevation-3) !important; +} + +/* Danger btn */ +.btn-danger { + color: var(--md-sys-color-on-error); + background-color: var(--md-sys-color-error); + border-color: var(--md-sys-color-error); + box-shadow: none !important; +} + +.btn-danger.disabled, +.btn-danger:disabled { + color: var(--md-sys-color-on-error); + background-color: var(--md-sys-color-error); + border-color: var(--md-sys-color-error); +} + +.btn-danger:hover { + color: var(--md-sys-color-on-error); + background-color: var(--md-sys-color-error); + border-color: var(--md-sys-color-error); + box-shadow: var(--md-sys-elevation-3) !important; +} + +.btn-check:active+.btn-danger, +.btn-check:checked+.btn-danger, +.btn-danger.active, +.btn-danger:active, +.show>.btn-danger.dropdown-toggle { + color: var(--md-sys-color-on-error); + background-color: var(--md-sys-color-error); + border-color: var(--md-sys-color-error); + box-shadow: var(--md-sys-elevation-3) !important; +} + +.btn-check:focus+.btn-danger, +.btn-danger:focus { + color: var(--md-sys-color-on-error); + background-color: var(--md-sys-color-error); + border-color: var(--md-sys-color-error); + box-shadow: var(--md-sys-elevation-3) !important; +} + +/* Info btn */ +.btn-info { + color: var(--md-sys-color-on-tertiary); + background-color: var(--md-sys-color-tertiary); + border-color: var(--md-sys-color-tertiary); + box-shadow: none !important; +} + +.btn-info .disabled, +.btn-info:disabled { + color: var(--md-sys-color-on-tertiary); + background-color: var(--md-sys-color-tertiary); + border-color: var(--md-sys-color-tertiary); +} + +.btn-info:hover { + color: var(--md-sys-color-on-tertiary); + background-color: var(--md-sys-color-tertiary); + border-color: var(--md-sys-color-tertiary); + box-shadow: var(--md-sys-elevation-3) !important; +} + +.btn-check:active+.btn-info, +.btn-check:checked+.btn-info, +.btn-info .active, +.btn-info:active, +.show>.btn-info.dropdown-toggle { + color: var(--md-sys-color-on-tertiary); + background-color: var(--md-sys-color-tertiary); + border-color: var(--md-sys-color-tertiary); + box-shadow: var(--md-sys-elevation-3) !important; +} + +.btn-check:focus+.btn-info, +.btn-info:focus { + color: var(--md-sys-color-on-tertiary); + background-color: var(--md-sys-color-tertiary); + border-color: var(--md-sys-color-tertiary); + box-shadow: var(--md-sys-elevation-3) !important; +} + +/* Info btn */ +.btn-success { + box-shadow: none !important; +} + +.btn-success:hover, +.btn-check:active+.btn-success, +.btn-check:checked+.btn-success, +.btn-success .active, +.btn-success:active, +.show>.btn-success.dropdown-toggle, +.btn-check:focus+.btn-success, +.btn-success:focus { + box-shadow: var(--md-sys-elevation-3) !important; +} + +/* Warning btn */ +.btn-warning { + box-shadow: none !important; +} + +.btn-warning:hover, +.btn-check:active+.btn-warning, +.btn-check:checked+.btn-warning, +.btn-warning .active, +.btn-warning:active, +.show>.btn-warning.dropdown-toggle, +.btn-check:focus+.btn-warning, +.btn-warning:focus { + box-shadow: var(--md-sys-elevation-3) !important; +} + +/* Outline Primary btn */ +.btn-outline-primary { + color: var(--md-sys-color-primary); + background-color: transparent; + border-color: var(--md-sys-color-primary); + box-shadow: none !important; +} + +.btn-outline-primary .disabled, +.btn-outline-primary:disabled { + color: var(--md-sys-color-primary); + background-color: transparent; + border-color: var(--md-sys-color-primary); +} + +.btn-outline-primary:hover { + color: var(--md-sys-color-on-primary); + background-color: var(--md-sys-color-primary); + border-color: var(--md-sys-color-primary); +} + +.btn-check:active+.btn-outline-primary, +.btn-check:checked+.btn-outline-primary, +.btn-outline-primary .active, +.btn-outline-primary:active, +.show>.btn-outline-primary.dropdown-toggle { + color: var(--md-sys-color-on-primary); + background-color: var(--md-sys-color-primary); + border-color: var(--md-sys-color-primary); +} + +.btn-check:focus+.btn-outline-primary, +.btn-outline-primary:focus { + color: var(--md-sys-color-on-primary); + background-color: var(--md-sys-color-primary); + border-color: var(--md-sys-color-primary); +} + +/* Outline Secondary btn */ +.btn-outline-secondary { + color: var(--md-sys-color-secondary); + background-color: transparent; + border-color: var(--md-sys-color-secondary); + box-shadow: none !important; +} + +.btn-outline-secondary .disabled, +.btn-outline-secondary:disabled { + color: var(--md-sys-color-secondary); + background-color: transparent; + border-color: var(--md-sys-color-secondary); +} + +.btn-outline-secondary:hover { + color: var(--md-sys-color-on-secondary); + background-color: var(--md-sys-color-secondary); + border-color: var(--md-sys-color-secondary); +} + +.btn-check:active+.btn-outline-secondary, +.btn-check:checked+.btn-outline-secondary, +.btn-outline-secondary .active, +.btn-outline-secondary:active, +.show>.btn-outline-secondary.dropdown-toggle { + color: var(--md-sys-color-on-secondary); + background-color: var(--md-sys-color-secondary); + border-color: var(--md-sys-color-secondary); +} + +.btn-check:focus+.btn-outline-secondary, +.btn-outline-secondary:focus { + color: var(--md-sys-color-on-secondary); + background-color: var(--md-sys-color-secondary); + border-color: var(--md-sys-color-secondary); +} + +/* Disabled btn */ +.btn.disabled, +.btn:disabled, +fieldset:disabled .btn { + pointer-events: none; + opacity: 0.65; +} + +/* Range Slider */ +.form-range:focus::-webkit-slider-thumb { + box-shadow: 0 0 0 1px var(--md-sys-color-surface), 0 0 0 .25rem var(--md-sys-color-primary) +} + +.form-range:focus::-moz-range-thumb { + box-shadow: 0 0 0 1px var(--md-sys-color-surface), 0 0 0 .25rem var(--md-sys-color-primary) +} + +.form-range::-webkit-slider-thumb { + background-color: var(--md-sys-color-primary); +} + + +.form-range::-webkit-slider-thumb:active { + background-color: var(--md-sys-color-primary) +} + +.form-range::-webkit-slider-runnable-track { + background-color: var(--md-sys-color-on-primary) +} + +.form-range::-moz-range-thumb { + background-color: var(--md-sys-color-primary); +} + + +/* checkbox */ +.form-check { + margin-bottom: 1rem; +} + +.form-check-label { + margin-left: 0.5rem; + margin-right: 0.5rem; +} + +.form-check-input { + width: 1.5rem; + height: 1.5rem; + margin: 0; + background-color: var(--md-sys-color-surface); + border: 2px solid var(--md-sys-color-outline-variant); +} + +.form-check-input:checked { + background-color: var(--md-sys-color-primary); + border-color: var(--md-sys-color-outline-variant); + border: none; +} + +.form-check-input:focus { + border-color: var(--md-sys-color-outline-variant); + outline: 0; + box-shadow: 0 0 0 .25rem var(--md-sys-color-outline-variant); +} + +.form-check-input:checked[type=checkbox] { + background-image: none; +} + +.form-check input[type="checkbox"]:checked+span.material-symbols-rounded { + display: block; +} + +.form-check span.material-symbols-rounded { + display: none; + color: var(--md-sys-color-surface); + position: absolute; + margin-left: -1.5rem; + margin-right: -1.5rem; + pointer-events: none; + user-select: none; + -webkit-user-select: none; + -webkit-tap-highlight-color: rgb(0 0 0 / 0%); +} + +.form-check { + min-height: 22px; + padding-left: 0; +} + +.form-check > label { + padding-left: 29px !important; + min-height: 22px; + line-height: 22px; + display: inline-block; + position: relative; + vertical-align: top; + margin-bottom: 0; + font-weight: normal; + cursor: pointer; + padding-right: 29px !important; +} + +.form-check > input:first-child { + position: absolute !important; + opacity: 0; + margin: 0; + background-color: var(--md-sys-state-hover-opacity); + border-radius: 50%; + appearance: none; + -moz-appearance: none; + -webkit-appearance: none; + -ms-appearance: none; + display: block; + width: 22px; + height: 22px; + outline: none; + transform: scale(1.65); + -ms-transform: scale(1.65); + transition: opacity .3s; +} + +.form-check > input:first-child:hover { + opacity: 1; + transform: scale(1.65); + -ms-transform: scale(1.65); +} + +.form-check > input:first-child:disabled { + cursor: default; +} + +.form-check > input:first-child:disabled + label, +.form-check > input:first-child:disabled + input[type="hidden"] + label, +.form-check > input:first-child:disabled + label::before, +.form-check > input:first-child:disabled + input[type="hidden"] + label::before { + pointer-events: none; + cursor: default; + filter: alpha(opacity=65); + -webkit-box-shadow: none; + box-shadow: none; + opacity: .65; +} + +.form-check > input:first-child + label::before, +.form-check > input:first-child + input[type="hidden"] + label::before { + content: ""; + display: inline-block; + position: absolute; + width: 22px; + height: 22px; + border: 2px solid var(--md-sys-color-on-surface-variant); + border-radius: 3px; + margin-left: -29px; + box-sizing: border-box; + margin-right: -29px; +} + +.form-check > input:first-child:checked + label::after, +.form-check > input:first-child:checked + input[type="hidden"] + label::after { + content: ""; + display: inline-block; + position: absolute; + top: 0; + left: 0; + width: 7px; + height: 10px; + border: solid 2px; + border-left: none; + border-top: none; + transform: translate(7.75px, 4.5px) rotate(45deg); + -ms-transform: translate(7.75px, 4.5px) rotate(45deg); + box-sizing: border-box; + right: 0; + margin-right: 14px; + border-bottom-color: var(--md-sys-color-on-primary); + border-right-color: var(--md-sys-color-on-primary); +} + +.form-check > input:first-child::-ms-check { + opacity: 0; + border-radius: 50%; + background-color: var(--md-sys-color-primary); +} + +.form-check > input:first-child:active { + transform: scale(0); + -ms-transform: scale(0); + opacity: 1; + transition: opacity 0s, transform 0s; +} + +.form-check > input[type="radio"]:first-child + label::before, +.form-check > input[type="radio"]:first-child + input[type="hidden"] + label::before { + border-radius: 50%; +} + +.form-check > input[type="radio"]:first-child:checked + label::before, +.form-check > input[type="radio"]:first-child:checked + input[type="hidden"] + label::before { + background-color: transparent; +} + +.form-check > input[type="radio"]:first-child:checked + label::after, +.form-check > input[type="radio"]:first-child:checked + input[type="hidden"] + label::after { + content: ""; + position: absolute; + width: 10px; + height: 10px; + border-radius: 50%; + border: none; + top: 6px; + left: 6px; + transform: none; + -ms-transform: none; +} + +.form-check > input[type="checkbox"]:first-child:checked + label::after, +.form-check > input[type="checkbox"]:first-child:checked + input[type="hidden"] + label::after { + width: 8px; + height: 14px; + transform: translate(7px, 2px) rotate(45deg); + -ms-transform: translate(7px, 2px) rotate(45deg); +} + +.form-check-inline { + display: inline-block; +} + +.form-check-inline + .form-check-inline { + margin-left: .75rem; + margin-top: 6px; +} + +.form-check > input:first-child:checked + label::before, +.form-check > input:first-child:checked + input[type="hidden"] + label::before { + background-color: var(--md-sys-color-primary); + border-color: var(--md-sys-color-primary); +} + +/* Forms */ +textarea.form-control { + border-radius: 1.5rem !important; + ; +} + +.form-control, +.form-select, +.form-control:disabled, +.form-control[readonly] { + color: var(--md-sys-color-on-surface); + background-color: var(--md-sys-color-surface-container-low); + border-color: var(--md-sys-color-outline-variant); + border-radius: 3rem !important; +} + +.form-control:focus, +.form-select:focus { + color: var(--md-sys-color-on-surface); + background-color: var(--md-sys-color-surface-container-lowest); + border-color: var(--md-sys-color-outline-variant); + outline: 0; + box-shadow: 0 0 0 0.25rem var(--md-sys-color-outline-variant); +} + +/* Navbar Components */ +.navbar-brand { + color: var(--md-sys-color-on-surface) !important; +} + +.nav-link { + transition: none !important; + padding: 0.5rem 1rem !important; + border: 1px transparent; +} + +.navbar-nav li { + flex: 1; +} + +.navbar-nav .nav-link { + color: var(--md-sys-color-on-surface-variant); +} + +.navbar-nav .nav-link:focus, +.navbar-nav .nav-link:hover { + color: var(--md-sys-color-on-secondary-container); + background-color: var(--md-sys-color-surface-3); + border-radius: 3rem; + font-weight: 500; + font-variation-settings: var(--md-sys-icon-fill-1); +} + +.navbar-nav .nav-link.active, +.navbar-nav .show>.nav-link { + color: var(--md-sys-color-on-secondary-container); + background-color: var(--md-sys-color-surface-5); + border-radius: 3rem; + font-weight: 500; + font-variation-settings: var(--md-sys-icon-fill-1); +} + +.menu-title { + padding: 0 1rem; +} + +.dropdown-menu { + margin: 0 1%; + padding: 1.5rem 0; + border-radius: 1rem; + color: var(--md-sys-color-on-surface); + background-color: var(--md-sys-color-surface-container); + border: 1px solid var(--md-sys-color-surface-5); + box-shadow: var(--md-sys-elevation-2); +} + +.dropdown-item { + color: var(--md-sys-color-on-surface); + padding: 0.25rem 1rem; +} + +.dropdown-item:focus, +.dropdown-item:hover { + color: var(--md-sys-color-on-surface); + background-color: var(--md-sys-color-surface-5); + border-radius: 3rem; + font-weight: 500; + font-variation-settings: var(--md-sys-icon-fill-1); +} + +.dropdown-item.active, +.dropdown-item:active { + color: var(--md-sys-color-on-surface); + background-color: var(--md-sys-color-surface-5); + border-radius: 3rem; + font-weight: 500; + font-variation-settings: var(--md-sys-icon-fill-1); +} + +/* list-group-item */ +.list-group-item { + color: var(--md-sys-color-on-surface); + background-color: var(--md-sys-color-surface-5); + border: 1px solid var(--md-sys-color-outline-variant); +} + +.list-group-item:first-child { + border-radius: 1rem 1rem 0rem 0rem; +} + +.list-group-item:last-child { + border-radius: 0rem 0rem 1rem 1rem; +} + +.list-group-item:only-child { + border-radius: 1rem 1rem 1rem 1rem; +} + +.list-group-item .btn { + padding: .375rem .5rem; +} \ No newline at end of file diff --git a/src/main/resources/static/css/theme/theme.css b/src/main/resources/static/css/theme/theme.css new file mode 100644 index 00000000..3c9565d1 --- /dev/null +++ b/src/main/resources/static/css/theme/theme.css @@ -0,0 +1,34 @@ +:where(html, .light-theme, .dark-theme), +.tokens, +:host { + /* Define surface colors based on primary color */ + --md-sys-color-surface-1: color-mix(in srgb, var(--md-sys-color-primary) 13%, rgba(0, 0, 0, 0.05) 5%); + --md-sys-color-surface-2: color-mix(in srgb, var(--md-sys-color-primary) 13%, rgba(0, 0, 0, 0.08) 5%); + --md-sys-color-surface-3: color-mix(in srgb, var(--md-sys-color-primary) 13%, rgba(0, 0, 0, 0.11) 5%); + --md-sys-color-surface-4: color-mix(in srgb, var(--md-sys-color-primary) 13%, rgba(0, 0, 0, 0.12) 5%); + --md-sys-color-surface-5: color-mix(in srgb, var(--md-sys-color-primary) 13%, rgba(0, 0, 0, 0.14) 5%); + /* Icon fill */ + --md-sys-icon-fill-0: 'FILL' 0, 'wght' 500; + --md-sys-icon-fill-1: 'FILL' 1, 'wght' 500; + /* Hover Color */ + --md-sys-state-hover-opacity: color-mix(in srgb, var(--md-sys-color-primary), rgba(0, 0, 0, 0) 80%); + /* Shadow */ + --md-sys-color-shadow: #000000; + --md-elevation-shadow-color-rgb: 0, 0, 0; + --md-elevation-shadow-color: var(--md-elevation-shadow-color-rgb); + /* Shadow Elevation*/ + --md-sys-elevation-0: 0px 0px 0px 0px rgb(var(--md-elevation-shadow-color), 0.2), 0px 0px 0px 0px rgb(var(--md-elevation-shadow-color), 0.14), 0px 0px 0px 0px rgb(var(--md-elevation-shadow-color), 0.12); + --md-sys-elevation-1: 0px 3px 1px -2px rgb(var(--md-elevation-shadow-color), 0.2), 0px 2px 2px 0px rgb(var(--md-elevation-shadow-color), 0.14), 0px 1px 5px 0px rgb(var(--md-elevation-shadow-color), 0.12); + --md-sys-elevation-2: 0px 2px 4px -1px rgb(var(--md-elevation-shadow-color), 0.2), 0px 4px 5px 0px rgb(var(--md-elevation-shadow-color), 0.14), 0px 1px 10px 0px rgb(var(--md-elevation-shadow-color), 0.12); + --md-sys-elevation-3: 0px 5px 5px -3px rgb(var(--md-elevation-shadow-color), 0.2), 0px 8px 10px 1px rgb(var(--md-elevation-shadow-color), 0.14), 0px 3px 14px 2px rgb(var(--md-elevation-shadow-color), 0.12); + --md-sys-elevation-4: 0px 5px 5px -3px rgb(var(--md-elevation-shadow-color) / 0.2), 0px 8px 10px 1px rgb(var(--md-elevation-shadow-color), 0.14), 0px 3px 14px 2px rgb(var(--md-elevation-shadow-color), 0.12); + --md-sys-elevation-5: 0px 8px 10px -6px rgb(var(--md-elevation-shadow-color), 0.2), 0px 16px 24px 2px rgb(var(--md-elevation-shadow-color), 0.14), 0px 6px 30px 5px rgb(var(--md-elevation-shadow-color), 0.12); +} + +.fill { + font-variation-settings: var(--md-sys-icon-fill-1); +} + +.no-fill { + font-variation-settings: var(--md-sys-icon-fill-0); +} \ No newline at end of file diff --git a/src/main/resources/static/css/theme/theme.dark.css b/src/main/resources/static/css/theme/theme.dark.css new file mode 100644 index 00000000..ad665788 --- /dev/null +++ b/src/main/resources/static/css/theme/theme.dark.css @@ -0,0 +1,73 @@ +:root { + /* Colors */ + --md-sys-color-primary: rgb(162 201 255); + --md-sys-color-surface-tint: rgb(162 201 255); + --md-sys-color-on-primary: rgb(0 49 92); + --md-sys-color-primary-container: rgb(0 118 208); + --md-sys-color-on-primary-container: rgb(255 255 255); + --md-sys-color-secondary: rgb(169 201 246); + --md-sys-color-on-secondary: rgb(12 49 87); + --md-sys-color-secondary-container: rgb(29 62 100); + --md-sys-color-on-secondary-container: rgb(180 210 255); + --md-sys-color-tertiary: rgb(193 194 248); + --md-sys-color-on-tertiary: rgb(42 44 88); + --md-sys-color-tertiary-container: rgb(110 112 161); + --md-sys-color-on-tertiary-container: rgb(255 255 255); + --md-sys-color-error: rgb(255 180 171); + --md-sys-color-on-error: rgb(105 0 5); + --md-sys-color-error-container: rgb(147 0 10); + --md-sys-color-on-error-container: rgb(255 218 214); + --md-sys-color-background: rgb(15 20 26); + --md-sys-color-on-background: rgb(223 226 235); + --md-sys-color-surface: rgb(15 20 26); + --md-sys-color-on-surface: rgb(223 226 235); + --md-sys-color-surface-variant: rgb(64 71 83); + --md-sys-color-on-surface-variant: rgb(192 199 213); + --md-sys-color-outline: rgb(138 145 158); + --md-sys-color-outline-variant: rgb(64 71 83); + --md-sys-color-shadow: rgb(0 0 0); + --md-sys-color-scrim: rgb(0 0 0); + --md-sys-color-inverse-surface: rgb(223 226 235); + --md-sys-color-inverse-on-surface: rgb(45 49 55); + --md-sys-color-inverse-primary: rgb(0 96 170); + --md-sys-color-primary-fixed: rgb(211 228 255); + --md-sys-color-on-primary-fixed: rgb(0 28 56); + --md-sys-color-primary-fixed-dim: rgb(162 201 255); + --md-sys-color-on-primary-fixed-variant: rgb(0 72 130); + --md-sys-color-secondary-fixed: rgb(211 228 255); + --md-sys-color-on-secondary-fixed: rgb(0 28 56); + --md-sys-color-secondary-fixed-dim: rgb(169 201 246); + --md-sys-color-on-secondary-fixed-variant: rgb(40 72 111); + --md-sys-color-tertiary-fixed: rgb(225 224 255); + --md-sys-color-on-tertiary-fixed: rgb(20 22 66); + --md-sys-color-tertiary-fixed-dim: rgb(193 194 248); + --md-sys-color-on-tertiary-fixed-variant: rgb(64 67 112); + --md-sys-color-surface-dim: rgb(15 20 26); + --md-sys-color-surface-bright: rgb(53 57 64); + --md-sys-color-surface-container-lowest: rgb(10 14 20); + --md-sys-color-surface-container-low: rgb(24 28 34); + --md-sys-color-surface-container: rgb(28 32 38); + --md-sys-color-surface-container-high: rgb(38 42 49); + --md-sys-color-surface-container-highest: rgb(49 53 60); + /* Tools Color */ + --md-nav-section-color-opacity: 1; + --md-nav-on-section-color-opacity: 1; + --md-nav-section-color-sign: rgba(25, 101, 212, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-sign: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-organize: rgba(120, 130, 255, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-organize: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-convert: rgba(25, 177, 212, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-convert: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-security: rgba(255, 120, 146, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-security: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-other: rgba(72, 189, 84, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-other: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-advance: rgba(245, 84, 84, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-advance: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-image: rgba(212, 172, 25, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-image: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-word: rgba(61, 153, 245, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-word: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-ppt: rgba(255, 128, 0, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-ppt: rgba(28, 27, 31, var(--md-nav-on-section-color-opacity)); +} \ No newline at end of file diff --git a/src/main/resources/static/css/theme/theme.light.css b/src/main/resources/static/css/theme/theme.light.css new file mode 100644 index 00000000..74101fe2 --- /dev/null +++ b/src/main/resources/static/css/theme/theme.light.css @@ -0,0 +1,73 @@ +:root { + /* Colors */ + --md-sys-color-primary: rgb(0 96 170); + --md-sys-color-surface-tint: rgb(0 96 170); + --md-sys-color-on-primary: rgb(255 255 255); + --md-sys-color-primary-container: rgb(80 163 255); + --md-sys-color-on-primary-container: rgb(0 20 43); + --md-sys-color-secondary: rgb(65 96 136); + --md-sys-color-on-secondary: rgb(255 255 255); + --md-sys-color-secondary-container: rgb(188 215 255); + --md-sys-color-on-secondary-container: rgb(32 65 103); + --md-sys-color-tertiary: rgb(88 90 138); + --md-sys-color-on-tertiary: rgb(255 255 255); + --md-sys-color-tertiary-container: rgb(151 153 205); + --md-sys-color-on-tertiary-container: rgb(7 9 55); + --md-sys-color-error: rgb(186 26 26); + --md-sys-color-on-error: rgb(255 255 255); + --md-sys-color-error-container: rgb(255 218 214); + --md-sys-color-on-error-container: rgb(65 0 2); + --md-sys-color-background: rgb(248 249 255); + --md-sys-color-on-background: rgb(24 28 34); + --md-sys-color-surface: rgb(248 249 255); + --md-sys-color-on-surface: rgb(24 28 34); + --md-sys-color-surface-variant: rgb(220 227 241); + --md-sys-color-on-surface-variant: rgb(64 71 83); + --md-sys-color-outline: rgb(112 119 132); + --md-sys-color-outline-variant: rgb(192 199 213); + --md-sys-color-shadow: rgb(0 0 0); + --md-sys-color-scrim: rgb(0 0 0); + --md-sys-color-inverse-surface: rgb(45 49 55); + --md-sys-color-inverse-on-surface: rgb(238 241 250); + --md-sys-color-inverse-primary: rgb(162 201 255); + --md-sys-color-primary-fixed: rgb(211 228 255); + --md-sys-color-on-primary-fixed: rgb(0 28 56); + --md-sys-color-primary-fixed-dim: rgb(162 201 255); + --md-sys-color-on-primary-fixed-variant: rgb(0 72 130); + --md-sys-color-secondary-fixed: rgb(211 228 255); + --md-sys-color-on-secondary-fixed: rgb(0 28 56); + --md-sys-color-secondary-fixed-dim: rgb(169 201 246); + --md-sys-color-on-secondary-fixed-variant: rgb(40 72 111); + --md-sys-color-tertiary-fixed: rgb(225 224 255); + --md-sys-color-on-tertiary-fixed: rgb(20 22 66); + --md-sys-color-tertiary-fixed-dim: rgb(193 194 248); + --md-sys-color-on-tertiary-fixed-variant: rgb(64 67 112); + --md-sys-color-surface-dim: rgb(215 218 227); + --md-sys-color-surface-bright: rgb(248 249 255); + --md-sys-color-surface-container-lowest: rgb(255 255 255); + --md-sys-color-surface-container-low: rgb(241 243 253); + --md-sys-color-surface-container: rgb(235 238 247); + --md-sys-color-surface-container-high: rgb(229 232 241); + --md-sys-color-surface-container-highest: rgb(223 226 235); + /* Tools Color */ + --md-nav-section-color-opacity: 1; + --md-nav-on-section-color-opacity: 1; + --md-nav-section-color-sign: rgba(25, 101, 212, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-sign: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-organize: rgba(120, 130, 255, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-organize: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-convert: rgba(25, 177, 212, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-convert: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-security: rgba(255, 120, 146, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-security: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-other: rgba(72, 189, 84, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-other: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-advance: rgba(245, 84, 84, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-advance: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-image: rgba(212, 172, 25, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-image: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-word: rgba(61, 153, 245, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-word: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity)); + --md-nav-section-color-ppt: rgba(255, 128, 0, var(--md-nav-section-color-opacity)); + --md-nav-on-section-color-ppt: rgba(255, 251, 254, var(--md-nav-on-section-color-opacity)); +} \ No newline at end of file From eb8a494b5c0f1306b7529d22a413b43ecc62d458 Mon Sep 17 00:00:00 2001 From: Rectos VX Date: Sun, 5 May 2024 14:53:22 +0400 Subject: [PATCH 2/8] Remove: Deleted old theme css --- src/main/resources/static/css/dark-mode.css | 141 ------------------- src/main/resources/static/css/light-mode.css | 23 --- 2 files changed, 164 deletions(-) delete mode 100644 src/main/resources/static/css/dark-mode.css delete mode 100644 src/main/resources/static/css/light-mode.css diff --git a/src/main/resources/static/css/dark-mode.css b/src/main/resources/static/css/dark-mode.css deleted file mode 100644 index b874f410..00000000 --- a/src/main/resources/static/css/dark-mode.css +++ /dev/null @@ -1,141 +0,0 @@ -/* Dark Mode Styles */ -body, -select, -textarea { - --body-background-color: 51, 51, 51; - --base-font-color: 255, 255, 255; - background-color: rgb(var(--body-background-color)) !important; - color: rgb(var(--base-font-color)) !important; -} -.card { - background-color: rgb(var(--body-background-color)) !important; - border: 1px solid #999; - color: rgb(var(--base-font-color)) !important; -} - -a { - color: #add8e6; -} -a:hover { - color: #87ceeb; /* Slightly brighter blue on hover for accessibility */ -} - -.dark-card { - background-color: rgb(var(--body-background-color)) !important; - color: rgb(var(--base-font-color)) !important; -} -.jumbotron { - background-color: #222; /* or any other dark color */ - color: rgb(var(--base-font-color)) !important; /* or any other light color */ -} - -.list-group { - background-color: #222 !important; - color: rgb(var(--base-font-color)) !important; -} -.list-group-item { - background-color: #222 !important; - color: rgb(var(--base-font-color)) !important; -} -#support-section { - background-color: #444 !important; -} - -#pages-container-wrapper { - --background-color: rgba(255, 255, 255, 0.046) !important; - --scroll-bar-color: #4c4c4c !important; - --scroll-bar-thumb: #d3d3d3 !important; - --scroll-bar-thumb-hover: rgb(var(--base-font-color)) !important; -} - -.favorite-icon img { - filter: brightness(0) invert(1) !important; -} -table thead { - background-color: #333 !important; - border: 1px solid #444; -} -table th, -table td { - border: 1px solid #444 !important; - color: white; -} -.btn { - background-color: #444 !important; - border: none; - color: #fff !important; -} -.btn-primary { - background-color: #007bff !important; - border: none; - color: #fff !important; -} -.btn-secondary { - background-color: #6c757d !important; - border: none; - color: #fff !important; -} -.btn-info { - background-color: #17a2b8 !important; - border: none; - color: #fff !important; -} -.btn-danger { - background-color: #dc3545 !important; - border: none; - color: #fff !important; -} - -.btn-warning { - background-color: #ffc107 !important; - border: none; - color: #000 !important; -} - -.btn-outline-secondary { - color: #fff !important; - border-color: #fff; -} -.btn-outline-secondary:hover { - background-color: #444 !important; - color: #007bff !important; - border-color: #007bff; -} -.blackwhite-icon { - filter: brightness(0) invert(1); -} -hr { - border-color: rgba(255, 255, 255, 0.6); /* semi-transparent white */ - background-color: rgba(255, 255, 255, 0.6); /* for some browsers that might use background instead of border for
*/ -} - -.modal-content { - color: #fff !important; - border-color: #fff; -} - -.global-buttons-container input { - background-color: #323948; - caret-color: #ffffff; - color: #ffffff; -} -.global-buttons-container input::placeholder { - color: #ffffff; -} - -.global-buttons-container input:disabled::-webkit-input-placeholder { - /* WebKit browsers */ - color: #6e6865; -} -.global-buttons-container input:disabled:-moz-placeholder { - /* Mozilla Firefox 4 to 18 */ - color: #6e6865; -} -.global-buttons-container input:disabled::-moz-placeholder { - /* Mozilla Firefox 19+ */ - color: #6e6865; -} -.global-buttons-container input:disabled:-ms-input-placeholder { - /* Internet Explorer 10+ */ - color: #6e6865; -} diff --git a/src/main/resources/static/css/light-mode.css b/src/main/resources/static/css/light-mode.css deleted file mode 100644 index f7e79b90..00000000 --- a/src/main/resources/static/css/light-mode.css +++ /dev/null @@ -1,23 +0,0 @@ -/* Dark Mode Styles */ -body { - --body-background-color: 255, 255, 255; - --base-font-color: 33, 37, 41; -} - -.global-buttons-container input { - background-color: #ffffff; - /*caret-color: #ffffff;*/ - /*color: #ffffff;*/ -} -/*.global-buttons-container input:disabled::-webkit-input-placeholder { !* WebKit browsers *!*/ -/* color: #98A0AB;*/ -/*}*/ -/*.global-buttons-container input:disabled:-moz-placeholder { !* Mozilla Firefox 4 to 18 *!*/ -/* color: #98A0AB;*/ -/*}*/ -/*.global-buttons-container input:disabled::-moz-placeholder { !* Mozilla Firefox 19+ *!*/ -/* color: #98A0AB;*/ -/*}*/ -/*.global-buttons-container input:disabled:-ms-input-placeholder { !* Internet Explorer 10+ *!*/ -/* color: #98A0AB;*/ -/*}*/ From 04d1ff382262a4e93f749ea81a36f52522116c6d Mon Sep 17 00:00:00 2001 From: Rectos VX Date: Sun, 5 May 2024 15:07:44 +0400 Subject: [PATCH 3/8] Update: Changed pages css to adapte new theme system --- src/main/resources/static/css/footer.css | 6 +- src/main/resources/static/css/home.css | 57 +++-- src/main/resources/static/css/login.css | 39 +--- src/main/resources/static/css/multi-tool.css | 147 ++++++++++--- src/main/resources/static/css/navbar.css | 204 +++++++++++++++--- src/main/resources/static/css/pdfActions.css | 44 +++- src/main/resources/static/css/pipeline.css | 13 +- .../static/css/theme/componentes.css | 1 - 8 files changed, 387 insertions(+), 124 deletions(-) diff --git a/src/main/resources/static/css/footer.css b/src/main/resources/static/css/footer.css index f6cf093d..b004cc27 100644 --- a/src/main/resources/static/css/footer.css +++ b/src/main/resources/static/css/footer.css @@ -10,11 +10,15 @@ display: flex; align-items: center; /* Center children horizontally */ flex-grow: 1; + flex-direction: column; } .footer-powered-by { margin-top: auto; /* Pushes the text to the bottom */ - color: grey; text-align: center; /* Centers the text inside the div */ width: 100%; /* Full width to center the text properly */ } + +.footer-icon { + font-size: 2rem; +} \ No newline at end of file diff --git a/src/main/resources/static/css/home.css b/src/main/resources/static/css/home.css index d975dd79..0112f136 100644 --- a/src/main/resources/static/css/home.css +++ b/src/main/resources/static/css/home.css @@ -1,18 +1,19 @@ #searchBar { - background-image: url("../images/search.svg"); - background-position: 16px 16px; - background-repeat: no-repeat; + color: var(--md-sys-color-on-surface); + background-color: var(--md-sys-color-surface-container-low); width: 100%; font-size: 16px; - margin-bottom: 12px; - padding: 12px 20px 12px 40px; - border: 1px solid #ddd; + margin-bottom: 2rem; + padding: 0.75rem 3.5rem; + border: 0.1rem solid var(--md-sys-color-outline-variant); + border-radius: 3rem; + outline-color: var(--md-sys-color-outline-variant); } -.dark-mode-search { - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' heiā€¦ 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") !important; - color: #f8f9fa !important; - background-color: #212529 !important; - border-color: #343a40 !important; + +.search-icon { + position: absolute; + margin: 0.75rem 1rem; + border: 0.1rem solid transparent; } .features-container { @@ -22,23 +23,23 @@ } .feature-card { - border: 2px solid rgba(0, 0, 0, 0.25); - border-radius: 0.25rem; + border: 2px solid var(--md-sys-color-surface-5); + border-radius: 2rem; padding: 1.25rem; display: flex; flex-direction: column; align-items: flex-start; - background: rgba(13, 110, 253, 0.05); + background: var(--md-sys-color-surface-5); transition: transform 0.3s, border 0.3s; transform-origin: center center; - outline: 2px solid transparent; + outline: 0px solid transparent; } .feature-card a { text-decoration: none; - color: inherit; + color: var(--md-sys-color-on-surface); display: flex; flex-direction: column; width: 100%; @@ -47,45 +48,43 @@ .feature-card .card-text { flex: 1; + margin-left: 3.5rem; } .feature-card:hover { - outline: 1px solid rgba(0, 0, 0, 0.5); cursor: pointer; transform: scale(1.1); + box-shadow: var(--md-sys-elevation-3); } -.feature-card:hover .card-title { - text-decoration: underline; -} .card-title.text-primary { - color: #000; /* Replace with your desired shade of blue */ + color: #000; } .home-card-icon { - width: 30px; - height: 30px; + width: 3rem; + height: 3rem; transform: translateY(-5px); } -.home-card-icon-colour { - filter: invert(0.2) sepia(2) saturate(50) hue-rotate(190deg); -} .favorite-icon { display: none; position: absolute; top: 10px; right: 10px; + color: var(--md-sys-color-secondary); } /* Only show the favorite icons when the parent card is being hovered over */ .feature-card:hover .favorite-icon { display: block; } + .favorite-icon img { - filter: brightness(0); + filter: brightness(0) invert(var(--md-theme-filter-color)); } .jumbotron { - padding: 3rem 3rem; /* Reduce vertical padding */ -} + padding: 3rem 3rem; + /* Reduce vertical padding */ +} \ No newline at end of file diff --git a/src/main/resources/static/css/login.css b/src/main/resources/static/css/login.css index 743ee606..7ed2a90b 100644 --- a/src/main/resources/static/css/login.css +++ b/src/main/resources/static/css/login.css @@ -8,7 +8,6 @@ body { align-items: center; padding-top: 40px; padding-bottom: 40px; - background-color: #f5f5f5; } .form-signin { @@ -37,6 +36,7 @@ body { border-top-left-radius: 0; border-top-right-radius: 0; } + .container-flex { display: flex; flex-direction: column; @@ -44,41 +44,22 @@ body { width: 100%; /* Set width to 100% */ align-items: center; /* Center its children horizontally */ } + .footer-bottom { margin-top: auto; } -body.light-mode input:-webkit-autofill, -body.light-mode input:-webkit-autofill:hover, -body.light-mode input:-webkit-autofill:focus, -body.light-mode input:-webkit-autofill:active { - -webkit-text-fill-color: #212529; /* Dark font color */ - -webkit-box-shadow: 0 0 0 1000px #f8f9fa inset; /* Light background color */ + +.form-control { + border-radius: 1.25rem !important; } -/* Dark Mode */ -body.dark-mode input:-webkit-autofill, -body.dark-mode input:-webkit-autofill:hover, -body.dark-mode input:-webkit-autofill:focus, -body.dark-mode input:-webkit-autofill:active { - -webkit-text-fill-color: #f8f9fa; /* Light font color */ - -webkit-box-shadow: 0 0 0 1000px #212529 inset; /* Dark background color */ -} -/* Light Mode */ -body.light-mode .form-floating > input:focus + label { - color: #212529 !important; /* Dark text for light background */ +.form-signin .form-floating { + margin: 1rem 0px; } -/* Dark Mode */ -body.dark-mode .form-floating > input:focus + label { - color: #fff !important; /* Light text for dark background */ -} - -body.light-mode .form-floating > label { - color: #212529 !important; /* Dark text for light background */ -} - -body.dark-mode .form-floating > label { - color: #fff !important; /* Light text for dark background */ +input[type="checkbox" i] { + margin: 0px 5px; + vertical-align: middle; } /* Removing default styles for ul and li */ diff --git a/src/main/resources/static/css/multi-tool.css b/src/main/resources/static/css/multi-tool.css index 50e038ce..f9c359dc 100644 --- a/src/main/resources/static/css/multi-tool.css +++ b/src/main/resources/static/css/multi-tool.css @@ -3,43 +3,80 @@ margin: 0 auto; } -.global-buttons-container { +label { + text-align: left; + display: block; + padding: 0rem 0.25rem; + font-size: 1.25rem; +} + +.form-control { + border-radius: 16px !important; + padding: 0.75rem; + border: 1px solid var(--theme-color-outline-variant); +} + +.mt-action-bar { display: flex; gap: 10px; align-items: start; - - background-color: rgba(13, 110, 253, 0.1); - border: 1px solid rgba(0, 0, 0, 0.25); + background-color: var(--md-sys-color-surface-5); + border: none; backdrop-filter: blur(2px); - top: 10px; z-index: 10; - padding: 10px; - border-radius: 8px; -} -.global-buttons-container > * { - padding: 0.6rem 0.75rem; + padding: 1.25rem; + border-radius: 2rem; + margin: 0px 25px; } -.global-buttons-container svg { +.mt-action-bar>* { + padding-bottom: 0.5rem; +} + +.mt-action-bar svg, +.mt-action-btn svg { width: 20px; height: 20px; } + +.mt-action-bar .mt-filename { + width: 100%; +} + +.mt-action-btn { + display: flex; + gap: 10px; + align-items: start; + top: 10px; + z-index: 10; + padding: 12px 0px 0px; + width: 100%; +} + +.mt-action-btn .btn { + width: 3rem; + height: 3rem; + border-radius: 20px; + padding: 0; +} + #export-button { margin-left: auto; } +#bg-card { + background-color: var(--md-sys-color-surface-5); + border-radius: 3rem; + padding: 25px 0 0; +} + #pages-container-wrapper { - --background-color: rgba(0, 0, 0, 0.025); - --scroll-bar-color: #f1f1f1; - --scroll-bar-thumb: #888; - --scroll-bar-thumb-hover: #555; - background-color: var(--background-color); width: 100%; display: flex; flex-direction: column; - padding: 10px 25px; - border-radius: 10px; + padding: 1rem; + border-radius: 25px; overflow-y: hidden; overflow-x: auto; min-height: 275px; @@ -47,11 +84,11 @@ } #pages-container { - margin: auto; gap: 0px; display: flex; - align-items: center; - justify-content: center; + flex-wrap: wrap; + margin-left: -15px; + margin-right: -15px; } /* width */ @@ -86,6 +123,58 @@ position: relative; user-select: none; transition: width 1s linear; + margin-top: 16px; + margin-bottom: 16px; +} + +/* Pushes the last item to the left */ +.page-container:last-child { + margin-right: auto; +} + +.page-container:last-child:lang(ar), +/* Arabic */ +.page-container:last-child:lang(he), +/* Hebrew */ +.page-container:last-child:lang(fa), +/* Persian */ +.page-container:last-child:lang(ur), +/* Urdu */ +.page-container:last-child:lang(ckb), +/* Sorani Kurdish */ +.page-container:last-child:lang(ks), +/* Kashmiri */ +.page-container:last-child:lang(kk), +/* Kazakh */ +.page-container:last-child:lang(uz), +/* Uzbek */ +.page-container:last-child:lang(ky), +/* Kyrgyz */ +.page-container:last-child:lang(bal), +/* Baluchi */ +.page-container:last-child:lang(dv), +/* Divehi */ +.page-container:last-child:lang(ps), +/* Pashto */ +.page-container:last-child:lang(sdg), +/* Southern Kurdish */ +.page-container:last-child:lang(syr), +/* Syriac */ +.page-container:last-child:lang(mzn), +/* Mazanderani */ +.page-container:last-child:lang(tgl), +/* Tagalog */ +.page-container:last-child:lang(pnb), +/* Western Punjabi */ +.page-container:last-child:lang(ug), +/* Uyghur */ +.page-container:last-child:lang(nqo), +/* N'Ko */ +.page-container:last-child:lang(bqi) +/* Bakhtiari */ +{ + margin-left: auto !important; + margin-right: 0 !important; } .page-container img { @@ -109,11 +198,15 @@ .page-number { position: absolute; top: 5px; - right: 5px; - color: white; - background-color: #007bff; /* Primary blue color */ - padding: 3px 6px; - border-radius: 4px; - font-size: 12px; + right: 0px; + color: var(--md-sys-color-on-surface); + background-color: var(--md-sys-color-surface-5); + padding: 6px 8px; + border-radius: 8px; + font-size: 16px; z-index: 2; } + +.tool-header { + margin: 0.5rem 1rem 2rem; +} \ No newline at end of file diff --git a/src/main/resources/static/css/navbar.css b/src/main/resources/static/css/navbar.css index f46c44a6..0ce3ffe8 100644 --- a/src/main/resources/static/css/navbar.css +++ b/src/main/resources/static/css/navbar.css @@ -7,28 +7,35 @@ } #navbarSearch.show { - max-height: 300px; /* Adjust this to your desired max height */ + max-height: 300px; + /* Adjust this to your desired max height */ } #searchForm { - width: 200px; /* Adjust this value as needed */ + width: 200px; + /* Adjust this value as needed */ } /* Style the search results to match the navbar */ #searchResults { - max-height: 200px; /* Adjust this value as needed */ + max-height: 200px; + /* Adjust this value as needed */ overflow-y: auto; width: 100%; - max-width: 300px; /* Adjust to your preferred width */ - transition: height 0.3s ease; /* Smooth height transition */ + max-width: 300px; + /* Adjust to your preferred width */ + transition: height 0.3s ease; + /* Smooth height transition */ } #searchResults .dropdown-item { display: flex; align-items: center; white-space: nowrap; - height: 50px; /* Fixed height */ - overflow: hidden; /* Hide overflow */ + height: 50px; + /* Fixed height */ + overflow: hidden; + /* Hide overflow */ } #searchResults .icon { @@ -37,39 +44,48 @@ #searchResults .icon-text { display: inline; - overflow: hidden; /* Hide overflow */ - text-overflow: ellipsis; /* Add ellipsis for long text */ + overflow: hidden; + /* Hide overflow */ + text-overflow: ellipsis; + /* Add ellipsis for long text */ } #search-icon i { - font-size: 24px; /* Adjust this to your desired size */ + font-size: 24px; + /* Adjust this to your desired size */ transition: color 0.3s; } #search-icon:hover i { - color: #666; /* Adjust this to your hover color */ + color: #666; + /* Adjust this to your hover color */ } .search-input { - transition: - border 0.3s, - box-shadow 0.3s; + transition: border 0.3s, box-shadow 0.3s; } .search-input:focus { - border-color: #666; /* Adjust this to your focus color */ - box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Adjust this to your desired shadow */ + border-color: #666; + /* Adjust this to your focus color */ + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + /* Adjust this to your desired shadow */ } /* Set a fixed height and styling for each search result item */ .search-results a { display: flex; align-items: center; - gap: 10px; /* space between icon and text */ - height: 40px; /* Adjust based on your design */ - overflow: hidden; /* Prevent content from overflowing */ - white-space: nowrap; /* Prevent text from wrapping to next line */ - text-overflow: ellipsis; /* Truncate text if it's too long */ + gap: 10px; + /* space between icon and text */ + height: 40px; + /* Adjust based on your design */ + overflow: hidden; + /* Prevent content from overflowing */ + white-space: nowrap; + /* Prevent text from wrapping to next line */ + text-overflow: ellipsis; + /* Truncate text if it's too long */ } .main-icon { @@ -79,11 +95,11 @@ transform: translateY(-2px); } -.icon { - width: 16px; - height: 16px; +.nav-icon { vertical-align: middle; - transform: translateY(-2px); + font-size: 2rem !important; + padding: 0.25rem; + border-radius: 1rem; } .icon + .icon { @@ -92,21 +108,40 @@ .icon-text { margin-left: 4px; + display: inline-flex; + flex-direction: column; + align-items: center; + justify-content: space-between; + text-decoration: none; +} + +span.icon-text::after { + content: attr(data-text); + content: attr(data-text) / ""; + font-weight: 600; + height: 0; + visibility: hidden; + overflow: hidden; + user-select: none; + pointer-events: none; } .nav-item-separator { position: relative; - margin: 0 4px; /* Adjust the margin as needed */ + margin: 0 4px; + /* Adjust the margin as needed */ } .nav-item-separator::before { content: ""; position: absolute; left: 0; - top: 10%; /* Adjust the top and bottom margins as needed */ + top: 10%; + /* Adjust the top and bottom margins as needed */ bottom: 10%; width: 1px; - background-color: #ccc; /* Adjust the color as needed */ + background-color: #ccc; + /* Adjust the color as needed */ } .navbar-icon { @@ -114,3 +149,116 @@ height: 20px; transform: translateY(-2px); } + +.navbar-toggler{ +color: var(--md-sys-color-on-surface-variant); +} + +.dropdown-menu.scrollable-y { + overflow-y: scroll; + height: 360px; +} + +/* Dropdown Scrollbar*/ +.scrollable-y { + overflow-y: scroll; + height: 360px; +} + +.scrollable-y::-webkit-scrollbar { + background: transparent; + width: 0.7rem; +} + +.scrollable-y::-webkit-scrollbar-track { + background: transparent; +} + +.scrollable-y::-webkit-scrollbar-thumb { + border-radius: 2rem; + background-color: var(--md-sys-color-surface-5); + border: 3px solid var(--md-sys-color-surface-5); +} + +/* Mega Menu */ +.dropdown-mega .dropdown-menu { + width: 98%; +} + +.dropdown-mega .title { + padding-bottom: 1rem; + margin: 0; +} + +.dropdown-menu .list-group { + padding: 1rem; +} + +.mega-content .dropdown-item:focus .nav-icon, +.mega-content .dropdown-item:hover .nav-icon, +.mega-content .dropdown-item.active .nav-icon { + background-color: transparent; +} + +.dropdown-item:focus.sign, +.dropdown-item:hover.sign, +.dropdown-item.active.sign { + color: var(--md-nav-on-section-color-sign); + background-color: var(--md-nav-section-color-sign); +} + +.dropdown-item:focus.organize, +.dropdown-item:hover.organize, +.dropdown-item.active.organize { + color: var(--md-nav-on-section-color-organize); + background-color: var(--md-nav-section-color-organize); +} + +.dropdown-item:focus.convert, +.dropdown-item:hover.convert, +.dropdown-item.active.convert { + color: var(--md-nav-on-section-color-convert); + background-color: var(--md-nav-section-color-convert); +} + +.dropdown-item:focus.image, +.dropdown-item:hover.image, +.dropdown-item.active.image { + color: var(--md-nav-on-section-color-image); + background-color: var(--md-nav-section-color-image); +} + +.dropdown-item:focus.word, +.dropdown-item:hover.word, +.dropdown-item.active.word { + color: var(--md-nav-on-section-color-word); + background-color: var(--md-nav-section-color-word); +} + +.dropdown-item:focus.ppt, +.dropdown-item:hover.ppt, +.dropdown-item.active.ppt { + color: var(--md-nav-on-section-color-ppt); + background-color: var(--md-nav-section-color-ppt); +} + +.dropdown-item:focus.security, +.dropdown-item:hover.security, +.dropdown-item.active.security { + color: var(--md-nav-on-section-color-security); + background-color: var(--md-nav-section-color-security); +} + +.dropdown-item:focus.other, +.dropdown-item:hover.other, +.dropdown-item.active.other { + color: var(--md-nav-on-section-color-other); + background-color: var(--md-nav-section-color-other); +} + +.dropdown-item:focus.advance, +.dropdown-item:hover.advance, +.dropdown-item.active.advance { + color: var(--md-nav-on-section-color-advance); + background-color: var(--md-nav-section-color-advance); +} \ No newline at end of file diff --git a/src/main/resources/static/css/pdfActions.css b/src/main/resources/static/css/pdfActions.css index 455de860..e8a51224 100644 --- a/src/main/resources/static/css/pdfActions.css +++ b/src/main/resources/static/css/pdfActions.css @@ -9,19 +9,33 @@ opacity: 1; } -.pdf-actions_button-container > * { +.pdf-actions_button-container>* { padding: 0.25rem 0.5rem; - margin: 3px; display: block; } +.pdf-actions_button-container>*:focus { + box-shadow: none !important; +} + +.pdf-actions_button-container .btn { + border-radius: 12px; +} + +.pdf-actions_button-container> :first-child, +.pdf-actions_container:first-child>.pdf-actions_button-container> :first-child+* { + border-radius: 12px 0px 0px 12px; +} + .pdf-actions_container svg { width: 16px; height: 16px; } + .pdf-actions_container:nth-child(1) .pdf-actions_move-left-button { display: none; } + .pdf-actions_container:last-child .pdf-actions_move-right-button { display: none; } @@ -37,6 +51,25 @@ transition: opacity 0.2s; } +.pdf-actions_insert-file-button-container button .material-symbols-rounded { + vertical-align: top; +} + +.pdf-actions_insert-file-button-container.left button, +.pdf-actions_insert-file-button-container.right button { + padding: 0.45rem; +} + +.pdf-actions_button-container button .material-symbols-rounded { + font-size: 1.25rem; + vertical-align: sub; +} + +.pdf-actions_insert-file-button { + padding: 0; + vertical-align: sub; +} + .pdf-actions_insert-file-button-container.left { left: -20px; } @@ -63,11 +96,11 @@ html[dir="rtl"] .pdf-actions_insert-file-button-container.left { translate: 0 -50%; } -html[dir="ltr"] .pdf-actions_container:last-child > .pdf-actions_insert-file-button-container.right { +html[dir="ltr"] .pdf-actions_container:last-child>.pdf-actions_insert-file-button-container.right { display: block; } -html[dir="rtl"] .pdf-actions_container:last-child > .pdf-actions_insert-file-button-container.left { +html[dir="rtl"] .pdf-actions_container:last-child>.pdf-actions_insert-file-button-container.left { display: block; } @@ -75,6 +108,7 @@ html[dir="rtl"] .pdf-actions_container:last-child > .pdf-actions_insert-file-but opacity: 1; transition: opacity 0.05s; } + .pdf-actions_insert-file-button { position: absolute; top: 50%; @@ -82,4 +116,4 @@ html[dir="rtl"] .pdf-actions_container:last-child > .pdf-actions_insert-file-but translate: 50% -50%; aspect-ratio: 1; border-radius: 100px; -} +} \ No newline at end of file diff --git a/src/main/resources/static/css/pipeline.css b/src/main/resources/static/css/pipeline.css index 9468333b..2b7218f7 100644 --- a/src/main/resources/static/css/pipeline.css +++ b/src/main/resources/static/css/pipeline.css @@ -4,18 +4,23 @@ .bordered-box { border: 1px solid #ddd; - padding: 20px; - margin: 20px; + padding: 2rem; + margin: 2rem; width: 70%; } .center-element { - width: 80%; + width: 100%; text-align: center; margin: auto; + margin-top: 2rem; } .element-margin { - margin: 10px 0; + margin: 1rem 0; /* Adjust this value to increase/decrease the margin as needed */ } + +#pipelineList { + margin-bottom: 2rem; +} \ No newline at end of file diff --git a/src/main/resources/static/css/theme/componentes.css b/src/main/resources/static/css/theme/componentes.css index 94ad0a36..5ea175d4 100644 --- a/src/main/resources/static/css/theme/componentes.css +++ b/src/main/resources/static/css/theme/componentes.css @@ -763,7 +763,6 @@ fieldset:disabled .btn { /* Forms */ textarea.form-control { border-radius: 1.5rem !important; - ; } .form-control, From 5c572a7d897e6ccac732cca69c88b3db353c8b07 Mon Sep 17 00:00:00 2001 From: Rectos VX Date: Sun, 5 May 2024 15:12:30 +0400 Subject: [PATCH 4/8] Update: changed JS to new theme system + Darkmode system --- src/main/resources/static/js/darkmode.js | 53 ++----------------- src/main/resources/static/js/homecard.js | 17 +++--- .../static/js/multitool/PdfActionsManager.js | 31 +++-------- src/main/resources/static/js/pipeline.js | 8 +-- 4 files changed, 26 insertions(+), 83 deletions(-) diff --git a/src/main/resources/static/js/darkmode.js b/src/main/resources/static/js/darkmode.js index cb119a8a..3c179d5e 100644 --- a/src/main/resources/static/js/darkmode.js +++ b/src/main/resources/static/js/darkmode.js @@ -8,7 +8,6 @@ var elements = { darkModeIcon: null, searchBar: null, formControls: null, - navbar: null, navIcons: null, navDropdownMenus: null, }; @@ -20,8 +19,6 @@ function getElements() { elements.darkModeIcon = document.getElementById("dark-mode-icon"); elements.searchBar = document.getElementById("searchBar"); elements.formControls = document.querySelectorAll(".form-control"); - elements.navbar = document.querySelectorAll("nav.navbar"); - elements.navIcons = document.querySelectorAll("nav .icon, .navbar-icon"); elements.navDropdownMenus = document.querySelectorAll(".dropdown-menu"); } function setMode(mode) { @@ -42,64 +39,20 @@ function setMode(mode) { if (mode === "on") { if (elements && elements.darkModeIcon) { - elements.darkModeIcon.src = "moon.svg"; - } - if (elements && elements.searchBar) { - elements.searchBar.classList.add("dark-mode-search"); - } - if (elements && elements.formControls) { - elements.formControls.forEach((input) => input.classList.add("bg-dark", "text-white")); - } - if (elements && elements.navbar) { - elements.navbar.forEach((navElement) => { - navElement.classList.remove("navbar-light", "bg-light"); - navElement.classList.add("navbar-dark", "bg-dark"); - }); - } - if (elements && elements.navDropdownMenus) { - elements.navDropdownMenus.forEach((menu) => menu.classList.add("dropdown-menu-dark")); - } - if (elements && elements.navIcons) { - elements.navIcons.forEach((icon) => (icon.style.filter = "invert(1)")); + elements.darkModeIcon.textContent = "dark_mode"; } var tables = document.querySelectorAll(".table"); tables.forEach((table) => { table.classList.add("table-dark"); }); - if (jumbotron) { - jumbotron.classList.add("bg-dark"); - jumbotron.classList.remove("bg-light"); - } } else if (mode === "off") { if (elements && elements.darkModeIcon) { - elements.darkModeIcon.src = "sun.svg"; - } - if (elements && elements.searchBar) { - elements.searchBar.classList.remove("dark-mode-search"); - } - if (elements && elements.formControls) { - elements.formControls.forEach((input) => input.classList.remove("bg-dark", "text-white")); - } - if (elements && elements.navbar) { - elements.navbar.forEach((navElement) => { - navElement.classList.remove("navbar-dark", "bg-dark"); - navElement.classList.add("navbar-light", "bg-light"); - }); - } - if (elements && elements.navDropdownMenus) { - elements.navDropdownMenus.forEach((menu) => menu.classList.remove("dropdown-menu-dark")); - } - if (elements && elements.navIcons) { - elements.navIcons.forEach((icon) => (icon.style.filter = "none")); + elements.darkModeIcon.textContent = "light_mode"; } var tables = document.querySelectorAll(".table-dark"); tables.forEach((table) => { table.classList.remove("table-dark"); }); - if (jumbotron) { - jumbotron.classList.remove("bg-dark"); - jumbotron.classList.add("bg-light"); - } } else if (mode === "rainbow") { if (elements && elements.darkModeIcon) { elements.darkModeIcon.src = "rainbow.svg"; @@ -147,4 +100,4 @@ document.addEventListener("DOMContentLoaded", function () { toggleDarkMode(); }); } -}); +}); \ No newline at end of file diff --git a/src/main/resources/static/js/homecard.js b/src/main/resources/static/js/homecard.js index 8ac2ef44..aacc52aa 100644 --- a/src/main/resources/static/js/homecard.js +++ b/src/main/resources/static/js/homecard.js @@ -23,15 +23,17 @@ function filterCards() { } function toggleFavorite(element) { - var img = element.querySelector("img"); + var span = element.querySelector("span.material-symbols-rounded"); var card = element.closest(".feature-card"); var cardId = card.id; - if (img.src.endsWith("star.svg")) { - img.src = "images/star-fill.svg"; + if (span.classList.contains("no-fill")) { + span.classList.remove("no-fill"); + span.classList.add("fill"); card.classList.add("favorite"); localStorage.setItem(cardId, "favorite"); } else { - img.src = "images/star.svg"; + span.classList.remove("fill"); + span.classList.add("no-fill"); card.classList.remove("favorite"); localStorage.removeItem(cardId); } @@ -40,6 +42,7 @@ function toggleFavorite(element) { filterCards(); } + function reorderCards() { var container = document.querySelector(".features-container"); var cards = Array.from(container.getElementsByClassName("feature-card")); @@ -58,13 +61,15 @@ function reorderCards() { container.appendChild(card); }); } + function initializeCards() { var cards = document.querySelectorAll(".feature-card"); cards.forEach(function (card) { var cardId = card.id; - var img = card.querySelector(".favorite-icon img"); + var span = card.querySelector(".favorite-icon span.material-symbols-rounded"); if (localStorage.getItem(cardId) === "favorite") { - img.src = "images/star-fill.svg"; + span.classList.remove("no-fill"); + span.classList.add("fill"); card.classList.add("favorite"); } }); diff --git a/src/main/resources/static/js/multitool/PdfActionsManager.js b/src/main/resources/static/js/multitool/PdfActionsManager.js index 163dff3a..8135bed3 100644 --- a/src/main/resources/static/js/multitool/PdfActionsManager.js +++ b/src/main/resources/static/js/multitool/PdfActionsManager.js @@ -92,44 +92,35 @@ class PdfActionsManager { const rightDirection = this.pageDirection === "rtl" ? "left" : "right"; const buttonContainer = document.createElement("div"); - buttonContainer.classList.add("pdf-actions_button-container", "hide-on-drag"); + buttonContainer.classList.add("btn-group", "pdf-actions_button-container", "hide-on-drag"); const moveUp = document.createElement("button"); moveUp.classList.add("pdf-actions_move-left-button", "btn", "btn-secondary"); - moveUp.innerHTML = ``; + moveUp.innerHTML = `arrow_${leftDirection}_alt`; moveUp.onclick = this.moveUpButtonCallback; buttonContainer.appendChild(moveUp); const moveDown = document.createElement("button"); moveDown.classList.add("pdf-actions_move-right-button", "btn", "btn-secondary"); - moveDown.innerHTML = ``; + moveDown.innerHTML = `arrow_${rightDirection}_alt`; moveDown.onclick = this.moveDownButtonCallback; buttonContainer.appendChild(moveDown); const rotateCCW = document.createElement("button"); rotateCCW.classList.add("btn", "btn-secondary"); - rotateCCW.innerHTML = ` - - - `; + rotateCCW.innerHTML = `rotate_left`; rotateCCW.onclick = this.rotateCCWButtonCallback; buttonContainer.appendChild(rotateCCW); const rotateCW = document.createElement("button"); rotateCW.classList.add("btn", "btn-secondary"); - rotateCW.innerHTML = ` - - - `; + rotateCW.innerHTML = `rotate_right`; rotateCW.onclick = this.rotateCWButtonCallback; buttonContainer.appendChild(rotateCW); const deletePage = document.createElement("button"); deletePage.classList.add("btn", "btn-danger"); - deletePage.innerHTML = ` - - - `; + deletePage.innerHTML = `delete`; deletePage.onclick = this.deletePageButtonCallback; buttonContainer.appendChild(deletePage); @@ -145,10 +136,7 @@ class PdfActionsManager { const insertFileButton = document.createElement("button"); insertFileButton.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button"); - insertFileButton.innerHTML = ` - - - `; + insertFileButton.innerHTML = `add`; insertFileButton.onclick = this.insertFileButtonCallback; insertFileButtonContainer.appendChild(insertFileButton); @@ -164,10 +152,7 @@ class PdfActionsManager { const insertFileButtonRight = document.createElement("button"); insertFileButtonRight.classList.add("btn", "btn-primary", "pdf-actions_insert-file-button"); - insertFileButtonRight.innerHTML = ` - - - insertFileButtonRight`; + insertFileButtonRight.innerHTML = `add`; insertFileButtonRight.onclick = () => addPdfs(); insertFileButtonRightContainer.appendChild(insertFileButtonRight); diff --git a/src/main/resources/static/js/pipeline.js b/src/main/resources/static/js/pipeline.js index afe1d4d7..1c57dfd9 100644 --- a/src/main/resources/static/js/pipeline.js +++ b/src/main/resources/static/js/pipeline.js @@ -251,14 +251,14 @@ document.getElementById("addOperationBtn").addEventListener("click", function ()
${selectedOperation}
- - + + - +
`; From 303b8e032bacf99f984e8e2a5946c574fc1454ac Mon Sep 17 00:00:00 2001 From: Rectos VX Date: Sun, 5 May 2024 15:19:53 +0400 Subject: [PATCH 5/8] Update: updated all pages to new theme system --- src/main/resources/templates/about.html | 2 +- src/main/resources/templates/account.html | 466 ++++++------- src/main/resources/templates/addUsers.html | 2 +- .../resources/templates/auto-split-pdf.html | 89 ++- .../resources/templates/change-creds.html | 2 +- .../templates/convert/file-to-pdf.html | 84 ++- .../templates/convert/html-to-pdf.html | 7 +- .../templates/convert/img-to-pdf.html | 13 +- .../templates/convert/markdown-to-pdf.html | 7 +- .../templates/convert/pdf-to-csv.html | 7 +- .../templates/convert/pdf-to-html.html | 7 +- .../templates/convert/pdf-to-img.html | 7 +- .../templates/convert/pdf-to-pdfa.html | 7 +- .../convert/pdf-to-presentation.html | 7 +- .../templates/convert/pdf-to-text.html | 7 +- .../templates/convert/pdf-to-word.html | 7 +- .../templates/convert/pdf-to-xml.html | 7 +- .../templates/convert/url-to-pdf.html | 7 +- src/main/resources/templates/crop.html | 7 +- .../resources/templates/extract-page.html | 7 +- .../resources/templates/fragments/card.html | 35 +- .../resources/templates/fragments/common.html | 295 +++++---- .../resources/templates/fragments/footer.html | 27 +- .../resources/templates/fragments/navbar.html | 623 +++++++++++------- .../templates/fragments/navbarEntry.html | 17 +- src/main/resources/templates/home.html | 284 +++++--- src/main/resources/templates/licenses.html | 2 +- src/main/resources/templates/login.html | 42 +- src/main/resources/templates/merge-pdfs.html | 9 +- .../resources/templates/misc/add-image.html | 7 +- .../templates/misc/add-page-numbers.html | 7 +- .../templates/misc/adjust-contrast.html | 7 +- .../resources/templates/misc/auto-crop.html | 7 +- .../resources/templates/misc/auto-rename.html | 7 +- .../templates/misc/change-metadata.html | 19 +- .../resources/templates/misc/compare.html | 7 +- .../templates/misc/compress-pdf.html | 86 +-- .../templates/misc/extract-image-scans.html | 7 +- .../templates/misc/extract-images.html | 7 +- .../resources/templates/misc/flatten.html | 7 +- .../resources/templates/misc/ocr-pdf.html | 41 +- .../templates/misc/remove-annotations.html | 7 +- .../templates/misc/remove-blanks.html | 7 +- src/main/resources/templates/misc/repair.html | 7 +- .../templates/misc/show-javascript.html | 7 +- src/main/resources/templates/misc/stamp.html | 7 +- .../templates/multi-page-layout.html | 15 +- src/main/resources/templates/multi-tool.html | 178 ++--- src/main/resources/templates/overlay-pdf.html | 7 +- .../resources/templates/pdf-organizer.html | 7 +- .../templates/pdf-to-single-page.html | 7 +- src/main/resources/templates/pipeline.html | 243 ++++--- .../resources/templates/remove-pages.html | 7 +- src/main/resources/templates/rotate-pdf.html | 7 +- src/main/resources/templates/scale-pages.html | 11 +- .../templates/security/add-password.html | 57 +- .../templates/security/add-watermark.html | 7 +- .../templates/security/auto-redact.html | 19 +- .../templates/security/cert-sign.html | 9 +- .../security/change-permissions.html | 57 +- .../templates/security/get-info-on-pdf.html | 7 +- .../templates/security/remove-password.html | 7 +- .../templates/security/remove-watermark.html | 7 +- .../templates/security/sanitize-pdf.html | 27 +- src/main/resources/templates/sign.html | 7 +- .../templates/split-by-size-or-count.html | 7 +- .../templates/split-pdf-by-sections.html | 13 +- src/main/resources/templates/split-pdfs.html | 83 ++- 68 files changed, 1866 insertions(+), 1250 deletions(-) diff --git a/src/main/resources/templates/about.html b/src/main/resources/templates/about.html index 2870fb41..c29d2ffa 100644 --- a/src/main/resources/templates/about.html +++ b/src/main/resources/templates/about.html @@ -11,7 +11,7 @@

-
+
diff --git a/src/main/resources/templates/account.html b/src/main/resources/templates/account.html index 97e50af6..c59cecc1 100644 --- a/src/main/resources/templates/account.html +++ b/src/main/resources/templates/account.html @@ -1,23 +1,24 @@ - - + + + - + - - -
-
- -

-
-
-
+ + +
+
+ +

+
+
+
- -

User Settings

-
- + +

User Settings

+
Default message if not found
@@ -33,251 +34,266 @@
Default message if not found
- - -

User!

- + + +

User!

+ - - -
-
- - -
-
- - -
-
- -
-
+ + +

Change Username?

+
+
+ + +
+
+ + +
+
+ +
+
-
+ +

Change Password?

+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
- -

Change Password?

-
-
- - -
-
- - -
-
- - -
-
- -
-
- -
- -
-
-
-
- -
- - - -
+ +

API Key

+
+
+
+
+ +
+ + +
+
- + }); + -
+

Sync browser settings with Account

+
+

Settings Comparison:

+ + + + + + + + + + + +
PropertyAccount SettingWeb Browser Setting
-

Sync browser settings with Account

-
-

Settings Comparison:

- - - - - - - - - - - -
PropertyAccount SettingWeb Browser Setting
- -
- - -
+
+ +
+
- -
- Sign Out - Admin Settings -
+ + document.getElementById('syncToBrowser').addEventListener('click', function () { + // First, clear the local storage + localStorage.clear(); + + // Then, set the account settings to local storage + for (let key in accountSettings) { + if (key !== 'debug' && key !== '0' && key !== '1') { // Only sync non-ignored keys + localStorage.setItem(key, accountSettings[key]); + } + } + location.reload(); // Refresh the page after sync + }); + + document.getElementById('syncToAccount').addEventListener('click', function () { + let form = document.createElement("form"); + form.method = "POST"; + form.action = "api/v1/user/updateUserSettings"; // Your endpoint URL + + for (let i = 0; i < localStorage.length; i++) { + const key = localStorage.key(i); + if (key !== 'debug' && key !== '0' && key !== '1') { // Only send non-ignored keys + let hiddenField = document.createElement("input"); + hiddenField.type = "hidden"; + hiddenField.name = key; + hiddenField.value = localStorage.getItem(key); + form.appendChild(hiddenField); + } + } + + document.body.appendChild(form); + form.submit(); + }); + + }); + +
+ Sign Out + Admin Settings
-
- + +
+ + \ No newline at end of file diff --git a/src/main/resources/templates/addUsers.html b/src/main/resources/templates/addUsers.html index 850beb9e..81027825 100644 --- a/src/main/resources/templates/addUsers.html +++ b/src/main/resources/templates/addUsers.html @@ -12,7 +12,7 @@

-
+

Admin User Control Settings

diff --git a/src/main/resources/templates/auto-split-pdf.html b/src/main/resources/templates/auto-split-pdf.html index 914b9d60..fa6b1d16 100644 --- a/src/main/resources/templates/auto-split-pdf.html +++ b/src/main/resources/templates/auto-split-pdf.html @@ -1,43 +1,62 @@ - - - - + - - -
-
- -

-
-
-
-

- -

-
    -
  • -
  • -
  • -
  • -
-
-

-
-
- - -
-

-

- -
+ + + + + + + +
+
+ +

+
+
+
+
+ cut +
+ +
+

+
+
+
+ + +
+

+ +

+
+ +

+
    +
  • +
  • +
  • +
  • +
+

+

+
+ + +
-
- + +
+ + \ No newline at end of file diff --git a/src/main/resources/templates/change-creds.html b/src/main/resources/templates/change-creds.html index 08a3ade7..feee43c1 100644 --- a/src/main/resources/templates/change-creds.html +++ b/src/main/resources/templates/change-creds.html @@ -12,7 +12,7 @@

-
+

User Settings

diff --git a/src/main/resources/templates/convert/file-to-pdf.html b/src/main/resources/templates/convert/file-to-pdf.html index d8c8b969..f822a593 100644 --- a/src/main/resources/templates/convert/file-to-pdf.html +++ b/src/main/resources/templates/convert/file-to-pdf.html @@ -1,43 +1,57 @@ - - - - + - - -
-
- -

-
-
-
-

-

-
-
- -
-

-

-

Microsoft Word: (DOC, DOCX, DOT, DOTX)

-

Microsoft Excel: (CSV, XLS, XLSX, XLT, XLTX, SLK, DIF)

-

Microsoft PowerPoint: (PPT, PPTX)

-

OpenDocument Formats: (ODT, OTT, ODS, OTS, ODP, OTP, ODG, OTG)

-

Plain Text: (TXT, TEXT, XML)

-

Rich Text Format: (RTF)

-

Images: (BMP, GIF, JPEG, PNG, TIF, PBM, PGM, PPM, RAS, XBM, XPM, SVG, SVM, WMF)

-

HTML: (HTML)

-

Lotus Word Pro: (LWP)

-

StarOffice: (SDA, SDC, SDD, SDW, STC, STD, STI, STW, SXD, SXG, SXI, SXW)

-

Other: (DBF, FODS, VSD, VOR, VOR3, VOR4, UOP, PCT, PS, PDF)

- https://help.libreoffice.org/latest/en-US/text/shared/guide/supported_formats.html + + + + + + +
+
+ +

+
+
+
+
+ draft +
+

+
+
+ +
+

+

+

Microsoft Word: (DOC, DOCX, DOT, DOTX)

+

Microsoft Excel: (CSV, XLS, XLSX, XLT, XLTX, SLK, DIF)

+

Microsoft PowerPoint: (PPT, PPTX)

+

OpenDocument Formats: (ODT, OTT, ODS, OTS, ODP, OTP, ODG, OTG)

+

Plain Text: (TXT, TEXT, XML)

+

Rich Text Format: (RTF)

+

Images: (BMP, GIF, JPEG, PNG, TIF, PBM, PGM, PPM, RAS, XBM, XPM, SVG, SVM, WMF)

+

HTML: (HTML)

+

Lotus Word Pro: (LWP)

+

StarOffice: (SDA, SDC, SDD, SDW, STC, STD, STI, STW, SXD, SXG, SXI, SXW)

+

Other: (DBF, FODS, VSD, VOR, VOR3, VOR4, UOP, PCT, PS, PDF)

+ https://help.libreoffice.org/latest/en-US/text/shared/guide/supported_formats.html +
+
+ + +
+
-
- + +
+ + \ No newline at end of file diff --git a/src/main/resources/templates/convert/html-to-pdf.html b/src/main/resources/templates/convert/html-to-pdf.html index 3c426917..94b4f842 100644 --- a/src/main/resources/templates/convert/html-to-pdf.html +++ b/src/main/resources/templates/convert/html-to-pdf.html @@ -12,8 +12,11 @@

-
-

+
+
+ html + +
diff --git a/src/main/resources/templates/convert/img-to-pdf.html b/src/main/resources/templates/convert/img-to-pdf.html index a8633ad1..ec49e1c4 100644 --- a/src/main/resources/templates/convert/img-to-pdf.html +++ b/src/main/resources/templates/convert/img-to-pdf.html @@ -12,8 +12,11 @@

-
-

+
+
+ image + +
@@ -25,9 +28,9 @@
-
- - +
+ +
diff --git a/src/main/resources/templates/convert/markdown-to-pdf.html b/src/main/resources/templates/convert/markdown-to-pdf.html index 7a51a29c..748c5c66 100644 --- a/src/main/resources/templates/convert/markdown-to-pdf.html +++ b/src/main/resources/templates/convert/markdown-to-pdf.html @@ -12,8 +12,11 @@

-
-

+
+
+ markdown + +
diff --git a/src/main/resources/templates/convert/pdf-to-csv.html b/src/main/resources/templates/convert/pdf-to-csv.html index 9fba9430..be78d1da 100644 --- a/src/main/resources/templates/convert/pdf-to-csv.html +++ b/src/main/resources/templates/convert/pdf-to-csv.html @@ -11,8 +11,11 @@

-
-

+
+
+ csv + +
diff --git a/src/main/resources/templates/convert/pdf-to-html.html b/src/main/resources/templates/convert/pdf-to-html.html index c9256805..395f9829 100644 --- a/src/main/resources/templates/convert/pdf-to-html.html +++ b/src/main/resources/templates/convert/pdf-to-html.html @@ -12,8 +12,11 @@

-
-

+
+
+ html + +

diff --git a/src/main/resources/templates/convert/pdf-to-img.html b/src/main/resources/templates/convert/pdf-to-img.html index 039c52e0..d6b5f871 100644 --- a/src/main/resources/templates/convert/pdf-to-img.html +++ b/src/main/resources/templates/convert/pdf-to-img.html @@ -12,8 +12,11 @@

-
-

+
+
+ image + +

diff --git a/src/main/resources/templates/convert/pdf-to-pdfa.html b/src/main/resources/templates/convert/pdf-to-pdfa.html index 6494cf9c..2e89250b 100644 --- a/src/main/resources/templates/convert/pdf-to-pdfa.html +++ b/src/main/resources/templates/convert/pdf-to-pdfa.html @@ -12,8 +12,11 @@

-
-

+
+
+ picture_as_pdf + +

diff --git a/src/main/resources/templates/convert/pdf-to-presentation.html b/src/main/resources/templates/convert/pdf-to-presentation.html index 48d27d24..8d4a4284 100644 --- a/src/main/resources/templates/convert/pdf-to-presentation.html +++ b/src/main/resources/templates/convert/pdf-to-presentation.html @@ -12,8 +12,11 @@

-
-

+
+
+ slideshow + +
diff --git a/src/main/resources/templates/convert/pdf-to-text.html b/src/main/resources/templates/convert/pdf-to-text.html index 9877be8f..4d11c8ee 100644 --- a/src/main/resources/templates/convert/pdf-to-text.html +++ b/src/main/resources/templates/convert/pdf-to-text.html @@ -12,8 +12,11 @@

-
-

+
+
+ text_fields + +
diff --git a/src/main/resources/templates/convert/pdf-to-word.html b/src/main/resources/templates/convert/pdf-to-word.html index fbbbf45d..cce75d76 100644 --- a/src/main/resources/templates/convert/pdf-to-word.html +++ b/src/main/resources/templates/convert/pdf-to-word.html @@ -12,8 +12,11 @@

-
-

+
+
+ description + +
diff --git a/src/main/resources/templates/convert/pdf-to-xml.html b/src/main/resources/templates/convert/pdf-to-xml.html index cad43da2..388ed80b 100644 --- a/src/main/resources/templates/convert/pdf-to-xml.html +++ b/src/main/resources/templates/convert/pdf-to-xml.html @@ -12,8 +12,11 @@

-
-

+
+
+ code + +

diff --git a/src/main/resources/templates/convert/url-to-pdf.html b/src/main/resources/templates/convert/url-to-pdf.html index 714bd1c4..26c13ad1 100644 --- a/src/main/resources/templates/convert/url-to-pdf.html +++ b/src/main/resources/templates/convert/url-to-pdf.html @@ -12,8 +12,11 @@

-
-

+
+
+ link + +

diff --git a/src/main/resources/templates/crop.html b/src/main/resources/templates/crop.html index f2049572..0af2509c 100644 --- a/src/main/resources/templates/crop.html +++ b/src/main/resources/templates/crop.html @@ -11,8 +11,11 @@

-
-

+
+
+ crop + +
diff --git a/src/main/resources/templates/extract-page.html b/src/main/resources/templates/extract-page.html index 9d97b3b4..1f8feec2 100644 --- a/src/main/resources/templates/extract-page.html +++ b/src/main/resources/templates/extract-page.html @@ -11,8 +11,11 @@

-
-

+
+
+ upload + +
diff --git a/src/main/resources/templates/fragments/card.html b/src/main/resources/templates/fragments/card.html index 3f5517d6..fdf68b64 100644 --- a/src/main/resources/templates/fragments/card.html +++ b/src/main/resources/templates/fragments/card.html @@ -1,12 +1,23 @@ -
- -
- Icon -
-
-

- -
- Favorite -
-
+
+ +
+ + + +
+ +
+ + +
+ +
+

+ +
+ + star + +
+
\ No newline at end of file diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html index 98bf27e9..d8b9b133 100644 --- a/src/main/resources/templates/fragments/common.html +++ b/src/main/resources/templates/fragments/common.html @@ -1,162 +1,171 @@ - - + + - - - - - - + + + + + + - - - - - - - - - - - + + + + + + + + + + + - - - + + + - - - - + + + + - - + + - - + + - - + + - - - - - - - + + + + + + + + + - + - - - - - - - - + + + + + + + + - - + + - - - + + - - - -
-
Lives: 3
-
Score: 0
-
High Score: 0
-
Level: 1
- favicon -
- - + + - - - + + + + // Find the closest enclosing form of the file input + var form = fileInput.closest('form'); + + // Find the submit button within the form + var submitButton = form.find('button[type="submit"], input[type="submit"]'); + + const boredWaitingText = /*[[#{bored}]]*/ 'Bored Waiting?'; + const downloadCompleteText = /*[[#{downloadComplete}]]*/ 'Download Complete'; + window.downloadCompleteText = downloadCompleteText; + // Create the 'show-game-btn' button + var gameButton = $('

'); + + // Insert the 'show-game-btn' just above the submit button + submitButton.before(gameButton); + + function loadGameScript(callback) { + console.log('loadGameScript called'); + const script = document.createElement('script'); + script.src = 'js/game.js'; + script.onload = callback; + document.body.appendChild(script); + } + let gameScriptLoaded = false; + const gameDialog = document.getElementById('game-container-wrapper'); + $('#show-game-btn').on('click', function () { + console.log('Show game button clicked'); + if (!gameScriptLoaded) { + console.log('Show game button load'); + loadGameScript(function () { + console.log('Game script loaded'); + window.initializeGame(); + gameScriptLoaded = true; + }); + } else { + window.resetGame(); + } + gameDialog.showModal(); + }); + gameDialog.addEventListener("click", e => { + const dialogDimensions = gameDialog.getBoundingClientRect() + if ( + e.clientX < dialogDimensions.left || + e.clientX > dialogDimensions.right || + e.clientY < dialogDimensions.top || + e.clientY > dialogDimensions.bottom + ) { + gameDialog.close(); + } + }) + }) + +
+
Lives: 3
+
Score: 0
+
High Score: 0
+
Level: 1
+ favicon +
+ + + + + + + + +
+
+ +
+
+
+ + + \ No newline at end of file diff --git a/src/main/resources/templates/fragments/footer.html b/src/main/resources/templates/fragments/footer.html index a7ed547f..8afd54a4 100644 --- a/src/main/resources/templates/fragments/footer.html +++ b/src/main/resources/templates/fragments/footer.html @@ -1,19 +1,8 @@ - - + \ No newline at end of file diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html index c2a8ec26..2296d258 100644 --- a/src/main/resources/templates/fragments/navbar.html +++ b/src/main/resources/templates/fragments/navbar.html @@ -1,226 +1,407 @@
- - - - - - - -
\ No newline at end of file + + + + +
+ + +
+
+ + + +
+
+ + +
+ Account Settings +
+
+ Sign Out + +
+
+
+
+ +
\ No newline at end of file diff --git a/src/main/resources/templates/fragments/navbarEntry.html b/src/main/resources/templates/fragments/navbarEntry.html index f0a55c16..ad117ed6 100644 --- a/src/main/resources/templates/fragments/navbarEntry.html +++ b/src/main/resources/templates/fragments/navbarEntry.html @@ -1,6 +1,11 @@ - - - icon - - - + + +
+ + +
+ + \ No newline at end of file diff --git a/src/main/resources/templates/home.html b/src/main/resources/templates/home.html index ed1c6a18..1ba22f60 100644 --- a/src/main/resources/templates/home.html +++ b/src/main/resources/templates/home.html @@ -1,104 +1,222 @@ - - + + + - + - -
-
- - -
-
-

-

-
+ +
+
+ + +
+
+

+

+

-
- - +
+
+ + -
-
- -
-
+
+
+ + search + + +
+
+
+
+
+
+
+
+
+
+
-
-
-
-
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
- -
-
-
- -
-
-
- -
-
-
-
-
-
-
-
- -
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
- + +
+ + \ No newline at end of file diff --git a/src/main/resources/templates/licenses.html b/src/main/resources/templates/licenses.html index f9d6c641..c91a4507 100644 --- a/src/main/resources/templates/licenses.html +++ b/src/main/resources/templates/licenses.html @@ -11,7 +11,7 @@

-
+

3rd Party licenses

diff --git a/src/main/resources/templates/login.html b/src/main/resources/templates/login.html index 02c9cfed..84616c70 100644 --- a/src/main/resources/templates/login.html +++ b/src/main/resources/templates/login.html @@ -8,28 +8,8 @@
-
+
+ - fileDragManager.setCallback(async (files) => pdfContainer.addPdfsFromFiles(files)); - - \ No newline at end of file diff --git a/src/main/resources/templates/overlay-pdf.html b/src/main/resources/templates/overlay-pdf.html index 10cd43d9..75f48a41 100644 --- a/src/main/resources/templates/overlay-pdf.html +++ b/src/main/resources/templates/overlay-pdf.html @@ -12,8 +12,11 @@

-
-

+
+
+ layers + +
diff --git a/src/main/resources/templates/pdf-organizer.html b/src/main/resources/templates/pdf-organizer.html index 4466fa23..a5bedc5c 100644 --- a/src/main/resources/templates/pdf-organizer.html +++ b/src/main/resources/templates/pdf-organizer.html @@ -11,8 +11,11 @@

-
-

+
+
+ format_list_bulleted + +
diff --git a/src/main/resources/templates/pdf-to-single-page.html b/src/main/resources/templates/pdf-to-single-page.html index 0dc8761c..3b8f2e16 100644 --- a/src/main/resources/templates/pdf-to-single-page.html +++ b/src/main/resources/templates/pdf-to-single-page.html @@ -11,8 +11,11 @@

-
-

+
+
+ looks_one + +
diff --git a/src/main/resources/templates/pipeline.html b/src/main/resources/templates/pipeline.html index b59d68c0..ed1c1e31 100644 --- a/src/main/resources/templates/pipeline.html +++ b/src/main/resources/templates/pipeline.html @@ -1,10 +1,21 @@ - + - - + + @@ -12,96 +23,174 @@
-

+

+
+
+ family_history + +
+
+ + +
-
-

- icon -
- -
-
- - +
+
+ +
+
+
+
+
+ +
+
+ Pipeline Help +
+ Folder Scanning Help +
-
-
- -
-
-
-
-
- -
- Pipeline Help -
- Folder Scanning Help -
-
- - -