@plone/volto/theme/themes/pastanaga/extras/main.less

Volto

/*******************************
            Theme
*******************************/

@type: 'extra';
@element: 'main';

@import (multiple) '../../theme.config';

// Extras (third party libs)
@import (less) '~react-toastify/dist/ReactToastify.css';

// Mixins
@import 'mixins';

// General Styling

body {
  display: flex;

  @media only screen and (max-width: @largestMobileScreen) {
    flex-direction: column;
  }

  &.has-toolbar-menu-open,
  &.has-mobile-menu-open {
    // The body scroll locker when the toolbar or the mobile menu are active in mobile.
    @media only screen and (max-width: @largestTabletScreen) {
      overflow: hidden;
    }
  }
}

body.cms-ui .ui.basic.segment.content-area {
  cursor: text;
}

#main {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.overlay-container {
  position: fixed;
  z-index: 110;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vw;
  background-color: black;
  opacity: 0;
  transition: opacity 0.25s ease-in-out;

  &.overlay-container-enter-active,
  &.overlay-container-enter-done {
    opacity: 0.4;
  }

  &.overlay-container-exit-active {
    opacity: 0;
  }
}

.documentFirstHeading {
  position: relative;
  border-bottom: 2px solid @purpleBackground;

  &::before {
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 30px;
    height: 0;
    border-bottom: 3px solid @pink;
    content: '';
  }
}

.documentDescription {
  color: #5d7a8e;
  font-size: 1.125rem;
}

::-moz-selection {
  border-width: 20px;
  border-style: solid;
  background-color: rgba(31, 189, 238, 0.5);
  border-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDYwIDYwIj4KICA8ZyBmaWxsPSIjMUZCRUVGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii45NSI+CiAgICA8cGF0aCBkPSJNMTAgNjBDNC40NzcxNTI1IDYwIDAgNTUuNTI0MDYxOCAwIDUwIDMuNTUyNzEzNjhlLTE1IDQ0LjQ3NzE1MjUgNC40NzU5MzgxOCA0MCAxMCA0MEwyMCA0MCAyMCA1MEMyMCA1NS41MjI4NDc1IDE1LjUyNDA2MTggNjAgMTAgNjB6TTQwIDUwQzQwIDU1LjUyMjg0NzUgNDQuNDc1OTM4MiA2MCA1MCA2MEw1MCA2MEM1NS41MjI4NDc1IDYwIDYwIDU1LjUyNDA2MTggNjAgNTBMNjAgNTBDNjAgNDQuNDc3MTUyNSA1NS41MjQwNjE4IDQwIDUwIDQwTDQwIDQwIDQwIDUwIDQwIDUweiIvPgogIDwvZz4KPC9zdmc+Cg==')
    20 fill repeat;
}

::selection {
  border-width: 20px;
  border-style: solid;
  background-color: rgba(31, 189, 238, 0.5);
  border-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI2MCIgaGVpZ2h0PSI2MCIgdmlld0JveD0iMCAwIDYwIDYwIj4KICA8ZyBmaWxsPSIjMUZCRUVGIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIG9wYWNpdHk9Ii45NSI+CiAgICA8cGF0aCBkPSJNMTAgNjBDNC40NzcxNTI1IDYwIDAgNTUuNTI0MDYxOCAwIDUwIDMuNTUyNzEzNjhlLTE1IDQ0LjQ3NzE1MjUgNC40NzU5MzgxOCA0MCAxMCA0MEwyMCA0MCAyMCA1MEMyMCA1NS41MjI4NDc1IDE1LjUyNDA2MTggNjAgMTAgNjB6TTQwIDUwQzQwIDU1LjUyMjg0NzUgNDQuNDc1OTM4MiA2MCA1MCA2MEw1MCA2MEM1NS41MjI4NDc1IDYwIDYwIDU1LjUyNDA2MTggNjAgNTBMNjAgNTBDNjAgNDQuNDc3MTUyNSA1NS41MjQwNjE4IDQwIDUwIDQwTDQwIDQwIDQwIDUwIDQwIDUweiIvPgogIDwvZz4KPC9zdmc+Cg==')
    20 fill repeat;
}

// SVGs
svg.circled {
  box-sizing: content-box;
  padding: 4px;
  border: 2px solid currentColor;
  border-radius: 50px;
}

svg.icon {
  // Experiment if this is ok for all icons
  box-sizing: content-box;
}

button .close {
  color: @darkHotPink;
}

// Override default behavior for forms and segments
.ui.form,
.ui.segments,
.ui.segment {
  position: static !important;
}

// Buttons colored
button {
  &.contents {
    color: @teal-blue;
  }

  &.save {
    color: @teal-blue;
  }

  &.cancel {
    color: @darkHotPink;
  }

  &.edit {
    color: @teal-blue;
  }
}

