dev/scss/base/base.scss

@charset "utf-8";
@import "../util";
@import "fonts";
@import "flextable";
@import "fragment";
@import "load";
@import "form";
@import "view";
@import "menu";
@import "banner";
@import "showPWD";
@import "copyToClipboard";
@import "buttongroup";

/**
 * Basic global CSS rules for Kalamar
 */


* {
  @include box-sizing-box;
}

body,
html,
select,
g > text {
  font-family: verdana, tahoma, arial, Helvetica, sans-serif;
  color:       $dark-grey;
  margin:      0;
}

g > text {
  fill: $dark-grey;
}

// html {
//   height: 100vh;
// }

body {
  min-height: 100vh;
  font-size:  12pt;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
}

a {
  &:visited {
    color: $darkest-orange;
  }
  
  &:link {
    text-decoration: none;
    color:           $dark-orange;
    &:hover {
      color:      $darkest-orange;
      transition: color 0.3s ease 0s;
    }
  }

  // External links
  &[href^="http://"]::after,
  &[href^="https://"]::after {
    @include icon-font;
    content:   " " + $fa-extlink;
    font-size: 75%;
  }
}

// Styles for Mojolicious::Plugin::TagHelpers::MailToChiffre
a[onclick$='return PArok(this,false)'] {
  unicode-bidi: bidi-override;
  direction:    rtl;
  text-align:   left;
  & > span {
    &:nth-child(1n+2){
      display: none
    }
    &:nth-child(1)::after{
      content: '@'
    }
  }
}

.clear {
  clear: both;
}

iframe {
  border-width: 0;
}

blockquote {
  border-radius:    $standard-border-radius;
  padding:          2pt 5pt 2pt 20pt;
  margin:           0;
  border-left:      5px solid $ids-blue-1;
  background-color: $ids-blue-2;
  color:            $ids-blue-1;
  -webkit-mix-blend-mode: normal; // Safari
  mix-blend-mode:   soft-light;
  
  &.bug,
  &.missing,
  &.warning {
    border-left-color: $dark-red;
    background-color:  $middle-red;
    color:             $nearly-white;
    mix-blend-mode:    multiply;
  }
}

dl {
  margin:         0;
  padding-bottom: .5em;

  dt {
    font-weight: bold;

    abbr {
      border-width: 0;

      &[data-type=token]::after {
	      color: $ids-blue-1;
      }

      &[data-type=span]::after {
	      color: $ids-pink-1;
      }

      &::after {
	      content:        ' (' attr(title) ')';
	      vertical-align: bottom;
	      font: {
          style:  italic;
	        weight: normal;
	        size:   80%;
        }
      }
    }
  }
}