paradoxxxzero_butterfly/butterfly/sass/_layout.sass
Peter Cai 34b6287e0c
term: complete support for IME & CJK rendering
this fixes #75 and #47, two bugs originated long long ago.

1. Added support for IME events `compositionstart` `compositionupdate` and `compositionend`.
2. Refactored some code to receive input events from a hidden textarea just as how `xterm.js` now does. This removes the need to set `contentEditable` on the body in order to receive IME compistion events, and also guides the IME input box correctly following the cursor.
3. Fixed CJK rendering. Forces "forceWidth" mode with double width on those known CJK ranges in Unicode. Corrected the placeholder logic of the force width mode. Note that some rare halfwidth CJK characters will still not render correctly without `force-unicode-width` enabled. If you see any issue, please enable the `--force-unicode-width` option.
4. Miscallaneous fixes for some problems after introducing the above change

Tested on Firefox Nightly 62 on Linux and Chromium 67 on Linux, with `fcitx` as input method.
2018-06-03 10:27:49 +08:00

113 lines
2.5 KiB
Sass

/* *-* coding: utf-8 *-* */
/* This file is part of butterfly */
/* butterfly Copyright(C) 2015-2017 Florian Mounier */
/* This program is free software: you can redistribute it and/or modify */
/* it under the terms of the GNU General Public License as published by */
/* the Free Software Foundation, either version 3 of the License, or */
/* (at your option) any later version. */
/* This program is distributed in the hope that it will be useful, */
/* but WITHOUT ANY WARRANTY; without even the implied warranty of */
/* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the */
/* GNU General Public License for more details. */
/* You should have received a copy of the GNU General Public License */
/* along with this program. If not, see <http://www.gnu.org/licenses/>. */
html, body
margin: 0
padding: 0
background-color: $bg
color: $fg
body
padding-bottom: .5em
white-space: nowrap
overflow-x: hidden
overflow-y: scroll
a
text-decoration: underline rgba($fg, .2)
transition: text-decoration-color 500ms
&:hover
text-decoration: underline
.line.active
background-color: $active-bg
.line.extended
cursor: zoom-in
background-image: linear-gradient(90deg, rgba(darken($bg, 3%), 0), 95%, darken($bg, 3%))
.extra
display: none
&:not(.expanded):hover
background-color: lighten($bg, 2%)
&.expanded
cursor: zoom-out
background-color: darken($bg, 3%)
.extra
display: block
white-space: pre-wrap
word-break: break-all
&::-webkit-scrollbar
background: $scroll-bg
width: $scroll-width
&::-webkit-scrollbar-thumb
background: $scroll-fg
&::-webkit-scrollbar-thumb:hover
background: $scroll-fg-hover
/* Pop ups */
.hidden
display: none !important
#popup
position: fixed
display: flex
align-items: center
justify-content: center
width: 100%
height: 100%
form, > div
padding: 1.5em
background: $popup-bg
color: $popup-fg
font-size: $popup-fs
h2
margin: 0 .5em .5em .5em
select
min-width: 300px
padding: .5em
width: 100%
label
display: block
padding: .5em
font-size: .75em
#input-view
position: fixed
z-index: 100
padding: 0
margin: 0
text-decoration: underline
#input-helper
position: fixed
z-index: -100
opacity: 0
white-space: nowrap
overflow: hidden
resize: none
.terminal
outline: none