├── README.md
└── moe
    ├── style-v3.css
    └── style.css


/README.md:
--------------------------------------------------------------------------------
 1 | # alist美化样式
 2 | * 本仓库用来存放我的alist样式
 3 | * 我的样式只是小修小改，修改的部分注有详细说明，可以自行更改、添加或删除
 4 | 
 5 | > 2022.12.27起不再提供任何默认字体样式
 6 | 
 7 | ## 引入
 8 | * **V2版本**
 9 | ```html
10 | <link href="https://cdn.jsdelivr.ren/gh/anosu/alist-style@main/moe/style.css" rel="stylesheet" type="text/css" />
11 | ```
12 | 
13 | 国内CDN
14 | ```
15 | <link href="https://jsd.onmicrosoft.cn/gh/anosu/alist-style@main/moe/style.css" rel="stylesheet" type="text/css" />
16 | ```
17 | 
18 | 或者使用jsDelivr
19 | ```html
20 | <link href="https://fastly.jsdelivr.net/gh/anosu/alist-style@main/moe/style.css" rel="stylesheet" type="text/css" />
21 | ```
22 | * **V3版本**
23 | ```html
24 | <script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
25 | <link href="https://cdn.jsdelivr.ren/gh/anosu/alist-style@main/moe/style-v3.css" rel="stylesheet" type="text/css" />
26 | ```
27 | 国内CDN
28 | ```
29 | <script src="https://polyfill.alicdn.com/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
30 | <link href="https://jsd.onmicrosoft.cn/gh/anosu/alist-style@main/moe/style-v3.css" rel="stylesheet" type="text/css" />
31 | ```
32 | 
33 | 或者使用jsDelivr
34 | ```html
35 | <script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
36 | <link href="https://fastly.jsdelivr.net/gh/anosu/alist-style@main/moe/style-v3.css" rel="stylesheet" type="text/css" />
37 | ```
38 | 
39 | 放两张预览图以供参考
40 | * PC:
41 | ![pc](https://tvax4.sinaimg.cn/large/008uAIdSgy1h5q4kp18q3j31z4140npd.jpg)
42 | * PE:
43 | ![pe](https://tva3.sinaimg.cn/large/008uAIdSgy1h5q4q8hii4j30u01uo413.jpg)
44 | 
45 | > 没有添加任何小组件，播放器看板娘之类的自行添加
46 | 


--------------------------------------------------------------------------------
/moe/style-v3.css:
--------------------------------------------------------------------------------
  1 | /*图标和按钮*/
  2 | .hope-icon {
  3 | 	color: #ffb6c1 !important
  4 | 		/*设置所有图标颜色*/
  5 | }
  6 | 
  7 | .hope-button {
  8 | 	color: #fff !important;
  9 | 	/*设置按钮字体为白色*/
 10 | 	background-color: #ffb6c1 !important
 11 | 		/*设置按钮背景为粉色*/
 12 | }
 13 | 
 14 | .hope-ui-dark .hope-c-ivMHWx-hZistB-cv.hope-c-PJLV.hope-c-PJLV-iikaotv-css {
 15 | 	background-color: #202425 !important
 16 | }
 17 | 
 18 | .hope-c-PJLV-ijzCLcW-css,
 19 | .hope-c-mHASU-kFfbLQ-colorScheme-info,
 20 | .hope-ui-dark .hope-c-ivMHWx-hZistB-cv.hope-c-PJLV.hope-c-PJLV-iikaotv-css svg {
 21 | 	color: #ffb6c1 !important
 22 | }
 23 | 
 24 | .hope-c-mHASU-kFfbLQ-colorScheme-info[data-focus] {
 25 | 	border-color: #ffb6c1 !important;
 26 | 	box-shadow: 0 0 0 2px #ffcdd4 !important
 27 | }
 28 | 
 29 | .hope-ui-light .hope-c-mHASU-kFfbLQ-colorScheme-info svg {
 30 | 	color: white !important
 31 | }
 32 | 
 33 | .hope-ui-dark .hope-c-mHASU-kFfbLQ-colorScheme-info svg {
 34 | 	color: #202425 !important
 35 | }
 36 | 
 37 | .left-toolbar-box svg:hover,
 38 | .center-toolbar svg:hover {
 39 | 	color: white !important;
 40 | 	background-color: #ffb6c1
 41 | }
 42 | 
 43 | .hope-c-PJLV-icHSmvX-css {
 44 | 	border-radius: 5px
 45 | }
 46 | 
 47 | /*顶部header*/
 48 | #root>div.header.hope-center.hope-c-jKOUQW.hope-c-PJLV.hope-c-PJLV-ikaMhsQ-css {
 49 | 	background-color: transparent;
 50 | }
 51 | 
 52 | /*标题栏*/
 53 | .hope-ui-light .hope-breadcrumb__list,
 54 | #root>div.hope-c-PJLV.hope-c-PJLV-iicyfOA-css>div>nav {
 55 | 	border-radius: 10px !important
 56 | 		/*标题栏圆角*/
 57 | }
 58 | 
 59 | .hope-ui-light div.hope-c-PJLV.hope-c-PJLV-iicyfOA-css>div>nav {
 60 | 	background-color: rgba(255, 255, 255, .7);
 61 | }
 62 | 
 63 | /*搜索框*/
 64 | .header-right .hope-c-dhzjXW.hope-c-PJLV-ihYBJPK-css {
 65 | 	display: none !important;
 66 | }
 67 | 
 68 | .hope-ui-light .hope-c-PJLV-ikEIIxw-css {
 69 | 	background-color: rgba(255, 255, 255, .7)
 70 | }
 71 | 
 72 | .hope-c-dhzjXW.hope-c-XNyZK.hope-c-PJLV.hope-c-PJLV-ijhzIfm-css:hover {
 73 | 	color: #ffb6c1 !important;
 74 | 	background: none
 75 | }
 76 | 
 77 | .hope-ui-light section[id*="hope-modal-cl"] {
 78 | 	background-color: rgba(250, 250, 250, .75) !important;
 79 | 	backdrop-filter: blur(5px)
 80 | }
 81 | 
 82 | /*公告板*/
 83 | .hope-notification__list.hope-c-UdTFD.hope-c-UdTFD-jEXiZO-placement-top-end.hope-c-PJLV.hope-c-PJLV-ijhzIfm-css {
 84 | 	max-width: fit-content
 85 | }
 86 | 
 87 | /*目录框*/
 88 | .hope-ui-light .obj-box,
 89 | .hope-ui-light .hope-c-PJLV-ikSuVsl-css,
 90 | .hope-ui-light .hope-c-PJLV-ijgzmFG-css {
 91 | 	background-color: rgba(255, 255, 255, .8) !important
 92 | 		/*标题栏、目录框和工具栏背景色和透明度(亮)*/
 93 | }
 94 | 
 95 | /*底部*/
 96 | .footer {
 97 | 	display: none !important
 98 | 		/*隐藏页脚(自行选择)*/
 99 | }
