primo commit

media/templates/administrator/atum/scss/blocks/_alerts.scss

@@ -0,0 +1,84 @@
+// Alerts
+
+.alert-parent {
+  margin-top: 0;
+}
+
+.alert-heading {
+  font-size: $h4-font-size;
+}
+
+.alert-link {
+  font-weight: normal;
+  color: var(--states-link-color);
+  text-decoration: underline;
+}
+
+.alert {
+  margin: 1rem 0;
+  border: 1px solid;
+  border-radius: $border-radius-sm;
+
+  &.alert-info {
+    color: var(--state-info-text);
+    background-color: var(--state-info-bg);
+    border: var(--state-info-border);
+    a {
+      color: var(--state-info-text);
+    }
+  }
+
+  &.alert-warning {
+    color: var(--state-warning-text);
+    background-color: var(--state-warning-bg);
+    border: var(--state-warning-border);
+    a {
+      color: var(--state-warning-text);
+    }
+  }
+
+  &.alert-success {
+    color: var(--state-success-text);
+    background-color: var(--state-success-bg);
+    border: var(--state-success-border);
+    a {
+      color: var(--state-success-text);
+    }
+  }
+
+  &.alert-error {
+    color: var(--state-error-text);
+    background-color: var(--state-error-bg);
+    border: var(--state-error-border);
+    a {
+      color: var(--state-error-text);
+    }
+  }
+
+  &.alert-danger {
+    color: var(--state-danger-text);
+    background-color: var(--state-danger-bg);
+    border-color: var(--state-danger-border);
+    a {
+      color: var(--state-danger-text);
+    }
+  }
+}
+
+fieldset .alert {
+  &.alert-info {
+    margin: -1rem 0 1rem;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(-15px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}

media/templates/administrator/atum/scss/blocks/_calendar.scss

@@ -0,0 +1,25 @@
+// Calendar
+
+:root {
+  --calendar-week-bg: #{$atum-calendar-week-bg}; // #f4f4f4; rgba(255,255,255,.1);
+  --calendar-bg: #{$atum-calendar-bg};
+
+  --calendar-buttons-color: #{$atum-calendar-buttons-color}; // #495057; var(--btn-primary-bg);
+
+  --calendar-select-bg-color: #{$atum-calendar-select-bg}; //$form-select-bg
+  --calendar-select-color: var(--body-color);
+
+  --calendar-disabled-color: #{$atum-calendar-disabled-color}; // #999; #4b4b4b;
+  --calendar-disabled-bg: #{$atum-calendar-disabled-bg}; // #fff; rgba(0,0,0,.5);
+
+  --calendar-select-bg-url: #{$atum-calendar-select-bg-url} #{"/* rtl:"}$atum-calendar-select-bg-url-rtl#{"*/"};
+
+}
+
+.calendar-container {
+  tr.time {
+    &:hover, &:focus, &:active {
+      background-color: transparent;
+    }
+  }
+}

media/templates/administrator/atum/scss/blocks/_edit.scss

@@ -0,0 +1,24 @@
+// Edit Form
+
+.title-alias {
+  .form-control {
+    max-width: 100%;
+  }
+
+  .form-control-feedback {
+    position: absolute;
+    right: 1rem;
+    bottom: -1.8rem;
+    text-align: right;
+  }
+}
+
+.layout-edit {
+
+  .title-alias {
+    .form-group {
+      box-shadow: none;
+    }
+  }
+
+}

media/templates/administrator/atum/scss/blocks/_form.scss

@@ -0,0 +1,248 @@
+// Form
+
+.form-control {
+  max-width: $input-max-width;
+  background: $form-control-bg;
+  border: $form-control-border;
+
+  &:disabled,
+  &[readonly] {
+    background-color: $form-control-bg-disabled;
+    opacity: 1;
+    &:hover,
+    &:active,
+    &:focus {
+      cursor: not-allowed;
+    }
+  }
+
+  &:focus:not(:disabled):not([readonly]) {
+    border: 1px solid var(--template-link-color) !important;
+  }
+
+  &:hover:not(:disabled):not([readonly])::-webkit-file-upload-button,
+  &:hover:not(:disabled):not([readonly])::file-selector-button {
+    background-color: $file-selector-btn-bg-hvr;
+  }
+
+  &.invalid {
+    border-color: var(--danger);
+  }
+
+  &.valid {
+    border-color: var(--success);
+  }
+
+  &::placeholder {
+    font-style: italic;
+    opacity: .9;
+  }
+
+  &::-webkit-file-upload-button,
+  &::file-selector-button {
+    background-color: $file-selector-btn-bg;
+  }
+}
+
+.control-group {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 0 1rem;
+
+  > .form-check {
+    display: inline-block;
+  }
+
+  &::after {
+    display: table;
+    clear: both;
+    content: "";
+  }
+
+  .control-label {
+    width: 240px;
+    padding: .3rem 1rem .3rem 0;
+  }
+
+  .controls {
+    position: relative;
+    flex: 1;
+    min-width: 210px;
+    max-width: 100%;
+
+    + div {
+      width: 100%;
+      margin: 5px 0 10px;
+    }
+  }
+
+  .form-vertical & {
+    flex-direction: column;
+  }
+}
+
+.stack .control-label {
+  width: 100%;
+}
+
+.spacer {
+  hr {
+    width: 380px;
+  }
+}
+
+td .form-control {
+  display: inline-block;
+  width: auto;
+}
+
+.checkboxes {
+  padding-top: 5px;
+
+  .checkbox input {
+    position: static;
+    margin-left: 0;
+  }
+}
+
+.form-check {
+  padding-top: 5px;
+  margin-bottom: 0;
+}
+
+.modal label {
+  width: 100%;
+}
+
+// Validation
+.invalid {
+  border-color: var(--danger);
+}
+
+label.invalid {
+  color: var(--danger-text);
+}
+
+.valid {
+  border-color: var(--success);
+}
+
+label.valid {
+  color: var(--success-text);
+}
+
+.form-control-feedback {
+  display: block;
+}
+
+[aria-grabbed="true"] {
+  box-shadow: $input-box-shadow;
+}
+
+.sortable-handler.inactive {
+  opacity: .3;
+}
+
+// set up hidden tooltip
+[role="tooltip"]:not(.show) {
+  z-index: $zindex-tooltip;
+  display: none;
+  padding: .5em;
+  margin: .25em;
+  color: $white;
+  text-align: start;
+  background: $black;
+  border-radius: .2rem !important;
+}
+
+// reveal associated tooltip on focus
+:focus + [role="tooltip"],
+:hover + [role="tooltip"] {
+  position: absolute;
+  display: block;
+}
+
+.filter-search-bar__description {
+  bottom: 100%;
+}
+
+.container-popup .filter-search-bar__description {
+  top: 100%;
+  bottom: auto;
+}
+
+.input-group > .form-control[readonly] {
+  margin-right: 1px;
+}
+
+.form-group {
+  @extend .mb-3;
+}
+
+// Subform - non table layout
+div.subform-repeatable-group {
+  position: relative;
+  padding: 32px 32px 16px 28px;
+  margin-top: 20px;
+  border: $input-border-width solid $input-border-color;
+  @include border-radius($border-radius);
+
+  > .btn-toolbar {
+
+    .btn-group {
+      position: static;
+    }
+
+    .btn {
+      position: absolute;
+
+      &.group-add {
+        right: -1px;
+        bottom: -1px;
+        border-radius: $border-radius 0 $border-radius 0;
+      }
+      &.group-remove {
+        top: -1px;
+        right: -1px;
+        border-radius: 0 $border-radius 0 $border-radius;
+      }
+      &.group-move {
+        top: 50%;
+        right: 100%;
+        padding: 0;
+        border-radius: $border-radius 0 0 $border-radius;
+        transform: translateY(-50%);
+
+        span {
+          padding: 1.5rem .5rem;
+        }
+      }
+      &.group-move-up {
+        top: 50%;
+        right: 100%;
+        margin-top: -45px;
+        border-radius: 0;
+        transform: translateY(-50%);
+      }
+      &.group-move-down {
+        top: 50%;
+        right: 100%;
+        margin-top: 45px;
+        border-radius: 0;
+        transform: translateY(-50%);
+      }
+    }
+  }
+}
+
+// Highlight draggable section
+.subform-repeatable-group[draggable="true"] {
+  // For non table layout
+  background-color: $teal;
+
+  // For table layout
+  > td {
+    background-color: $teal;
+  }
+}

media/templates/administrator/atum/scss/blocks/_global.scss

@@ -0,0 +1,266 @@
+// Global
+
+html {
+  height: 100%;
+
+  &.a11y_font {
+    font-size: 18px;
+  }
+}
+
+body {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+  padding: 0;
+  margin: 0;
+  text-align: start;
+
+  &.admin, &#subhead-container {
+    background-color: $admin-background;
+  }
+
+  &.monochrome {
+    filter: grayscale(1);
+    &::after {
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: -1;
+      width: 100%;
+      height: 100%;
+      content: "";
+      background: var(--template-bg-dark-5);
+    }
+  }
+
+  &.a11y_contrast {
+    filter: contrast(115%);
+  }
+
+  &.monochrome.a11y_contrast {
+    filter: grayscale(1) contrast(115%);
+  }
+
+  &.a11y_highlight {
+    a,
+    .header-item-content {
+      padding: 3px;
+      text-decoration: underline !important;
+      border: #f00 dotted 1px;
+    }
+
+    .joomlaversion {
+      padding: 0;
+      text-decoration: none !important;
+      border: none;
+    }
+
+    a.page-link {
+      padding: $pagination-padding-y $pagination-padding-x;
+    }
+
+  }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: $font-weight-bold;
+}
+
+h1 {
+  font-weight: $font-weight-normal;
+}
+
+small,
+.small {
+  font-size: $font-size-sm;
+}
+
+legend {
+  font-size: 1.2rem;
+  font-weight: $font-weight-bold;
+}
+
+// focus-visible polyfill rule
+.js-focus-visible :focus:not(.focus-visible) {
+  outline: none;
+}
+
+// Default focus highlighting
+a,
+button,
+input,
+textarea {
+
+  &.focus-visible {
+    outline: auto 2px var(--focus);
+  }
+}
+
+// Break up text in cells to prevent overflow
+.break-word {
+  word-break: break-all;
+  word-wrap: break-word;
+}
+
+label,
+caption {
+  @include font-size($form-label-font-size);
+  text-align: start;
+}
+
+.logo {
+
+  img path {
+    fill: var(--template-text-dark);
+  }
+}
+
+.container-main,
+.system-debug {
+  padding-bottom: 50px;
+}
+
+body .container-main {
+  order: 1;
+  position: relative;
+  padding-right: 0;
+  padding-left: 0;
+  background: var(--main-bg);
+}
+
+.content {
+  padding: 1rem;
+
+  @include media-breakpoint-up(md) {
+    padding: 0 2rem;
+
+    .subhead + & {
+      padding-top: 0;
+    }
+  }
+}
+
+body:not(.contentpane) .main-card {
+  background: $main-card-bg;
+  border-radius: $border-radius;
+  box-shadow: var(--atum-box-shadow);
+}
+
+.row-selected {
+  background-color: var(--toolbar-bg);
+}
+
+// Multiple buttons wrapping
+.input-group input {
+  min-width: 220px;
+}
+
+// Multilingual associations specific
+.item-associations {
+  padding: 0;
+}
+
+.item-associations li {
+  display: inline-block;
+  margin-bottom: 3px;
+  list-style: none;
+}
+
+// Quickicon specific
+.message-alert {
+  text-align: end !important;
+}
+
+// external links with icons
+a[target="_blank"]::before {
+  padding-inline-end: 3px;
+  font-family: "Font Awesome 6 Free";
+  font-size: 14px;
+  font-weight: 900;
+  content: "\f35d";
+}
+
+#wrapper {
+  &.d-flex {
+    @include media-breakpoint-down(sm) {
+      display: block !important;
+    }
+  }
+}
+
+.text-muted {
+  color: $text-muted-color;
+  opacity: .7;
+}
+
+.card-columns {
+  display: grid;
+  grid-gap: 0 15px;
+  grid-template-columns: 1fr;
+
+  @include media-breakpoint-up(md) {
+    grid-template-columns: 1fr 1fr;
+  }
+}
+
+.cpanel-help,
+.cpanel-system {
+
+  .card-columns {
+    @include media-breakpoint-up(md) {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+  }
+}
+
+.tiny {
+  @include font-size($form-label-font-size);
+  line-height: 1.4rem;
+}
+
+// details
+
+details {
+  padding: .5rem 1rem;
+  margin: 0 0 2rem;
+  background: $details-bg;
+  border: $details-border;
+  border-radius: $border-radius;
+
+  summary {
+    color: var(--template-link-color);
+
+    ~ * {
+      margin-top: 1rem;
+    }
+  }
+}
+
+// meter element
+meter {
+  width: 100%;
+}
+
+// Bootstrap 4 b/c
+.sr-only {
+  @extend .visually-hidden;
+}
+
+// tab *+* border
+@include media-breakpoint-up(md) {
+  joomla-tab[orientation=horizontal]:not([view=accordion]) {
+    section > .row {
+      --gutter-x: 4rem;
+
+      > * + * {
+        border-inline-start: 1px solid var(--template-bg-dark-10);
+      }
+    }
+  }
+}

media/templates/administrator/atum/scss/blocks/_header.scss

@@ -0,0 +1,238 @@
+// Header
+.header {
+  z-index: $zindex-header;
+  color: $white;
+  background: $header-bg;
+
+  &-inside {
+    display: flex;
+    min-height: 54px;
+  }
+
+  a {
+    color: $white;
+
+    &:before {
+      display: none;
+    }
+  }
+
+  .logo {
+    display: flex;
+    flex-flow: row nowrap;
+    align-items: center;
+    width: $sidebar-width;
+    height: 100%;
+    padding: 12px 5px;
+    overflow: hidden;
+    background-color: $header-logo-bg;
+    transition: all .3s ease-in-out;
+
+    &.small {
+      justify-content: center;
+      width: $sidebar-width-closed;
+      transition: all .3s ease-in-out;
+
+      svg,
+      img {
+
+        &:not(.logo-collapsed) {
+          display: none;
+        }
+
+        &.logo-collapsed {
+          display: inline-block;
+          width: 20px;
+          height: 20px;
+          object-fit: contain;
+          object-position: center center;
+        }
+      }
+    }
+
+    svg,
+    img {
+      width: 150px;
+      height: 30px;
+      margin: 0 .35rem;
+      object-fit: contain;
+      object-position: left center;
+
+      &.logo-collapsed {
+        display: none;
+      }
+    }
+  }
+
+  .page-title {
+    padding: 0 1rem;
+    margin: 0;
+    overflow: hidden;
+    font-size: 1.2rem;
+    color: $white;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
+    > span {
+      margin-inline-end: .25rem;
+    }
+  }
+
+  .dropdown-menu {
+    font-size: .85rem;
+  }
+
+  .dropdown-header,
+  .dropdown-item {
+    padding: .82rem .75rem;
+    color: $white;
+    background-color: $dropdown-item-bg; // var(--template-bg-dark-70);
+
+    > span {
+      margin-inline-end: .5rem;
+    }
+
+    &:hover {
+      background-color: $dropdown-item-bg-hvr; // var(--template-bg-dark);
+    }
+  }
+
+  .dropdown-header {
+    padding: .75rem;
+    font-size: inherit;
+    background-color: $dropdown-header-bg; // var(--template-bg-dark);
+  }
+}
+
+.header-items {
+  align-items: center;
+  justify-content: flex-end;
+  width: 50%;
+  margin: 15px;
+  margin-inline-start: auto;
+
+  .dropdown-toggle {
+    background-color: transparent;
+    border: 0;
+
+    &::after {
+      display: none;
+    }
+  }
+}
+
+.header-item {
+  position: relative;
+  margin: 0 4px;
+}
+
+.header-item-content {
+  display: flex;
+  align-items: center;
+  line-height: 1rem;
+  color: $white;
+  background-color: $header-item-content-bg;
+  border: none;
+  border-radius: $header-item-content-border-radius;
+  padding-inline-end: 4px;
+
+  a,
+  button {
+    color: $white;
+    text-decoration: none;
+  }
+
+  a {
+    display: flex;
+  }
+
+  &:not(.no-link):not(.joomlaversion):hover {
+    background-color: $header-item-content-bg-hvr;
+  }
+
+  &.joomlaversion {
+    color: $header-item-content-jversion-color;
+    background-color: $header-item-content-jversion-bg;
+
+    .header-item-text {
+      padding-inline-end: 12px;
+    }
+  }
+}
+
+.header-item-icon {
+  > * {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    min-width: 28px;
+    height: 28px;
+    margin: 4px;
+    color: $white;
+    background-color: var(--template-bg-dark);
+    border-radius: 16px;
+  }
+
+  span {
+    margin: 4px;
+  }
+}
+
+.header-item-count {
+  margin-inline-end: .5rem;
+}
+
+.header-item-text {
+  padding: 0 8px 0 4px;
+  font-size: .75rem;
+  white-space: nowrap;
+}
+
+.header-more-btn {
+  margin: 0 5px;
+  font-size: 1.7rem;
+}
+
+.header-dd-items {
+  .header-item-content {
+    background: transparent;
+  }
+
+  .header-item-text {
+    font-size: .75rem;
+  }
+
+  .dropdown-item {
+    padding: .5rem .75rem;
+  }
+}
+
+.header-dd-item {
+  padding: 3px 6px;
+}
+
+@include media-breakpoint-down(md) {
+  .header-items {
+    position: fixed;
+    bottom: 0;
+    flex-direction: row-reverse;
+    width: 100%;
+    padding: 10px 0;
+    margin: 0;
+    background: var(--template-bg-dark);
+
+    .#{$jicon-css-prefix}-angle-down,
+    .#{$fa-css-prefix}-angle-down {
+      transform: rotate(180deg);
+    }
+  }
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .header-item-icon > * {
+      background: var(--header-bg);
+    }
+  }
+}

