refactor(Ding.css): pull code from Qiuwen Upstream

src/Gadgets/Compatibility/Ding/Ding.css

@@ -3,6 +3,7 @@
  * _addText: '{{Gadget Header|license=CC-BY-SA-4.0}}'
  *
  * @base <https://zh.wikipedia.org/wiki/Special:Permalink/59753812>
+ * @base <https://zh.wikipedia.org/wiki/MediaWiki:Gadget-ding.css>
  * @source <https://git.qiuwen.wiki/InterfaceAdmin/Gadgets/src/branch/master/src/Gadgets/Ding>
  */
 /**
@@ -12,8 +13,8 @@
  * |      All changes should be made in the repository,     |
  * |              otherwise they will be lost.              |
  * +--------------------------------------------------------+
- * |        Changes to this page affect many users.         |
- * |  Please discuss changes at Talk page before editing.   |
+ * |      Changes to this page may affect many users.       |
+ * |  Please discuss changes at talk page before editing.   |
  * +--------------------------------------------------------+
  */
 /* <nowiki> */
@@ -29,8 +30,7 @@
 }
 
 #ding button:active {
-	background: hsla(0deg 0% 100%/60%);
-	background: rgb(255 255 255 / 20%);
+	background: rgba(255, 255, 255, 0.2);
 }
 
 .ding_inner {
@@ -39,19 +39,28 @@
 	right: 0;
 	bottom: 0;
 	left: 0;
+	width: 75%;
 	height: auto;
-	padding: 0.6em 2em;
-	margin: 0 0 auto;
-	box-shadow: 0 2px 5px rgb(0 0 0 / 20%);
-	font-size: 86%;
-	font-weight: 700;
-	line-height: 1.4em;
+	min-height: 3.75%;
+	padding: 0.75em 1.5em;
+	border-radius: 1em 1em 0 0;
+	margin: 0 auto;
+	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
+	font-size: 92.5%;
+	font-weight: bold;
+	line-height: 1.25em;
 	opacity: 1;
 	text-align: center;
-	transform: translateY(-130%);
+	-webkit-transform: translateY(125%);
+	-moz-transform: translateY(125%);
+	-ms-transform: translateY(125%);
+	-o-transform: translateY(125%);
+	transform: translateY(125%);
 	transition: all 0.2s;
+	word-break: break-word;
 }
 
+/* Font and background colors */
 .ding_default {
 	background-color: #eaecf0;
 	color: #000;
@@ -72,7 +81,21 @@
 }
 
 .ding_warning {
-	background-color: #d33;
+	background-color: #b32424;
+}
+
+.ding_inner a,
+.ding_inner a:visited,
+.ding_inner a:hover {
+	color: #f4ff7f !important;
+}
+
+/* Avoid overlapping the blue bar with the limited width control */
+@media all and (min-width: 1000px) {
+	.ding_inner {
+		width: 800px !important;
+		margin: auto !important;
+	}
 }
 
 /* </nowiki> */