Browse Source

feat: customize trix editor

master
Inhji Y. 10 months ago
parent
commit
dc56ad9b7f
  1. 16
      apps/tomie_web/assets/css/app.css
  2. 15
      apps/tomie_web/assets/css/vendor/trix-custom.css
  3. 4
      apps/tomie_web/assets/theme.config.js

16
apps/tomie_web/assets/css/app.css

@ -7,6 +7,7 @@
/* Plugins */
@import "vendor/nprogress";
@import "vendor/trix";
@import "vendor/trix-custom";
/*! purgecss start ignore */
@import "vendor/prismjs-light";
@ -87,21 +88,12 @@ a {
@apply transition duration-300;
}
.card footer.focusable {
@apply hidden border-none;
}
/* This only takes effect if tabindex is used on the .card */
.card:focus, .card:focus-within {
@apply outline-none;
}
.card:focus footer.focusable, .card:focus-within footer.focusable {
@apply block border-divider border-solid border-t;
.card footer {
@apply border-t border-divider;
}
.card footer .button {
@apply rounded-none bg-surface-alt text-on-surface;
@apply rounded-none bg-surface-alt text-on-surface border-none;
}
.card.bg-danger {

15
apps/tomie_web/assets/css/vendor/trix-custom.css

@ -0,0 +1,15 @@
trix-editor {
@apply bg-surface-alt border-none p-3;
}
trix-toolbar .trix-button-group {
@apply border-none;
}
trix-toolbar .trix-button{
@apply bg-white border-none mr-1 rounded;
}
trix-toolbar .trix-button.trix-active{
@apply bg-primary;
}

4
apps/tomie_web/assets/theme.config.js

@ -24,7 +24,9 @@ const mainTheme = new Theme()
'danger': '#FED7D7',
'on-danger': '#C53030',
'success': '#C6F6D5',
'on-success': '#48BB78'
'on-success': '#48BB78',
'white': '#fefefe'
})
.opacityVariant('muted', .8)
.opacityVariant('barely', .4)

Loading…
Cancel
Save