人机

软件笔记

主题

使用了Minimal Theme by kepano的夜间模式。

文字外观

在黑底上点缀浅色渐变怎么不算是一种qq空间螺钿。 调试色板的工具：Super Color Palette。

分享一个低短调渐变色板： 

#3D433D
#3D4341
#3D3F43
#3F3D43
#433D42
#433D3D
#43413D

渐变色标签

用Colored Tags插件设置标签颜色。一个标签内的混色效果目前是实验性功能。

正文标题渐变色

给正文各层级的标题设置渐变的效果：

CSS snippet摘自 Creating clean gradient headers：

/*title color*/
.inline-title {
    color: white;
}

/*header colors*/

/* Fix formatting symbol colors */
.cm-formatting-header {
    color: inherit;
}


/* Add text-clipped background gradients */
.cm-header:not(.cm-formatting),
:is(h1, h2, h3, h4, h5, h6) {
    background: linear-gradient(to right, var(--gradient-header));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
}

/* Apply the gradient variables */
.cm-header-1,
h1 {
    --gradient-header: var(--h1-gradient);
}

.cm-header-2,
h2 {
    --gradient-header: var(--h2-gradient);
}

.cm-header-3,
h3 {
    --gradient-header: var(--h3-gradient);
}

.cm-header-4,
h4 {
    --gradient-header: var(--h4-gradient);
}

.cm-header-5,
h5 {
    --gradient-header: var(--h5-gradient);
}

.cm-header-6,
h6 {
    --gradient-header: var(--h6-gradient);
}


/* Add text-clipped background gradients */
.cm-header:not(.cm-formatting),
:is(h1, h2, h3, h4, h5, h6) {
    background: linear-gradient(to right, var(--gradient-header));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    width: fit-content;
}

:root .theme-dark {
    --h1-color: #B2A4FF;
    --h1-gradient: var(--h1-color), #FFB4B4, #FFDEB4, #FDF7C3;
    --h2-color: #D14D72;
    --h2-gradient: var(--h2-color), #FFABAB, #FCC8D1, #FEF2F4;
    --h3-color: #C4DFDF;
    --h3-gradient: var(--h3-color), #D2E9E9, #E3F4F4, #F8F6F4;
    --h4-color: #B799FF;
    --h4-gradient: var(--h4-color), #ACBCFF, #AEE2FF, #E6FFFD;
    --h5-color: #73A9AD;
    --h5-gradient: var(--h5-color), #B3C890, #DBDFAA, #F5F0BB;
    --h6-color: #F2BED1;
    --h6-gradient: var(--h6-color), #FDCEDF, #F8E8EE, #F9F5F6;
}

文件目录渐变色

给二级目录自动设置循环渐变色的效果： CSS snippet取自Iterative Rainbow Folder Colors css，微调了字体大小和颜色：

/* Coloured Folders
a CSS snippet by Lithou

This will allow the colouring of the top level folders into sections that "drop down" when opened. 
This is currently set to be the same colour regardless of theme, but you can change that by copy/pasting the colors from the root section into light/dark theme then changing them according to preference.
The colours are rainbow coloured and 16 in number by default. They are shades such that white/lightgrey text shows up the best. Some have a bit let contrast (the lighter blue and the yellow) but should still be visible. Again, change them however you would like. 
*/
:root{
    /* folder colours */
    --Fold0: #d32f2f;
    --Fold1: #f39b9b;
    --Fold2: #f0ae59;
    --Fold3: #f1ca5d;
    --Fold4: #9dcd78;
    --Fold5: #8ab6e2;
    --Fold6: #aaa5db;
    --Fold7: #d399cf;
    --Fold8: #c995aa;
    --Fold9: #c99595;
    --FoldA: #f0aaaa;
    --FoldB: #f1b86f;
    --FoldC: #7acc93;
    --FoldD: #87c9d9;
    --FoldE: #96abde;
    --FoldF: #eb9fc9;
    --FoldText: black;
    /* line styles for nesting indicators */

}


/* Set up explorer container margins */
.nav-files-container{margin: 0px 5px;}



/* collapse arrow for folders */
.nav-folder.mod-root>.nav-folder-children>.nav-folder>.nav-folder-title>.nav-folder-collapse-indicator{
	position: absolute;
    left: 21px;
    top: 5px;
}


.nav-file-title{
    padding-left: 5px;
}

/* active file increase font size and removes normal highlight marker */
 /*   .nav-file-title.is-active{ 
        color: #000000;}*/
		


/* Folder Title Colors */      

