panel/app/assets/stylesheets/application.scss

$black: black;
$white: white;
$grey: grey;
$cyan: #13fefe;
$magenta: #f206f9;

$colors: (
  "black": $black,
  "white": $white,
  "cyan": $cyan,
  "magenta": $magenta
);

// Redefinir variables de Bootstrap
$primary: $magenta;
$secondary: $black;
$jumbotron-bg: transparent;
$enable-rounded: false;
$form-feedback-valid-color: $cyan;
$form-feedback-invalid-color: $magenta;
$form-feedback-icon-valid-color: $black;
$component-active-bg: $magenta;

$spacers: (
  2-plus: 0.75rem
);

@import "bootstrap";
@import "editor";

.editor {
  .editor-content {
    figure {
      border: 1px solid transparentize($magenta, 0.3)
    }
  }
}

:root {
  --foreground: #{$black};
  --background: #{$white};
  --color: #{$magenta};
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground: #{$white};
    --background: #{$black};
    --color: #{$cyan};
  }
}

// TODO: Encontrar la forma de generar esto desde los locales de Rails
$custom-file-text: (
  en: 'Browse',
  es: 'Buscar archivo'
);

@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 500;
  font-display: optional;
  src: local('Saira Medium'), local('Saira-Medium'),
    font-url('saira/v3/SairaMedium-subset.woff2') format('woff2'),
    font-url('saira/v3/SairaMedium-subset.zopfli.woff') format('woff');
}

@font-face {
  font-family: 'Saira';
  font-style: normal;
  font-weight: 700;
  font-display: optional;
  src: local('Saira Bold'), local('Saira-Bold'),
    font-url('saira/v3/SairaBold-subset.woff2') format('woff2'),
    font-url('saira/v3/SairaBold-subset.zopfli.woff') format('woff');
}

body {
  font-family: Saira, sans-serif;
  background-color: var(--background);
  color: var(--foreground);
}

* {
  .rtl,
  &[dir=rtl] {
    text-align: right;
  }
}

a {
  color: var(--color);

  &:hover {
    color: var(--color);
  }

  &[target=_blank] {
    /* TODO: Convertir a base64 para no hacer peticiones extra */
    &:after {
      content: image-url('icon_external_link.png');
    }
  }
}

$footer-height: 60px;

/* Colores */
$purpura: #5c004d;
$turquesa: #009389;
$azul: #0b2660;
$fucsia: #e9193e;
$celeste: #91f0ff;
$verde: #96d643;

ol.breadcrumb {
  background-color: transparent;
}

.breadcrumb-item,
.breadcrumb-item.active,
.table,
.form-control,
.custom-file-label {
  color: var(--foreground);
}

.table tr.sticky-top,
.form-control,
.custom-file-label {
  background-color: var(--background);
}

.turbolinks-progress-bar {
  height: 3px;
  background-color: $magenta;
}

.btn-text {
  background-color: transparent;
  border: none;
}

.inline {
  display: inline;
}

.sindu_dragger table {
  background: transparent !important;
}

.d-none, .d-block {
  transition: all 3s;
}

.mapable,
.taggable {
  .input-map,
  .input-tag {
    legend {
      @extend .sr-only
    }

    label {
      margin: 0.5rem;
    }

    input {
      vertical-align: middle;

      &[type=text] {
        @extend .form-control;
        display: inline-block;
        width: calc(100% - 93px);
      }

      &[type=checkbox] {
      }

      &[type=button] {
        @extend .btn;
        @extend .btn-info;
        @extend .m-0;
      }
    }
  }
}

svg {
  .is-path-magenta {
    fill: var(--foreground);
  }
}

.btn {
  background-color: var(--foreground);
  color: var(--background);
  border: none;
  border-radius: 0;
  margin-right: 0.3rem;
  margin-bottom: 0.3rem;

  &:hover {
    color: var(--background);
    background-color: var(--color);
  }

  &:active {
    background-color: var(--color);
  }

  &:focus {
    box-shadow: 0 0 0 0.2rem var(--color);
  }
}

.btn-sm {
  @extend .badge
}

.black-bg {
  color: $white;
  background-color: $black;

  svg {
    .is-path-magenta {
      fill: $white
    }
  }

  a {
    color: $magenta;
  }

  .btn {
    background-color: $white;
    color: $black;
    border: none;

    &:hover {
      color: $black;
      background-color: $cyan;
    }

    &:active {
      background-color: $cyan;
    }

    &:focus {
      box-shadow: 0 0 0 0.2rem $cyan;
    }
  }

  .breadcrumb-item {
    color: $white;
  }
}

::-moz-selection,
::selection {
  background: var(--color);
  color: var(--background);
}

.black-bg {
  ::selection,
  ::-moz-selection {
    background-color: $magenta;
    color: $white;
  }
}

.handle {
  img {
    height: 1rem;
  }
}

.custom-control-label {
  font-weight: bold;
}

.designs {
  .design {
    margin-top: 1rem;
  }
}