media/templates/administrator/atum/scss/blocks/_icons.scss

@@ -0,0 +1,86 @@
+// Icons
+
+.#{$jicon-css-prefix}-white {
+  color: $white;
+}
+
+.tbody-icon {
+  padding: 0 3px;
+  text-align: center;
+  background-color: transparent;
+  border: 0;
+
+  [class^="#{$jicon-css-prefix}-"],
+  [class*=" #{$jicon-css-prefix}-"],
+  [class^="#{$fa-css-prefix}-"],
+  [class*=" #{$fa-css-prefix}-"] {
+    width: 26px;
+    height: 26px;
+    font-size: 1rem;
+    line-height: 22px;
+    color: $gray-400;
+    border: 2px solid var(--border);
+    border-radius: 50%;
+  }
+
+  .#{$jicon-css-prefix}-publish,
+  .#{$jicon-css-prefix}-check,
+  .#{$fa-css-prefix}-check {
+    color: $icon-success;
+    border-color: $icon-success;
+  }
+
+  .#{$jicon-css-prefix}-home,
+  .#{$jicon-css-prefix}-color-featured,
+  .#{$jicon-css-prefix}-star.featured,
+  .#{$fa-css-prefix}-star.featured {
+    color: var(--featured-icon-color);
+    border-color: var(--featured-icon-color);
+  }
+
+  .#{$jicon-css-prefix}-folder,
+  .#{$fa-css-prefix}-folder {
+    color: var(--template-text-dark);
+    border-color: $gray-700;
+  }
+
+  .#{$jicon-css-prefix}-checkedout,
+  .#{$jicon-css-prefix}-lock,
+  .#{$fa-css-prefix}-lock {
+    width: auto;
+    height: auto;
+    font-size: 1.2rem;
+    line-height: 1rem;
+    color: $icon-checkedout-color; // var(--template-text-dark);
+    border: 0;
+  }
+
+  &.home-disabled,
+  &.featured-disabled,
+  &.color-featured-disabled,
+  &.#{$jicon-css-prefix}-star-disabled,
+  &.#{$fa-css-prefix}-star-disabled {
+    cursor: not-allowed;
+    opacity: 1;
+  }
+
+  &.disabled .#{$jicon-css-prefix}-home,
+  &.disabled .#{$fa-css-prefix}-home {
+    color: $state-warning-bg;
+    border-color: $state-warning-bg;
+  }
+}
+
+// WebAuthn
+.plg_system_webauthn_login_button svg {
+  width: 30px;
+  margin: 4px;
+}
+
+.plg_system_webauthn_login_button svg path, .plg_system_webauthn_login_button svg circle {
+  fill: var(--white);
+}
+
+.badge > span {
+  margin-inline-end: .5rem;
+}