100 | 
101 | #footer {
102 | 	line-height: 50px;
103 | 	text-align: center;
104 | 	letter-spacing: 1px
105 | }
106 | 
107 | /*背景*/
108 | .hope-ui-dark {
109 | 	background-color: #555555 !important
110 | 		/*暗色模式背景色*/
111 | }
112 | 
113 | .hope-ui-dark div.hope-c-PJLV.hope-c-PJLV-iicyfOA-css>div>nav {
114 | 	background-color: transparent;
115 | }
116 | 
117 | .hope-ui-light {
118 | 	background-image: url(https://moe.jitsu.top/api/?sort=pc);
119 | 	background-position: center;
120 | 	background-attachment: fixed;
121 | 	background-size: cover;
122 | 	background-repeat: no-repeat;
123 | }
124 | 
125 | @media screen and (max-width:960px) {
126 | 	.hope-ui-light {
127 | 		background-image: url(https://moe.jitsu.top/api/?sort=mp);
128 | 	}
129 | }
130 | 


--------------------------------------------------------------------------------
/moe/style.css:
--------------------------------------------------------------------------------
  1 | /*全局主体设置*/
  2 | #root,
  3 | .App,
  4 | body,
  5 | html {
  6 | 	min-height: 70vh;
  7 | 	margin: 0;
  8 | 	padding: 0;
  9 | 	margin-top: 1% !important
 10 | }
 11 | 
 12 | .chakra-ui-light {
 13 | 	top: 0;
 14 | 	left: 0;
 15 | 	width: 100%;
 16 | 	height: 100vh;
 17 | }
 18 | 
 19 | /*图标和按钮*/	
 20 | .chakra-icon {
 21 | 	color: #ffb6c1 !important /*设置所有图标颜色*/
 22 | }
 23 | 
 24 | .chakra-stack button {
 25 | 	color: #fff !important /*设置按钮字体为白色*/
 26 | }
 27 | 
 28 | button.chakra-button.css-taj3dd {
 29 |     background-color: pink;
 30 | }
 31 | 
 32 | 
 33 | .chakra-ui-light .css-13c7rae {
 34 | 	color:#000 !important /*设置“更改语言”弹窗选项文本颜色*/
 35 | }
 36 | 
 37 | .chakra-ui-light button#menu-button-32,
 38 | .chakra-ui-light .css-ddkw9a button {
 39 | 	color: #000 !important
 40 | }
 41 | 
 42 | .chakra-ui-light p.chakra-text.css-18h3lje {
 43 |     color: dimgrey /*设置视频选项卡文本颜色*/
 44 | }
 45 | 
 46 | .css-1i5pcfv,
 47 | .css-1otlekh {
 48 | 	background-color: #ffb6c1 !important /*设置下载按钮颜色*/
 49 | }
 50 | 
 51 | .chakra-stack.css-zf9m6f {
 52 | 	background-color: #444444 !important /*暗色模式下底部工具栏背景色*/
 53 | }
 54 | 
 55 | button.chakra-button.css-19sxzqs,
 56 | button.chakra-button.css-1s44hm6,
 57 | button.chakra-button.css-squyht,
 58 | button.chakra-button.css-1ipdryz,
 59 | button.chakra-button.css-1462zul,
 60 | button.chakra-button.css-1468cli {
 61 | 	color: #000 !important /*设置页码块数字为黑色加强辨识度*/
 62 | }
 63 | 
 64 | /*顶部搜索框和公告栏背景*/
 65 | .css-1k8tczx {
 66 | 	background-color: rgba(255,255,255,.8) !important /*设置搜索框背景色*/
 67 | }
 68 | 
 69 | .chakra-ui-light .go2072408551 {
 70 | 	background-color: #fff !important
 71 | }
 72 | 
 73 | .chakra-ui-dark .go2072408551 {
 74 | 	background-color: #363636 !important /*公告板颜色修复*/
 75 | }
 76 | 
 77 | /*标题栏*/
 78 | .chakra-ui-light .chakra-breadcrumb {
 79 | 	background-color: rgba(255,255,255,.7) !important;
 80 | 	border-radius: 10px /*标题栏背景色和圆角*/
 81 | }
 82 | 
 83 | /*目录框*/
 84 | .chakra-ui-light .main-box,
 85 | .chakra-ui-light .readme-box {
 86 | 	background-color: rgba(255, 255, 255, .8) !important /*目录框背景色和透明度(亮)*/
 87 | }
 88 | 
 89 | .chakra-ui-dark .main-box,
 90 | .chakra-ui-dark .readme-box {
 91 | 	background-color: rgba(50, 50, 50, .6) !important /*目录框背景色和透明度(暗)*/
 92 | }
 93 | 
 94 | .main-box,
 95 | .readme-box {
 96 | 	border-radius: 12px !important
 97 | }
 98 | 
 99 | .readme-box {
100 | 	box-shadow: unset !important /*目录圆角和阴影*/
101 | }
102 | 
103 | /*底部*/
104 | .css-3m0ceo {
105 | 	display: none !important /*隐藏页脚(自行选择)*/
106 | }
107 | 
108 | footer {
109 | 	line-height: 50px;
110 | 	text-align: center;
111 | 	letter-spacing: 1px
112 | }
113 | 
114 | /*背景*/
115 | .chakra-ui-dark {
116 | 	background-color: #555555 !important /*暗色模式背景色*/
117 | }
118 | 
119 | .chakra-ui-light {
120 | 	background-image: url(https://moe.jitsu.top/api/?sort=pc);
121 | 	background-position: center;
122 | 	background-attachment: fixed;
123 | 	background-size: cover;
124 | 	background-repeat: no-repeat;
125 | }
126 | 
127 | @media screen and (max-width:960px) {
128 | 	.chakra-ui-light {
129 | 		background-image: url(https://moe.jitsu.top/api/?sort=mp);
130 | 		background-position: center;
131 | 		background-attachment: fixed;
132 | 		background-size: cover;
133 | 		background-repeat: no-repeat;
134 | 	}
135 | }
136 | 
137 | /*背景图URL可自行替换，默认的不保证长期可用（问就是没钱）*/
138 | 


--------------------------------------------------------------------------------