diff --git a/src/MboxCSS/LICENSE b/src/MboxCSS/LICENSE
new file mode 100644
index 00000000..792e01dd
--- /dev/null
+++ b/src/MboxCSS/LICENSE
@@ -0,0 +1,4 @@
+/**
+ * SPDX-License-Identifier: CC-BY-SA-4.0
+ * _addText: '{{Gadget Header|license=CC-BY-SA-4.0}}'
+ */
\ No newline at end of file
diff --git a/src/MboxCSS/MboxCSS.less b/src/MboxCSS/MboxCSS.less
new file mode 100644
index 00000000..e35dd000
--- /dev/null
+++ b/src/MboxCSS/MboxCSS.less
@@ -0,0 +1,338 @@
+.mbox {
+ display: flex;
+ max-width: 95%;
+ flex-direction: column;
+ place-content: center center;
+ align-items: center;
+ border-width: 1.25px;
+ border-left-width: 0.375em;
+ border-style: solid;
+ border-radius: 0.25em;
+ border-color: #36c;
+ padding: 0.5em 0.5em 0.5em 0;
+ margin: 0.25em auto;
+ background: #def;
+ border-collapse: inherit;
+}
+
+.mbox-body {
+ display: flex;
+ width: 100%;
+ flex-flow: row nowrap;
+ place-content: center space-between;
+ align-items: center;
+}
+
+.mbox-above,
+.mbox-below {
+ margin: auto;
+}
+
+.mbox-above {
+ padding: 0.5em 0.5em 0;
+}
+
+.mbox-below {
+ padding: 0 0.5em 0.5em;
+}
+
+.mbox-text {
+ width: 95%;
+ flex: 1 1 95%;
+ padding: 0.5em;
+ border: 0;
+}
+
+.mbox-image,
+.mbox-imageright {
+ border: 0;
+ flex: 1 0;
+ margin: auto;
+ padding: 1px 0.75em;
+ text-align: center;
+}
+
+.mbox-image img,
+.mbox-imageright img {
+ max-width: 45px;
+ height: auto;
+ text-align: center;
+}
+
+.mbox-empty-cell {
+ width: 1px;
+ padding: 0;
+ border: 0;
+}
+
+.mbox-notice {
+ border-color: #36c;
+ background: #def;
+}
+
+.mbox-speedy,
+.mbox.alert,
+.mbox.red {
+ border-color: #b22;
+ background: #fee;
+}
+
+.mbox-delete,
+.mbox.tawny {
+ border-color: #a97;
+ background: #f0f0d8;
+}
+
+.mbox-content,
+.mbox.orange {
+ border-color: #f28500;
+ background: #fed;
+}
+
+.mbox-style,
+.mbox-rule,
+.mbox.rule,
+.mbox.yellow {
+ border-color: #fc3;
+ background: #ffc;
+}
+
+.mbox-move,
+.mbox.violet,
+.mbox.purple {
+ border-color: #93c;
+ background: #fef;
+}
+
+.mbox-protection,
+.mbox-draft,
+.mbox.gray,
+.mbox.grey {
+ border-color: #606060;
+ background: #eee;
+}
+
+.mbox-featured,
+.mbox.brown {
+ border-color: #cba135;
+ background: #fec;
+}
+
+.mbox-policy,
+.mbox.green {
+ border-color: #181;
+ background: #cfc;
+}
+
+.mbox-guideline,
+.mbox.blue {
+ border-color: #36c;
+ background: #def;
+}
+
+.mbox-license {
+ border-width: 2px;
+ border-color: #999;
+}
+
+.mbox-license,
+.mbox.license-pd {
+ background: #f7f8ff;
+}
+
+.mbox.license-cc {
+ background: #f9f9f9;
+}
+
+.mbox.license-other {
+ background: #ffe;
+}
+
+.mbox.license-free {
+ background: #f3ffee;
+}
+
+.mbox.license-nonfree {
+ background: #fff9f9;
+}
+
+.mbox.license-self {
+ background: #f8f9fa;
+}
+
+.mbox-disambig,
+.mbox-setindex {
+ border-color: #999;
+ background: #fefefe;
+}
+
+.mbox .mbox-text .mbox {
+ border-radius: 0;
+}
+
+.mbox.license-self .mbox-text .mbox {
+ border-width: 1px;
+}
+
+.mbox-inside .mbox {
+ margin: 0.25em;
+}
+
+.compact-mbox .mbox {
+ display: block;
+ width: auto;
+ padding: 0 !important;
+ border-radius: 0.25em;
+ margin: 0 0 0 1.6em !important;
+ background: transparent;
+ border-collapse: collapse;
+}
+
+.compact-mbox .mw-collapsible-content .mbox {
+ display: list-item;
+ border: 0;
+ margin-left: 1em !important;
+ line-height: 1.5em;
+ list-style-type: disc;
+}
+
+body.mediawiki .compact-mbox .mbox-small-left {
+ width: auto;
+ margin: 0;
+ clear: both;
+ font-size: 100%;
+}
+
+.compact-mbox div .mbox-text {
+ margin: 0 !important;
+}
+
+.compact-mbox .mbox-text .mbox-image,
+.compact-mbox .mbox-text .mbox-imageright,
+.compact-mbox .mbox-text .mbox-empty-cell {
+ display: none;
+}
+
+.tmbox {
+ background: #f8eaba;
+}
+
+.mbox-inside .tmbox.mbox-small {
+ font-size: 100%;
+ line-height: 1.5em;
+}
+
+.mediawiki .mbox-inside .tmbox {
+ width: 100%;
+ margin: 2px 0;
+}
+
+.fmbox {
+ border-width: 1.25px;
+ border-style: solid;
+ border-color: #a2a9b1;
+ border-radius: 1em;
+ margin: 0.25em 0;
+ background: #f8f9fa;
+ clear: both;
+}
+
+.fmbox-warning {
+ border-color: #bb7070;
+ background: #ffdbdb;
+}
+
+.fmbox-editnotice {
+ background: fade(#fff, 70%);
+}
+
+.mw-warning-with-logexcerpt,
+.mw-lag-warn-high,
+.mw-cascadeprotectedwarning,
+#mw-protect-cascadeon {
+ padding: 0.5em;
+ border: 1px solid #bb7070;
+ margin: 0.2em 0;
+ background: #ffdbdb;
+ clear: both;
+}
+
+.fmbox-system {
+ padding: 0.25em 0;
+ border-color: #a2a9b1;
+ margin: 0.2em 0;
+ background: #f8f9fa;
+ clear: both;
+}
+
+/* These mbox-small classes must be placed after all other
+ tmbox etc classes. "body.mediawiki" is so. */
+body.mediawiki .mbox-small {
+ max-width: 320px;
+ margin: 4px 0 4px 1em !important;
+
+ /* For the "small=yes" option. */
+ clear: both;
+ float: right;
+ font-size: 88%;
+ line-height: 1.25em;
+}
+
+body.mediawiki .mbox-small-left {
+ width: 240px;
+
+ /* For the "small=left" option. */
+ margin: 4px 1em 4px 0 !important;
+ border-collapse: collapse;
+ font-size: 88%;
+ line-height: 1.25em;
+}
+
+@media screen and (max-width: 768px) {
+ .mbox,
+ .mbox-small {
+ width: 95%;
+ width: calc(100% - 1em);
+ max-width: 95%;
+ max-width: calc(100% - 1em);
+ }
+
+ .mbox-image img,
+ .mbox-imageright img {
+ max-width: 6vw;
+ }
+
+ .mbox-image {
+ padding: 2px 0 2px 2vw;
+ }
+
+ .mbox-imageright {
+ padding: 2px 2vw 2px 0;
+ }
+
+ .mbox.licensetpl .mbox-image,
+ .mbox.licensetpl .mbox-imageright {
+ display: none;
+ }
+
+ .mbox-text {
+ flex: 1 1 90vw;
+ padding: 1vh 2vw;
+ }
+}
+
+@media screen and (max-width: 480px) {
+ .mbox-small {
+ width: 100%;
+ margin: 0.25em auto !important;
+ float: none;
+ }
+}
+
+.permissions-errors {
+ border: 1px solid #a2a9b1;
+}
+
+.permissions-errors .fmbox {
+ border: 0;
+}
diff --git a/src/MboxCSS/definition.json b/src/MboxCSS/definition.json
new file mode 100644
index 00000000..41a3232d
--- /dev/null
+++ b/src/MboxCSS/definition.json
@@ -0,0 +1,6 @@
+{
+ "enable": true,
+ "description": "D {{tl|Mbox}}系列模板样式表",
+ "default": true,
+ "hidden": true
+}