media/templates/administrator/atum/scss/blocks/_iframe.scss

@@ -0,0 +1,9 @@
+// Iframe
+
+iframe {
+  border: 0;
+}
+
+.modal iframe {
+  width: 100%;
+}

media/templates/administrator/atum/scss/blocks/_layout.scss

@@ -0,0 +1,19 @@
+.options-form {
+  width: 100%;
+  padding: 1vw 2vw;
+  margin-bottom: 1rem;
+  color: $options-form-color;
+  background: $options-form-bg;
+  border: $options-form-border;
+
+  > legend {
+    float: none;
+    width: auto;
+    padding: 0 1rem;
+    font-weight: $font-weight-bold;
+    color: $options-form-legend-color;
+    background-color: $options-form-legend-bg;
+  }
+}
+
+

media/templates/administrator/atum/scss/blocks/_lists.scss

@@ -0,0 +1,9 @@
+#content {
+  form {
+    .name {
+      &.break-word {
+        word-break: break-word;
+      }
+    }
+  }
+}

media/templates/administrator/atum/scss/blocks/_login.scss

@@ -0,0 +1,274 @@
+// Login page
+
+.view-login,
+.task-logout {
+
+  .container-main {
+    order: 1;
+
+    @include media-breakpoint-down(md) {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      justify-content: center;
+      min-height: calc(100vh - 35vh);
+    }
+
+    #content {
+      @include media-breakpoint-down(md) {
+        max-width: 98%;
+        padding: 0;
+      }
+    }
+  }
+
+  .login {
+    width: 100%;
+    max-width: 25rem;
+    padding: 30px;
+    margin: 1rem;
+    color: var(--template-text-dark);
+    background: var(--body-bg);
+    border-radius: 10px;
+    box-shadow: $login-box-shadow;
+
+    @include media-breakpoint-down(lg) {
+      margin-bottom: 3rem;
+    }
+
+    img {
+      width: auto;
+      max-height: 4.4rem;
+    }
+
+    .logo {
+      padding: 0 20px 20px;
+    }
+
+    svg.joomla-logo {
+      width: 2.4rem;
+      height: 4.4rem;
+      background-size: 4.4rem 2.4rem;
+
+      path {
+        fill: var(--template-bg-dark);
+      }
+    }
+
+    &-watermark {
+      position: absolute;
+      z-index: -1;
+      max-width: 500px;
+      transform: rotate(12deg) translate(40%, 10%);
+    }
+
+  }
+
+  .form-group {
+    position: relative;
+    margin-bottom: 1.85rem;
+
+    label {
+      span {
+        font-size: ($font-size-base * .9);
+
+        @include media-breakpoint-down(sm) {
+          width: 100%;
+        }
+      }
+    }
+
+    .form-control-feedback {
+      position: absolute;
+      inset-inline-end: 0;
+      bottom: -1.5rem;
+      font-size: ($font-size-base * .75);
+      text-align: end;
+    }
+
+    .form-control-hint {
+      position: absolute;
+      top: .1rem;
+      inset-inline-end: 0;
+      font-size: ($font-size-base * .75);
+      text-align: end;
+    }
+  }
+
+  input:focus,
+  select:focus {
+    box-shadow: $login-focus-box-shadow;
+  }
+
+  h1 {
+    margin-bottom: .25rem;
+    color: $white;
+    text-align: center;
+  }
+
+  h2 {
+    font-weight: $font-weight-normal;
+    color: var(--template-bg-dark-10);
+  }
+
+  .btn {
+    @include media-breakpoint-only(xs) {
+      padding: 8px 10px;
+      font-size: ($font-size-base * .875);
+    }
+  }
+
+  .form-control,
+  .form-select {
+    max-width: none;
+  }
+
+  .sidebar-wrapper,
+  .header .logo {
+    flex: 1 0 400px;
+  }
+
+  .sidebar-wrapper {
+    display: flex;
+    flex-direction: column;
+    max-width: none;
+    background-color: var(--template-sidebar-bg);
+
+    @include media-breakpoint-down(md) {
+      order: 2;
+      margin-bottom: 3rem;
+    }
+
+    .main-brand {
+      margin-bottom: auto;
+
+      a {
+        font-size: ($font-size-base * .875);
+      }
+    }
+
+    .card-header {
+      font-size: ($font-size-base * 1.125);
+      color: $white;
+    }
+
+    @if $enable-dark-mode {
+      @include color-mode(dark) {
+        .card-header {
+          background: transparent;
+        }
+      }
+    }
+  }
+
+  #sidebar {
+    align-self: flex-end;
+    width: 100%;
+    font-size: ($font-size-base * .875);
+    --body-color: var(--template-text-light);
+    color: var(--template-text-light);
+    text-align: center;
+
+    .card {
+      background: rgba(0, 0, 0, .1);
+      box-shadow: none;
+
+      .module-body {
+        padding: .75rem 1.25rem;
+      }
+    }
+
+    @if $enable-dark-mode {
+      @include color-mode(dark) {
+        .card {
+          background: rgba(0, 0, 0, .4);
+        }
+      }
+    }
+
+
+    @include media-breakpoint-down(md) {
+      position: relative;
+      bottom: 0;
+    }
+  }
+
+  .container-main,
+  .sidebar-wrapper {
+
+    @include media-breakpoint-down(md) {
+      flex: 1 0 100% !important;
+      max-width: 100% !important;
+      min-height: auto;
+    }
+  }
+
+  .wrapper {
+    display: flex;
+
+    @include media-breakpoint-down(md) {
+      flex-direction: column;
+    }
+  }
+
+  .header {
+    display: flex;
+
+    .logo {
+      &.small {
+        line-height: 2.5rem;
+      }
+    }
+
+    @include media-breakpoint-down(md) {
+      background: var(--template-bg-dark-70);
+    }
+  }
+}
+
+label {
+  color: $login-label-color;
+}
+
+.com_login .sidebar-wrapper .main-brand {
+  flex: 1;
+  flex-basis: auto;
+  margin-top: 100px;
+  text-align: center;
+
+  @include media-breakpoint-down(md) {
+    margin-top: 10px;
+  }
+}
+
+.com_login .sidebar-wrapper #sidebar p {
+  margin-bottom: .2rem;
+}
+
+.com_login .sidebar-wrapper .main-brand a,
+.com_login .sidebar-wrapper #sidebar,
+.com_login .sidebar-wrapper #sidebar a {
+  color: var(--template-text-light);
+}
+
+.view-login {
+  #wrapper.d-flex {
+    @include media-breakpoint-down(md) {
+      display: flex !important;
+    }
+  }
+
+  #sidebar-wrapper:not(.show):not(.collapse) {
+    @include media-breakpoint-down(md) {
+      display: block;
+    }
+  }
+
+  .invalid .form-control-feedback {
+    color: var(--danger);
+  }
+}
+
+.login_message {
+  margin: 1rem 1rem 0;
+}

