调整极客黑样式

src/App.css

@@ -1,77 +1,4 @@
-.ant-btn-primary {
-  color: #fff;
-  background-color: #000;
-  border-color: #000;
-}
 
-.ant-btn-primary:hover,
-.ant-btn-primary:focus {
-  color: #fff;
-  background-color: #000;
-  border-color: #000;
-}
-
-.ant-btn:hover, .ant-btn:focus {
-  color: #000;
-  background-color: #fff;
-  border-color: #000;
-}
-
-.ant-input:hover, .ant-input:focus {
-  border-color: #000;
-  border-right-width: 1px !important;
-  -webkit-box-shadow: 0 0 0 2px rgb(82 82 83 / 20%);
-  box-shadow: 0 0 0 2px rgb(82 82 83 / 20%);
-}
-
-.ant-select-selection:hover {
-  border-color: #000;
-  border-right-width: 1px !important;
-}
-
-.ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active,
-.ant-input-number:focus, .ant-input-number:active , .ant-input-number:hover {
-  border-color: #000;
-  -webkit-box-shadow: 0 0 0 2px rgb(82 82 83 / 20%);
-  box-shadow: 0 0 0 2px rgb(82 82 83 / 20%);
-}
-
-.ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
-  background-color: #f1f1f1;
-}
-
-.ant-select-dropdown-menu {
-  margin: 4px;
-  padding: 0;
-}
-
-.ant-select-dropdown-menu-item {
-  border-radius: 4px;
-  margin: 2px 0;
-}
-
-.ant-menu-item-selected {
-  color: #000;
-  /*font-weight: bolder;*/
-}
-
-.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
-  background-color: #f6f6f6;
-}
-
-.ant-menu-item {
-  text-align: center;
-  margin-right: 20px;
-}
-
-.ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
-  margin-right: 20px;
-}
-
-.ant-menu-item:hover, .ant-menu-item-active, .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, .ant-menu-submenu-active, .ant-menu-submenu-title:hover {
-  color: #000;
-  font-weight: bolder;
-}
 
 .nice-app {
   height: 100vh;

src/component/Dialog/ImageDialog.js

@@ -1,6 +1,6 @@
-import React, {Component} from "react";
+import React, { Component } from "react";
-import {observer, inject} from "mobx-react";
+import { observer, inject } from "mobx-react";
-import {Modal, Upload, Tabs, Select} from "antd";
+import { Modal, Upload, Tabs, Select } from "antd";
 
 import SvgIcon from "../../icon";
 
@@ -9,13 +9,17 @@ import QiniuOSS from "../ImageHosting/QiniuOSS";
 import Gitee from "../ImageHosting/Gitee";
 import GitHub from "../ImageHosting/GitHub";
 
-import {uploadAdaptor} from "../../utils/imageHosting";
+import { uploadAdaptor } from "../../utils/imageHosting";
-import {SM_MS_PROXY, IMAGE_HOSTING_TYPE, IMAGE_HOSTING_NAMES} from "../../utils/constant";
+import {
+  SM_MS_PROXY,
+  IMAGE_HOSTING_TYPE,
+  IMAGE_HOSTING_NAMES
+} from "../../utils/constant";
 import appContext from "../../utils/appContext";
 
-const {Dragger} = Upload;
+const { Dragger } = Upload;
-const {TabPane} = Tabs;
+const { TabPane } = Tabs;
-const {Option} = Select;
+const { Option } = Select;
 
 @inject("dialog")
 @inject("content")
@@ -33,17 +37,17 @@ class ImageDialog extends Component {
     let text = "";
     // 成功后添加url
     if (this.props.navbar.isContainImgName) {
-      this.images.forEach((value) => {
+      this.images.forEach(value => {
         text += `![${value.filename}](${value.url})\n`;
       });
     } else {
-      this.images.forEach((value) => {
+      this.images.forEach(value => {
         text += `![](${value.url})\n`;
       });
     }
     // 重新初始化
     this.images = [];
-    const {markdownEditor} = this.props.content;
+    const { markdownEditor } = this.props.content;
     const cursor = markdownEditor.getCursor();
     markdownEditor.replaceSelection(text, cursor);
     // 上传后实时更新内容
@@ -60,53 +64,91 @@ class ImageDialog extends Component {
     this.props.dialog.setImageOpen(false);
   };
 
-  customRequest = ({action, data, file, headers, onError, onProgress, onSuccess, withCredentials}) => {
+  customRequest = ({
+    action,
+    data,
+    file,
+    headers,
+    onError,
+    onProgress,
+    onSuccess,
+    withCredentials
+  }) => {
     const formData = new FormData();
-    const {images} = this;
+    const { images } = this;
     if (data) {
-      Object.keys(data).forEach((key) => {
+      Object.keys(data).forEach(key => {
         formData.append(key, data[key]);
       });
     }
     // 使用阿里云图床
     if (this.props.imageHosting.type === "阿里云") {
-      uploadAdaptor({file, onSuccess, onError, images});
+      uploadAdaptor({ file, onSuccess, onError, images });
     }
     // 使用七牛云图床
     else if (this.props.imageHosting.type === "七牛云") {
-      uploadAdaptor({file, onSuccess, onError, onProgress, images});
+      uploadAdaptor({ file, onSuccess, onError, onProgress, images });
     }
     // 使用SM.MS图床
     else if (this.props.imageHosting.type === "SM.MS") {
-      uploadAdaptor({formData, file, action, onProgress, onSuccess, onError, headers, withCredentials});
+      uploadAdaptor({
+        formData,
+        file,
+        action,
+        onProgress,
+        onSuccess,
+        onError,
+        headers,
+        withCredentials
+      });
     }
     // 使用Gitee图床
     else if (this.props.imageHosting.type === "Gitee") {
-      uploadAdaptor({formData, file, action, onProgress, onSuccess, onError, headers, withCredentials, images});
+      uploadAdaptor({
+        formData,
+        file,
+        action,
+        onProgress,
+        onSuccess,
+        onError,
+        headers,
+        withCredentials,
+        images
+      });
     }
     // 使用GitHub图床
     else if (this.props.imageHosting.type === "GitHub") {
-      uploadAdaptor({formData, file, action, onProgress, onSuccess, onError, headers, withCredentials, images});
+      uploadAdaptor({
+        formData,
+        file,
+        action,
+        onProgress,
+        onSuccess,
+        onError,
+        headers,
+        withCredentials,
+        images
+      });
     }
     // 使用用户提供的图床或是默认mdnice图床
     else {
-      uploadAdaptor({formData, file, onSuccess, onError, images});
+      uploadAdaptor({ formData, file, onSuccess, onError, images });
     }
 
     return {
       abort() {
         console.log("upload progress is aborted.");
-      },
+      }
     };
   };
 
-  typeChange = (type) => {
+  typeChange = type => {
     this.props.imageHosting.setType(type);
     window.localStorage.setItem(IMAGE_HOSTING_TYPE, type);
   };
 
   render() {
-    const {hostingList, type} = this.props.imageHosting;
+    const { hostingList, type } = this.props.imageHosting;
 
     const columns = hostingList.map((option, index) => (
       <Option key={index} value={option.value}>
@@ -115,7 +157,7 @@ class ImageDialog extends Component {
     ));
 
     const imageHostingSwitch = (
-      <Select style={{width: "90px"}} value={type} onChange={this.typeChange}>
+      <Select style={{ width: "90px" }} value={type} onChange={this.typeChange}>
         {columns}
       </Select>
     );
@@ -128,18 +170,31 @@ class ImageDialog extends Component {
         visible={this.props.dialog.isImageOpen}
         onOk={this.handleOk}
         onCancel={this.handleCancel}
-        bodyStyle={{paddingTop: "10px"}}
+        bodyStyle={{ paddingTop: "10px" }}
       >
         <appContext.Consumer>
-          {({useImageHosting}) => (
+          {({ useImageHosting }) => (
             <Tabs tabBarExtraContent={imageHostingSwitch} type="card">
               <TabPane tab="图片上传" key="1">
-                <Dragger name="file" multiple action={SM_MS_PROXY} customRequest={this.customRequest}>
+                <Dragger
+                  name="file"
+                  multiple
+                  action={SM_MS_PROXY}
+                  customRequest={this.customRequest}
+                >
                   <p className="ant-upload-drag-icon">
-                    <SvgIcon name="inbox" style={style.svgIcon} fill="#40a9ff" />
+                    <SvgIcon
+                      name="inbox"
+                      style={style.svgIcon}
+                      fill="#8E24AA"
+                    />
+                  </p>
+                  <p className="ant-upload-text">
+                    点击或拖拽一张或多张照片上传
+                  </p>
+                  <p className="ant-upload-hint">
+                    {"正在使用" + type + "图床"}
                   </p>
-                  <p className="ant-upload-text">点击或拖拽一张或多张照片上传</p>
-                  <p className="ant-upload-hint">{"正在使用" + type + "图床"}</p>
                 </Dragger>
               </TabPane>
               {useImageHosting.isAliyunOpen ? (
@@ -173,8 +228,8 @@ class ImageDialog extends Component {
 const style = {
   svgIcon: {
     width: "48px",
-    height: "48px",
+    height: "48px"
-  },
+  }
 };
 
 export default ImageDialog;

src/icon/index.css

@@ -3,5 +3,5 @@
 }
 
 .icon:hover {
-  fill: #40a9ff;
+  fill: #8E24AA;
 }

src/index.css

@@ -13,3 +13,94 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
+
+@font-face {
+  font-display: swap;
+  font-family: Mangueira Alt;
+  font-style: normal;
+  font-weight: 700;
+  src: url(https://cdn.luckday.cn/static/font/mangueira-alt-bold.woff2) format("woff2");
+}
+
+.ant-btn-primary {
+  color: #fff;
+  background-color: #000;
+  border-color: #000;
+}
+
+.ant-btn-primary:hover,
+.ant-btn-primary:focus {
+  color: #fff;
+  background-color: #000;
+  border-color: #000;
+}
+
+.ant-btn:hover, .ant-btn:focus {
+  color: #000;
+  background-color: #fff;
+  border-color: #000;
+}
+
+.ant-input:hover, .ant-input:focus {
+  border-color: #000;
+  border-right-width: 1px !important;
+  -webkit-box-shadow: 0 0 0 2px rgb(82 82 83 / 20%);
+  box-shadow: 0 0 0 2px rgb(82 82 83 / 20%);
+}
+
+.ant-select-selection:hover {
+  border-color: #000;
+  border-right-width: 1px !important;
+}
+
+.ant-select-focused .ant-select-selection, .ant-select-selection:focus, .ant-select-selection:active,
+.ant-input-number:focus, .ant-input-number:active , .ant-input-number:hover {
+  border-color: #000;
+  -webkit-box-shadow: 0 0 0 2px rgb(82 82 83 / 20%);
+  box-shadow: 0 0 0 2px rgb(82 82 83 / 20%);
+}
+
+.ant-select-dropdown-menu-item:hover:not(.ant-select-dropdown-menu-item-disabled) {
+  background-color: #f1f1f1;
+}
+
+.ant-select-dropdown-menu {
+  margin: 4px;
+  padding: 0;
+}
+
+.ant-select-dropdown-menu-item {
+  border-radius: 4px;
+  margin: 2px 0;
+}
+
+.ant-menu-item-selected {
+  color: #000;
+  /*font-weight: bolder;*/
+}
+
+.ant-menu:not(.ant-menu-horizontal) .ant-menu-item-selected {
+  background-color: #f6f6f6;
+}
+
+.ant-menu-item {
+  text-align: center;
+  margin-right: 20px;
+}
+
+.ant-menu-inline, .ant-menu-vertical, .ant-menu-vertical-left {
+  margin-right: 20px;
+}
+
+.ant-menu-item:hover, .ant-menu-item-active, .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, .ant-menu-submenu-active, .ant-menu-submenu-title:hover {
+  color: #000;
+  font-weight: bolder;
+}
+
+.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active {
+  color: #4a148c;
+}
+
+.ant-tabs-nav .ant-tabs-tab:hover {
+  color: #8E24AA;
+}

src/layout/Footer.js

@@ -1,9 +1,9 @@
-import React, {Component} from "react";
+import React, { Component } from "react";
-import {Menu, Dropdown, message} from "antd";
+import { Menu, Dropdown, message } from "antd";
-import {observer, inject} from "mobx-react";
+import { observer, inject } from "mobx-react";
-import {wordCalc} from "../utils/helper";
+import { wordCalc } from "../utils/helper";
 import SitDownConverter from "../utils/sitdownConverter";
-import {SITDOWN_OPTIONS} from "../utils/constant";
+import { SITDOWN_OPTIONS } from "../utils/constant";
 import SvgIcon from "../icon";
 
 import "./Footer.css";
@@ -16,12 +16,12 @@ class Footer extends Component {
   constructor(props) {
     super(props);
     this.state = {
-      engineDesc: SITDOWN_OPTIONS[0].desc,
+      engineDesc: SITDOWN_OPTIONS[0].desc
     };
   }
 
   handleMessage = () => {
-    const {pasteHtml, pasteText} = this.props.footer;
+    const { pasteHtml, pasteText } = this.props.footer;
     let toMarkdown = SitDownConverter.GFM;
     switch (this.state.platform) {
       case "csdn":
@@ -41,7 +41,7 @@ class Footer extends Component {
         break;
     }
     const markdown = toMarkdown(pasteHtml);
-    const {content} = this.props.content;
+    const { content } = this.props.content;
     const convertContent = content.replace(pasteText, markdown);
     this.props.content.setContent(convertContent);
 
@@ -51,12 +51,12 @@ class Footer extends Component {
     message.success("转换成功！");
   };
 
-  handleMenu = ({key, domEvent}) => {
+  handleMenu = ({ key, domEvent }) => {
     if (key === "thanks") {
       const w = window.open("about:blank");
       w.location.href = "https://github.com/mdnice/sitdown";
     } else {
-      this.setState({engineDesc: key});
+      this.setState({ engineDesc: key });
     }
     domEvent.stopPropagation();
   };
@@ -64,7 +64,7 @@ class Footer extends Component {
   render() {
     const menu = (
       <Menu onClick={this.handleMenu}>
-        {SITDOWN_OPTIONS.map((option) => (
+        {SITDOWN_OPTIONS.map(option => (
           <Menu.Item key={option.desc}>
             <div>{option.value}</div>
           </Menu.Item>
@@ -76,9 +76,9 @@ class Footer extends Component {
       </Menu>
     );
 
-    const {content, themeList} = this.props.content;
+    const { content, themeList } = this.props.content;
-    const {templateNum} = this.props.navbar;
+    const { templateNum } = this.props.navbar;
-    const {isPasteHtmlChecked} = this.props.footer;
+    const { isPasteHtmlChecked } = this.props.footer;
 
     const lineCount = content.split("\n").length;
     const wordCount = wordCalc(content);
@@ -100,17 +100,22 @@ class Footer extends Component {
         {isPasteHtmlChecked && (
           <div className="nice-footer-message" onClick={this.handleMessage}>
             点击使用
-            <Dropdown overlay={menu} trigger={["click"]} overlayClassName="nice-footer-overlay" placement="topLeft">
+            <Dropdown
+              overlay={menu}
+              trigger={["click"]}
+              overlayClassName="nice-footer-overlay"
+              placement="topLeft"
+            >
               <a
                 id="nice-footer-engine"
                 className="nice-footer-engine"
                 href="#"
-                onClick={(e) => {
+                onClick={e => {
                   e.stopPropagation();
                 }}
               >
                 {this.state.engineDesc}
-                <SvgIcon name="down" style={style.svgIcon} fill="#40a9ff" />
+                <SvgIcon name="down" style={style.svgIcon} fill="#8E24AA" />
               </a>
             </Dropdown>
             将粘贴的富文本转换为 markdown
@@ -124,8 +129,8 @@ class Footer extends Component {
 const style = {
   svgIcon: {
     width: "12px",
-    height: "12px",
+    height: "12px"
-  },
+  }
 };
 
 export default Footer;

src/layout/Navbar.css

@@ -56,8 +56,11 @@
   padding: 0 10px 0 20px;
   font-weight: bold;
   font-size: 16px;
-  font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia,
+  /*font-family: Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, "PingFang SC", Cambria, Cochin, Georgia,*/
-    Times, "Times New Roman", serif;
+  /*  Times, "Times New Roman", serif;*/
+
+  /*font-size: x-large;*/
+  font-family: Mangueira Alt, sans-serif;
 }
 
 .nice-navbar-hide {

src/template/markdown/ten.js

@@ -34,7 +34,7 @@ export default `/*自定义样式，实时生效*/
 #nice h1 {
   margin-top: -0.46em;
   margin-bottom: 0.1em;
-  border-bottom: 2px solid rgb(198, 196, 196);
+  // border-bottom: 2px solid rgb(198, 196, 196);
   box-sizing: border-box;
 }
 
@@ -56,8 +56,8 @@ export default `/*自定义样式，实时生效*/
 #nice h2 {
   margin: 10px auto;
   height: 40px;
-  background-color: rgb(251, 251, 251);
+  // background-color: rgb(251, 251, 251);
-  border-bottom: 1px solid rgb(246, 246, 246);
+  // border-bottom: 1px solid rgb(246, 246, 246);
   overflow: hidden;
   box-sizing: border-box;
 }
@@ -84,7 +84,7 @@ export default `/*自定义样式，实时生效*/
 /* 三级标题 */
 #nice h3 {
   margin: 20px auto 5px;
-  border-top: 1px solid rgb(221, 221, 221);
+  // border-top: 1px solid rgb(221, 221, 221);
   box-sizing: border-box;
 }
 

src/template/markdown/wgh.js

@@ -37,7 +37,7 @@ export default `/*自定义样式，实时生效*/
 #nice h1 {
   margin-top: -0.46em;
   margin-bottom: 0.1em;
-  border-bottom: 2px solid rgb(198, 196, 196);
+  // border-bottom: 2px solid rgb(198, 196, 196);
   box-sizing: border-box;
 }
 
@@ -59,8 +59,8 @@ export default `/*自定义样式，实时生效*/
 #nice h2 {
   margin: 10px auto;
   height: 40px;
-  background-color: rgb(251, 251, 251);
+  // background-color: rgb(251, 251, 251);
-  border-bottom: 1px solid rgb(246, 246, 246);
+  // border-bottom: 1px solid rgb(246, 246, 246);
   overflow: hidden;
   box-sizing: border-box;
 }
@@ -87,7 +87,7 @@ export default `/*自定义样式，实时生效*/
 /* 三级标题 */
 #nice h3 {
   margin: 20px auto 5px;
-  border-top: 1px solid rgb(221, 221, 221);
+  // border-top: 1px solid rgb(221, 221, 221);
   box-sizing: border-box;
 }