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
);

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

// Redefinir variables de Bootstrap
$primary: $magenta;
$secondary: $black;
$jumbotron-bg: transparent;
$enable-rounded: false;
$form-feedback-valid-color: $black;
$form-feedback-invalid-color: $magenta;
$form-feedback-icon-valid-color: $black;
$component-active-bg: $magenta;
$zindex-modal-backdrop: 0;
$modal-content-bg: var(--background);
$modal-content-border-color: var(--modal-content-border-color);
$card-bg: var(--background);
$card-border-color: var(--card-border-color);
$input-bg: var(--background);
$input-color: var(--foreground);
$btn-bg-color: var(--btn-bg-color);
$btn-color: var(--btn-color);
$input-group-addon-bg: var(--btn-bg-color);
$custom-file-color: var(--btn-color);

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

$sizes: (
  "70ch": 70ch,
);

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

@each $color, $rgb in $theme-colors {
  .#{$color} {
    color: var(--#{$color});

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

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

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

:root {
  --foreground: #{$black};
  --background: #{$white};
  --color: #{$magenta};
  --card-border-color: #{rgba($black, .125)};
  --modal-content-border-color: rgba(#{$black}, .2);
}

@media (prefers-color-scheme: dark) {
  :root {
    --foreground: #{$white};
    --background: #{$black};
    --color: #{$cyan};
    --card-border-color: #{rgba($white, .125)};
    --modal-content-border-color: #{rgba($white, .2)};
  }

  .btn-secondary {
    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;
    }
  }

  @include form-validation-state("valid", $cyan, url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$white}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/></svg>"));

  .custom-checkbox {
    .custom-control-input:checked ~ .custom-control-label {
      &::after {
        background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$black}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
      }
    }
  }
}

@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;
}

fieldset {
  legend {
    font-size: 1rem;
  }
}

.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-secondary;
        @extend .m-0;
      }
    }
  }
}

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

.btn {
  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-secondary {
    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;
  }
}

.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;
  }
}

.word-break-all { word-break: break-all !important; }
.hyphens { hyphens: auto; }

/*
 * 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; }

    .word-break-#{$grid-breakpoint}-all { word-break: break-all !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; }
        .min-#{$abbrev}-#{$grid-breakpoint}-#{$size} { min-#{$prop}: $length !important; }
        .max-#{$abbrev}-#{$grid-breakpoint}-#{$size} { max-#{$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});
    }
  }
}

@import "new_editor";

.new-editor {
  .editor {
    table {
      @extend .table;
      @extend .table-responsive;
    }
  }
}

.content {
  p { min-height: $font-size-base * $line-height-base; }
  h1 { min-height: $h1-font-size * $headings-line-height; }
  h2 { min-height: $h2-font-size * $headings-line-height; }
  h3 { min-height: $h3-font-size * $headings-line-height; }
  h4 { min-height: $h4-font-size * $headings-line-height; }
  h5 { min-height: $h5-font-size * $headings-line-height; }
  h6 { min-height: $h6-font-size * $headings-line-height; }

  iframe { border: 0; }

  audio { width: 100%; }

  img,
  video,
  iframe {
    @extend .img-fluid;
    height: auto;
  }

  & > * {
    margin-bottom: 1rem;

    &:last-child {
      margin-bottom: 0;
    }
  }
}
// details styles

.details {
	& > summary {
		list-style: none;
		cursor: pointer;

    .hide-when-open {
      display: inline;
    }

    .show-when-open {
      display: none;
    }
  }

  &[open] {
		& > summary {
      .hide-when-open {
        display: none;
      }

      .show-when-open {
        display: inline;
      }
		}
	}
}

// https://getbootstrap.com/docs/5.1/components/placeholders/
.placeholder {
  display: inline-block;
  min-height: $spacer;
  cursor: wait;
  vertical-align: middle;
  opacity: .5;
  background-color: $grey;
  animation: placeholder-glow 2s ease-in-out infinite;
}

.placeholder-glow {
  .placeholder {
    -webkit-animation: placeholder-glow 2s ease-in-out infinite;
    animation: placeholder-glow 2s ease-in-out infinite;
  }

  @-webkit-keyframes placeholder-glow {
    50% {
      opacity: .2;
    }
  }

  @keyframes placeholder-glow {
    50% {
      opacity: .2;
    }
  }
}