panel/app/assets/stylesheets/application.scss

//= require_tree .

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

// Redefinir variables de Bootstrap
$primary: $magenta;

@import 'bootstrap';

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

@media (prefers-color-scheme: dark) {
  :root {
    --foreground: #{$white};
    --background: #{$black};
    --color: #{$cyan};
  }
  trix-toolbar {
    .trix-button--icon {
      background-color: var(--color);
    }
  }
}

trix-toolbar {
  background-color: var(--background);
  position: sticky;
  top: 0;
}

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

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

.form-control {
  &:focus {
    border-color: transparentize($verde, 0.25);
    box-shadow: 0 0 0 0.2rem transparentize($verde, 0.75);
  }
}

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

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

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

.rtl {
  direction: rtl;
  text-align: right;
}

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

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

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

.sutty-editor-full {
  $border-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  border: 1px solid $border-color;
  background: var(--background);

  blockquote {
    padding: 0.75rem 1rem;
    border-left: 4px solid var(--color);
    p {
      margin: 0;
    }
  }

  .sutty-editor-toolbar {
    position: sticky;
    top: 0;
    padding: 0.5rem;
    border-bottom: 1px solid $border-color;
    border-radius: 4px 4px 0 0;
    background: var(--background);
  }

  .sutty-editor-prosemirror {
    padding: 5px 0;
    max-height: 450px;
    overflow-y: auto;
    .ProseMirror {
      padding: 4px 10px;
      line-height: 1.2;
      outline: none;
      word-wrap: break-word;
      white-space: pre-wrap;
    }
  }

  .sutty-editor-loading-image {
    opacity: 0.5;
  }

  mark {
    padding: 0;
    background-color: $cyan;
  }
}

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

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