mirror of
https://0xacab.org/sutty/sutty
synced 2024-07-05 23:55:45 +00:00
321 lines
4.9 KiB
SCSS
321 lines
4.9 KiB
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;
|
|
}
|
|
}
|