media/templates/administrator/atum/scss/blocks/_modals.scss

@@ -0,0 +1,447 @@
+@use "sass:color";
+
+// Modals
+
+.modal {
+
+  .btn {
+    padding: 0 22px;
+    margin-inline-end: .5rem;
+    font-size: 1rem;
+    line-height: 2.3rem;
+    color: var(--template-text-dark);
+    background: var(--white);
+    border-color: var(--whiteoffset);
+    box-shadow: $modal-btn-box-shadow;
+  }
+
+  .btn-primary:not([href]),
+  .btn-success:not([href]),
+  .btn-danger:not([href]),
+  .btn-secondary:not([href]) {
+    color: var(--template-text-dark);
+    background: var(--white);
+    border: 1px solid var(--template-text-dark);
+  }
+
+  .btn-primary:not([href]) {
+    &:hover,
+    &:focus {
+      color: var(--white);
+      background: var(--primary);
+      border-color: var(--primary);
+    }
+  }
+
+  .btn-secondary:not([href]) {
+    &:hover,
+    &:focus {
+      color: var(--white);
+      background: var(--secondary);
+      border-color: var(--secondary);
+    }
+  }
+
+  .btn-success:not([href]) {
+    &:hover,
+    &:focus {
+      color: var(--white);
+      background: var(--success);
+      border-color: var(--success);
+    }
+  }
+
+  .btn-danger:not([href]) {
+    &:hover,
+    &:focus {
+      color: var(--white);
+      background: var(--danger);
+      border-color: var(--danger);
+    }
+  }
+
+  .btn.btn-danger {
+    [class^="#{$jicon-css-prefix}-"],
+    [class*=" #{$jicon-css-prefix}-"],
+    [class^="#{$fa-css-prefix}-"],
+    [class*=" #{$fa-css-prefix}-"],
+    span {
+      display: inline-block;
+      width: 2.375rem;
+      height: 100%;
+      margin: 0 16px;
+      margin-inline-start: -22px;
+      line-height: 2.375rem;
+      color: hsla(0, 0%, 100%, .9);
+      background-color: var(--danger);
+    }
+  }
+
+  .btn.btn-success {
+    [class^="#{$jicon-css-prefix}-"],
+    [class*=" #{$jicon-css-prefix}-"],
+    [class^="#{$fa-css-prefix}-"],
+    [class*=" #{$fa-css-prefix}-"],
+    span {
+      display: inline-block;
+      width: 2.375rem;
+      height: 100%;
+      margin: 0 16px;
+      margin-inline-start: -22px;
+      line-height: 2.375rem;
+      color: hsla(0, 0%, 100%, .9);
+      background-color: var(--success);
+    }
+  }
+}
+
+.modal-header {
+  padding: 0 15px;
+}
+
+.modal-body {
+  overflow-y: initial;
+}
+
+.modal-title {
+  font-weight: $font-weight-normal;
+  line-height: $modal-header-height;
+}
+
+.contentpane {
+  padding: 20px;
+}
+
+// Changelog
+.changelog {
+  text-align: start !important;
+
+  &__item {
+    display: flex;
+    border-bottom: 1px solid $table-border-color;
+
+    @include media-breakpoint-down(md) {
+      flex-direction: column;
+    }
+  }
+
+  &__tag {
+    flex: 1 0 180px;
+    max-width: 180px;
+    padding: 10px 15px;
+    text-align: end;
+    background: color.adjust($gray-100, $lightness: -2.5%);
+    border-right: 1px solid $table-border-color;
+
+    .badge {
+      border-radius: .2rem;
+
+      &.badge-jlanguage {
+        background-color: $white;
+      }
+    }
+
+    @include media-breakpoint-down(md) {
+      flex: 1 0 auto;
+      max-width: 100%;
+      text-align: left;
+      border-right: 0;
+      border-bottom: 1px solid $table-border-color;
+    }
+  }
+
+  &__list {
+    padding: 10px 15px;
+
+    ul {
+      padding-inline-start: 15px;
+      margin-bottom: 0;
+    }
+
+    li {
+      margin-bottom: .15rem;
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+// Styling for joomla-dialog element
+joomla-dialog {
+  dialog {
+    width: 96vw;
+    max-width: 1700px;
+    height: 96vh;
+    padding: 0;
+    border: 1px solid var(--border-color-translucent);
+    border-radius: .3rem;
+    box-shadow: $modal-joomla-dialog-box-shadow;
+
+    @include media-breakpoint-up(xxl) {
+      width: 80vw;
+      height: 80vh;
+    }
+
+    // Override display to flex, to scale the content to full height
+    &[open] {
+      display: flex;
+    }
+  }
+
+  &[type="image"] {
+    dialog {
+      width: fit-content;
+      height: fit-content;
+    }
+  }
+
+  &[type="iframe"] {
+    dialog {
+      overflow: hidden;
+    }
+  }
+
+  iframe.iframe-content {
+    width: 100%;
+    height: 100%;
+  }
+
+  // Extra loading animation for iframe and ajax types
+  &[type="iframe"],
+  &[type="ajax"] {
+    &.loading {
+      dialog:after {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        display: block;
+        width: 66px;
+        height: 66px;
+        content: "";
+        background: url("../../../../system/images/ajax-loader.gif") no-repeat center; // TODO: use svg animation?
+        transform: translate(-50%, -50%);
+      }
+    }
+  }
+}
+
+// Dialog animation
+joomla-dialog dialog[open] {
+  animation: dialog-show .4s ease normal;
+
+  @media (prefers-reduced-motion: reduce) {
+    animation: none;
+  }
+}
+
+@keyframes dialog-show {
+  0% {
+    opacity: 0;
+    transform: translateY(-50px);
+  }
+  30% {
+    opacity: 1;
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+// Dialog elements
+.joomla-dialog-container {
+  position: relative;
+  box-sizing: border-box;
+  display: flex;
+  flex-flow: column;
+  width: 100%;
+  background: var(--body-bg);
+
+  .buttons-holder {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-inline-start: auto;
+
+    button {
+      margin-inline: .375rem;
+    }
+  }
+}
+
+.joomla-dialog-header {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem;
+  border-bottom: 1px solid var(--border-color);
+
+  h3 {
+    margin: 0;
+  }
+
+  .header-icon {
+    margin-inline-end: .375rem;
+    font-size: $h3-font-size;
+  }
+
+  &.empty {
+    display: none;
+  }
+}
+
+.joomla-dialog-body {
+  position: relative;
+  box-sizing: border-box;
+  flex: 1 1 auto;
+
+  .buttons-holder {
+    position: absolute;
+    top: 1rem;
+    right: 1rem;
+  }
+
+  // Apply overflow for potentially large content
+  joomla-dialog[type="inline"],
+  joomla-dialog[type="ajax"] & {
+    overflow: auto;
+  }
+
+  // Content basic loading animation
+  joomla-dialog.loading & {
+    opacity: 0;
+  }
+
+  joomla-dialog.loaded & {
+    opacity: 1;
+    transition: opacity .4s ease;
+  }
+}
+
+.joomla-dialog-footer {
+  position: relative;
+  padding: 1rem;
+  border-top: 1px solid var(--border-color);
+
+  .buttons-holder button {
+    padding-inline: 22px;
+  }
+
+  &.empty {
+    display: none;
+  }
+}
+
+// Dialog alert and confirm
+.joomla-dialog-alert,
+.joomla-dialog-confirm {
+  dialog {
+    width: 600px;
+    max-width: 80vw;
+    height: fit-content;
+  }
+
+  .joomla-dialog-body {
+    padding: 1rem;
+  }
+}
+
+// Dialog for content select field
+.joomla-dialog-content-select-field {
+  dialog {
+    @include media-breakpoint-up(xxl) {
+      width: 90vw;
+      height: 90vh;
+    }
+  }
+}
+
+.modal-content {
+  background-color: var(--body-bg);
+}
+
+// dark
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .modal {
+
+      .btn {
+
+        &.btn-primary, &.btn-primary:not([href]) {
+          color: map-get($atum-colors-dark, "btn-primary-color");
+          background: map-get($atum-colors-dark, "btn-primary-bg");
+          border: map-get($atum-colors-dark, "btn-primary-border");
+
+          &:hover {
+            color: map-get($atum-colors-dark, "btn-primary-color");
+            background: map-get($atum-colors-dark, "btn-primary-bg-hvr");
+            border: map-get($atum-colors-dark, "btn-primary-border-hvr");
+            box-shadow: none;
+          }
+        }
+
+        &.btn-success, &.btn-success:not([href]) {
+          color: map-get($atum-colors-dark, "atum-btn-success-icon");
+          background: map-get($atum-colors-dark, "atum-btn-success-bg");
+          border: map-get($atum-colors-dark, "atum-btn-success-border");
+          box-shadow: none;
+
+          &:hover {
+            color: map-get($atum-colors-dark, "atum-btn-success-icon");
+            background: map-get($atum-colors-dark, "atum-btn-success-bg-hvr");
+            border: map-get($atum-colors-dark, "atum-btn-success-border");
+            box-shadow: none;
+          }
+
+          &:disabled {
+            background: map-get($atum-colors-dark, "body-bg");
+            border: map-get($atum-colors-dark, "form-control-border-disabled");
+            opacity: .5;
+          }
+        }
+
+        &.btn-danger, &.btn-danger:not([href]) {
+          color: map-get($atum-colors-dark, "atum-btn-danger-color");
+          background: map-get($atum-colors-dark, "atum-btn-danger-bg");
+          border: map-get($atum-colors-dark, "atum-btn-danger-border");
+          box-shadow: none;
+
+          &:hover {
+            color: map-get($atum-colors-dark, "atum-btn-danger-color");
+            background: map-get($atum-colors-dark, "atum-btn-danger-bg-hvr");
+            border: map-get($atum-colors-dark, "atum-btn-danger-border-hvr");
+            box-shadow: none;
+          }
+        }
+
+        &.btn-secondary, &.btn-secondary:not([href]) {
+          color: map-get($atum-colors-dark, "btn-secondary-color");
+          background: map-get($atum-colors-dark, "btn-secondary-bg");
+          border: map-get($atum-colors-dark, "btn-secondary-border");
+          box-shadow: none;
+
+          &:hover {
+            color: map-get($atum-colors-dark, "btn-secondary-color");
+            background: map-get($atum-colors-dark, "btn-secondary-bg-hvr");
+            border: map-get($atum-colors-dark, "btn-secondary-border-hvr");
+            box-shadow: none;
+          }
+        }
+
+        &:disabled {
+          background: map-get($atum-colors-dark, "body-bg");
+          opacity: .5;
+        }
+      }
+
+    }
+    .joomla-dialog-container .changelog .changelog__item .changelog__tag {
+      background: map-get($atum-colors-dark, "body-bg");
+    }
+  }
+}
+
+
+

media/templates/administrator/atum/scss/blocks/_quickicons.scss

@@ -0,0 +1,186 @@
+// Quick Icons
+
+.quick-icons {
+  background-color: $quickicon-bg;
+
+  .nav {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
+    grid-gap: 1rem;
+  }
+
+  a {
+    text-decoration: none;
+  }
+
+  ul {
+    padding: 0;
+  }
+
+  .quickicon {
+    --text-color: var(--template-quickicon-color);
+    --bg-color: var(--template-quickicon-bg);
+    --icon-color: var(--template-quickicon-color);
+    --icon-color-hvr: #{$quickicon-color-hvr};
+    --bg-color-hvr: var(--template-quickicon-bg-hvr);
+    --text-color-hvr: #{$quickicon-link-hvr};
+    --text-amount-color: var(--template-quickicon-color);
+
+    display: flex;
+    flex-grow: 1;
+
+    a {
+      display: flex;
+      flex-direction: column;
+      flex-grow: 1;
+      justify-content: flex-end;
+      padding: 0 1rem;
+      color: var(--text-color);
+      background-color: var(--bg-color);
+      transition: all .25s ease;
+
+      &:focus-visible {
+        border: 1px solid var(--link-color);
+        outline: 0;
+      }
+
+      .quickicon-icon {
+        margin-top: .5rem;
+        margin-inline-start: .2rem;
+        color: var(--icon-color);
+
+        > * {
+          font-size: $quickicon-icon-size;
+        }
+      }
+
+      .quickicon-name {
+        padding: .125rem 0 .6rem;
+        font-size: $display2-size;
+        font-weight: bold;
+      }
+
+      .quickicon-amount {
+        padding: .25rem .5rem;
+        font-weight: $bold-weight;
+        line-height: 1rem;
+        color: var(--text-amount-color);
+        background: $quickicon-amount-bg;
+        border-radius: $border-radius;
+        transition: all .25s ease;
+        margin-inline-start: .5rem;
+      }
+
+      .j-links-link {
+        display: block;
+        padding: 0 .2rem;
+        line-height: 1.1;
+      }
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: var(--text-color-hvr);
+        text-decoration: none;
+        background: var(--bg-color-hvr);
+        --text-amount-color: var(--bg-color-hvr);
+
+        .quickicon-amount {
+          color: $quickicon-amount-bg;
+          background: var(--icon-color);
+        }
+        .quickicon-icon {
+          color: var(--icon-color-hvr);
+        }
+      }
+
+      &.info {
+        --text-color: var(--state-info-text);
+        --text-color-hvr: var(--state-info-text-hvr);
+        --bg-color: var(--state-info-bg);
+        --icon-color: var(--state-info-icon);
+        --icon-color-hvr: var(--state-info-icon-hvr);
+        --bg-color-hvr: var(--state-info-bg-hvr);
+      }
+
+      &.warning {
+        --text-color: var(--state-warning-text);
+        --text-color-hvr: var(--state-warning-text-hvr);
+        --bg-color: var(--state-warning-bg);
+        --icon-color: var(--state-warning-icon);
+        --icon-color-hvr: var(--state-warning-icon-hvr);
+        --bg-color-hvr: var(--state-warning-bg-hvr);
+      }
+
+      &.danger {
+        --text-color: var(--state-danger-text);
+        --text-color-hvr: var(--state-danger-text-hvr);
+        --bg-color: var(--state-danger-bg);
+        --icon-color: var(--state-danger-icon);
+        --icon-color-hvr: var(--state-danger-icon-hvr);
+        --bg-color-hvr: var(--state-danger-bg-hvr);
+      }
+
+      &.success {
+        --text-color: var(--state-success-text);
+        --text-color-hvr: var(--state-success-text-hvr);
+        --bg-color: var(--state-success-bg);
+        --icon-color: var(--state-success-icon);
+        --icon-color-hvr: var(--state-success-icon-hvr);
+        --bg-color-hvr: var(--state-success-bg-hvr);
+      }
+    }
+  }
+
+  .quickicon-info {
+    display: flex;
+    align-items: flex-end;
+  }
+
+  .quickicon-linkadd {
+    width: 2.5rem;
+    font-size: 1.2rem;
+    background: $quickicon-linkadd-bg;
+    transition: all .25s ease;
+
+    a {
+      align-items: flex-end;
+      justify-content: center;
+      width: 100%;
+
+      > * {
+        margin-bottom: 10px;
+        color: $quickicon-linkadd-color;
+      }
+
+      &:focus-visible {
+        border: 1px solid var(--link-color);
+        outline: 0;
+      }
+
+      &:hover,
+      &:focus,
+      &:active {
+        background: var(--quickicon-linkadd-bg-hvr);
+
+        * {
+          color: $white;
+        }
+      }
+    }
+  }
+
+  .quickicon-single,
+  .quickicon-group {
+    display: flex;
+    min-height: 6rem;
+    overflow: hidden;
+    border: $quickicon-border;
+    border-radius: $quickicon-border-radius;
+  }
+}
+
+#content .menu-quicktask {
+  position: absolute;
+  inset-inline-end: 1.25rem;
+}

media/templates/administrator/atum/scss/blocks/_shepard-modals.scss

@@ -0,0 +1,39 @@
+.shepherd-element, .shepherd-arrow:before {
+  background-color: var(--body-bg) !important;
+}
+
+.shepherd-text, .shepherd-title {
+  color: var(--body-color) !important;
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .shepherd-element, .shepherd-arrow:before {
+      background-color: #2f4156 !important;
+    }
+
+    .shepherd-has-title .shepherd-content .shepherd-header, .shepherd-element.shepherd-has-title[data-popper-placement^=bottom] > .shepherd-arrow:before {
+      background-color: #222f3e !important;
+    }
+
+    .shepherd-has-title .shepherd-content .shepherd-cancel-icon {
+      color: var(--template-link-color) !important;
+
+      &:hover {
+        color: var(--template-link-hover-color) !important;
+      }
+    }
+
+    body .shepherd-button.shepherd-button-secondary:not(:disabled) {
+
+      color: var(--btn-secondary-color) !important;
+      background-color: var(--btn-secondary-bg) !important;
+      border: var(--btn-secondary-border) !important;
+
+      &:hover {
+        color: var(--btn-secondary-color-hvr) !important;
+        background-color: var(--btn-secondary-bg-hvr) !important;
+      }
+    }
+  }
+}

