@import "base/ftp_color_scheme";

// ---------------------------
// TYPOGRAPHY
// ---------------------------

$remSize:                   10px;
$iconSize:                  16px;
$iconMargin:                0.375em;
$lineHeight:                1.375;

$fontFamily:                'Source Serif Pro', Georgia, 'Times New Roman', Times, serif;
$fontFamilyHead:            'Crete Round', Georgia, 'Times New Roman', Times, serif;

$fontSizeSmall:             14px;
$fontSize:                  16px;
$fontSizeBig:               18px;
$fontSizeStrong:            20px;
$fontSizeH5:                20px; //125%
$fontSizeH4:                24px; //150%
$fontSizeH3:                28px; //175%
$fontSizeH2:                32px; //200%
$fontSizeH1:                40px; //250%

// ---------------------------
// EASING FUNCTIONS
// ---------------------------

$easeOutCubic:              cubic-bezier(0.215, 0.61, 0.355, 1);
$easeOutElastic:            cubic-bezier(0.1, 1.3, 0.7, 1.1);

// ---------------------------
// BUTTONS & INPUTS
// ---------------------------

$btnHeight:                 2em;
$btnPadding:                0.75em;
$btnIconPadding:            0.6em;
$btnBorderRadius:           0.25em;
$btnTransitionTime:         0.1s;
$btnFontWeight:             normal;
$btnFontSize:               $fontSize;
$btnFontSizeBig:            $fontSizeBig;
$btnFontSizeSmall:          $fontSizeSmall;
$btnFontSizeStrong:         $fontSizeStrong;
$btnFontFamily:             $fontFamily;
$btnColor:                  #532;
$btnBackground:             #EFE9E6;
$btnFocusBorder:            #09F;
$btnDisabledColor:          #AAA;
$btnDisabledBackground:     #EEE;
$btnRedColor:               #FFF;
$btnRedBackground:          #E33;
$btnGreenColor:             #FFF;
$btnGreenBackground:        #8C3;
$btnBlueColor:              #FFF;
$btnBlueBackground:         #3AE;
$btnOrangeColor:            #FFF;
$btnOrangeBackground:       #F83;

