152 lines
No EOL
3.8 KiB
SCSS
152 lines
No EOL
3.8 KiB
SCSS
$font-family-sans-serif: // Cross-platform generic font family (default user interface font)
|
||
system-ui,
|
||
// Safari for macOS and iOS (San Francisco)
|
||
-apple-system,
|
||
// Windows
|
||
"Segoe UI",
|
||
// Android
|
||
Roboto,
|
||
// Basic web fallback
|
||
"Helvetica Neue", Arial,
|
||
// Linux
|
||
"Noto Sans",
|
||
"Liberation Sans",
|
||
// Sans serif fallback
|
||
sans-serif,
|
||
// Emoji fonts
|
||
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
|
||
|
||
$enable-rounded: false;
|
||
|
||
@import 'bootstrap/scss/bootstrap';
|
||
|
||
@font-face {
|
||
font-display: block;
|
||
font-family: "bootstrap-icons";
|
||
src: url("./bootstrap-icons.woff2") format("woff2"),
|
||
url("./bootstrap-icons.woff") format("woff");
|
||
}
|
||
|
||
@import 'bootstrap-icons/font/bootstrap-icons';
|
||
|
||
|
||
.rails-bootstrap-forms-date-select select,
|
||
.rails-bootstrap-forms-time-select select,
|
||
.rails-bootstrap-forms-datetime-select select {
|
||
display: inline-block;
|
||
width: auto;
|
||
}
|
||
|
||
.rails-bootstrap-forms-error-summary {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
|
||
@import "trix/dist/trix";
|
||
|
||
/*
|
||
* Provides a drop-in pointer for the default Trix stylesheet that will format the toolbar and
|
||
* the trix-editor content (whether displayed or under editing). Feel free to incorporate this
|
||
* inclusion directly in any other asset bundle and remove this file.
|
||
*
|
||
*= require trix
|
||
*/
|
||
|
||
/*
|
||
* We need to override trix.css’s image gallery styles to accommodate the
|
||
* <action-text-attachment> element we wrap around attachments. Otherwise,
|
||
* images in galleries will be squished by the max-width: 33%; rule.
|
||
*/
|
||
.trix-content .attachment-gallery>action-text-attachment,
|
||
.trix-content .attachment-gallery>.attachment {
|
||
flex: 1 0 33%;
|
||
padding: 0 0.5em;
|
||
max-width: 33%;
|
||
}
|
||
|
||
.trix-content .attachment-gallery.attachment-gallery--2>action-text-attachment,
|
||
.trix-content .attachment-gallery.attachment-gallery--2>.attachment,
|
||
.trix-content .attachment-gallery.attachment-gallery--4>action-text-attachment,
|
||
.trix-content .attachment-gallery.attachment-gallery--4>.attachment {
|
||
flex-basis: 50%;
|
||
max-width: 50%;
|
||
}
|
||
|
||
.trix-content action-text-attachment .attachment {
|
||
padding: 0 !important;
|
||
max-width: 100% !important;
|
||
}
|
||
|
||
|
||
/* Fix trix dark mode */
|
||
.trix-button-row {
|
||
.trix-button-group {
|
||
border: var(--bs-border-width) solid var(--bs-border-color);
|
||
|
||
.trix-button {
|
||
border: 0;
|
||
padding: var(--bs-padding)
|
||
}
|
||
}
|
||
}
|
||
|
||
[data-bs-theme=dark] {
|
||
.trix-button-row {
|
||
.trix-button-group {
|
||
.trix-button {
|
||
background-color: transparent !important;
|
||
filter: invert(100%) !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
/* end fix trix dark mode */
|
||
|
||
.trix-content {
|
||
pre {
|
||
background-color: var(--bs-secondary-bg) !important;
|
||
color: var(--bs-secondary-color) !important;
|
||
border: var(--bs-border-width) solid var(--bs-border-color) !important;
|
||
border-radius: 0 !important;
|
||
}
|
||
|
||
p {
|
||
margin-bottom: 0.6rem;
|
||
}
|
||
|
||
p:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
|
||
trix-toolbar .trix-dialog {
|
||
background: var(--bs-secondary-bg) !important;
|
||
background-color: var(--bs-secondary-bg) !important;
|
||
color: var(--bs-secondary-color) !important;
|
||
border: var(--bs-border-width) solid var(--bs-border-color) !important;
|
||
border-radius: 0 !important;
|
||
box-shadow: none;
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
trix-toolbar .trix-button {
|
||
background: var(--bs-secondary-bg) !important;
|
||
background-color: var(--bs-secondary-bg) !important;
|
||
color: var(--bs-secondary-color) !important;
|
||
border: var(--bs-border-width) solid var(--bs-border-color) !important;
|
||
border-radius: 0 !important;
|
||
|
||
}
|
||
|
||
trix-toolbar .trix-input--dialog {
|
||
background: var(--bs-secondary-bg) !important;
|
||
background-color: var(--bs-secondary-bg) !important;
|
||
color: var(--bs-secondary-color) !important;
|
||
border: var(--bs-border-width) solid var(--bs-border-color) !important;
|
||
border-radius: 0 !important;
|
||
}
|
||
|
||
trix-toolbar .trix-dialog--link {
|
||
max-width: 900px;
|
||
} |