media/templates/administrator/atum/scss/blocks/_sidebar-nav.scss

@@ -0,0 +1,37 @@
+// Sidebar
+
+.sidebar-nav {
+  padding: 1rem 2rem;
+
+  li {
+    font-size: .9rem;
+    font-weight: $font-weight-bold;
+
+    &.divider {
+      margin: .3rem 0;
+    }
+
+    a {
+      display: block;
+      padding: .25rem;
+      font-weight: $font-weight-normal;
+      color: $text-normal;
+      text-decoration: none;
+
+      &::before {
+        margin-inline-end: .5rem;
+        font-family: "Font Awesome 6 Free";
+        font-weight: 900;
+        content: "\f054" #{"/*!rtl:\"\f053\"*/"};
+      }
+    }
+
+    &.item:hover, &.active {
+      background-color: var(--sidebar-item-bg-hvr);
+
+      a {
+        color: var(--sidebar-item-color);
+      }
+    }
+  }
+}

media/templates/administrator/atum/scss/blocks/_sidebar.scss

@@ -0,0 +1,305 @@
+// Sidebar
+
+.sidebar-wrapper {
+  z-index: $zindex-sidebar;
+  min-height: calc(100vh - 66px);
+  overflow: hidden;
+  background-color: $sidebarwrapper-bg;
+  box-shadow: var(--atum-box-shadow);
+
+  .sidebar-sticky {
+    position: sticky;
+    top: 0;
+  }
+
+  .item {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    list-style-type: none;
+
+    a,
+    .menu-dashboard,
+    .menu-quicktask {
+      color: $sidebar-item-color; /* $sidebar-item-color $white */
+      text-decoration: none;
+
+      &:hover {
+        color: $sidebar-item-color-hvr; /* $sidebar-item-color-hvr var(--template-text-light) */
+        text-decoration: none;
+        background-color: $sidebar-item-bg-hvr; /* $sidebar-item-bg-hvr var(--template-bg-dark-65) */
+      }
+    }
+
+    > a {
+      position: relative;
+      display: flex;
+      flex-grow: 1;
+      align-items: center;
+      min-height: 40px;
+
+      [class^="#{$jicon-css-prefix}-"],
+      [class*=" #{$jicon-css-prefix}-"],
+      [class^="#{$fa-css-prefix}-"],
+      [class*=" #{$fa-css-prefix}-"] {
+        margin: 0 .85rem;
+        transform: scale(1.2);
+      }
+    }
+
+    &-level-2 > a {
+      padding-inline-start: 3rem;
+    }
+
+    &-level-3 > a {
+      padding-inline-start: 3.75rem;
+    }
+  }
+
+  @include media-breakpoint-up(sm) {
+    flex: 1 0 $sidebar-width;
+    max-width: $sidebar-width;
+    transition: all .3s ease-in-out;
+  }
+
+  @include media-breakpoint-down(sm) {
+    &.sidebar-menu {
+      top: auto;
+    }
+  }
+
+  .sidebar-toggle {
+    background: $sidebar-toggle-bg; /* $sidebar-toggle-bg var(--template-bg-dark-60) */
+
+    a {
+      color: $sidebar-toggle-link; /* $sidebar-toggle-link $white */
+    }
+
+    .sidebar-item-title {
+      white-space: nowrap;
+    }
+  }
+}
+
+// Sidebar navigation
+.main-nav {
+  width: $sidebar-width;
+  padding: 0;
+  font-size: .95rem;
+
+  @include media-breakpoint-down(sm) {
+    width: 100%;
+  }
+
+  // All list items
+  li {
+
+    .menu-dashboard,
+    .menu-quicktask {
+      > a {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        width: 40px;
+        height: 100%;
+      }
+    }
+  }
+
+  // 2nd level items
+  ul {
+    width: 100%;
+    padding: 0;
+    background-color: $main-nav-ul-bg; /* main-nav-ul-bg: var(--template-bg-dark-75) */
+  }
+
+  .divider {
+    height: 1px;
+    margin: 0 0 0 48px;
+    list-style: none;
+    background-color: $main-nav-divider-bg; /* main-nav-divider-bg: var(--template-bg-dark-60) */
+  }
+
+  .menuitem-group {
+    margin-top: .65rem;
+    font-size: .75rem;
+    padding-inline-start: 3rem;
+
+    .sidebar-item-title {
+      color: $main-nav-item-title; /* main-nav-item-title: var(--template-bg-dark-30) */
+    }
+  }
+
+  // Dropdown indicator
+  .has-arrow {
+    .sidebar-item-title {
+      margin-inline-end: auto;
+    }
+
+    &::after {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 2rem;
+      font-family: "Font Awesome 6 Free";
+      font-weight: 900;
+      content: "\f054" #{"/*!rtl:\"\f053\"*/"};
+    }
+  }
+
+  a.mm-active {
+    background-color: $main-nav-mm-active-bg; /* main-nav-mm-active-bg: var(--template-bg-dark-70) */
+  }
+
+  a.mm-active + .menu-quicktask {
+    background-color: $main-nav-mm-active-quicktask-bg; /* main-nav-mm-active-quicktask-bg: var(--template-bg-dark-60) */
+  }
+
+  .mm-active > .has-arrow::after {
+    content: "\f078";
+  }
+
+  .mm-collapse {
+    display: none;
+
+    &.mm-collapsed,
+    &.mm-show {
+      display: block;
+    }
+  }
+
+  .mm-collapsing {
+    position: relative;
+    height: 0;
+    overflow: hidden;
+    transition: all .35s ease;
+  }
+
+  .badge {
+    align-self: center;
+    margin: 0 .3rem .25rem;
+    background-color: $main-nav-badge; /* main-nav-badge: var(--template-bg-dark-60) */
+  }
+}
+
+// Sidebar Closed
+.closed {
+  .sidebar-wrapper {
+    flex: 1 0 $sidebar-width-closed;
+    max-width: $sidebar-width-closed;
+    overflow: visible;
+  }
+
+  .sidebar-item-title,
+  .has-arrow::after,
+  .menu-dashboard {
+    display: none;
+  }
+
+  .main-nav,
+  .main-nav li {
+    max-width: 3rem;
+  }
+
+  .main-nav a:hover {
+    position: relative;
+    max-width: 3rem;
+  }
+
+  .main-nav a:hover .sidebar-item-title {
+    position: absolute;
+    inset-inline-start: 100%;
+    display: flex;
+    align-items: center;
+    height: 100%;
+    padding: 0 1rem;
+    white-space: nowrap;
+    pointer-events: none;
+    background-color: $main-nav-item-title-hvr-bg; /* main-nav-item-title-hvr-bg: var(--template-bg-dark-60) */
+    border-end-start-radius: 0;
+    border-end-end-radius: $border-radius;
+    border-start-end-radius: $border-radius;
+    border-start-start-radius: 0;
+  }
+
+  .main-nav > li > ul {
+    height: 0;
+    padding: 0;
+    visibility: hidden;
+  }
+}
+
+@include media-breakpoint-up(sm) {
+  .toggler-burger {
+    display: none;
+  }
+}
+
+// Mobile
+@include media-breakpoint-down(sm) {
+  #menu-collapse {
+    display: none;
+    background: $mobile-menu-collapse-bg; /* mobile-menu-collapse-bg: var(--template-bg-dark-50) */
+  }
+
+  .toggler-burger {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    z-index: $zindex-mobile-toggle;
+    padding: 10px 15px;
+
+    &:focus {
+      box-shadow: none;
+    }
+
+    .navbar-toggler-icon {
+      background-image: none;
+    }
+
+    .navbar-toggler-icon::before {
+      display: inline-block;
+      font: normal normal 900 28px/1 "Font Awesome 6 Free";
+      color: var(--toggle-color);
+      content: "\f00d";
+    }
+
+    &.collapsed {
+      .navbar-toggler-icon::before {
+        content: "\f0c9";
+      }
+    }
+  }
+
+  .sidebar-menu {
+    display: none;
+
+    &.show,
+    &.collapsing {
+      position: fixed;
+      bottom: 55px;
+      z-index: $zindex-mobile-menu;
+      display: block;
+      width: 100%;
+      min-height: auto;
+      max-height: calc(100vh - 72px);
+      overflow-y: auto;
+    }
+  }
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .sidebar-wrapper {
+      border: 1px solid rgba(255, 255, 255, .05);
+      box-shadow: none;
+      .main-nav {
+        .badge {
+          color: map-get($atum-colors-dark, "btn-primary-color");
+          background-color: map-get($atum-colors-dark, "btn-primary-bg");
+        }
+      }
+    }
+  }
+}
+

