mirror of
https://0xacab.org/sutty/sutty
synced 2024-11-22 17:16:22 +00:00
676 lines
13 KiB
SCSS
676 lines
13 KiB
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;
|
|
}
|
|
}
|
|
}
|