$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: $black; $form-feedback-invalid-color: $magenta; $form-feedback-icon-valid-color: $black; $component-active-bg: $magenta; $spacers: ( 2-plus: 0.75rem ); $sizes: ( "70ch": 70ch, ); .btn { background-color: var(--foreground); color: var(--background); } @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; } 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-info; @extend .m-0; } } } } svg { .is-path-magenta { fill: var(--foreground); } } .btn { 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 { padding:7px 15px 2px; } .custom-control-design { border: 1px solid magenta; padding:2px 15px 0px; margin-bottom: -1px; } .custom-control-label { font-weight: bold; } .custom-control-design-label::after { display: none; } .designlist { max-height: 500px; overflow-y: auto; } .designpreview { border-left: 1px solid cyan; border-right: 1px dashed cyan; } .designs { .design { margin-top: 1rem; } } .radio-toolbar { opacity: 0; position: absolute; width: 0; } // details styles .details { position: relative; } .styled summary::-webkit-details-marker { display: none; } .styled summary { list-style: none; cursor: default; position: relative; &::after { content: '▶'; font-size: 2em; position: absolute; left: 97%; bottom: 46%; transform: rotate(55deg); color: magenta } &:focus { background-color: #13FEFE; color: black } } details[open].styled > summary::after { transform: rotate(90deg) translatey(-0.1em); color: black } .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}); } } } // force ci