media/templates/administrator/atum/scss/blocks/_switcher.scss

@@ -0,0 +1,22 @@
+.switcher {
+  .toggle-outside {
+    border: $input-border-width solid $input-border-color;
+    @include border-radius($input-border-radius, 0);
+
+    &:focus {
+      box-shadow: $input-box-shadow;
+    }
+  }
+  input:focus ~ .toggle-outside {
+    border-color: $input-focus-border-color;
+    @if $enable-shadows {
+      @include box-shadow($input-box-shadow, $input-focus-box-shadow);
+    } @else {
+      // Avoid using mixin so we can pass custom focus shadow properly
+      box-shadow: $input-focus-box-shadow;
+    }
+  }
+}
+.disabled {
+  opacity: $btn-disabled-opacity;
+}

media/templates/administrator/atum/scss/blocks/_toolbar.scss

@@ -0,0 +1,251 @@
+.subhead {
+  position: sticky;
+  top: 0;
+  right: 0;
+  left: 0;
+  z-index: $zindex-toolbar;
+  width: auto;
+  min-height: 43px;
+  padding: 8px 1rem;
+  color: var(--atum-subhead-color);
+  background: var(--atum-subhead-bg);
+  background-image: var(--atum-subhead-bg-img);
+  box-shadow: var(--atum-box-shadow);
+
+  .row {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  &.noshadow {
+    box-shadow: none;
+  }
+
+  joomla-toolbar-button,
+  .btn-group {
+    margin-inline-start: .75rem;
+
+    &:first-child {
+      margin-inline-start: 0;
+    }
+  }
+
+  joomla-toolbar-button {
+    .btn > span,
+    .dropdown-item > span {
+      margin-inline-end: .5rem;
+      width: 1.25em;
+      text-align: center;
+    }
+  }
+
+  .btn {
+    --subhead-btn-icon: var(--atum-btn-icon);
+    --subhead-btn-icon-hover: var(--atum-btn-icon-hvr);
+    --subhead-btn-bg: var(--atum-btn-bg);
+    --subhead-btn-bg-hvr: var(--atum-btn-bg-hvr);
+    --subhead-btn-border: var(--atum-btn-border);
+
+    padding: 0 1rem;
+    margin: 5px 0;
+    font-size: 1rem;
+    line-height: $atum-toolbar-line-height;
+    color: var(--atum-btn);
+    background: var(--subhead-btn-bg);
+    border: var(--subhead-btn-border);
+
+    > span {
+      display: inline-block;
+      color: var(--subhead-btn-icon);
+    }
+
+    &:not([disabled]):hover,
+    &:not([disabled]):active,
+    &:not([disabled]):focus {
+      color: var(--atum-btn-hvr);
+      background-color: var(--subhead-btn-bg-hvr);
+      border: var(--subhead-btn-border);
+
+      > span {
+        color: var(--subhead-btn-icon-hvr); /* $atum-btn-hvr rgba(255, 255, 255, .9); */
+      }
+    }
+
+    &.btn-success {
+      --subhead-btn-icon: var(--atum-btn-success-icon);
+      --subhead-btn-icon-hover: var(--atum-btn-success-icon-hvr);
+      --subhead-btn-bg: var(--atum-btn-success-bg);
+      --subhead-btn-bg-hvr: var(--atum-btn-success-bg-hvr);
+      --subhead-btn-border: var(--atum-btn-success-border);
+
+      &:not([disabled]) {
+        --subhead-btn-border: var(--atum-btn-success-border);
+      }
+      &:disabled {
+        --subhead-btn-border: var(--atum-btn-info-border);
+      }
+    }
+
+    &.btn-danger {
+      --subhead-btn-icon: var(--atum-btn-danger-icon);
+      --subhead-btn-icon-hover: var(--atum-btn-danger-icon-hvr);
+      --subhead-btn-bg: var(--atum-btn-danger-bg);
+      --subhead-btn-bg-hvr: var(--atum-btn-danger-bg-hvr);
+      --subhead-btn-border: var(--atum-btn-danger-border);
+
+      &:not([disabled]) {
+        --subhead-btn-border: var(--atum-btn-danger-border);
+      }
+      &:disabled {
+        --subhead-btn-border: var(--atum-btn-info-border);
+      }
+    }
+
+    &.btn-primary {
+      --subhead-btn-icon: var(--atum-btn-primary-icon);
+      --subhead-btn-icon-hover: var(--atum-btn-primary-icon-hvr);
+      --subhead-btn-bg: var(--atum-btn-primary-bg);
+      --subhead-btn-bg-hvr: var(--atum-btn-primary-bg-hvr);
+      --subhead-btn-border: var(--atum-btn-primary-border);
+
+      &:disabled {
+        --subhead-btn-border: var(--atum-btn-info-border);
+      }
+    }
+
+    &.btn-info, &.button-options {
+      --subhead-btn-icon: var(--atum-btn-info-icon);
+      --subhead-btn-icon-hover: var(--atum-btn-info-icon-hvr);
+      --subhead-btn-bg: var(--atum-btn-info-bg);
+      --subhead-btn-bg-hvr: var(--atum-btn-info-bg-hvr);
+      --subhead-btn-border: var(--atum-btn-info-border);
+    }
+
+    &.btn-action {
+      --subhead-btn-icon: var(--atum-btn-action-icon);
+      --subhead-btn-icon-hover: var(--atum-btn-info-action-hvr);
+      --subhead-btn-bg: var(--atum-btn-action);
+      --subhead-btn-bg-hvr: var(--atum-btn-action-bg-hvr);
+      --subhead-btn-border: var(--atum-btn-action-border);
+      display: flex;
+      align-items: center;
+
+      &::after {
+        width: 2.375rem;
+        font-family: "Font Awesome 6 Free";
+        font-weight: 900;
+        content: "\f078";
+        border: 0;
+      }
+    }
+
+    &[disabled],
+    &.dropdown-toggle[disabled] {
+      background: var(--body-bg);
+      opacity: .5;
+
+      &:hover,
+      &:active,
+      &:focus {
+        cursor: not-allowed;
+      }
+    }
+  }
+
+  .dropdown-toggle {
+    &.btn {
+      padding-inline-end: 0;
+    }
+  }
+
+  .btn-group:not(:last-child) > .dropdown-toggle-split {
+    order: 1;
+    margin-inline-start: -$border-radius;
+    border-radius: 0 $border-radius $border-radius 0;
+  }
+
+  .dropdown-menu joomla-toolbar-button,
+  .btn-group joomla-toolbar-button {
+    margin-inline-start: 0;
+  }
+
+  .contentpane & {
+    margin: -15px -15px 0;
+    background-image: none;
+    border-bottom: 1px solid var(--template-bg-dark-7); // TODO: unified variables for light and dark mode
+  }
+}
+
+@include media-breakpoint-down(sm) {
+  joomla-tab[view=accordion] .col-md-9,
+  joomla-tab[view=accordion] .col-md-3 {
+    padding: .5rem 1rem !important;
+  }
+
+  #myTab {
+    margin-top: 1rem;
+    margin-bottom: 1.5rem;
+  }
+
+  joomla-tab[view=accordion] ul li {
+    width: 100%;
+  }
+
+  .toggler-toolbar {
+    top: 0;
+    bottom: auto;
+    z-index: $zindex-alerts;
+    padding: 7px 10px;
+    margin: 5px;
+    background-color: var(--template-bg-dark); // TODO: unified variables for light and dark mode
+    border-radius: 30px;
+
+    .toggler-toolbar-icon::before {
+      font: normal normal 900 28px/1 "Font Awesome 6 Free";
+      color: var(--toggle-color);
+      content: "\f00d";
+    }
+
+    &.collapsed .toggler-toolbar-icon::before {
+      content: "\f085";
+    }
+  }
+
+  .subhead {
+    padding-right: 0;
+    padding-left: 0;
+
+    joomla-toolbar-button,
+    .btn-group,
+    .btn {
+      width: 100%;
+      margin-left: 0;
+      text-align: left;
+    }
+
+    .btn-toolbar > .btn-group,
+    .btn-toolbar > joomla-toolbar-button {
+      margin-left: 0;
+    }
+
+    .btn.btn-action::after {
+      text-align: center;
+      margin-inline-start: auto;
+    }
+
+    .dropdown-toggle-split {
+      width: auto;
+    }
+  }
+}
+
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .subhead {
+      border-top: 1px solid rgba(255,255,255,.05);
+      border-bottom: 1px solid rgba(255,255,255,.05);
+    }
+  }
+}
+

