Move At.scss to At.css

Signed-off-by: Joas Schilling <coding@schilljs.com>

6 files changed, 174 insertions, 171 deletions

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';