/* ==UserStyle==
@name			Focus matters
@namespace		https://github.com/Small-Ku/focus-matters
@version		0.4.8
@description	A simple user style for Matters
@author			Small-Ku <small_ku@outlook.com> (https://github.com/Small-Ku)
@license		MIT
@homepageURL	https://github.com/Small-Ku/focus-matters
@supportURL		https://github.com/Small-Ku/focus-matters/issues
@updateURL		https://raw.githubusercontent.com/Small-Ku/focus-matters/master/focus-matters.user.styl
@preprocessor	stylus

@var			select   layoutChange	 "擴大內容" [
					"focusMatters:專注內容",
					"mockOriginal:仿製原版",
					"off:關閉"
				]
@var			select   darkModeLook	 "暗色模式"	[
					"1:開啓",
					"2:跟隨系統",
					"0:關閉*"
				]
@var			checkbox lookOptimize	 "視覺優化"	 1
==/UserStyle== */

bg-color = #121212
text-color = #fff
primary-color = #0d6763
primary-color-light = #489590
primary-color-dark = #003c39
primary-color-text = #fff
second-color = #c0a46b
second-color-light = #f4d59a
second-color-dark = #8e753f
second-color-text = #000
red-color = #b00020

if darkModeLook == 1
	darkModeQuery = "(min-width: 0)"
if darkModeLook == 2
	darkModeQuery = "(prefers-color-scheme: dark)"

dmq768  = darkModeQuery + ' and (min-width: 768px)'
dmq1280 = darkModeQuery + ' and (min-width: 1280px)'
dmqpc   = darkModeQuery + ' and (pointer: coarse)'

