dev/scss/base/base.scss

@charset "utf-8";
@use "../util";
@use "fonts";
@use "flextable";
@use "fragment";
@use "load";
@use "form";
@use "view";
@use "menu";
@use "banner";
@use "showPWD";
@use "copyToClipboard";
@use "buttongroup";
@use "colors";
@use "icons";
@use "lengths";
@use "mixins";

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


* {
  @include mixins.box-sizing-box;
}

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

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

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

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

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

  // External links
  &[href^="http://"]::after,
  &[href^="https://"]::after {
    @include mixins.icon-font;
    content:   " " + icons.$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:    lengths.$standard-border-radius;
  padding:          2pt 5pt 2pt 20pt;
  margin:           0;
  border-left:      5px solid colors.$ids-blue-1;
  background-color: colors.$ids-blue-2;
  color:            colors.$ids-blue-1;
  -webkit-mix-blend-mode: normal; // Safari
  mix-blend-mode:   soft-light;
  
  &.bug,
  &.missing,
  &.warning {
    border-left-color: colors.$dark-red;
    background-color:  colors.$middle-red;
    color:             colors.$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: colors.$ids-blue-1;
      }

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

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