.nav-folder-children .nav-folder:nth-child(9n+2) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+2) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+2) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+2) .nav-folder-title {
    color: var(--Fold1);
    border-radius: 0; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(9n+3) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+3) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+3) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+3) .nav-folder-title {
    color: var(--Fold2);
    border-radius: 0; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(9n+4) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+4) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+4) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+4) .nav-folder-title {
    color: var(--Fold3);
    border-radius: 0; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(9n+5) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+5) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+5) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+5) .nav-folder-title {
    color: var(--Fold4);
    border-radius: 0; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(9n+6) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+6) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+6) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+6) .nav-folder-title {
    color: var(--Fold5);
    border-radius: 0; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(9n+7) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+7) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+7) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+7) .nav-folder-title {
    color: var(--Fold6);
    border-radius: 0; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(9n+8) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+8) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+8) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+8) .nav-folder-title {
    color: var(--Fold7);
    border-radius: 0; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(9n+9) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+9) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+9) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+9) .nav-folder-title {
    color: var(--Fold8);
    border-radius: 0; margin-top: 1px;
}
.nav-folder-children .nav-folder:nth-child(9n+10) .nav-folder-title,
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+10) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+10) .nav-folder-title,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+10) .nav-folder-title {
    color: var(--Fold9);
    border-radius: 0; margin-top: 1px;
}

/* Folder Icon Colors */

.nav-folder-children .nav-folder:nth-child(9n+2) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+2) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+2) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+2) .nav-folder-collapse-indicator {
    color: var(--Fold1);
    border-radius: 5px; margin-top: 2px;
}
.nav-folder-children .nav-folder:nth-child(9n+3) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+3) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+3) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+3) .nav-folder-collapse-indicator {
    color: var(--Fold2);
    border-radius: 5px; margin-top: 2px;
}
.nav-folder-children .nav-folder:nth-child(9n+4) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+4) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+4) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+4) .nav-folder-collapse-indicator {
    color: var(--Fold3);
    border-radius: 5px; margin-top: 2px;
}
.nav-folder-children .nav-folder:nth-child(9n+5) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+5) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+5) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+5) .nav-folder-collapse-indicator {
    color: var(--Fold4);
    border-radius: 5px; margin-top: 2px;
}
.nav-folder-children .nav-folder:nth-child(9n+6) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+6) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+6) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+6) .nav-folder-collapse-indicator {
    color: var(--Fold5);
    border-radius: 5px; margin-top: 2px;
}
.nav-folder-children .nav-folder:nth-child(9n+7) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+7) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+7) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+7) .nav-folder-collapse-indicator {
    color: var(--Fold6);
    border-radius: 5px; margin-top: 2px;
}
.nav-folder-children .nav-folder:nth-child(9n+8) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+8) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+8) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+8) .nav-folder-collapse-indicator {
    color: var(--Fold7);
    border-radius: 5px; margin-top: 2px;
}
.nav-folder-children .nav-folder:nth-child(9n+9) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+9) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+9) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+9) .nav-folder-collapse-indicator {
    color: var(--Fold8);
    border-radius: 5px; margin-top: 2px;
}
.nav-folder-children .nav-folder:nth-child(9n+10) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder .nav-folder:nth-child(9n+10) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+10) .nav-folder-collapse-indicator,
.nav-folder-children .nav-folder-children .nav-folder-children .nav-folder .nav-folder:nth-child(9n+10) .nav-folder-collapse-indicator {
    color: var(--Fold9);
    border-radius: 5px; margin-top: 2px;
}


/* the following is modified from the Blue Topaz Themme */

/*----file explorer smaller fonts & line height----*/
.nav-file-title,
.nav-folder-title {
/*  font-size: var(--font-size-folder-and-file);*/
  font-family: var(--font-family-folder-file-title);
  line-height: 1.2;
  cursor: pointer;
  position: relative;
  border-width: 1px;
  border-style: solid;
  border-color: transparent;
  border-image: initial;
  border-radius: 0px;
  padding: 1px 5px 0px 16px;
  color: var(--text-muted);
  display: flex;
  align-items: baseline;
  flex-direction: row;
}

.nav-file-title {
  padding: 1px 5px 0px 4px;
}

.nav-folder-title {
  color: var(--text-normal);
  opacity: 0.8;
}

/*rename*/
.nav-file-title-content.is-being-renamed,
.nav-folder-title-content.is-being-renamed {
  cursor: text;
  border-color: transparent;
  background-color: white;
  color: black;
}

/*---- nav arrows adjust location ----*/
.nav-folder-collapse-indicator {
  position: absolute;
  left: 21px;
  top: 3px;
  transition: transform 20ms linear 0s;
}

.nav-folder-collapse-indicator::after {
  position: absolute;
  content : "↓";
  left: -3px;
  top: 0px;
  transition: transform 10ms linear 0s;
}

.nav-folder-collapse-indicator svg {
  display: none;
  height: 7px;
  width: 7px;
}

光标

光标CSS

修改默认光标：

* {
    cursor: url(cursorImage.png), auto;
}

修改指针光标：

a:hover {
    cursor: url(pointerImage.png), auto;
}

光标素材

160+ Cursors Crosshairs – Pack (32x32)

光标灵感

part.archi