// Button reset
.button-reset {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-align: initial;

  &:focus {
    outline: none;
  }
}
//checkbox overrides
/* Unchecked */
.ui.checkbox {
  label {
    &:before {
      border: @checkboxBorderUnchecked;
      border-radius: unset;
      box-shadow: 0 2px 2px 0 #0000001a;
    }

    &:hover:before {
      border: @checkboxBorderUnchecked;
    }

    &:focus:before {
      border: @checkboxBorderUnchecked;
    }
  }

  input:focus ~ label:before {
    border: @checkboxBorderUnchecked;
  }
}

/* Checked */
.ui.checkbox input:checked {
  & ~ label:after,
  .box:after {
    color: @checkboxColor;
    content: '\e800';
  }

  & ~ label:before {
    border: @checkboxBorderChecked;
    box-shadow: none;
  }

  /* Focus */
  &:focus {
    & ~ label:before {
      border: @checkboxBorderChecked;
    }

    & ~ label:after,
    .box:after {
      color: @checkboxColor;
      content: '\e800';
    }
  }
}

// Drag and drop
.drag.layer {
  position: relative;
  padding: 1rem 2rem 1rem 2rem;
  margin: -1rem -2rem 0 -2rem;
}

.drag.layer:hover .drag.edit,
.drag.layer:hover .drag.toolbar {
  display: block;
}

.drag.layer .drag.handle {
  margin-bottom: 0.5rem;
}

.drag.toolbar {
  position: absolute;
  top: 12px;
  left: 0;
  display: none;
}

.drag.edit {
  position: absolute;
  top: 12px;
  right: 0;
  display: none;
}

// Toolbar
.editbar {
  position: fixed;
  z-index: 10;
  top: 60px;
  left: 400px;
}

// Diff view
.deletion {
  background-color: #f8cbcb;
}

.addition {
  background-color: #a6f3a6;
}

// Socialmedia sharing
.SocialMediaShareCount,
.SocialMediaShareButton {
  display: inline-block;
}

// Comments
.comments {
  margin-top: 20px;
}

// Add-ons control panel
#page-addons {
  .secondary {
    text-transform: uppercase;

    .circular.label {
      margin-left: 0.5em;
    }
  }

  .title {
    color: @black;
    font-size: @14px;
    text-transform: uppercase;

    &.updateAvailable {
      color: @teal;
    }

    .accordionToggle {
      float: right;
    }

    .updateText {
      margin-left: 5px;
      font-size: @12px;
      text-transform: none;

      ::before {
        display: inline-block;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        margin-right: 5px;
        background-color: @teal;
        content: '';
      }
    }

    .icon.accordionToggle {
      color: @black;
    }
  }

  .description {
    margin-bottom: 1em;
    color: @grey;
  }

  .installAction {
    float: right;
  }

  .uninstallAction {
    float: right;
    // color: @negativeTextColor;
  }

  .version {
    color: @tealTextColor;
    font-size: @12px;
  }
}

// Toasts
.Toastify__toast-container {
  width: 480px;
  color: inherit;

  @media only screen and (max-width: @largestMobileScreen) {
    width: 100vw;
  }
}

.Toastify__toast-container--bottom-center {
  bottom: 0;
  padding: 0;
  margin-left: -240px;

  @media only screen and (max-width: @largestMobileScreen) {
    margin-left: 0;
  }

  .Toastify__toast {
    min-height: 60px;
    align-items: center;
    padding: 18px;
    margin-bottom: 0;
  }

  .Toastify__toast-body {
    display: flex;
  }

  .toast-inner-content {
    margin-left: 8px;

    h4 {
      margin-bottom: 0;
      font-weight: @bold;
    }

    p {
      font-weight: 300;
    }

    ul {
      padding: 0;
    }
  }

  .Toastify__toast--info {
    background: #aee2f2;
  }

  .Toastify__toast--error {
    background: #f5c1c1;
  }

  .Toastify__toast--success {
    background: #c9eab1;
  }

  .Toastify__toast--warning {
    background: #f3e2ab;
  }
}

.users-control-panel .table {
  &::-webkit-scrollbar {
    width: 3px;
    height: 3px; /* scrollbar height */
    background: transparent; /* optional: just make scrollbar invisible */
  }
}

//Controlpanel
.controlpanel .ui .grid h3 {
  flex-direction: column;

  .content {
    .word-break();
  }
}

//Add translation
#page-add-translation {
  .new-translation {
    margin-left: 2em;
  }

  .source-object {
    padding-right: 3em;
  }

  .ui.menu.formtabs {
    flex-wrap: wrap;
  }
}
//Add translation, Compare translation
#page-add-translation,
#page-compare-translation {
  .full-width {
    position: unset;
    right: unset;
    left: unset;
    width: 100% !important;
    margin-right: unset !important;
    margin-left: unset !important;
  }
}

fieldset.invisible {
  padding: 0;
  border: none;
  margin: 0;
  // Reset visibility, this 'invisible' is not meant to hide the fieldset
  // This prevents issues when used along other CSS framworks that might
  // have this utility class defined (e.g. TailwindCSS)
  visibility: initial;
}