media/templates/administrator/atum/scss/blocks/_treeselect.scss

@@ -0,0 +1,132 @@
+// Tree select
+
+.treeselect {
+  display: block;
+  padding-left: 0;
+  list-style: none;
+
+  .nav-header {
+    font-weight: $font-weight-bold;
+    color: $nav-header-color;
+  }
+
+  li {
+    position: relative;
+    display: block;
+    line-height: $treeselect-line-height;
+    list-style: none;
+
+    &::before {
+      position: absolute;
+      top: 14px;
+      inset-inline-start: ($treeselect-indent - 15px);
+      width: 10px;
+      height: 1px;
+      margin: auto;
+      content: "";
+      background-color: var(--treeselect-line-color);
+    }
+
+    &::after {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      inset-inline-start: ($treeselect-indent - 15px);
+      width: 1px;
+      height: 100%;
+      content: "";
+      background-color: var(--treeselect-line-color);
+    }
+
+    &:last-child {
+
+      &::after {
+        height: 14px;
+      }
+    }
+
+    li {
+      padding-inline-start: $treeselect-indent;
+    }
+  }
+
+  > li::before,
+  > li::after {
+    display: none;
+  }
+
+  .#{$jicon-css-prefix}-,
+  .#{$fa-css-prefix}- {
+    display: none;
+  }
+
+  .treeselect-toggle {
+    display: inline-block;
+    padding: 0;
+    margin-right: .1rem;
+    color: var(--template-link-color);
+    text-align: center;
+    cursor: pointer;
+  }
+
+  .treeselect-menu {
+    display: inline-block;
+  }
+
+  .treeselect-item {
+    display: inline-block;
+
+    input {
+      position: relative;
+      top: 1px;
+      margin-right: .2rem;
+    }
+
+    label {
+      margin-bottom: 0;
+    }
+  }
+
+  .dropdown-toggle {
+    padding: 0 .5rem .3rem;
+    margin-left: .5rem;
+
+    &::after {
+      margin-left: 0;
+      font-size: 1rem;
+      color: var(--treeselect-dropdown-toggle);
+    }
+  }
+}
+
+.treeselect-sub {
+  padding-left: 0;
+}
+
+.tree-holder {
+
+  ul ul {
+
+    li::before,
+    li::after {
+      inset-inline-start: 8px;
+      display: block;
+    }
+
+    li::before {
+      top: 12px;
+    }
+
+    li:last-child::after {
+      height: 12px;
+    }
+  }
+
+  li {
+    line-height: 1.8rem;
+
+    li {
+      padding-inline-start: 20px;
+    }
+  }
+}

