diff options
| -rw-r--r-- | app/assets/stylesheets/comment.css | 56 |
1 files changed, 56 insertions, 0 deletions
diff --git a/app/assets/stylesheets/comment.css b/app/assets/stylesheets/comment.css index 4472c62..af2c897 100644 --- a/app/assets/stylesheets/comment.css +++ b/app/assets/stylesheets/comment.css @@ -25,3 +25,59 @@ .comment .comment-header .comment-header-actions { flex-grow: 0; } + +/* + * Tweaks on Trix's toolbar in the comment section: + * - Make it work on smaller screens. + * - Hide the history tools on the desktop. + */ + +trix-toolbar .trix-button-row { + display: grid; + grid-template-columns: repeat(1, 1fr); +} + +trix-toolbar .trix-button-group-spacer { + display: none; +} + +trix-toolbar .trix-button-group:not(:first-child) { + margin-left: 0px; +} + +trix-toolbar .trix-button-group { + border: none; +} + +/* + * Display the history-tools for small screens, where the undo/redo experience + * might actually be bad. + */ +trix-toolbar .trix-button-group--history-tools { + display: flex; +} + +@media (min-width: 600px) { + trix-toolbar .trix-button-row { + grid-template-columns: repeat(4, 1fr); + } + + trix-toolbar .trix-button-group-spacer { + display: none; + } + + trix-toolbar .trix-button-group:not(:first-child) { + margin-left: 0px; + } +} + +@media (min-width: 850px) { + /* I actually don't like the history-tools parts on the desktop. */ + trix-toolbar .trix-button-group--history-tools { + display: none; + } + + trix-toolbar .trix-button-group:not(:first-child) { + margin-left: 10px; + } +} |