.editor {
  .ProseMirror-menubar {
    min-height: 32px;
    color: var(--color);
    background-color: var(--background);
    border: none;

    .ProseMirror-menu-active {
      border-radius: unset;
      color: var(--color);
    }
  }

  .ProseMirror {
    @extend .form-control;

    height: auto;
  }
}

.vh-100 {
  height: 100vh !important;
}

// Viene de sutty-base-jekyll-theme
$prefixes: ("", "-webkit-", "-ms-", "-o-", "-moz-");
$overflows: auto, hidden, scroll;

/*
 * Usar en animaciones, empiezan rápido y desaceleran hacia el final.
 */
$bezier: cubic-bezier(0.75, 0, 0.25, 1);

/*
 * Ocultar la barra de scroll, útil para sliders horizontales.
 */
.no-scrollbar {
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;

  &::-webkit-scrollbar { display: none; }
}

@each $cursor in (pointer none) {
  .cursor-#{$cursor} {
    cursor: $cursor;
  }
}

@each $direction in (top, right, bottom, left) {
  .#{$direction}-0 {
    #{$direction}: 0
  }
}

@each $value in $overflows {
  .overflow-#{$value} { overflow: $value !important; }
}

@each $axis in (y, x) {
  @each $value in $overflows {
    .overflow-#{$axis}-#{$value} { overflow-#{$axis}: $value !important; }
  }
}

/*
 * Poder aumentar o disminuir el alto de la tipografía, se usa de la
 * misma forma que los modificadores de padding y margin.
 */
@each $size, $length in $spacers {
  .f-#{$size} {
    font-size: $length !important;
  }

  .text-column-#{$size} {
    column-count: $size;
  }

  .line-clamp-#{$size} {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: $size;
    -webkit-box-orient: vertical;
  }
}

/*
 * Modificadores de Bootstrap que no tienen versión responsive.
 */
@each $grid-breakpoint, $_ in $grid-breakpoints {
  @include media-breakpoint-up($grid-breakpoint) {
    // border
    .border-#{$grid-breakpoint}         { border: $border-width solid $border-color !important; }
    .border-#{$grid-breakpoint}-top     { border-top: $border-width solid $border-color !important; }
    .border-#{$grid-breakpoint}-right   { border-right: $border-width solid $border-color !important; }
    .border-#{$grid-breakpoint}-bottom  { border-bottom: $border-width solid $border-color !important; }
    .border-#{$grid-breakpoint}-left    { border-left: $border-width solid $border-color !important; }
    .border-#{$grid-breakpoint}-0        { border: 0 !important; }
    .border-#{$grid-breakpoint}-top-0    { border-top: 0 !important; }
    .border-#{$grid-breakpoint}-right-0  { border-right: 0 !important; }
    .border-#{$grid-breakpoint}-bottom-0 { border-bottom: 0 !important; }
    .border-#{$grid-breakpoint}-left-0   { border-left: 0 !important; }

    // alineación
    .text-#{$grid-breakpoint}-left   { text-align: left !important; }
    .text-#{$grid-breakpoint}-right  { text-align: right !important; }
    .text-#{$grid-breakpoint}-center { text-align: center !important; }

    // posición
    @each $position in $positions {
      .position-#{$grid-breakpoint}-#{$position} { position: $position !important; }
    }

    // anchos y altos
    @each $prop, $abbrev in (width: w, height: h) {
      @each $size, $length in $sizes {
        .#{$abbrev}-#{$grid-breakpoint}-#{$size} { #{$prop}: $length !important; }
      }
    }

    // versión responsive de f
    @each $size, $length in $spacers {
      .f-#{$grid-breakpoint}-#{$size} {
        font-size: $length !important;
      }

      .text-column-#{$grid-breakpoint}-#{$size} {
        column-count: $size;
      }
    }
  }
}

/*
 * Crea una propiedad con prefijos de navegador
 */
@mixin vendor-prefix($property, $definition...) {
  @each $prefix in $prefixes {
    #{$prefix}$property: $definition;
  }
}

/*
 * Crea clases para asignar colores según la lista de colores.
 */
@each $color, $_ in $colors {
  .background-#{$color} {
    background-color: var(--#{$color});

    &:focus {
      background-color: var(--#{$color});
    }
  }

  .scrollbar-#{$color} {
    scrollbar-color: var(--#{$color}) transparent;
    scrollbar-width: thin;

    &::-webkit-scrollbar {
      width: 5px;
      height: 8px;
      background-color: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: var(--#{$color});
    }
  }

  .border-#{$color} {
    border-color: var(--#{$color}) !important;
  }

  .hover-bg-#{$color} {
    &:hover {
      background-color: var(--#{$color});
    }
  }

  .hover-#{$color} {
    &:hover {
      color: var(--#{$color});
    }
  }

  .#{$color} {
    color: var(--#{$color});

    &:focus {
      color: var(--#{$color});
    }

    ::-moz-selection,
    ::selection {
      background: var(--#{$color});
      color: white;
    }

    svg {
      * {
        fill: var(--#{$color});
      }
    }

    .form-control {
      border-color: var(--#{$color});
      color: var(--#{$color});
    }

    hr {
      border-color: var(--#{$color});
    }

    a {
      color: var(--#{$color});
    }
  }
}