$inputHeight:               2em;
$inputPadding:              0.375em;
$inputBorderRadius:         0;
$inputTransitionTime:       0.2s;
$inputFontSize:             $fontSize;
$inputFontFamily:           $fontFamily;
$inputColor:                #000;
$inputBackground:           #FFF;
$inputBorderColor:          rgba(#000, 0.15);
$inputFocusBorder:          rgba(#433, 0.45);
$inputDisabledColor:        #888;
$inputDisabledBackground:   #F9F9F9;
$inputInvalidColor:         #C00;

// ---------------------------
// LAYOUT
// ---------------------------

$widthMax:                  1440px;
$widthL:                    1024px;
$widthM:                    900px;
$widthMin:                  768px;

$gapSize:                   20px;

@import "base/normalize";
@import "base/global";
@import "base/helpers";

@import "components/forms";
@import "components/buttons";
@import "components/dropdown";
@import "components/litebox";

@import "components/shared";
@import "components/layout";

@import "sections/home";
@import "sections/software";
@import "sections/contact";
@import "sections/project";
@import "sections/signon";
@import "sections/deed";
@import "sections/dashboard";
@import "sections/collection";
@import "sections/article";
@import "sections/page";
@import "sections/work";
@import "sections/user";
@import "sections/ia-import";
@import "sections/iiif-import";
@import "sections/search_attempt";

@import "plugins/select2/core";

#welcome-message {
  width: 480px;
  .button {
    border: 0;
    color: #FFF;
    display: block;
    line-height: 2.5;
    box-shadow: none;
    background-image: none;
    margin: 1.5em 0 0.5em 0;
    font-size: $fontSizeStrong;
    background-color: mix($bodyBg, #322, 50%);
    &:hover, &:focus, &:active {
      background-color: mix($bodyBg, #322, 30%);
    }
  }
}

.btn {
  float: right;
}

.mt-10 {
  margin-top: 10px;
}


$thredded-base-font-family: $fontFamily;
$thredded-heading-font-family: $fontFamilyHead;

$thredded-base-font-size: $fontSize;
$thredded-font-size-small: $fontSizeSmall;
$thredded-base-line-height: $lineHeight;

$thredded-heading-line-height: $lineHeight;

// $widthMax was in px
$thredded-grid-container-max-width: 90rem;


$thredded-button-background: $btnBackground;
$thredded-button-color: $btnColor;
$thredded-button-hover-background: darken($thredded-button-background, 15%) !default;
$thredded-button-hover-color: $thredded-button-color !default;

$thredded-button-light-background: lighten($thredded-button-background, 35%) !default;
$thredded-button-light-color: darken($thredded-button-background, 15%) !default;
$thredded-button-light-hover-background: darken($thredded-button-light-background, 15%) !default;
$thredded-button-light-hover-color: darken($thredded-button-light-color, 15%) !default;


$thredded-button-border-radius: $btnBorderRadius;
$thredded-button-font-family: $btnFontFamily;
$thredded-button-font-size: $btnFontSize;
$thredded-button-font-weight: $btnFontWeight;
$thredded-button-line-height: 1 !default;

$thredded-messageboards-grid-item-border-color: rgba(#000, 0.15);

$thredded-messageboard-title-font-size: $fontSize;
$thredded-topic-header-font-size: $fontSize;
$thredded-topic-header-font-size-tablet-and-up: $fontSize;


@import "thredded";

// ---------------------------
// Thredded Overrides
// ---------------------------



.thredded--main-container {
  // The padding and max-width are handled by the app's container.
  max-width: none;
  padding: 0;
  @include thredded-media-tablet-and-up {
    padding: 0;
  }
}


.thredded--post--content {
  font-size: $fontSize;
  line-height: $lineHeight;
  // TODO?
  word-break: break-word;
  a {
    @extend %thredded--link;
  }
  p {
    @extend %thredded--paragraph;
  }
  hr {
    @extend %thredded--hr;
  }
  img {
    max-width: 100%;
    height: auto;
  }
  table {
    @extend %thredded--table;
  }
  blockquote {
    @extend %thredded--blockquote;
  }
  pre {
    overflow-x: auto;
  }
}

.thredded--topic-header--follow-info {
  @include thredded-media-desktop-and-up {
    max-width: 35rem;
  }
}


.thredded--topics--title {
  @extend %thredded--heading;
  display: inline;
  font-size: $fontSize;
  line-height: $lineHeight;
}


.thredded--main-navigation {
//  display: none;
}



// our h3 are h1 in Thredded
h1, .thredded--topic-header--title {
  color: $fgH3;
  font-size: $fontSizeH3;
}

// our h5 are h3 in Thredded
h3, .thredded--post-form--title {
  color: $fgH5;
  font-size: $fontSizeH5;
}

// hide header, footer, title in monitor view mode
.monitor-view {
  padding: 0;

  .wrapper {
    padding: 0;
    max-width: 100%;

    .page-imagescan {
      height: 100vh;
    }
  }

  header,
  .breadcrumbs,
  .collection-footer,
  footer {
    display: none;
  }
}

// extra class for custom OSD icons
#osd_monitor_open svg {
  width: 20px;
  height: 20px;
  margin-top: -2px;
}

#osd_monitor_close svg {
  width: 20px;
  height: 20px;
  transform: rotateZ(180deg);
  margin-top: -1px;
}

// Splitter CSS
.page-columns {
  .splitter {
    cursor: col-resize;
    background-color: #faf5eb;
    position: relative;

    &:hover::after {
      background-color: #d0bb88 !important;
    }

    &:hover::before {
      background-color: #9a8964 !important;
    }
  }

  &[data-layout-mode='rtl'],
  &[data-layout-mode='ltr'] {
    .splitter {
      margin-left: -2rem;
      margin-right: -2rem;
      width: 20px;
      height: calc(100vh - 74px - 3rem);
      position: sticky;
      top: 80px !important;
    }

    .splitter::after {
      position: absolute;
      top: 0;
      width: 3px;
      height: 100%;
      left: 50%;
      transform: translateX(-50%);
      content: '';
      background-color: #ebe4d8;
      z-index: 0;
    }

    .splitter::before {
      position: absolute;
      top: 50%;
      transform: translateY(-50%) translateX(-50%);
      content: '';
      background-color: #dac28a;
      width: 5px;
      left: 50%;
      height: 40px;
      border-radius: 2px;
      display: block;
      z-index: 1;
    }
  }

  &[data-layout-mode='ttb'],
  &[data-layout-mode='btt'] {

    .splitter {
      margin-top: -2rem;
      margin-bottom: -2rem;
      cursor: row-resize;
      height: 20px;
      width: 100%;
      z-index: 99;
      position: sticky;
    }

    .splitter::after {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      height: 3px;
      width: 100%;
      content: '';
      background-color: #ebe4d8;
      display: block;
      left: 0;
      z-index: 100;
    }

    .splitter::before {
      position: absolute;
      top: 50%;
      transform: translateY(-50%) translateX(-50%);
      content: '';
      background-color: #dac28a;
      height: 5px;
      left: 50%;
      width: 40px;
      border-radius: 2px;
      display: block;
      z-index: 101;
    }
  }
}

thead th.bang {
  display: none !important;
}

.bs {
  @import "bootstrap.min";
}

@import "datepicker/datepicker";
@import "jquery.ui.all";
@import "handsontable.min";
@import "datatables.min";
@import "annotorious/annotorious-openseadragon.css";
@import "annotorious/annotorious-openseadragon-textlayer.css";
