☰

Yasashii for WF

官方缺美工，咱就自己上！比WF官方主题好看亿点点~

  1. /* ==UserStyle==
  2. @name           Yasashii for WF
  3. @description    官方缺美工，咱就自己上！比WF官方主题好看亿点点~
  4. @namespace      github.com/openstyles/stylus
  5. @version        1.5
  6. @author         YYYYang
  7. @license 		MIT
  8. ==/UserStyle== */
  9. @-moz-document regexp("workflowy.com") {
  10. 	/*------------ BODY ------------- */
  11. 	:root {
  12. 		--bg-in: hsla(35, 36%, 96%, 1);
  13. 		/* 	内板色 */
  14. 		--bg-edge: hsla(34, 34%, 90%, 1);
  15. 		/* 边缘色 */
  16. 	}
  17.  
  18.  
  19. 	._theme-default {
  20.  
  21. 		.pageContainer {
  22. 			background: var(--bg-edge);
  23. 		}
  24.  
  25. 		.pageContainer .page {
  26. 			background: var(--bg-in);
  27. 		}
  28.  
  29. 		.header {
  30. 			background: var(--bg-edge);
  31. 			border-image: linear-gradient(to right, hsla(36, 38%, 73%, 1), rgba(66, 72, 75, 0) 65%) 1;
  32. 		}
  33.  
  34. 		.leftBar > div {
  35. 			background: var(--bg-edge);
  36. 		}
  37. 	}
  38.  
  39.  
  40. 	._theme-dark {
  41.  
  42. 		.header {
  43. 			/*------------ Header 渐进色底线 ------------- */
  44. 			border-image: linear-gradient(to right, rgb(66, 72, 75), 40%, rgba(66, 72, 75, 0) 65%) 1;
  45. 		}
  46. 	}
  47. }
  48.  
  49. @-moz-document domain("workflowy.com") {
  50. 	/*------------ TODO Checkbox ------------- */
  51. 	/* 让todo方块节点与bullet普通节点 竖直对齐 */
  52. 	.checkmark:not(.boardColumn):not(.boardCard):not(.dashboard-card) > .name {
  53. 		a.bullet {
  54. 			opacity: 0;
  55. 		}
  56.  
  57. 		> .prefix,
  58. 		> .content {
  59. 			left: -22px;
  60. 		}
  61. 	}
  62.  
  63. 	.checkmark:not(.boardColumn):not(.boardCard):not(.dashboard-card) > .name:hover {
  64. 		a.bullet {
  65. 			opacity: 1;
  66. 			transition: opacity 3s ease-in-out;
  67. 		}
  68.  
  69. 		> .prefix,
  70. 		> .content {
  71. 			-webkit-animation: slide-right 1.2s 1.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  72. 			animation: slide-right 0.2s 1.2s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  73. 		}
  74.  
  75. 		> .prefix label:hover {
  76. 			-webkit-animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
  77. 			animation: shake-bottom 1s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
  78. 		}
  79. 	}
  80.  
  81.  
  82. 	/* * ----------------------------------------
  83.     /* * animation slide-right
  84.     /* * ---------------------------------------- */
  85. 	@-webkit-keyframes slide-right {
  86. 		0% {
  87. 			-webkit-transform: translateX(0);
  88. 			transform: translateX(0);
  89. 		}
  90.  
  91. 		100% {
  92. 			-webkit-transform: translateX(22px);
  93. 			transform: translateX(22px);
  94. 		}
  95. 	}
  96.  
  97. 	@keyframes slide-right {
  98. 		0% {
  99. 			-webkit-transform: translateX(0);
  100. 			transform: translateX(0);
  101. 		}
  102.  
  103. 		100% {
  104. 			-webkit-transform: translateX(22px);
  105. 			transform: translateX(22px);
  106. 		}
  107. 	}
  108.  
  109.  
  110. 	/* * ----------------------------------------
  111.     /* * animation shake-bottom
  112.     /* * ---------------------------------------- */
  113. 	@-webkit-keyframes shake-bottom {
  114.  
  115. 		0%,
  116. 		100% {
  117. 			-webkit-transform: rotate(0deg);
  118. 			transform: rotate(0deg);
  119. 			-webkit-transform-origin: 50% 100%;
  120. 			transform-origin: 50% 100%;
  121. 		}
  122.  
  123. 		10% {
  124. 			-webkit-transform: rotate(2deg);
  125. 			transform: rotate(2deg);
  126. 		}
  127.  
  128. 		20%,
  129. 		40%,
  130. 		60% {
  131. 			-webkit-transform: rotate(-4deg);
  132. 			transform: rotate(-4deg);
  133. 		}
  134.  
  135. 		30%,
  136. 		50%,
  137. 		70% {
  138. 			-webkit-transform: rotate(4deg);
  139. 			transform: rotate(4deg);
  140. 		}
  141.  
  142. 		80% {
  143. 			-webkit-transform: rotate(-2deg);
  144. 			transform: rotate(-2deg);
  145. 		}
  146.  
  147. 		90% {
  148. 			-webkit-transform: rotate(2deg);
  149. 			transform: rotate(2deg);
  150. 		}
  151. 	}
  152.  
  153. 	@keyframes shake-bottom {
  154.  
  155. 		0%,
  156. 		100% {
  157. 			-webkit-transform: rotate(0deg);
  158. 			transform: rotate(0deg);
  159. 			-webkit-transform-origin: 50% 100%;
  160. 			transform-origin: 50% 100%;
  161. 		}
  162.  
  163. 		10% {
  164. 			-webkit-transform: rotate(2deg);
  165. 			transform: rotate(2deg);
  166. 		}
  167.  
  168. 		20%,
  169. 		40%,
  170. 		60% {
  171. 			-webkit-transform: rotate(-4deg);
  172. 			transform: rotate(-4deg);
  173. 		}
  174.  
  175. 		30%,
  176. 		50%,
  177. 		70% {
  178. 			-webkit-transform: rotate(4deg);
  179. 			transform: rotate(4deg);
  180. 		}
  181.  
  182. 		80% {
  183. 			-webkit-transform: rotate(-2deg);
  184. 			transform: rotate(-2deg);
  185. 		}
  186.  
  187. 		90% {
  188. 			-webkit-transform: rotate(2deg);
  189. 			transform: rotate(2deg);
  190. 		}
  191. 	}
  192. }
  193.  
  194. @-moz-document domain("workflowy.com") {
  195. 	/*------------ 字体 IBM Plex Mono ------------- */
  196. 	@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap');
  197.  
  198. 	.dialog-box,
  199. 	.breadcrumbs,
  200. 	.content,
  201. 	.MobileBreadcrumbs {
  202. 		font-family: 'IBM Plex Mono', monospace !important;
  203. 	}
  204. }
  205.  
  206. @-moz-document domain("workflowy.com") {
  207. 	/*------------ Backlink 双链索引 ------------- */
  208. 	:root {
  209. 		--referencesBG: hsla(201, 13%, 15%, 1.00);
  210. 	}
  211.  
  212. 	.references.boardCard {
  213. 		padding-top: 1px;
  214. 		border-radius: 10px;
  215. 	}
  216.  
  217. 	._theme-dark .references.boardCard {
  218. 		background: var(--referencesBG);
  219. 		border: 1px solid hsla(203, 5%, 28%, 1.00);
  220. 	}
  221. }
  222.  
  223.  
  224.  
  225.  
  226.  
  227. @-moz-document domain("workflowy.com") {
  228. 	/*------------ Board Kanban 看板视图 放大视野 ------------- */
  229. 	.board {
  230. 		/* 	zoom: 0.8; */
  231. 		zoom: 0.94;
  232. 	}
  233. }
  234.  
  235. @-moz-document domain("workflowy.com") {
  236. 	/*------------ Hover Cursor 鼠标悬停在链接跳转时的光标样式  ↔ + ↗ ------------- */
  237. 	/* 	cursor: cell; */
  238. 	/* 外站超链接 */
  239. 	.contentLink:hover {
  240. 		cursor: alias;
  241. 		/* ↗  */
  242. 	}
  243.  
  244. 	/* 站内链接 */
  245. 	.contentLink[href^="https://beta.workflowy.com"]:hover,
  246. 	.contentLink[href^="https://workflowy.com"]:hover {
  247. 		cursor: ne-resize;
  248. 		/* ↔  */
  249. 	}
  250. }
  251.  
  252.  
  253. @-moz-document domain("workflowy.com") {
  254. 	/*------------ Underline 下划线 黄线 ------------- */
  255. 	u {
  256. 		text-decoration: none !important;
  257. 		background: linear-gradient(#ffffff00 70%, #FFCF02 5%);
  258. 		/* 		padding-bottom: 2px; */
  259. 		transition: background-color 0.5s ease-in-out, height 0.5s ease-in-out;
  260. 	}
  261.  
  262. 	/* 鼠标悬停阴影 */
  263. 	u:hover {
  264. 		background-color: #8686865e;
  265. 		border-radius: 4px 4px 0 0;
  266. 	}
  267. }
  268.  
  269. @-moz-document regexp("workflowy.com") {
  270. 	/*------------ HyperLink 超链接 ------------- */
  271. 	.innerContentContainer:has( a.contentLink) {
  272. 		/* 		display: flex; */
  273. 		/* 		flex-wrap: wrap; */
  274. 		/* 				align-items: center; */
  275. 		position: relative;
  276. 	}
  277.  
  278. 	a.contentLink {
  279.  
  280. 		font-size: 12px;
  281. 		cursor: pointer;
  282. 		text-decoration: none !important;
  283. 		padding: 0 8px 0 0px;
  284. 		opacity: 0.7;
  285.  
  286. 		max-width: 300px;
  287. 		white-space: nowrap;
  288. 		overflow: hidden;
  289. 		text-overflow: ellipsis;
  290. 		/* 	position: relative; */
  291. 		/* 	color: #4B71FA; */
  292. 		/* 	margin: 0 0px; */
  293. 		/* 	background: linear-gradient(#ffffff00 95%, #92C0F6 10%); */
  294. 		/* 			border-radius: 6px; */
  295. 		/* 	flex-shrink: 1; */
  296. 		/*  line-height: 1.5; */
  297. 		/* 根据实际设计调整，确保垂直居中 */
  298. 		/* 	display: inline-block; */
  299. 		/* 	display: block; */
  300. 		/* 保证元素是块级或行内块状，支持溢出处理 */
  301. 	}
  302.  
  303. 	a.contentLink:hover {
  304. 		color: #5DA7FD;
  305. 		opacity: 1;
  306. 		/* 				border: 1px solid #92C0F6; */
  307. 		/* 				border: 1px solid transparent; */
  308. 		border-bottom: 1px solid transparent;
  309. 		/* 		padding-bottom: 4px; */
  310. 		/* 		margin-bottom: 4px; */
  311. 		background: linear-gradient(#ffffff00 90%, #92C0F6 5%);
  312. 		transition: opacity 0.5s ease-in-out, background 0.3s ease-in-out;
  313. 	}
  314.  
  315. 	a.contentLink:before {
  316. 		content: '[🔗';
  317. 		/* 						position: absolute; */
  318. 		/* 			left: -23px; */
  319. 	}
  320.  
  321. 	a.contentLink:after {
  322. 		content: ' ]';
  323. 		/* 		position: absolute; */
  324. 		/* 		right: 0; */
  325. 		/* 				margin-left: 4px; */
  326. 		/* 				padding-left: 4px; */
  327. 	}
  328. }
  329.  
  330. /* } */
  331. @-moz-document domain("workflowy.com") {
  332. 	/*------------ 代码块 ------------- */
  333. 	:root {
  334. 		--background-alt-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23000000' fill-opacity='0.16' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  335. 		--background-alt-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='4' height='4' viewBox='0 0 4 4'%3E%3Cpath fill='%23ffffff' fill-opacity='0.16' d='M1 3h1v1H1V3zm2-2h1v1H3V1z'%3E%3C/path%3E%3C/svg%3E");
  336.  
  337. 		--code-background-light: var(--background-alt-light);
  338. 		--code-background-dark: var(--background-alt-dark);
  339.  
  340. 		--background-light-border: #E0E0E0;
  341. 		--background-dark-border: #767272;
  342. 	}
  343.  
  344. 	._theme-default .code-block > .name > .content {
  345. 		background: var(--code-background-light);
  346. 		border: 2px dashed var(--background-light-border);
  347. 	}
  348.  
  349. 	._theme-dark .code-block > .name > .content {
  350. 		background: var(--code-background-dark);
  351. 		border: 2px dashed var(--background-dark-border);
  352. 	}
  353. }
  354.  
  355.  
  356.  
  357. @-moz-document domain("workflowy.com") {
  358. 	/*------------ Quote 引用块 ------------- */
  359. 	:root {
  360. 		/* 			--quote-bg-light: 	 */
  361. 		/* 		--quote-bg-dark: #767272; */
  362. 	}
  363.  
  364. 	._theme-default {
  365.  
  366. 		.quote-block > .name > .content {
  367.  
  368. 			/* 			border-left-width: 4px; */
  369. 			/* padding: unset; */
  370. 			padding: 1px;
  371. 			/* 		padding-top: 0px; */
  372. 			background: #086DDD21;
  373. 			background: linear-gradient(135deg, #086DDD21, #FFFFFF);
  374. 			border-top-left-radius: 8px;
  375. 			border-bottom-left-radius: 8px;
  376.  
  377.  
  378. 			> .innerContentContainer {
  379. 				border-width: 3px;
  380. 				border-radius: 4px;
  381. 				border-left-color: #086DDD;
  382. 				/* 			border-left: none; */
  383. 			}
  384. 		}
  385.  
  386. 		.quote-block > .name > .content:after {
  387. 			content: "";
  388. 			position: absolute;
  389. 			top: auto;
  390. 			right: 0;
  391. 			bottom: 0;
  392. 			left: auto;
  393. 			width: 1.5em;
  394. 			height: 1.5em;
  395. 			background: linear-gradient(to bottom right, #086DDD21, 50%, #FFFFFF 50%);
  396. 			-webkit-backdrop-filter: blur(2.5px);
  397. 			backdrop-filter: blur(2.5px);
  398. 			transition: all 0.2s ease-in-out;
  399. 			box-shadow: -4px -1px 2px 0px rgba(0, 0, 0, 0.2);
  400. 		}
  401.  
  402. 		.quote-block > .name > .content:hover:after {
  403. 			width: 0;
  404. 			height: 0;
  405. 		}
  406. 	}
  407.  
  408. 	._theme-dark .quote-block > .name > .content {
  409. 		/* 		background: var(--quote-bg-dark); */
  410. 		/* 		border: 2px dashed var(--background-dark-border); */
  411. 	}
  412. }
  413.  
  414.  
  415. @-moz-document domain("workflowy.com") {
  416. 	/*------------ Tag 标签 ------------- */
  417. 	.contentTag {
  418. 		padding: 0 6px !important;
  419. 		border-radius: 12px !important;
  420. 		font-size: 0.8em;
  421. 		border: 0.1em solid #FFFFFF8C;
  422. 		/* 				font-style: italic; */
  423. 		/* 				line-height: 10px; */
  424. 		/* 修正添加tag后 多出来的细微1px行高差 */
  425. 		span.contentTagText {
  426. 			text-decoration: none !important;
  427. 			/* 			color: #2D27279C; */
  428. 			/* 			color: var(--wf-yellow-200); */
  429. 		}
  430.  
  431. 		> .contentTagNub {
  432. 			/* 			position: absolute;
  433. 			left: -15px; */
  434. 			/* 			display: none; */
  435. 		}
  436. 	}
  437.  
  438. 	.contentTag:hover {
  439. 		/* 				filter: brightness(125%) !important; */
  440. 		transition: 200ms ease-in-out;
  441. 		/* 				cursor: cell; */
  442. 		font-size: 1em;
  443. 		/* 		padding-right: 16px; */
  444. 	}
  445.  
  446. 	/*tag 标签颜色  */
  447. 	/* 	.contentTag[data-val="#purple"] */
  448. }
  449.  
  450.  
  451. @-moz-document domain("workflowy.com") {
  452. 	/*------------ Highlight 高亮配色 ------------- */
  453. 	:root {
  454. 		--hl-t-color-red: #CD0F2F;
  455. 		--hl-bg-color-red: #FFE9E9;
  456.  
  457. 		--hl-t-color-orange: #D16C0F;
  458. 		--hl-bg-color-orange: #FFEDCF;
  459.  
  460. 		--hl-t-color-yellow: #7E5308;
  461. 		--hl-bg-color-yellow: #FEF189;
  462.  
  463. 		--hl-t-color-green: #146540;
  464. 		--hl-bg-color-green: #E4F3ED;
  465.  
  466. 		--hl-t-color-teal: #06627D;
  467. 		--hl-bg-color-teal: #DCF3FE;
  468.  
  469. 		--hl-t-color-sky: #15AAF9;
  470. 		--hl-bg-color-sky: #EAF8FF;
  471.  
  472. 		--hl-t-color-blue: #0452B7;
  473. 		--hl-bg-color-blue: #EBEFFE;
  474.  
  475. 		--hl-t-color-purple: #5E3AC6;
  476. 		--hl-bg-color-purple: #F5EEFF;
  477.  
  478. 		--hl-t-color-pink: #F671C1;
  479. 		--hl-bg-color-pink: #FEEBF7;
  480.  
  481. 		--hl-t-color-gray: #A4A4A4;
  482. 		--hl-bg-color-gray: #F1F1F1;
  483. 	}
  484.  
  485. 	.colored {
  486. 		padding: 0 4px !important;
  487. 		margin: 0 1px;
  488. 		border-radius: 2px;
  489. 	}
  490.  
  491. 	.colored.bc-red {
  492. 		color: var(--hl-t-color-red);
  493. 		background-color: var(--hl-bg-color-red);
  494. 		border-left: 1px solid var(--hl-t-color-red);
  495. 		border-right: 1px solid var(--hl-t-color-red);
  496. 	}
  497.  
  498. 	.colored.bc-orange {
  499. 		color: var(--hl-t-color-orange);
  500. 		background-color: var(--hl-bg-color-orange);
  501. 		border-left: 1px solid var(--hl-t-color-orange);
  502. 		border-right: 1px solid var(--hl-t-color-orange);
  503. 	}
  504.  
  505. 	.colored.bc-yellow {
  506. 		color: var(--hl-t-color-yellow);
  507. 		background-color: var(--hl-bg-color-yellow);
  508. 		border-left: 1px solid var(--hl-t-color-yellow);
  509. 		border-right: 1px solid var(--hl-t-color-yellow);
  510. 	}
  511.  
  512. 	.colored.bc-green {
  513. 		color: var(--hl-t-color-green);
  514. 		background-color: var(--hl-bg-color-green);
  515. 		border-left: 1px solid var(--hl-t-color-green);
  516. 		border-right: 1px solid var(--hl-t-color-green);
  517. 	}
  518.  
  519. 	.colored.bc-teal {
  520. 		color: var(--hl-t-color-teal);
  521. 		background-color: var(--hl-bg-color-teal);
  522. 		border-left: 1px solid var(--hl-t-color-teal);
  523. 		border-right: 1px solid var(--hl-t-color-teal);
  524. 	}
  525.  
  526. 	.colored.bc-sky {
  527. 		color: var(--hl-t-color-sky);
  528. 		background-color: var(--hl-bg-color-sky);
  529. 		border-left: 1px solid var(--hl-t-color-sky);
  530. 		border-right: 1px solid var(--hl-t-color-sky);
  531. 	}
  532.  
  533. 	.colored.bc-blue {
  534. 		color: var(--hl-t-color-blue);
  535. 		background-color: var(--hl-bg-color-blue);
  536. 		border-left: 1px solid var(--hl-t-color-blue);
  537. 		border-right: 1px solid var(--hl-t-color-blue);
  538. 	}
  539.  
  540. 	.colored.bc-purple {
  541. 		color: var(--hl-t-color-purple);
  542. 		background-color: var(--hl-bg-color-purple);
  543. 		border-left: 1px solid var(--hl-t-color-purple);
  544. 		border-right: 1px solid var(--hl-t-color-purple);
  545. 	}
  546.  
  547. 	.colored.bc-pink {
  548. 		color: var(--hl-t-color-pink);
  549. 		background-color: var(--hl-bg-color-pink);
  550. 		border-left: 1px solid var(--hl-t-color-pink);
  551. 		border-right: 1px solid var(--hl-t-color-pink);
  552. 	}
  553.  
  554. 	.colored.bc-gray {
  555. 		color: var(--hl-t-color-gray);
  556. 		background-color: var(--hl-bg-color-gray);
  557. 		border-left: 1px solid var(--hl-t-color-gray);
  558. 		border-right: 1px solid var(--hl-t-color-gray);
  559. 	}
  560. }
  561.  
  562.  
  563. @-moz-document domain("workflowy.com") {
  564. 	/*------------ Kanban 看板视图 ------------- */
  565. 	/* 看板边距微调 视野更宽 */
  566. 	._theme-default .page:has( > .root.board) {
  567.  
  568. 		padding-top: 20px;
  569. 		padding-left: 40px;
  570.  
  571. 		.board {
  572.  
  573. 			/* 			padding: 20px 0; */
  574. 			> .children {
  575.  
  576. 				/* 	padding: 10px; */
  577. 				/* border-radius: 5%; */
  578. 				.boardColumn {
  579.  
  580. 					/* overflow: hidden; */
  581. 					background-color: #F8F9FB;
  582. 					margin-right: 10px;
  583. 					/* padding-top: 14px; */
  584. 					border-radius: 12px;
  585.  
  586.  
  587. 					> .name {
  588. 						background-color: #FFFFFF;
  589. 						border: 1px solid #C7CDD7;
  590. 						border-radius: 8px;
  591. 						margin: 12px 9px;
  592. 						padding: 0px 0px 6px 20px;
  593. 						font-size: 20px;
  594. 						font-weight: normal;
  595. 						box-shadow: 3px 3px 6px 0px rgba(0, 0, 0, .1);
  596. 						position: relative;
  597. 						> .content {
  598. 							line-height: 26px;
  599. 						}
  600.  
  601. 						a.bullet {
  602. 							/* 	⊙ Zoom指示器 */
  603. 							top: 9px !important;
  604. 							left: calc(100% - 56px) !important;
  605. 						}
  606. 						a.bullet:hover {
  607. 							color: rgba(5, 98, 174, 0.8);
  608. 						}
  609. 						> a.bullet::before {
  610. 							/* 大圈 */
  611. 							zoom: 0.86;
  612. 						}
  613. 						> a.bullet::after {
  614. 							/* 中圈 */
  615. 						}
  616. 						> a.bullet svg {
  617. 							/* 小点 */
  618. 						}
  619.  
  620.  
  621. 						/* 看板标题的折叠箭头 */
  622. 						> a.expand > div > svg {
  623. 							position: relative;
  624. 							left: -21px;
  625. 							top: -10px;
  626. 							color: rgb(86, 156, 214);
  627. 							/* 	width: 28px; */
  628. 							/* 	height: 28px; */
  629. 						}
  630. 						> a.expand > div > svg:hover {
  631. 							width: 36px;
  632. 							height: 36px;
  633. 							transition: width 0.2s ease-in-out;
  634. 						}
  635.  
  636.  
  637. 						/* 汉堡菜单按钮 ⁝ */
  638. 						> .itemMenu svg {
  639. 							/* 														position: relative; */
  640. 							position: absolute;
  641. 							right: 22px;
  642. 							top: -7px;
  643. 							width: 32px;
  644. 							height: 17px;
  645. 							transform: rotateZ(90deg);
  646. 							color: rgb(5, 98, 174);
  647. 							background-color: rgba(110, 158, 188, .12);
  648. 						}
  649. 					}
  650.  
  651. 					/* 看板卡片 */
  652. 					/* .children .boardColumn.header2 */
  653. 					.children .boardCard {
  654.  
  655. 						background-color: #FFFFFF;
  656. 						/* 	border-radius: 0 10px 10px 0; */
  657. 						border-radius: 10px;
  658.  
  659. 						/* BUG 后面的(…) 会被遮挡 */
  660. 						margin-left: -1px !important;
  661. 						margin-right: 9px !important;
  662.  
  663. 						/* 	看板文字内容边距尽量缩小??? */
  664. 						> .name {
  665. 							> .content {
  666. 								padding-top: 0px;
  667. 								/* padding-right: 0px; */
  668. 								/* border-radius: 4px; */
  669. 							}
  670.  
  671. 							> a.expand > div > svg {
  672. 								position: relative;
  673. 								left: 12px;
  674. 								top: -4px;
  675. 								color: rgb(86, 156, 214);
  676. 							}
  677. 							> a.expand > div > svg:hover {
  678. 								width: 32px;
  679. 								height: 32px;
  680. 								transition: width 0.2s ease-in-out;
  681. 							}
  682. 						}
  683. 					}
  684.  
  685. 					::-webkit-scrollbar {
  686. 						display: none;
  687. 					}
  688. 				}
  689. 			}
  690. 		}
  691. 	}
  692.  
  693. 	/* 修复看板下 H1 H2 看板标题头 按钮偏移问题	 */
  694. 	.boardColumn.header1 > .name > a.expand,
  695. 	.boardColumn.header2 > .name > a.expand {
  696. 		top: 1em;
  697. 	}
  698.  
  699. 	.boardColumn.header1 > .name > .itemMenu,
  700. 	.boardColumn.header2 > .name > .itemMenu {
  701. 		top: 18px;
  702. 	}
  703.  
  704. 	/* 	Bullet视图下的 mini看板 */
  705. 	.page .root:not(.board) .board {
  706. 		.children {
  707. 			padding-bottom: 10px;
  708. 		}
  709.  
  710. 		::-webkit-scrollbar {
  711. 			display: none;
  712. 		}
  713. 	}
  714.  
  715. 	/* nameButtons  */
  716. 	/* 看板新增节点按钮 */
  717. 	/* 	.vertical-scrollable-container > div:not(.boardCard):last-child */
  718. 	/* 	.board .children > div.boardColumn + div:last-child:has( > div > svg[data-icon="plus"]) > div, */
  719. 	/* 	.boardColumn div:last-child:has( > svg[data-icon="plus"]) { */
  720. 	.boardColumn div:has( > svg[data-icon="plus"]) {
  721. 		font-weight: 550;
  722. 		text-transform: capitalize;
  723. 		color: #7D654873;
  724. 		/* 				background: #F2EDE6; */
  725. 		padding: 6px 8px calc(6px + 2px) 14px;
  726. 		border-radius: calc(8px * 0.8);
  727. 		margin: 0 10px 12px 0;
  728. 		/* 		margin-left: 10px; */
  729. 		/* 				box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.09), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), inset 0px calc(-1 * 2px) 0px 2px rgba(0, 0, 0, 0.15), inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2), 0px 4px 4px -5.6px rgba(0, 0, 0, 0.52), 0px 2px 4px -2.7px rgba(0, 0, 0, 0.22), 0px 2px 4px -1px rgba(0, 0, 0, 0.19); */
  730. 		box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.09), inset 0px calc(-1 * 2px) 0px 2px rgba(0, 0, 0, 0.07), 0px 2px 3px 0px rgba(0, 0, 0, 0.05);
  731. 		transition: 140ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
  732. 		transition: background 140ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
  733. 		/* 		opacity: 0.5; */
  734. 	}
  735.  
  736. 	.board .children > div.boardColumn + div:last-child:has( > div > svg[data-icon="plus"]) > div:hover,
  737. 	.boardColumn div:has( > svg[data-icon="plus"]):hover {
  738. 		color: hsla(36, 38%, 98%, 1);
  739. 		background: hsl( calc(31 - 3), calc(23% * 1.33), calc(50% * 1.19));
  740. 		box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.12), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.19), inset 0px calc(-1 * 2px) 0px 2px rgba(0, 0, 0, 0.15), inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2), 0px 4px 4px -5.6px rgba(0, 0, 0, 0.52), 0px 2px 4px -2.7px rgba(0, 0, 0, 0.27), 0px 2px 6px -1px rgba(0, 0, 0, 0.24);
  741. 	}
  742.  
  743. 	.board .children > div.boardColumn + div:last-child:has( > div > svg[data-icon="plus"]) > div:active,
  744. 	.boardColumn div:has( > svg[data-icon="plus"]):active {
  745. 		color: hsla(36, 38%, 98%, 1);
  746. 		background: hsl( calc(31 - 3), calc(23% * 1.33), calc(50% * 1.19));
  747. 		/* 		padding: calc(4px + 2px) 8px 6px 6px; */
  748. 		box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), inset 0px 0px 0px calc(1px + 2px) rgba(0, 0, 0, 0.09), inset 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(255, 255, 255, 0.6);
  749. 		transition: 140ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
  750. 	}
  751.  
  752. 	.boardColumn div:has( > svg[data-icon="plus"]):after {
  753. 		content: '+ 〔 新 增 节 点 〕';
  754. 		/* 		display: block; */
  755. 		position: relative;
  756. 		left: 5px;
  757. 	}
  758.  
  759. 	.boardColumn div > svg[data-icon="plus"] {
  760. 		display: none;
  761. 	}
  762.  
  763. 	.boardColumn > div.drop-line + div:not(.vertical-scrollable-container):last-child {
  764. 		margin-left: 10px;
  765. 	}
  766.  
  767. 	.board .children > div.boardColumn + div:last-child:has( > div > svg[data-icon="plus"]) > div {
  768. 		/* 		color: #7D6548; */
  769. 		/* 		background: #F2EDE6; */
  770. 		/* 		padding: 6px 8px calc(6px + 2px) 14px; */
  771. 		border-radius: calc(8px * 0.8);
  772. 		box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.09), inset 0px calc(-1 * 2px) 0px 2px rgba(0, 0, 0, 0.07), 0px 2px 3px 0px rgba(0, 0, 0, 0.05);
  773. 		transition: 140ms cubic-bezier(0.68, -0.55, 0.27, 1.55);
  774. 		transition: background 140ms cubic-bezier(0.45, 0.05, 0.55, 0.95);
  775. 	}
  776.  
  777. 	.contentEditablePlaceholder {
  778. 		/* Untitled 标题占位符 */
  779. 		top: 8px;
  780. 	}
  781. }
  782.  
  783. .addChildButton {
  784. 	/* 			font-weight: 550; */
  785. 	/* 		text-transform: capitalize; */
  786. 	/* 		color: #7D6548; */
  787. 	/* 		background: #F2EDE6; */
  788. 	/* 		padding: 6px 8px calc(6px + 2px) 14px; */
  789. 	padding: 2px 0px 4px 0px;
  790. 	/* 		padding-bottom: 30px; */
  791. 	/* 		width: 16px; */
  792. 	/* 		height: 19px; */
  793. 	border-radius: calc(8px * 0.8);
  794. 	/* 		margin: 0 10px 12px 0; */
  795. 	/* 		margin-left: 10px; */
  796. 	/* 		box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.09), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), inset 0px calc(-1 * 2px) 0px 2px rgba(0, 0, 0, 0.15), inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2), 0px 4px 4px -5.6px rgba(0, 0, 0, 0.52), 0px 2px 4px -2.7px rgba(0, 0, 0, 0.22), 0px 2px 4px -1px rgba(0, 0, 0, 0.19); */
  797. 	box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.09), inset 0px calc(-1 * 2px) 0px 2px rgba(0, 0, 0, 0.07), 0px 2px 3px 0px rgba(0, 0, 0, 0.05);
  798. 	/* 		transition: 140ms cubic-bezier(0.68, -0.55, 0.27, 1.55); */
  799. 	/* 		transition: background 140ms cubic-bezier(0.45, 0.05, 0.55, 0.95); */
  800. 	circle {
  801. 		display: none;
  802. 	}
  803. }
  804.  
  805.  
  806. /*  +++++++  */
  807. .addChildButton:hover {
  808. 	/* 			color: hsla(36, 38%, 98%, 1); */
  809. 	/* 		background: hsl( calc(31 - 3), calc(23% * 1.33), calc(50% * 1.19)); */
  810. 	box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.12), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.19), inset 0px calc(-1 * 2px) 0px 2px rgba(0, 0, 0, 0.15), inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2), 0px 4px 4px -5.6px rgba(0, 0, 0, 0.52), 0px 2px 4px -2.7px rgba(0, 0, 0, 0.27), 0px 2px 6px -1px rgba(0, 0, 0, 0.24);
  811. }
  812.  
  813. .addChildButton:active {
  814. 	/* 		opacity: 0.5; */
  815. 	/* 			color: hsla(36, 38%, 98%, 1); */
  816. 	background: hsl( calc(31 - 3), calc(23% * 1.33), calc(50% * 1.19));
  817. 	/* 		padding: calc(4px + 2px) 8px 6px 6px; */
  818. 	box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), inset 0px 0px 0px calc(1px + 2px) rgba(0, 0, 0, 0.09), inset 0px 2px 8px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 1px rgba(255, 255, 255, 0.6);
  819. 	/* 		transition: 140ms cubic-bezier(0.68, -0.55, 0.27, 1.55); */
  820. 	box-shadow: inset 0px 1px 0px 0px rgba(255, 255, 255, 0.09), inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), inset 0px calc(-1 * 2px) 0px 2px rgba(0, 0, 0, 0.15), inset 0px -2px 4px 0px rgba(0, 0, 0, 0.2), 0px 4px 4px -5.6px rgba(0, 0, 0, 0.52), 0px 2px 4px -2.7px rgba(0, 0, 0, 0.22), 0px 2px 4px -1px rgba(0, 0, 0, 0.19);
  821. 	/* 						color: #7D6548 !important; */
  822. 	background: #F2EDE6;
  823. }
  824.  
  825.  
  826.  
  827.  
  828.  
  829.  
  830. @-moz-document domain("workflowy.com") {
  831. 	/*------------ 🥚小彩蛋🥚 ------------- */
  832. 	/* 当节点数用量超额时 忽视并屏蔽超额提示板 以此获得无限量的节点额度 */
  833. 	div#app > .pageContainer > div:last-child:not(.page):has( > div > button > span) {
  834. 		display: none;
  835. 	}
  836.  
  837. 	div#app > div.dialog-backdrop:has( > div.dialog-box > button.primary) {
  838. 		display: none;
  839. 	}
  840. }

欢迎访问Greasy Fork镜像

土豆服务器，请按需使用

镜像地址随时可能被墙，建议加群获取最新地址

加入Q群

QingJ © 2025

镜像随时可能失效，请加Q群300939539或关注我们的公众号极客氢云获取最新地址