media/templates/administrator/atum/scss/blocks/_utilities.scss

@@ -0,0 +1,205 @@
+// Utilities
+* {
+  box-sizing: border-box;
+}
+
+// Keep B/C
+.element-invisible {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+  clip-path: inset(50%);
+}
+
+.hidden {
+  display: none;
+}
+
+.table-row {
+  display: table-row;
+}
+
+// Form Grid
+
+.form-grid {
+  --span-1: span 1;
+  --span-2: span 1;
+  --span-3: span 1;
+  --span-4: span 1;
+  --span-5: span 1;
+
+  display: grid;
+  grid-template-columns: repeat(1, 1fr);
+  grid-gap: 1rem;
+
+  @include media-breakpoint-up(sm) {
+    --span-2: span 2;
+    --span-3: span 2;
+    --span-4: span 2;
+    --span-5: span 2;
+
+    grid-template-columns: repeat(2, 1fr);
+  }
+
+  @include media-breakpoint-up(xxl) {
+    --span-3: span 3;
+    --span-4: span 4;
+    --span-5: span 5;
+
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  > * {
+    grid-column: 1 / -1;
+  }
+
+  .stack {
+    flex-direction: column;
+  }
+
+  .span-1 {
+    grid-column: 1 / var(--span-1);
+
+    &-inline {
+      grid-column: var(--span-1);
+    }
+  }
+
+  .span-2 {
+    grid-column: 1 / var(--span-2);
+
+    &-inline {
+      grid-column: var(--span-1);
+
+      @include media-breakpoint-up(xxl) {
+        grid-column: var(--span-2);
+      }
+    }
+  }
+
+  .span-3 {
+    grid-column: 1 / var(--span-3);
+
+    &-inline {
+      grid-column: var(--span-3);
+    }
+  }
+
+  .span-4 {
+    grid-column: 1 / var(--span-4);
+
+    &-inline {
+      grid-column: var(--span-4);
+    }
+  }
+
+  .span-5 {
+    grid-column: 1 / var(--span-5);
+
+    &-inline {
+      grid-column: var(--span-5);
+    }
+  }
+
+  @include media-breakpoint-up(lg) {
+    .offset-1 {
+      grid-column-start: 2;
+    }
+
+    .offset-2 {
+      grid-column-start: 3;
+    }
+
+    .offset-3 {
+      grid-column-start: 4;
+    }
+
+    .offset-4 {
+      grid-column-start: 5;
+    }
+
+    .offset-5 {
+      grid-column-start: 6;
+    }
+  }
+}
+
+
+// Sizing
+
+.w-1 {
+  width: 1%;
+}
+
+.w-3 {
+  width: 3%;
+}
+
+.w-5 {
+  width: 5%;
+}
+
+.w-6 {
+  width: 6%;
+}
+
+.w-7 {
+  width: 7%;
+}
+
+.w-10 {
+  width: 10%;
+}
+
+.w-12 {
+  width: 12%;
+}
+
+.w-15 {
+  width: 15%;
+}
+
+.w-20 {
+  width: 20%;
+}
+
+.w-30 {
+  width: 30%;
+}
+
+.w-35 {
+  width: 35%;
+}
+
+.w-40 {
+  width: 40%;
+}
+
+.w-60 {
+  width: 60%;
+}
+
+.w-80 {
+  width: 80%;
+}
+
+.editor-xtd-buttons .btn {
+  margin-bottom: 5px;
+}
+
+// Visibility depend from ColorScheme
+@include color-mode(dark) {
+  .d-dark-scheme-none {
+    display: none;
+  }
+}
+@include color-mode(light) {
+  .d-light-scheme-none {
+    display: none;
+  }
+}