@-moz-document domain("matters.news")
	// 視覺優化
	// Optimize appearance
	if lookOptimize
		// 優化圓角元素的視覺平衡
		// Optimize padding of round text elements with icon
		.tag.inline
			padding 0 .5rem 0 .35rem!important
		button.container>.content
			>.text-icon
				>.icon
					margin-left -.12rem !important
		aside > .container
			> .hasNoBorder .title .right 
				.icon
					margin-left -.12rem !important
				.text ~ .icon
					margin-left 0 !important
					margin-right -.24rem !important
			> .list > .list-item > .card
				> .tag
					margin-top .05rem
					+ .content
						margin-top .25rem
						> .cover
							margin-top .125rem
				> .container
					> .avatar
						margin-left -.125rem
					> .content
						margin-left .125rem
						> .description
							transform translateY(-.25rem)
					> .extra-button
						margin-right -.0625rem
						.hotarea
							height 1.25rem !important
							margin .125rem 0 !important
		.side-nav 
			.hasIcon.text-right
				.text
					padding 0 .1rem 0 .6rem!important
				&.white .text
					padding 0 0 0 .5rem!important

		// 優化標籤的視覺平衡與統一
		// Optimize visual balances and consistency of tags
		.tags-container .tag
			padding 0 .3rem 0 .5rem!important
			border-radius .75rem
			> *
				transform translateY(-.06rem) !important
		.search-tag-input
			transform translateY(.06rem) !important
			
		// 優化標籤列的 Scrollbar 與標籤間距
		// Optimize the scrollbar and tags in tag list (CSS Scrollbars Level 1 Working Draft)
		.tag-list > ul
			scrollbar-width thin
			scrollbar-color rgba(0,0,0,0) rgba(0,0,0,.0)
			transition scrollbar-color .2s cubic-bezier(.4, 0, .2, 1)
			&:hover
				scrollbar-color rgba(0,0,0,.05) rgba(0,0,0,.02)
			> li
				margin-right .5rem!important
			if darkModeLook > 0
				@media darkModeQuery
					scrollbar-color rgba(text-color,0) rgba(text-color,.0)
					&:hover
						scrollbar-color rgba(text-color,.08) rgba(text-color,.02)

		// 隱藏編輯器中 hr 元素的光標
		// Hide caret of hr element that with contenteditable 
		hr
			caret-color rgba(0,0,0,0)

		// 隱藏編輯器有圖片時的溢出
		// Hide overflow when editor have image inside
		.ql-editor
			overflow-x hidden
			
		// 讓總結不要黏着邊框
		// Let u-summary apart from the border
		.content .u-summary
			margin-left calc(1rem - 5px)
			padding-left .25rem
		
		// 爲開關按鈕換更好的動畫
		// Optimize switch with transform instead of box-shadow and left/right
		.switch input
			& + span
				overflow hidden
				&:before, &:after
					transition transform .1s cubic-bezier(.4, 0, .2, 1)!important
					will-change transform
				&:before
					display block
					position absolute
					left 0
					right 0
					top 0
					bottom 0
					width 100%
					height 100%
					z-index 0
					content ""
					background-color rgb(13, 103, 99)
					transform translateX(-2.3rem)
					border-radius .75rem
				&:after
					left auto!important
					right auto!important
					transform translateX(0.125rem)
					z-index 1
			&:checked + span
				box-shadow none!important
				&:before
					opacity 1
					transform translateX(0)
				&:after 
					transform translateX(1.125rem)

	// 擴大內容
	// Extend content in the web layout
	if layoutChange != off
		@media (min-width: 1280px)
			#__next > .l-container
				// 模仿原版佈局
				// Mock original layout
				if layoutChange == mockOriginal
					grid-template-columns 36px minmax( 0, 1fr ) 36px
				if layoutChange == focusMatters
					grid-template-columns 2rem minmax( 0, 1fr ) 2rem
				> main
					// 自創佈局
					// Focus Matters style
					if layoutChange == focusMatters
						& > article
							grid-column col-start 2 / span 9
						& > nav
							grid-column col-start 1 / span 1
						& > aside
							grid-column col-start 11 / span 2
							& input[type="search"]::placeholder
								font-size 0.75rem
								line-height 2rem
						& > aside, & > nav
							opacity 1
							transform translateX(0)
							transition opacity .25s, transform .3s
							transition-timing-function cubic-bezier(0.4, 0, 1, 1)

		// 修復自創佈局中的卡片層級
		// Fix z-index of poped cards when searching
		.tippy-popper
			z-index 200 !important

	// 暗黑模式
	// Dark Mode
	if darkModeLook > 0
		@media darkModeQuery
			// Global settings
			html
				background-color bg-color
				color rgba(text-color, .87)

			[contenteditable]
				caret-color primary-color-light

			// HTML components
			hr
				border-color rgba(text-color, .08) currentcolor currentcolor

			time
				color rgba(text-color, .6) !important

			p
				color rgba(text-color, .87)

			code, kbd, samp, pre
				background-color lighten(bg-color, 5%)

			form input[type="search"]
				color  rgba(text-color, .87) !important
				border-color lighten(bg-color, 4%) !important
				background-color lighten(bg-color, 4%) !important
				&:focus
					background-color primary-color-dark !important
					border-color primary-color !important
				&::-webkit-input-placeholder,
				&::placeholder
					color rgba(text-color, .6)

			// Custom color schemes

				// Black
			.black,
			.text-black
				color rgba(text-color, .87) !important

			.text-active-black:hover, .text-active-black:focus
				color bg-color

			.bg-half-black
				> .content > .hotarea
					background rgba(#fff, .5)
				&:hover, &:focus
					> .content > .hotarea
						background-color rgb(0, 0, 0)

				// Green
			.green,
			.text-green
				color primary-color-light !important

			.text-active-green
				&:hover, &:focus
					color primary-color-light !important

			.bg-green, .bg-green-lighter
				&, .green
					color rgba(primary-color-text, .87) !important

			.bg-green
				> .content > .hotarea
					background-color primary-color !important
				&:hover, &:focus
					> .content > .hotarea
						background-color lighten(primary-color, 4%) !important

			.bg-green-lighter
				&.slides
					background-color primary-color-dark !important
				> .content > .hotarea
					background-color primary-color-dark !important

			.bg-green-lighter, .bg-active-green-lighter
				&:hover, &:focus
					> .content > .hotarea
						background-color lighten(primary-color-dark, 4%) !important

			.bg-active-green
				&:hover, &:focus
					> .content > .hotarea
						color bg-color !important
						background-color primary-color-light !important

			.border-green
				> .content > .hotarea
					border-color primary-color-light !important

			.border-green-lighter
				> .content > .hotarea
					border-color lighten(primary-color-light, 5%) !important

				// Gold
			.gold
				color second-color

			.bg-gold
				&, .white
					color rgba(second-color-text, .87) !important
				> .content > .hotarea
					background-color second-color !important
				&:hover, &:focus
					> .content > .hotarea
						background-color  lighten(second-color, 4%) !important

			.border-gold
				> .content > .hotarea
					border-color second-color

				// Yellow
			.bg-yellow-lighter
				&.slides
					background-color mix(second-color-dark, bg-color, 20%) !important

				// Grey
			.grey
				color rgba(text-color, .6)

			.grey-light
				color rgba(text-color, .38)

			.grey-dark
				color rgba(text-color, .87)

			.grey-darker
				color text-color

			.bg-grey > .content > .hotarea
				background-color lighten(bg-color, 5%)

			.bg-grey-lighter:not(article)
				&:not(.container), & > .content > .hotarea
					background-color lighten(bg-color, 7%) !important

			.bg-active-grey-lighter, .bg-grey-lighter:not(article)
				&:hover, &:focus
					> .content > .hotarea
						background-color lighten(lighten(bg-color, 7%), 4%) !important
				&:not(.disabled):not(.container):not(.slides)
					&:hover, &:focus
						background-color lighten(lighten(bg-color, 7%), 4%) !important

			.bg-active-grey-lighter-active
				&:hover, &:focus
					> .content > .hotarea
						background-color lighten(lighten(bg-color, 7%), 5%) !important

			.border-grey > .content > .hotarea
				border-color lighten(bg-color, 5%)

			.border-grey-light > .content > .hotarea
				border-color lighten(bg-color, 6%)

			.border-grey-lighter
				&:not(.container)
					border-color lighten(bg-color, 7%)
				&.container > .content > .hotarea
					border-color lighten(bg-color, 7%)

				// White
			.white
				color bg-color

			.text-active-white
				&:hover, &:focus
					color bg-color !important

			.bg-white
				background-color rgba(0,0,0,0) !important
				&:not(.disabled):not(.container)
					&:hover, &:focus
						background-color rgba(#fff, 4%) !important

			.border-white > .content > .hotarea
				border-color rgba(#fff, 87%) !important

				// Red
			.red,
			.text-red
				color red-color !important

			.bg-red
				> .content > .hotarea
					background-color red-color !important
				&:hover, &:focus 
					> .content > .hotarea
						background-color lighten(red-color, 4%) !important

			.bg-active-red
				&:hover, &:focus 
					> .content > .hotarea
						background-color red-color !important

			.border-red
				> .content > .hotarea
					border-color red-color !important

			// Custom components in Matters

				// Links
			.u-link-green
				&, &:link, &:visited
					color primary-color
				&:hover, &:active, &:focus
					color lighten(primary-color, 4%)

				// Tooltip pop-up
			.tippy-tooltip
				&, &.dropdown-theme, &.tooltip-theme
					color rgba(text-color, .87) !important
					background-color lighten(bg-color, 5%) !important
				&[data-placement^="top"]
					.tippy-arrow
						border-top-color rgba(text-color, .87)
				&[data-placement^="bottom"]
					.tippy-arrow
						border-bottom-color rgba(text-color, .87)
				&[data-placement^="left"]
					.tippy-arrow
						border-left-color rgba(text-color, .87)
				&[data-placement^="right"]
					.tippy-arrow
						border-right-color rgba(text-color, .87)

				// Dialog
			.dialog
				color rgba(text-color, .87) !important
				.overlay
					background-color rgba(text-color, .25) !important
				[role=dialog] > * > .container
					background-color lighten(bg-color, 5%) !important
				
				// Dropdown
			.tippy-box[data-theme="dropdown"]
				color rgba(text-color, .87) !important
				background-color lighten(bg-color, 5%) !important

			.unread-icon
				&::after
					background-color primary-color-light !important

			.avatar:not(a) > img,
			.cover
				background-color lighten(bg-color, 7%) !important

			.description,
			.username,
			.error-code,
			.error-message
				color rgba(text-color, .6) !important

			.score,
			.empty
				color rgba(text-color, .38) !important

			.displayname
				.name-color-black &
					color rgba(text-color, .87) !important

				.name-color-white:not(.hasAvatar) &
					color rgba(bg-color, .87) !important

				.name-color-grey-darker &
					color rgba(text-color, .6) !important

			.switch input + span
				background-color darken(#fff, .6) !important
				&::after
					background-color darken(#fff, .13) !important
				&::before
					background-color primary-color !important

			.error-detail
				color rgb(200, 92, 65)
				background-color lighten(bg-color, 3%)
				border-color rgb(200, 92, 65)
			
			.icon > path[fill="#333"]
				fill rgba(text-color, .87) !important

			// Layout

			header
				border-bottom-color none !important
				&.solid-fixed
					border-bottom-color rgba(text-color, .08) !important
					background-color bg-color !important
				&.left, &.right 
					.published-article
						color rgba(text-color, .6)
				&.hasNoBorder
					border medium none !important

			aside
				border-color rgba(text-color, .08) !important

			.nav-bar,
			.toolbar,
			.topbar,
			nav.sticky
				border-bottom-color rgba(text-color, .08) !important
				background-color bg-color !important

			.toolbar-items, .toolbar-toggle-button
				svg
					border-radius 50%
					background-color lighten(bg-color, 4%) !important
					g
						stroke rgba(text-color, .6) !important

			footer
				color rgba(text-color, .38) !important
				.copyright
					color rgba(text-color, .12) !important

			// Misc
			
			.fixed-main .container[style^="background-image:"]
				background-color lighten(bg-color, 6%) !important
				background-blend-mode color
				filter saturate(2)
				button
					filter saturate(.5)
			
			main > article > [data-ptr="true"] > .info > .container
				background-color lighten(bg-color, 4%)
			
			.support-widget .donation
				background-color darken(second-color, 25%) !important

			.inactive-state
				color bg-color
				background-color lighten(bg-color, .3)

			.list.has-border > .list-item
				border-bottom-color rgba(text-color, .08) !important

			#nprogress .bar
				background-color primary-color-light !important

			.list .count
				color rgba(text-color, .6) !important

			.inline
				background-color rgba(text-color, .05) !important
				&:hover, &:focus
					background-color rgba(primary-color-light, .20) !important
				&.active
					background-color rgba(primary-color-light, .12) !important
					&:hover, &:focus
						background-color rgba(text-color, .07) !important

			.editor-title input
				background-color rgba(0,0,0,0)
				&::-webkit-input-placeholder,
				&::placeholder
					color rgba(text-color, .6) !important

			.u-content, #editor-article-container .ql-editor 
				figure
					figcaption
						color rgba(text-color, .6) !important
						textarea
							background-color rgba(0,0,0,0) !important
					&.audio .player
						background-color bg-color !important
						border-color rgba(text-color, .08) !important
						header .time
							color rgba(text-color, .6) !important
						footer .progress-bar > span
							background-color primary-color-light
					&[class*="embed"] > .iframe-container
						background-color lighten(bg-color, 7%) !important
				blockquote::before
					background-color second-color-dark !important
				a
					color primary-color-light !important
					&:hover, &:active, &:focus
						color lighten(primary-color-light, 10%) !important
				hr
					border-color rgba(text-color, .24) currentcolor !important

			.mention-container
				color rgba(text-color, .6) !important
				background-color bg-color !important

			.count
				color primary-color-light !important

			.appreciate-button.clap
				background-color bg-color !important
				border-color primary-color-light !important
				color primary-color-light !important
				.count
					color rgba(text-color, .87) !important					

			.received-count
				color rgba(text-color, .6) !important
				&.highlight
					color primary-color-light !important

			.avatar-list
				> *
					box-shadow 0 0 0 2px bg-color !important
				.appreciator-count
					color rgba(text-color, .87) !important
					background-color primary-color-dark !important
			    
			.latest-responses-switch
				color rgba(text-color, .6) !important

			.recent-searches ul li
				.key
					color rgba(text-color, .6) !important
					background-color lighten(lighten(bg-color, 7%), 5%) !important
					&:hover, &:focus
						background-color lighten(lighten(lighten(bg-color, 7%), 5%), 4%) !important

			.frequent-searches
				.key
					color primary-color-light !important
			
			.aggregate-section
				background-color bg-color !important
				
			li[role="tab"]
				color rgba(text-color, .6) !important
				&:hover, &:focus, &[aria-selected="true"]
					color rgba(text-color, .87) !important
				&[aria-selected="true"] .content
					border-bottom-color rgba(text-color, .87) !important
			
			article .user-profile
				&, & ~ div .list
					footer
						color rgba(text-color, .6) !important
						.count
							color rgba(text-color, .87) !important
				~ nav
					border-bottom-color rgba(text-color, .08) !important
				~ .info
					.num
						color rgba(text-color, .87) !important
					&, .username
						color rgba(text-color, .6) !important
					.description
						color rgba(text-color, .6) !important
			
			article nav::after
				background-image none !important
			
			.block
				border-top-color rgba(text-color, .08) !important

			.switch input
				& + span
					background-color lighten(bg-color, 4%) !important
					&::after
						background-color lighten(lighten(bg-color, 4%), 7%) !important

			.content.inactive
				color rgba(text-color, .6) !important

			.content .u-summary
				color rgba(text-color, 1) !important
				&::before
					filter brightness(0.5)

			.descendants
				li
					&:not(:last-child)
						article
							&::before
								background-color rgba(text-color, .08)
			
			.keepAside ~ aside
				section
					border-bottom-color rgba(text-color, .08)
					color rgba(text-color, .6) !important
					&.expanded
						color rgba(text-color, .87) !important
						.cover-intro
							color rgba(text-color, .6) !important
						.cover-image
							border-color rgba(0,0,0,0)
							&.selected
								border-color primary-color-light
						.tags-intro
							color rgba(text-color, .6) !important
						.tags-container .tag
							color rgba(text-color, .87) !important
							background-color primary-color-dark !important
						.search-tag-input
							background-color rgba(text-color, 0) !important
							color rgba(text-color, .87) !important
							&::-webkit-input-placeholder,
							&::placeholder
								color rgba(text-color, .6) !important
						.search-tag-item 
							.keyword, .count
								color rgba(text-color, .6) !important
						.intro
							color rgba(text-color, .6) !important

			.dialog .container form input, .dialog .container form textarea, input[type="search"]
				background-color rgba(text-color, .04) !important
				color rgba(text-color, .6) !important
				&:hover
					background-color rgba(text-color, .1) !important
					color rgba(text-color, .87) !important
				&:focus
					background-color rgba(text-color, .12) !important
					color rgba(text-color, .87) !important
				&::-webkit-input-placeholder,
				&::placeholder
					color rgba(text-color, .6) !important

			.ql-editor.ql-blank::before
				color rgba(text-color, .6) !important

			.ql-bubble
				.ql-stroke,
				.ql-stroke-miter
					fill none
					stroke rgba(text-color, .87)
				.ql-fill, .ql-stroke.ql-fill
					fill rgba(text-color, .87)
				.ql-empty
					fill none
				.ql-tooltip
					&:not(.ql-flip)
						.ql-tooltip-arrow
							border-bottom-color lighten(bg-color, 5%) !important
							&::before
								border-bottom-color rgba(text-color, .08) !important
					&.ql-flip
						.ql-tooltip-arrow
							border-top-color lighten(bg-color, 5%) !important
							&::before
								border-top-color rgba(text-color, .08) !important
				
				.ql-tooltip-editor
					input[type="text"]
						color rgba(text-color, .87) !important
				
				.ql-toolbar
					background-color lighten(bg-color, 5%) !important
					border-color rgba(text-color, .08) !important
					button
						&:hover, &:focus, &.ql-active
							color primary-color-light !important
							.ql-fill, .ql-stroke.ql-fill
								color primary-color-light !important

			#editor-article-container .spinner
				stroke rgba(text-color, .38)

			.toast.green
				background-color primary-color-dark !important

			.embed-clipboard
				background-color rgba(0,0,0,0) !important

			.dialog > [role="dialog"] > .container
				background-color lighten(bg-color, 5%) !important
				> header
					box-shadow rgba(text-color, .08) 0px 1px 0px 0px !important
				form
					background-color rgba(0,0,0,0) !important
					
			.avatar-wrap.multi .avatar
				border-color bg-color !important
			
			.content-wrap h4
				color rgba(text-color, .6) !important
				a 
					color rgba(text-color, .87) !important
			
			.highlight
				color primary-color-light !important
				
			.error .image img[src$=".svg"][src^="/_next/static"]
				mix-blend-mode soft-light
			
			.splash-screen
				background-color bg-color !important
			
			.slides
				li > .container
					background-color rgba(text-color, .04)
				&.bg-green-lighter
					li > .card.bg-white
						background-color bg-color !important
						> .container
							color rgba(text-color, .87) !important
						&:not(.disabled):not(.container)
							&:hover, &:focus
								background-color lighten(bg-color, 4%) !important
			
			.side-drawer-nav > [role="dialog"] > nav
				background-color lighten(bg-color, 5%) !important
				
			body
				overflow-x hidden

		@media dmq768
			article
				border-left-color rgba(text-color, .08) !important
				border-right-color rgba(text-color, .08) !important
				&.bg-grey-lighter
					background-color bg-color !important
					
			.appreciate-button.clap
				&:hover, &:focus
					background-color lighten(bg-color, 4%) !important
					
			body
				overflow-x auto

		@media dmq1280
			aside
				border none !important

		@media dmqpc
			.ql-bubble .ql-toolbar .ql-bubble .ql-toolbar button:hover:not(.ql-active)
				color rgba(text-color, .87) !important
				.ql-fill, .ql-stroke.ql-fill
					fill rgba(text-color, .87) !important
				.ql-stroke, .ql-stroke-miter
					stroke rgba(text-color, .87) !important

@-moz-document url("https://matters.news/help")
	if darkModeLook > 0
		@media darkModeQuery
			article ul li + li
				border-top-color bg-color !important

@-moz-document regexp("https:\/\/matters\.news\/about\/?")
	if darkModeLook > 0
		@media darkModeQuery
			.reports.is-draggable
				li > a[href]
					background-color lighten(bg-color, 4%) !important
			.ilusCity
				filter saturate(200%) brightness(1.5)
			.team, .intro
				.l-container
					.intro p
						color second-color-light !important
					&:not(.community) img
						filter invert(90%) hue-rotate(180deg) brightness(110%)
					&.feature
						background-color primary-color-dark !important
				
@-moz-document regexp("https:\/\/matters\.news\/migration\/?")
	if darkModeLook > 0
		@media darkModeQuery
			.intro
				background-blend-mode multiply
				background-color primary-color-dark !important
			#steps .step
				>img
					filter invert(92.9%) hue-rotate(185deg) saturate(125%)
				>.avatar
					background-color lighten(bg-color, 4%) !important
			.intro-wrap, .banner
				color rgba(text-color, .87)
				background-blend-mode multiply
			.banner .title
					color primary-color-light !important

@-moz-document regexp("https:\/\/matters\.news\/(about|migration)\/?")
	if darkModeLook > 0
		@media darkModeQuery
			.intro-wrap, .banner
				background-color primary-color-dark !important
					
			.reports .item a
				background-color lighten(bg-color, 5%) !important
				&:hover, &:focus
					background-color mix(bg-color, primary-color-light, 87%) !important
					
			footer
				background-color lighten(bg-color, 5%) !important
				input[type="email"]
					color  rgba(text-color, .87) !important
					border-color lighten(lighten(bg-color, 4%), 7%) !important
					background-color lighten(bg-color, 4%) !important
					&::-webkit-input-placeholder,
					&::placeholder
						color rgba(text-color, .6)

@-moz-document regexp("https:\/\/matters\.news\/@.+\/((?!comments|followe[re]s).+)")
	// 自創佈局
	// Focus Matters style
	if layoutChange == focusMatters
		@media (min-width: 1280px)
			#__next > .l-container > main
				// 隱藏導航欄與側邊欄，滑鼠置於空白位置時浮現
				// Hide nav and aside with revealing with hover
				& > aside, & > nav
					opacity .1
					transition opacity .25s
					transition-timing-function cubic-bezier(.4, 0, 1, 1)
					&:hover, &:focus-within
						opacity 1
						transition opacity .3s
						transition-timing-function cubic-bezier(0, 0, .2, 1)
				// 內縮右移側邊欄
				// Hide aside in the right
				& > aside
					position fixed
					right 0
					padding 2rem 1rem
					height 100%
					z-index 150 !important
					transform translateX(calc(100% - 10rem)) !important
					transition opacity .25s, transform .25s
					background-color #fff
					overflow-y auto
					box-sizing content-box
					& > *
						width 20rem
						flex-basis 20rem
					&:hover, &:focus-within
						transform translateX(0) !important
						transition opacity .3s, transform .3s
						border-left 1px solid rgba(#000, .08)
				// 擴大內容區域
				// Extend content area more
				& > article
					grid-column col-start 2/span 10
					
	// 暗黑模式
	// Dark Mode
	if layoutChange == focusMatters && darkModeLook > 0
		@media dmq1280
			#__next > .l-container > main > aside
				background-color bg-color !important
				&:hover, &:focus-within
					border-left 1px solid rgba(text-color, .08) !important