// ==UserScript==
// @name         Magi搜索-白
// @namespace    http://tampermonkey.net/
// @version      1.1
// @description  Magi搜索修改为白色主色调
// @author       Shillber
// @include      *://magi.com/*
// @grant        none
// @downloadURL none
// ==/UserScript==
/*Magi搜索进化 */
(function () {
  /* 执行判断 */
  const key = encodeURIComponent('修改谷花泰的插件:纯净苍穹');
  if (window[key]) {
    return;
  };
  window[key] = true;

  class FuckAD {
    constructor(configs) {
      this._configs = configs;

      /*
       * config里的配置解释
       * {
       *   正则匹配的域名数组
       *   sites: ['zhihu.com'],
       * 
       *   移除的节点数组
       *   remove: ['#id'],
       * 
       *   display隐藏的节点数组
       *   displayNone: ['#id'],
       * 
       *   visibility隐藏的节点数组
       *   visibilityHidden: ['#id'],
       * 
       *   额外的css
       *   style: `
       *   body {
       *     background-color: #000;
       *   }
       *   `,
       *  
       *   额外的函数执行
       *   others() {
       *     console.log('others: 哈哈');
       *   }
       * }
       *
       */

      /* 初始化 */
      this.init();
    };
    /*
     * 初始化
     */
    init() {
      const that = this;
      /* 所有要移除的节点 */
      let remove = [];
      /* 总体style */
      let style = '';
      /* 要执行的其它函数集 */
      let others = [];

      /* 统计 */
      this._configs.forEach(config => {
        const canLoad = that.siteInList(config.sites);
        if (canLoad) {
          remove = remove.concat(config.remove);
          style += (config.style || '');
          style += (that.letSelectorsDisplayNone(config.displayNone));
          style += (that.letSelectorsVisibilityHidden(config.visibilityHidden));
          config.others && (others = others.concat(config.others));
        };
      });

      /* 添加style */
      this.addStyle(style);
      that.removeNodesBySelectors(remove);

      /* 执行others内所有函数 */
      try {
        others.forEach(func => {
          func();
        });
      } catch (err) {
        console.error('via: others function run error', err);
      };

      /* 监听dom，确保节点移除 */
      if (remove && remove.length > 0) {
        this.observe({
          targetNode: document.documentElement,
          config: {
            attributes: false
          },
          callback(mutations, observer) {
            that.removeNodesBySelectors(remove);
          }
        })
      }
    };
    /*
     * 监听dom节点加载函数
     */
    observe({ targetNode, config = {}, callback = () => { } }) {
      if (!targetNode) {
        return;
      };

      config = Object.assign({
        attributes: true,
        childList: true,
        subtree: true
      }, config);

      const observer = new MutationObserver(callback);
      observer.observe(targetNode, config);
    };
    /*
     * 添加style 
     */
    addStyle(style = '') {
      const styleElm = document.createElement('style');
      styleElm.innerHTML = style;
      document.head.appendChild(styleElm);
    };
    /*
     * 选择节点，返回节点数组
     */
    selectNodes(selector) {
      if (!selector) {
        return [];
      };
      const nodes = document.querySelectorAll(selector);
      return nodes;
    };
    /*
     * 判断网站是否在名单内 
     */
    siteInList(sites) {
      const hostname = window.location.hostname;
      const result = sites.some(site => {
        if (hostname.match(site)) {
          return true;
        }
        return false;
      });
      return result;
    };
    /*
     * 移除多个节点
     */
    removeNodes(nodes = []) {
      Array.from(nodes, node => {
        node.parentNode.removeChild(node);
      });
    };
    /*
     * 根据selector数组移除多个节点
     */
    removeNodesBySelectors(selectors = []) {
      let nodeArr = [];
      selectors.forEach(selector => {
        const nodes = this.selectNodes(selector);
        if (nodes && nodes.length > 0) {
          nodeArr = nodeArr.concat(Array.from(nodes));
        };
      });
      this.removeNodes(nodeArr);
    };
    /*
     * 根据css选择器生成style
     */
    generateStyleBySelectors(selectors = [], customStyle = `{}`) {
      if (!selectors || selectors.length === 0) {
        return '';
      };
      let style = '';
      selectors.forEach(selector => {
        if (selector) {
          style += `
          
          ${selectors} ${customStyle}
  
          `;
        };
      });
      return style;
    };
    /*
     * 让数组里的选择器全部 display: none
     */
    letSelectorsDisplayNone(selectors = []) {
      return this.generateStyleBySelectors(selectors, `{
        display: none!important;
      }`);
    };
    /*
     * 让数组里的选择器全部 visibility: hidden
     */
    letSelectorsVisibilityHidden(selectors = []) {
      return this.generateStyleBySelectors(selectors, `{
        visibility: hidden!important;
      }`);
    };
  };

  new FuckAD([
    {
      sites: ['magi.com'],
      style: `
           /*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */

body {
	color: #000;
	background-color: #FFF
}

body:before {
	position: fixed;
	content: "";
	opacity: 0;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background: linear-gradient(#FFF, #FFF); 
	background-repeat: no-repeat;
	background-size: 100% 100vh;
	transition: opacity .2s
}

body[data-layout="result"]>#curtain {
	background-color: #1C1C20
}

div.tips {
	font-size: .875rem;
	color: #000;
	padding: .5rem .5rem;
	margin-bottom: .75rem;
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto
}

div.tips>em {
	font-style: normal;
	color: #FFD862
}

div.tips#censored {
	font-size: .8125rem;
	color: #8E8E92;
	padding-bottom: 0
}

#header {
	position: relative;
	height: 100%;
	width: 100%;
	background-color:#FFF;
	box-shadow: 0 0 10px 0 #EEE; 
}

#search-bar {
	position: relative;
	z-index: 2;
	display: flex;
	align-items: stretch;
	height: 2.5rem;
	background-color: #FFF;
	border-radius: .2rem;
	box-shadow: 0 0 .2rem 0 rgba(10, 10, 15, 0.2)
}

#search-input {
	flex: 1 1;
	color: #0A0A0F;
	width: 0;
	border: none;
	outline: 0;
	border-radius: 0;
	background: transparent;
	line-height: normal;
	padding: 0 .5rem
}

#search-submit {
	flex: 0 0 2.55rem;
	cursor: pointer;
	border: none;
	outline: 0;
	border-radius: 0 .2rem .2rem 0;
	background-color: #F5F5F5;
	background-size: auto 1.3rem
}

#intro>a {
	text-decoration: none;
	font-size: .875rem;
	color: #000;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

#showcase>span {
	display: inline-block;
	margin: .75rem 0;
	padding-left: .5rem;
	font-size: .875rem;
	font-style: italic;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	color: #626266;
	background-repeat: no-repeat;
	background-size: 200px;
	-webkit-background-clip: text;
	background-clip: text;
	background-image: linear-gradient(-40deg, transparent 0%, transparent 40%, #000 50%, transparent 60%, transparent 100%);
	animation: home-slidein 1.1s ease, home-shine 2s ease 0s infinite
}

#showcase>ul>li>a {
	display: block;
	padding: .5rem .5rem;
	border-radius: .2rem;
	text-decoration: none;
	background-color: #FAFAFA;
	position: relative;
	z-index: 2
}

#showcase>ul>li>a h5 {
	color: #000;
	font-size: .875rem;
	font-weight: normal;
	margin: 0;
	padding: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

#showcase>ul>li>a:visited h5 {
	color: #FF0000
}

#showcase>ul>li>a cite {
	color: #90E6A6;
	display: block;
	font-size: .75rem;
	font-style: normal;
	font-weight: normal;
	margin-top: .25rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

#showcase>ul>li>div>span {
	color: #000;
	flex: 0 2 auto;
	font-size: .75rem;
	font-style: italic;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

#showcase>ul>li>div>a {
	flex: 0 1 auto;
	display: inline-block;
	font-size: .8125rem;
	margin-left: .5rem;
	color: #000;
	background-color: rgba(20, 162, 245, 0.3);
	border-bottom-color: #FAFAFA;
	text-decoration: none;
	border-radius: .2rem;
	padding: .5rem .5rem;
	padding-bottom: .4375rem;
	border-bottom-style: solid;
	border-bottom-width: .125rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

#footer {
	font-size: .75rem;
	color: #000;
	text-align: center
}

#footer div:last-child {
	cursor: default;
	color: #626266;
	transform: scale(.833);
	margin-bottom: .75rem
}

#search-suggestions {
	position: relative;
	z-index: 1;
	padding-top: .2rem;
	margin-top: -0.2rem;
	color: #0A0A0F;
	background-color: #FFF;
	box-shadow: 0 1px 1px 1px #EEE;
	border-bottom-left-radius: .2rem;
	border-bottom-right-radius: .2rem;
	overflow: hidden;
	display: none
}

#search-suggestions li[data-active=true] {
	color: #000;
	background-color: #FAFAFA
}

.gauge>path {
	fill: none;
	stroke: #000;
	stroke-width: 2;
	stroke-linecap: round;
	animation: progress 1s ease-out forwards
}

.gauge>path[data-color="green"] {
	stroke: #40AE36
}

.gauge>path[data-color="yellow"] {
	stroke: #F5980C
}

.gauge>path[data-color="red"] {
	stroke: #F5473E
}

.gauge>text {
	fill: #000;
	font-size: inherit;
	text-anchor: middle
}

.card {
	color: #000;
	background-color: #FAFAFA;
	padding: .5rem .5rem;
	margin-bottom: .75rem;
	border-radius: .2rem;
	overflow-wrap: break-word;
	word-wrap: break-word;
	-ms-word-break: break-all;
	word-break: break-all;
	word-break: break-word;
	-ms-hyphens: auto;
	-moz-hyphens: auto;
	-webkit-hyphens: auto;
	hyphens: auto
}

.card[data-type="warn"] {
	font-size: .9375rem;
	color: #0A0A0F;
	background-color: #FFD862;
	text-align: center
}

.card[data-type="next"] {
	cursor: pointer;
	font-size: .9375rem;
	color: #000;
	background-color: #FAFAFA;
	text-align: center
}

.card[data-type="web"] {
	color: #000
}

@media screen and (min-width:760px) {
	.card[data-type="web"] {
		/* background-color: transparent */
		background-color: #FAFAFA
	}
}

.card[data-type="web"] a:visited h3 {
	color: #FF0000
}

.card[data-type="web"] h3 {
	display: block;
	font-size: 1rem;
	font-style: normal;
	font-weight: normal;
	line-height: 1.5em;
	color: #000;
	margin: 0
}

.card[data-type="web"] cite {
	display: block;
	color: #90E6A6;
	font-style: normal;
	font-weight: normal;
	line-height: 1.5em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

.card[data-type="web"] p time {
	color: #8E8E92;
	word-spacing: -0.15rem
}

.card[data-type="web"] p em {
	font-style: normal;
	color: #FF557D
}

.card[data-type="web"] dl dt {
	display: inline;
	color: #8E8E92
}

.card[data-type="web"] ul li a {
	display: block;
	color: #000;
	background-color: #F0F0F0;
	padding: .5rem .5rem;
	border-radius: .2rem;
	text-align: center;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

.card[data-type="web"] ul li a:visited {
	color: #FF0000
}

.card[data-type="fact"] {
	padding: 0;
	color: #000;
	background-color: #FAFAFA
}

.card[data-type="fact"][data-subtype="entity"]>header span {
	color: #8E8E92
}

.card[data-type="fact"][data-subtype="set"]>header span {
	color: #8E8E92
}

.card[data-type="fact"][data-subtype="value"]>header span {
	color: #FF557D
}

.card[data-type="fact"][data-subtype="assertion"]>header span {
	color: #8E8E92
}

.card[data-type="fact"]>header>div h2 {
	color: #000;
	font-size: 1.125rem;
	font-weight: normal;
	padding: 0;
	margin: .5rem 0 0 0
}

.card[data-type="fact"]>header a {
	flex: 0 0 auto;
	color: #626266;
	font-size: .75rem;
	margin-left: .5rem;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.card[data-type="fact"]>div>section {
	margin-bottom: .5rem;
	border-top: .0625rem solid #FAFAFA
}

.card[data-type="fact"]>div>section>header h4 {
	flex: 0 0 auto;
	color: #000;
	font-size: .75rem;
	margin: 0 .5rem 0 0
}

.card[data-type="fact"]>div>section>header span {
	flex: 0 1 auto;
	font-size: .75rem;
	transform-origin: left;
	transform: scale(.833);
	color: #626266;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

.card[data-type="fact"]>div>section[data-scope="property"]>div>div {
	display: inline-flex;
	flex-flow: row nowrap;
	align-items: center;
	border-radius: .2rem;
	background-color: #F0F0F0;
	padding: .5rem .5rem
}

.card[data-type="fact"]>div>section[data-scope="property"]>div>div>a {
	text-decoration: none;
	padding: .5rem 0;
	transition: color .2s;
	color: #000
}

.card[data-type="fact"]>div>section[data-scope="property"]>div>div>a:hover {
	color: #000
}

.card[data-type="suggest"] ul li a {
	display: block;
	font-size: .875rem;
	color: #000;
	background-color: #FAFAFA;
	padding: .5rem .5rem;
	border-radius: .2rem;
	text-align: left;
	text-decoration: none;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

.card[data-type="suggest"] ul li a:visited {
	color: #FF0000
}

.fact>dl[data-color="green"]:after {
	background-color: #40AE36
}

.fact>dl[data-color="green"] dd {
	border-color: #40AE36;
	background-color: rgba(64, 174, 54, 0.3)
}

.fact>dl[data-color="yellow"]:after {
	background-color: #F5980C
}

.fact>dl[data-color="yellow"] dd {
	border-color: #F5980C;
	background-color: rgba(245, 152, 12, 0.3)
}

.fact>dl[data-color="red"]:after {
	background-color: #F5473E
}

.fact>dl[data-color="red"] dd {
	border-color: #F5473E;
	background-color: rgba(245, 71, 62, 0.3)
}

section[data-scope=description] .fact[data-render=cell]:before {
	content: "“";
	color: #626266
}

section[data-scope=description] .fact[data-render=cell]:after {
	content: "”";
	color: #626266
}

.fact[data-render=tuple]>dl {
	cursor: default;
	background-color: #F0F0F0
}

.fact[data-render=tuple]>dl>dd:before {
	display: block;
	color: #8E8E92;
	content: attr(data-field);
	font-size: .75rem;
	text-transform: uppercase;
	transform-origin: top left;
	transform: scale(.667);
	white-space: nowrap;
	line-height: 1;
	padding-bottom: .1665rem
}

.fact[data-render=tuple]>dl:after {
	content: attr(data-confidence);
	border-radius: .2rem;
	flex: 0 0 2rem;
	line-height: 2rem;
	margin: .5rem .5rem;
	width: 2rem;
	height: 2rem;
	font-size: .875rem;
	color: #000;
	text-align: center;
	cursor: help;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none
}

.fact>div {
	color: #8E8E92;
	background-color: #F0F0F0;
	font-size: .75rem;
	padding: 0 .5rem;
	overflow: hidden
}

.fact>div>span {
	display: block;
	padding-top: .5rem;
	border-top: .0625rem solid #F0F0F0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

.fact>div ul>li {
	padding: 0 .5rem;
	border-left: .125rem solid #626266
}

.fact>div ul>li:hover {
	border-left: .125rem solid #000
}

.fact>div ol>li>a h5 {
	font-size: .875rem;
	font-weight: normal;
	margin: 0;
	color: #000;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

.fact>div ol>li>a:visited h5 {
	color: #FF0000
}

.fact>div ol>li>a div cite {
	flex: 0 1 auto;
	padding-right: .25rem;
	font-size: .75rem;
	font-style: normal;
	color: #8E8E92;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

.fact>div ol>li>a div time {
	flex: 0 0 auto;
	color: #8E8E92;
	font-size: .75rem;
	font-style: normal;
	word-spacing: -0.15rem
}

.fact>div>div {
	display: flex;
	flex-flow: row nowrap;
	align-items: center;
	margin-top: .5rem;
	border-top: .0625rem solid #F0F0F0;
	padding: .5rem 0
}


.fact>div>div>a {
	flex: 0 1 auto;
	display: inline-block;
	font-size: .8125rem;
	margin-left: .5rem;
	color: #000;
	background-color: rgba(20, 162, 245, 0.3);
	border-bottom-color: #14A2F5;
	text-decoration: none;
	border-radius: .2rem;
	padding: .5rem .5rem;
	padding-bottom: .4375rem;
	border-bottom-style: solid;
	border-bottom-width: .125rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

#bibliography {
	margin-left: 4rem;
	color: #000
}

#bibliography h4 {
	font-size: .8125rem;
	font-weight: normal;
	color: #8E8E92;
	margin: .5rem 0 0 .5rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

#bibliography ol li {
	display: flex;
	margin-top: .75rem;
	border-radius: .2rem;
	background: linear-gradient(90deg, #FAFAFA, rgba(44, 44, 48, 0));
	transition: background .2s
}


#bibliography ol li a h5 {
	font-size: .8125rem;
	font-weight: normal;
	color: #000;
	margin: 0;
	transition: color .2s;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

#bibliography ol li a div cite {
	flex: 0 1 auto;
	font-style: normal;
	color: #8E8E92;
	padding-right: .25rem;
	transition: color .2s;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis
}

#bibliography ol li a div time {
	flex: 0 0 auto;
	color: #8E8E92;
	word-spacing: -0.15rem
}

#bibliography ol li:hover {
	background: #FAFAFA;
	box-shadow: 0 0 0 2px #FAFAFA
}

#bibliography ol li:hover h5 {
	color: #000
}

#bibliography ol li:hover cite {
	color: #8E8E92
}
      `
    },
  ]);
})();