mediawiki-extension-IsekaiBackgroundWidget/modules/ext.isekai.backgroundWidget/timeless.less

@globalRadius: 0.4em;
@globalBgColor: rgba(252, 252, 252, 0.8);
@globalBgLoadingColor: rgba(252, 252, 252, 1);
@headerBgColor: transparent;
@footerBgColor: rgba(149, 149, 149, 0.7);
@footerBgLoadingColor: rgba(149, 149, 149, 1);
@globalBoxShadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2),
  0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 1px 14px 0 rgba(0, 0, 0, 0.12);
@backdropFilter: saturate(120%) blur(20px);
@globalTransition: opacity 250ms linear, background-color 250ms linear;

.has-bgimg {
  .isekai-bgimg {
    position: fixed;
    opacity: 0;
    transition: @globalTransition;

    z-index: -2;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
  }

  .isekai-navbar-bg {
    position: fixed;
    z-index: 99;
    top: 0;
    left: 0;
    width: 100%;
    height: 3.125em;
  }

  body {
    background: #f3f3f3;
  }

  #mw-content-container {
    background: none;
    backdrop-filter: none;
  }

  #mw-footer-container {
    position: relative;
    background: none;
    background-color: @footerBgColor;

    &.bgimg-background-loading {
      background-color: @footerBgLoadingColor;
    }
  }

  #mw-content {
    background: none;
    border: none;
    border-bottom-left-radius: @globalRadius;
    border-bottom-right-radius: @globalRadius;
    box-shadow: @globalBoxShadow;

    background-color: @globalBgColor;

    &.bgimg-background-loading {
      background-color: @globalBgLoadingColor;
    }
  }

  #mw-content-container::after {
    display: none;
  }

  #mw-header-container {
    background: @headerBgColor;
  }

  #simpleSearch {
    background: rgba(0, 0, 0, 0.07);
    border: solid 1px #a2a9b1;
    box-shadow: none;

    #searchInput-container input[type="search"]:focus {
      background: #fff;
    }
  }

  #mw-content {
    position: relative;
  }

  @media screen and (max-width: 850px) {
    .isekai-navbar-bg {
      display: none;
    }
  }

  @media screen and (max-width: 1099px) {
    #mw-content {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border: none;
      background: none;
      backdrop-filter: none;
      box-shadow: none;
    }

    #mw-content-block {
      background: none;
    }

    #mw-content-container {
      background-color: @globalBgColor;
      backdrop-filter: @backdropFilter;

      &.bgimg-background-loading {
        background-color: @globalBgLoadingColor;
      }
    }

    #mw-header-hack {
      z-index: 99;
    }

    #mw-site-navigation .sidebar-chunk,
    #mw-related-navigation .sidebar-chunk {
      background: none;
      backdrop-filter: none;
    }

    .isekai-bgimg {
      display: none;
    }
  }

  @media screen and (min-width: 1100px) {
    #mw-site-navigation .sidebar-chunk,
    #mw-related-navigation .sidebar-chunk {
      position: relative;
      border: none;
      border-radius: @globalRadius;
      box-shadow: @globalBoxShadow;

      background: @globalBgColor;

      &.bgimg-background-loading {
        background-color: @globalBgLoadingColor;
      }

      h3 {
        border-bottom: solid 1px #a2a9b1;
      }
    }
  }

  .comment-body textarea,
  .comment-preview {
    background: @globalBgColor;

    &.bgimg-background-loading {
      background-color: @globalBgLoadingColor;
    }
  }

  .comment-toolbar {
    background: @globalBgColor;

    &.bgimg-background-loading {
      background-color: @globalBgLoadingColor;
    }
  }

  &.bgimg-fallback {
    #mw-content-container {
      background: none !important;
    }

    #mw-footer-container {
      --bgimg-overlay-color: @footerBgColor;
    }

    @media screen and (max-width: 1099px) {
      #mw-content {
        background: none !important;
      }

      #mw-content-container {
        background: var(--bgimg-blur-image), var(--bgimg-overlay-color, @globalBgColor) !important;
        background-blend-mode: saturation !important;
        background-attachment: fixed !important;
        background-size: var(--bgimg-bg-size) !important;
        background-position: var(--bgimg-bg-pos) !important;
      }
    }

    @media screen and (max-width: 1099px) {
      #mw-site-navigation .sidebar-chunk,
      #mw-related-navigation .sidebar-chunk {
        background: none !important;
      }
    }
  }
}