diff options
Diffstat (limited to 'css')
-rw-r--r-- | css/At.css | 183 |
1 files changed, 78 insertions, 105 deletions
diff --git a/css/At.css b/css/At.css index dcf8fe1da..33577071e 100644 --- a/css/At.css +++ b/css/At.css @@ -1,62 +1,88 @@ -// Copied from vue-at (https://github.com/fritx/vue-at/blob/d16d5eefdae8987c0bffe2d9c3867b7da12c808f/src/At.scss) -// and wrapped to affect only the panel for candidate mentions. +/* Copied from vue-at (https://github.com/fritx/vue-at/blob/d16d5eefdae8987c0bffe2d9c3867b7da12c808f/src/At.scss) + * and wrapped to affect only the panel for candidate mentions. */ -// atwho.css https://github.com/ichord/At.js +/* atwho.css https://github.com/ichord/At.js */ .talk.candidate-mentions .atwho-view { - // position:absolute; - // top: 0; - // left: 0; - // display: none; - // margin-top: 18px; - // background: white; - color: black; - // border: 1px solid #DDD; - border-radius: 3px; - box-shadow: 0 0 5px rgba(0,0,0,0.1); - min-width: 120px; + /* position:absolute; */ + /* top: 0; */ + /* left: 0; */ + /* display: none; */ + /* margin-top: 18px; */ + /* background: white; */ + /* color: black; */ + /* border: 1px solid #DDD; */ + /* border-radius: 3px; */ + /* box-shadow: 0 0 5px rgba(0,0,0,0.1); */ + /* min-width: 120px; */ z-index: 11110 !important; -} -.talk.candidate-mentions .atwho-ul { - /* width: 100px; */ - list-style:none; - // padding:0; - // margin:auto; - // max-height: 200px; - // overflow-y: auto; -} + /* added 1 */ + /* font-size: 14px; */ + /* min-width: 140px; */ + /* max-width: 180px; */ + border-radius: 6px; + /* overflow: hidden; */ + /* box-shadow: 0 0 10px 0 rgba(101, 111, 122, .5); */ + position: absolute; + bottom: 0; + left: -0.8em; /* 抵消左边距 */ + cursor: default; + /* background-color: rgba(255,255,255,.94); */ + /* min-width: 140px; */ + /* max-width: 180px; */ + /* max-height: 200px; */ + overflow-y: auto; -.talk.candidate-mentions .atwho-li { - display: block; - // padding: 5px 10px; - // border-bottom: 1px solid #DDD; - // cursor: pointer; - /* border-top: 1px solid #C8C8C8; */ -} + /* Override "max-width: 180px", as that makes the autocompletion panel too + * narrow. */ + max-width: 300px; + min-width: 250px; + /* mention height: 48 * visible mentions: 4.5 */ + max-height: 216px; -////// added 1 -.talk.candidate-mentions .atwho-view { - // font-size: 14px; - // min-width: 140px; - // max-width: 180px; - border-radius: 6px; - // overflow: hidden; - box-shadow: 0 0 10px 0 rgba(101, 111, 122, .5); + /* Override all colors with our theming and dark mode */ + background: var(--color-main-background); + color: var(--color-main-text); + box-shadow: 0 0 5px var(--color-box-shadow); + + /* Override conflicting rules from the comments tab. */ + top: unset; + display: unset; } .talk.candidate-mentions .atwho-ul { - max-height: 135px; + /* width: 100px; */ + list-style:none; + /* padding:0; */ + /* margin:auto; */ + /* max-height: 200px; */ + /* overflow-y: auto; */ + /* max-height: 135px; */ padding: 0; margin: 0; + + /* Override max height to show 4.5 mentions to make clear you can scroll for more options */ + /* (padding top: 4 + avatar height: 48 + padding bottom: 4) * visible mentions: 4.5 */ + max-height: unset; } .talk.candidate-mentions .atwho-li { + /* display: block; */ + /* padding: 5px 10px; */ + /* border-bottom: 1px solid #DDD; */ + /* cursor: pointer; */ + /* border-top: 1px solid #C8C8C8; */ box-sizing: border-box; - height: 27px; - padding: 0 12px; + /* height: 27px; */ + /* padding: 0 12px; */ white-space: nowrap; display: flex; align-items: center; + + /* Override autocompletion panel items height, as they are too short + * for the avatars and also need some padding. */ + height: 64px; + padding: 4px 12px; } .talk.candidate-mentions .atwho-li span { @@ -65,12 +91,12 @@ } .talk.candidate-mentions .atwho-cur { - // background: #44a8f2; + /* background: #44a8f2; */ background: #5BB8FF; color: white; } -////// added 2 +/* added 2 */ .talk.candidate-mentions .atwho-wrap { position: relative; } @@ -83,26 +109,15 @@ position: relative; } -.talk.candidate-mentions .atwho-view { - position: absolute; - bottom: 0; - left: -0.8em; // 抵消左边距 - cursor: default; - background-color: rgba(255,255,255,.94); - min-width: 140px; - max-width: 180px; - max-height: 200px; - overflow-y: auto; -} - .talk.candidate-mentions .atwho-view::-webkit-scrollbar { width: 11px; height: 11px; } .talk.candidate-mentions .atwho-view::-webkit-scrollbar-track { - // background-color: rgba(127, 127, 127, .1); - background-color: #F5F5F5; + /* background-color: rgba(127, 127, 127, .1); */ + /* background-color: #F5F5F5; */ + background-color: var(--color-background-dark); } .talk.candidate-mentions .atwho-view::-webkit-scrollbar-thumb { @@ -112,63 +127,21 @@ border-bottom: 3px solid transparent; background-clip: padding-box; border-radius: 7px; - // background-color: rgba(0, 0, 0, 0.2); - background-color: #C4C4C4; -} - -// Override "max-width: 180px", as that makes the autocompletion panel too -// narrow. -.talk.candidate-mentions .atwho-view { - max-width: 300px; - min-width: 250px; - // mention height: 48 * visible mentions: 4.5 - max-height: 216px; + /* background-color: rgba(0, 0, 0, 0.2); */ + /* background-color: #C4C4C4; */ + background-color: var(--color-background-darker); } -// Override max height to show 4.5 mentions to make clear you can scroll for more options -.talk.candidate-mentions .atwho-ul { - // (padding top: 4 + avatar height: 48 + padding bottom: 4) * visible mentions: 4.5 - max-height: unset; -} -// Override autocompletion panel items height, as they are too short -// for the avatars and also need some padding. -.talk.candidate-mentions .atwho-li { - height: 64px; - padding-top: 4px; - padding-bottom: 4px; -} - -// Although the height of its wrapper is 32px the height of the icon -// is the default 16px. This is a temporary fix until it is fixed -// in the avatar component. +/* Although the height of its wrapper is 32px the height of the icon + * is the default 16px. This is a temporary fix until it is fixed + * in the avatar component. */ .talk.candidate-mentions .atwho-li .icon-group-forced-white { width: 44px; height: 44px; } -// Override all colors with our theming and dark mode -.talk.candidate-mentions .atwho-view { - background: var(--color-main-background); - color: var(--color-main-text); - box-shadow: 0 0 5px var(--color-box-shadow); - -} -.talk.candidate-mentions .atwho-view::-webkit-scrollbar-track { - background-color: var(--color-background-dark); -} - -.talk.candidate-mentions .atwho-view::-webkit-scrollbar-thumb { - background-color: var(--color-background-darker); -} - .talk.candidate-mentions .atwho-view .atwho-cur { background: var(--color-primary-light); color: var(--color-main-text); } - -// Override conflicting rules from the comments tab. -.talk.candidate-mentions .atwho-view { - top: unset; - display: unset; -} |