From d4519ebe55fdf78b0548c56d14cbbad5e2c4c0a5 Mon Sep 17 00:00:00 2001 From: Joas Schilling Date: Tue, 12 Jul 2022 11:28:06 +0200 Subject: Move At.scss to At.css Signed-off-by: Joas Schilling --- css/At.css | 174 +++++++++++++++++++++++++++++++++++++++++++ css/At.scss | 167 ----------------------------------------- css/merged-files.scss | 1 - css/merged-public-share.scss | 1 - css/merged-share-auth.scss | 1 - css/merged.scss | 1 - 6 files changed, 174 insertions(+), 171 deletions(-) create mode 100644 css/At.css delete mode 100644 css/At.scss (limited to 'css') diff --git a/css/At.css b/css/At.css new file mode 100644 index 000000000..dcf8fe1da --- /dev/null +++ b/css/At.css @@ -0,0 +1,174 @@ +// 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 +.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; + z-index: 11110 !important; +} + +.talk.candidate-mentions .atwho-ul { + /* width: 100px; */ + list-style:none; + // padding:0; + // margin:auto; + // 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; */ +} + +////// 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); +} + +.talk.candidate-mentions .atwho-ul { + max-height: 135px; + padding: 0; + margin: 0; +} + +.talk.candidate-mentions .atwho-li { + box-sizing: border-box; + height: 27px; + padding: 0 12px; + white-space: nowrap; + display: flex; + align-items: center; +} + +.talk.candidate-mentions .atwho-li span { + overflow: hidden; + text-overflow: ellipsis; +} + +.talk.candidate-mentions .atwho-cur { + // background: #44a8f2; + background: #5BB8FF; + color: white; +} + +////// added 2 +.talk.candidate-mentions .atwho-wrap { + position: relative; +} + +.talk.candidate-mentions.atwho-panel { + position: absolute; +} + +.talk.candidate-mentions .atwho-inner { + 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; +} + +.talk.candidate-mentions .atwho-view::-webkit-scrollbar-thumb { + min-height: 36px; + border: 2px solid transparent; + border-top: 3px solid transparent; + 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; +} + +// 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. +.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; +} diff --git a/css/At.scss b/css/At.scss deleted file mode 100644 index e8328160c..000000000 --- a/css/At.scss +++ /dev/null @@ -1,167 +0,0 @@ -// 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. - -.talk.candidate-mentions { - - // atwho.css https://github.com/ichord/At.js - .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; - z-index: 11110 !important; - } - .atwho-ul { - /* width: 100px; */ - list-style:none; - // padding:0; - // margin:auto; - // max-height: 200px; - // overflow-y: auto; - } - .atwho-li { - display: block; - // padding: 5px 10px; - // border-bottom: 1px solid #DDD; - // cursor: pointer; - /* border-top: 1px solid #C8C8C8; */ - } - - ////// added 1 - .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); - } - .atwho-ul { - max-height: 135px; - padding: 0; - margin: 0; - } - .atwho-li { - box-sizing: border-box; - height: 27px; - padding: 0 12px; - white-space: nowrap; - display: flex; - align-items: center; - span { - overflow: hidden; - text-overflow: ellipsis; - } - } - .atwho-cur { - // background: #44a8f2; - background: #5BB8FF; - color: white; - } - - ////// added 2 - .atwho-wrap { - position: relative; - } - &.atwho-panel { - position: absolute; - } - .atwho-inner { - position: relative; - } - .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; - &::-webkit-scrollbar { - width: 11px; - height: 11px; - } - &::-webkit-scrollbar-track { - // background-color: rgba(127, 127, 127, .1); - background-color: #F5F5F5; - } - &::-webkit-scrollbar-thumb { - min-height: 36px; - border: 2px solid transparent; - border-top: 3px solid transparent; - border-bottom: 3px solid transparent; - background-clip: padding-box; - border-radius: 7px; - // background-color: rgba(0, 0, 0, 0.2); - background-color: #C4C4C4; - } - } -} - -.talk.candidate-mentions { - // Override "max-width: 180px", as that makes the autocompletion panel too - // narrow. - .atwho-view { - max-width: 300px; - min-width: 250px; - // mention height: 48 * visible mentions: 4.5 - max-height: 216px; - } - // Override max height to show 4.5 mentions to make clear you can scroll for more options - .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. - .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. - .atwho-li .icon-group-forced-white { - width: 44px; - height: 44px; - } - - // Override all colors with our theming and dark mode - .atwho-view { - background: var(--color-main-background); - color: var(--color-main-text); - box-shadow: 0 0 5px var(--color-box-shadow); - - &::-webkit-scrollbar-track { - background-color: var(--color-background-dark); - } - &::-webkit-scrollbar-thumb { - background-color: var(--color-background-darker); - } - - .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; - } -} diff --git a/css/merged-files.scss b/css/merged-files.scss index 20e51a393..4b60b1274 100644 --- a/css/merged-files.scss +++ b/css/merged-files.scss @@ -1,2 +1 @@ -@import './At'; @import './icons'; diff --git a/css/merged-public-share.scss b/css/merged-public-share.scss index c4ff1c960..b438bd766 100644 --- a/css/merged-public-share.scss +++ b/css/merged-public-share.scss @@ -1,3 +1,2 @@ -@import './At'; @import './icons'; @import './publicshare'; diff --git a/css/merged-share-auth.scss b/css/merged-share-auth.scss index 1551837c5..cc0e578dd 100644 --- a/css/merged-share-auth.scss +++ b/css/merged-share-auth.scss @@ -1,3 +1,2 @@ -@import './At'; @import './icons'; @import './publicshareauth' diff --git a/css/merged.scss b/css/merged.scss index 2a238d6df..e382a76cb 100644 --- a/css/merged.scss +++ b/css/merged.scss @@ -1,3 +1,2 @@ -@import './At'; @import './icons'; @import './app'; -- cgit v1.2.3