.vertical-form {
  .ui.grid.stackable {
    .stretched.nine.wide.column {
      align-self: start;
    }
  }
}

// File Widget
.ui.small.image.image-preview {
  margin-top: 20px;
}

.label-file-widget-input {
  display: inline-block;
  padding: 7px 10px;
  border: 2px solid #007eb1;
  border-radius: 10px;
  margin-top: 20px;
  color: #007eb1;
  cursor: pointer;
  opacity: 0.8;
}

.dropzone-placeholder {
  width: 100%;
  padding: 20px;
  border: 2px dashed #c7d5d8;
  margin-top: 20px;
}

.dropzone-text {
  height: 100%;
  text-align: center;
}

.file-widget-dropzone {
  outline: none;
}

#page-manage-translations .manage-multilingual-tools {
  .ui.button {
    padding: 4px;
    border-radius: 1px;
    margin-left: 4px;
    color: #826a6a !important;
  }
}

.hamburger-wrapper {
  position: relative;
  z-index: 5;
  width: 70px;
  height: 59px;
  padding: 15px 15px;

  .hamburger {
    position: relative;
    width: 40px;
    height: 24px;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer;
    transition: 0.3s ease-in-out;
  }

  .hamburger::after {
    position: absolute;
    top: 0;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: #000;
    content: '';
    transition: 0.3s ease-in-out;
  }

  .hamburger::before {
    position: absolute;
    top: 20px;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: #000;
    content: '';
    transition: 0.3s ease-in-out;
  }

  .hamburger-inner {
    position: absolute;
    top: 10px;
    left: 0;
    display: inline-block;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    transition: 0.3s ease-in-out;
  }

  .hamburger.is-active::after,
  .hamburger.is-active::before {
    top: 10px;
    left: 50%;
    width: 0%;
  }

  .hamburger-inner::after,
  .hamburger-inner::before {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 4px;
    border-radius: 4px;
    background-color: #000;
    content: '';
    transition: 0.3s ease-in-out;
  }

  .hamburger.is-active .hamburger-inner::after {
    transform: rotate(45deg);
  }

  .hamburger.is-active .hamburger-inner::before {
    transform: rotate(-45deg);
  }
}

.mobile-menu {
  position: fixed;
  z-index: 3;
  top: 0;
  right: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

body.has-toolbar .mobile-menu {
  padding-top: 60px;
}

body.has-toolbar-collapsed .mobile-menu {
  padding-top: 20px;
}

.mobile-menu-nav {
  display: flex;
  overflow: auto;
  height: 100%;
  align-items: @mobileMenuNavAlignItems;
  justify-content: @mobileMenuNavJustifyContent;
  text-align: @mobileMenuNavTextAlign;

  &::-webkit-scrollbar {
    width: @mobileScrollbarWidth;
    -webkit-appearance: none;
    background: @mobileScrollbarTrackBackground;
  }

  .ui.pointing.secondary.stackable.menu {
    align-items: @mobileMenuNavMenuAlignItems;
    font-size: @mobileMenuNavMenuFontSize;

    .item {
      display: flex;
      justify-content: @mobileMenuNavItemJustifyContent;
      line-height: @mobileMenuNavItemLineHeight;
    }
  }
}

.mobile-menu {
  background-color: #fff;
}

.mobile-menu-enter {
  transform: translate(0%, -100%);
}

.mobile-menu-enter.mobile-menu-enter-active {
  transform: translate(0%, 0%);
  transition: transform 0.5s cubic-bezier(0.09, 0.11, 0.24, 0.91);
}

.mobile-menu-enter-done {
}

.mobile-menu-exit {
  transform: translate(0%, 0%);
  transition: transform 0.5s cubic-bezier(0.09, 0.11, 0.24, 0.91);
}

.mobile-menu-exit.mobile-menu-exit-active {
  transform: translate(0%, -100%);
  transition: transform 0.5s cubic-bezier(0.09, 0.11, 0.24, 0.91);
}

img.responsive {
  max-width: 100%;
  height: auto;
}

// Related Items
.related-items {
  margin-top: 20px;
}

// Deprecated as per https://github.com/plone/volto/issues/1265
// @import 'utils';
@import (multiple) '../extras/fonts';
@import 'toolbar';
@import 'draftjs';
@import 'blocks';
@import 'sidebar';
@import 'recurrence-widget.less';
@import 'react-dates-overrides';
@import 'time-picker-overrides';
@import 'objectbrowser-widget';
@import 'color-picker-widget';
@import 'sitemap';
@import 'search';
@import 'contents';
@import 'print';
@import 'userscontrolpanel.less';
@import 'skiplinks';
@import 'widgets';
@import 'login';
@import 'language-selector';
@import 'views';
@import 'toc';
@import 'grid.less';
.loadUIOverrides();