@import "../actiontext";
/* don't show the editor tool bar unless the user is editing the field. */
/* see https://github.com/basecamp/trix/issues/343 and `app/assets/javascripts/account/fields.js` */
trix-toolbar {
opacity: 0.15;
&.visible {
opacity: 1;
}
}
/* Override Tailwind's preflight styles */
/* https://github.com/tailwindlabs/tailwindcss/issues/989#issuecomment-506555308 */
.trix-button {
@apply dark:bg-slate-800 !important;
}
/* Prevent red ring on Trix Editor */
:-moz-focusring {
outline-style: none;
}
a[href^="bullettrain://"], span.tribute-reference {
border-radius: 4px;
display: inline-block;
box-sizing: border-box;
padding: 0 4px;
margin: -1px 0;
color: #3E4B5B;
line-height: 17px;
text-decoration: none;
background-color: #ebe2ff;
border: 1px solid #7147d2;
}
a[href^="bullettrain://users"], a[href^="bullettrain://teams"], span.tribute-users-reference, span.tribute-teams-reference {
background-color: #e2ebff;
border: 1px solid #4771d2;
}
.tribute-container {
ul {
border-radius: 5px;
overflow: hidden;
box-sizing: border-box;
border: 2px solid var(--primary-500);
background: white;
list-style: none;
padding: 0;
&:empty {
display: none;
}
li {
@apply flex items-center;
span {
font-weight: normal;
}
&.highlight {
background-color: #5897fb;
color: white;
}
padding: 5px 10px;
img {
height: 30px;
width: 30px;
border-radius: 15px;
margin-right: 5px;
}
}
}
}
trix-editor [data-trix-cursor-target] {
display: none !important;
height: 0 !important;
width: 0 !important;
/* background-color: red; */
}
.trix-editor {
* {
box-sizing: border-box;
}
}
trix-editor {
padding-right: 0.75rem;
padding-left: 0.75rem;
@apply shadow-sm border-slate-300 font-light rounded-md;
&:focus, &:active {
border-color: var(--primary-500);
box-shadow: inset 0 0 0 1px var(--primary-500);
}
&[disabled]{
@apply bg-slate-200 dark:bg-slate-700 hover:bg-slate-200 hover:dark:bg-slate-700
}
}
.trix-hide-toolbar {
trix-toolbar {
display: none !important;
}
}
.trix-content {
@apply text-base md:text-sm;
}
/* The Trix Editor uses SVGs for its buttons, so we manually override them here for dark mode */
/* Icons taken from https://react-icons.github.io/react-icons/icons?name=md */
@media (prefers-color-scheme: dark) {
.trix-button--icon-bold::before {
background-image: url('data:image/svg+xml;utf-8,') !important;
}
.trix-button--icon-italic::before {
background-image: url('data:image/svg+xml;utf-8,') !important;
}
.trix-button--icon-strike::before {
background-image: url('data:image/svg+xml;utf8,') !important;
}
.trix-button--icon-link::before {
background-image: url('data:image/svg+xml;utf8,') !important;
}
.trix-button--icon-heading-1::before {
background-image: url('data:image/svg+xml;utf8,') !important;
}
.trix-button--icon-quote::before {
background-image: url('data:image/svg+xml;utf8,') !important;
}
.trix-button--icon-code::before {
background-image: url('data:image/svg+xml;utf8,') !important;
}
.trix-button--icon-bullet-list::before {
background-image: url('data:image/svg+xml;utf8,') !important;
}
.trix-button--icon-number-list::before {
background-image: url('data:image/svg+xml;utf8,') !important;
}
.trix-button--icon-decrease-nesting-level::before {
background-image: url('data:image/svg+xml;utf8,') !important;
}
.trix-button--icon-increase-nesting-level::before {
background-image: url('data:image/svg+xml;utf8,') !important;
}
.trix-button--icon-attach::before {
background-image: url('data:image/svg+xml;utf8,') !important;
}
.trix-button--icon-undo::before {
background-image: url('data:image/svg+xml;utf8,') !important;
}
.trix-button--icon-redo::before {
background-image: url('data:image/svg+xml;utf8,') !important;
}
}