@dt-frames/ui 2.0.24 → 4.0.1

package/dist/es/layout/styles/index.scss

@@ -0,0 +1,871 @@
+@import './css/default.css';
+@import './css/dark.css';
+@import './css/uncss.css';
+@import './css/animation.css';
+
+$namespace: 'dt';
+
+@mixin menu-item-active {
+	color: var(--menu-item-active-color);
+	text-decoration: none;
+	cursor: pointer;
+	background: var(--menu-item-active-background-color);
+}
+
+@mixin menu-item {
+	position: relative;
+	display: flex;
+	align-items: center;
+	height: var(--menu-item-height);
+	padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
+	margin: 0 var(--menu-item-margin-x) var(--menu-item-margin-y) var(--menu-item-margin-x);
+	font-size: var(--menu-font-size);
+	color: var(--menu-item-color);
+	white-space: nowrap;
+	text-decoration: none;
+	cursor: pointer;
+	list-style: none;
+	background: var(--menu-item-background-color);
+	border: none;
+	border-radius: var(--menu-item-radius);
+	transition:
+		background 0.15s ease,
+		color 0.15s ease,
+		padding 0.15s ease,
+		border-color 0.15s ease;
+
+	&.is-disabled {
+		cursor: not-allowed;
+		background: none !important;
+		opacity: 0.25;
+	}
+
+	.#{$namespace}-menu__icon {
+		transition: transform 0.25s;
+	}
+
+	&:hover {
+		.#{$namespace}-menu__icon {
+			transform: scale(1.2);
+		}
+	}
+
+	&:hover,
+	&:focus {
+		outline: none;
+	}
+
+	* {
+		vertical-align: bottom;
+	}
+}
+
+@mixin menu-title {
+	max-width: var(--menu-title-width);
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	opacity: 1;
+}
+
+html.invert-mode {
+	filter: invert(1);
+}
+
+html.grayscale-mode {
+	filter: grayscale(1);
+}
+
+/* 滚动条美化 */
+::-webkit-scrollbar {
+	width: 7px;
+	height: 8px;
+}
+
+::-webkit-scrollbar-track {
+	background-color: rgb(0 0 0 / 5%);
+}
+
+::-webkit-scrollbar-thumb {
+	background-color: rgb(144 147 153 / 30%);
+	border-radius: 2px;
+	box-shadow: inset 0 0 6px rgb(0 0 0 / 20%);
+}
+
+::-webkit-scrollbar-thumb:hover {
+	background-color: #b6b7b9;
+}
+
+.bg-primary {
+	background-color: hsl(var(--primary));
+}
+
+.bg-sidebar {
+	background-color: hsl(var(--sidebar));
+}
+
+.bg-sidebar-deep {
+	background-color: hsl(var(--sidebar-deep));
+}
+
+.is-menu-align {
+	justify-content: var(--menu-align, start);
+}
+
+.#{$namespace}-menu__popup-container,
+.#{$namespace}-menu {
+	--menu-title-width: 140px;
+	--menu-item-icon-size: 16px;
+	--menu-item-height: 38px;
+	--menu-item-padding-y: 21px;
+	--menu-item-padding-x: 12px;
+	--menu-item-popup-padding-y: 20px;
+	--menu-item-popup-padding-x: 12px;
+	--menu-item-margin-y: 2px;
+	--menu-item-margin-x: 0px;
+	--menu-item-collapse-padding-y: 23.5px;
+	--menu-item-collapse-padding-x: 0px;
+	--menu-item-collapse-margin-y: 4px;
+	--menu-item-collapse-margin-x: 0px;
+	--menu-item-radius: 0px;
+	--menu-item-indent: 16px;
+	--menu-font-size: 14px;
+
+	&.is-dark {
+		--menu-background-color: hsl(var(--menu));
+		--menu-item-background-color: var(--menu-background-color);
+		--menu-item-color: hsl(var(--foreground) / 80%);
+		--menu-item-hover-color: hsl(var(--accent-foreground));
+		--menu-item-hover-background-color: hsl(var(--accent));
+		--menu-item-active-color: hsl(var(--accent-foreground));
+		--menu-item-active-background-color: hsl(var(--accent));
+		--menu-submenu-hover-color: hsl(var(--foreground));
+		--menu-submenu-hover-background-color: hsl(var(--accent));
+		--menu-submenu-active-color: hsl(var(--foreground));
+		--menu-submenu-active-background-color: transparent;
+		--menu-submenu-background-color: var(--menu-background-color);
+	}
+
+	&.is-light {
+		--menu-background-color: hsl(var(--menu));
+		--menu-item-background-color: var(--menu-background-color);
+		--menu-item-color: hsl(var(--foreground));
+		--menu-item-hover-color: var(--menu-item-color);
+		--menu-item-hover-background-color: hsl(var(--accent));
+		--menu-item-active-color: hsl(var(--primary));
+		--menu-item-active-background-color: hsl(var(--primary) / 15%);
+		--menu-submenu-hover-color: hsl(var(--primary));
+		--menu-submenu-hover-background-color: hsl(var(--accent));
+		--menu-submenu-active-color: hsl(var(--primary));
+		--menu-submenu-active-background-color: transparent;
+		--menu-submenu-background-color: var(--menu-background-color);
+	}
+
+	&.is-rounded {
+		--menu-item-margin-x: 8px;
+		--menu-item-collapse-margin-x: 6px;
+		--menu-item-radius: 8px;
+	}
+
+	&.is-horizontal:not(.is-rounded) {
+		--menu-item-height: 40px;
+		--menu-item-radius: 6px;
+	}
+
+	&.is-horizontal.is-rounded {
+		--menu-item-height: 40px;
+		--menu-item-radius: 6px;
+		--menu-item-padding-x: 12px;
+	}
+
+	&.is-horizontal {
+		--menu-item-padding-y: 0px;
+		--menu-item-padding-x: 10px;
+		--menu-item-margin-y: 0px;
+		--menu-item-margin-x: 1px;
+		--menu-background-color: transparent;
+
+		&.is-dark {
+			--menu-background-color: hsl(var(--menu));
+			--menu-item-hover-color: hsl(var(--accent-foreground));
+			--menu-item-hover-background-color: hsl(var(--accent));
+			--menu-item-active-color: hsl(var(--accent-foreground));
+			--menu-item-active-background-color: hsl(var(--accent));
+			--menu-submenu-active-color: hsl(var(--foreground));
+			--menu-submenu-active-background-color: hsl(var(--accent));
+			--menu-submenu-hover-color: hsl(var(--accent-foreground));
+			--menu-submenu-hover-background-color: hsl(var(--accent));
+		}
+
+		&.is-light {
+			--menu-background-color: hsl(var(--menu));
+			--menu-item-active-color: hsl(var(--primary));
+			--menu-item-active-background-color: hsl(var(--primary) / 15%);
+			--menu-item-hover-background-color: hsl(var(--accent));
+			--menu-item-hover-color: hsl(var(--primary));
+			--menu-submenu-active-color: hsl(var(--primary));
+			--menu-submenu-active-background-color: hsl(var(--primary) / 15%);
+			--menu-submenu-hover-color: hsl(var(--primary));
+			--menu-submenu-hover-background-color: hsl(var(--accent));
+		}
+	}
+}
+
+.#{$namespace}-sub-menu {
+	&.is-active > div:first-of-type {
+		i,
+		span {
+			color: var(--menu-item-active-color);
+		}
+	}
+}
+
+.#{$namespace}-menu {
+	position: relative;
+	box-sizing: border-box;
+	padding-left: 0;
+	margin: 0;
+	list-style: none;
+	background: hsl(var(--menu-background-color));
+
+	// 垂直菜单
+	&.is-vertical {
+		&:not(.#{$namespace}-menu.is-collapse) {
+			& .#{$namespace}-menu-item,
+			& .#{$namespace}-sub-menu-content,
+			& .#{$namespace}-menu-item-group__title {
+				padding-left: calc(
+					var(--menu-item-indent) + var(--menu-level) * var(--menu-item-indent)
+				);
+				white-space: nowrap;
+			}
+
+			& > .#{$namespace}-sub-menu {
+				& > .#{$namespace}-menu {
+					& > .#{$namespace}-menu-item {
+						padding-left: calc(
+							0px + var(--menu-item-indent) + var(--menu-level) *
+								var(--menu-item-indent)
+						);
+					}
+				}
+
+				& > .#{$namespace}-sub-menu-content {
+					padding-left: calc(var(--menu-item-indent) - 8px);
+				}
+			}
+			& > .#{$namespace}-menu-item {
+				padding-left: calc(var(--menu-item-indent) - 8px);
+			}
+		}
+	}
+
+	&.is-horizontal {
+		display: flex;
+		flex-wrap: nowrap;
+		max-width: 100%;
+		height: var(--height-horizontal-height);
+		border-right: none;
+
+		.#{$namespace}-menu-item {
+			display: inline-flex;
+			align-items: center;
+			justify-content: center;
+			height: var(--menu-item-height);
+			padding-right: calc(var(--menu-item-padding-x) + 6px);
+			margin: 0;
+			margin-right: 2px;
+			border-radius: var(--menu-item-radius);
+		}
+
+		& > .#{$namespace}-sub-menu {
+			height: var(--menu-item-height);
+			margin-right: 2px;
+
+			&:focus,
+			&:hover {
+				outline: none;
+			}
+
+			& .#{$namespace}-sub-menu-content {
+				height: 100%;
+				padding-right: 40px;
+				border-radius: var(--menu-item-radius);
+			}
+		}
+
+		& .#{$namespace}-menu-item:not(.is-disabled):hover,
+		& .#{$namespace}-menu-item:not(.is-disabled):focus {
+			outline: none;
+		}
+
+		& > .#{$namespace}-menu-item.is-active {
+			color: var(--menu-item-active-color);
+		}
+	}
+
+	// 折叠菜单
+	&.is-collapse {
+		.#{$namespace}-menu__icon {
+			margin-right: 0;
+		}
+		.#{$namespace}-sub-menu__icon-arrow {
+			display: none;
+		}
+
+		.#{$namespace}-sub-menu-content,
+		.#{$namespace}-menu-item {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			padding: var(--menu-item-collapse-padding-y) var(--menu-item-collapse-padding-x);
+			margin: var(--menu-item-collapse-margin-y) var(--menu-item-collapse-margin-x);
+			transition: all 0.3s;
+
+			&.is-active {
+				background: var(--menu-item-active-background-color) !important;
+				border-radius: var(--menu-item-radius);
+			}
+		}
+
+		&.is-light {
+			.#{$namespace}-sub-menu-content,
+			.#{$namespace}-menu-item {
+				&.is-active {
+					background: var(--menu-item-active-background-color) !important;
+				}
+			}
+		}
+
+		&.is-rounded {
+			.#{$namespace}-sub-menu-content,
+			.#{$namespace}-menu-item {
+				&.is-collapse-show-title {
+					margin: 4px 8px !important;
+				}
+			}
+		}
+	}
+
+	&__popup-container {
+		max-width: 240px;
+		height: unset;
+		padding: 0;
+		background: var(--menu-background-color);
+	}
+
+	&__popup {
+		padding: 10px 0;
+		border-radius: var(--menu-item-radius);
+
+		.#{$namespace}-sub-menu-content,
+		.#{$namespace}-menu-item {
+			padding: var(--menu-item-popup-padding-y) var(--menu-item-popup-padding-x);
+		}
+	}
+
+	&__icon {
+		flex-shrink: 0;
+		width: var(--menu-item-icon-size);
+		height: var(--menu-item-icon-size);
+		margin-right: 8px;
+		vertical-align: middle;
+		text-align: center;
+	}
+}
+
+.#{$namespace}-menu-item {
+	fill: var(--menu-item-color);
+
+	@include menu-item;
+
+	&.is-active {
+		fill: var(--menu-item-active-color);
+
+		@include menu-item-active;
+	}
+
+	&__content {
+		display: inline-flex;
+		align-items: center;
+		width: 100%;
+		height: var(--menu-item-height);
+
+		span {
+			@include menu-title;
+		}
+	}
+
+	&.is-collapse-show-title {
+		padding: 32px 0 !important;
+		.#{$namespace}-menu-tooltip__trigger {
+			flex-direction: column;
+		}
+		.#{$namespace}-menu__icon {
+			display: block;
+			font-size: 20px !important;
+			transition: all 0.25s ease;
+		}
+
+		.#{$namespace}-menu__name {
+			display: inline-flex;
+			margin-top: 8px;
+			margin-bottom: 0;
+			font-size: 12px;
+			font-weight: 400;
+			line-height: normal;
+			transition: all 0.25s ease;
+		}
+	}
+
+	&:not(.is-active):hover {
+		color: var(--menu-item-hover-color);
+		text-decoration: none;
+		cursor: pointer;
+		background: var(--menu-item-hover-background-color) !important;
+	}
+
+	.#{$namespace}-menu-tooltip__trigger {
+		position: absolute;
+		top: 0;
+		left: 0;
+		box-sizing: border-box;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		padding: 0 var(--menu-item-padding-x);
+		font-size: var(--menu-font-size);
+		line-height: var(--menu-item-height);
+	}
+}
+
+.#{$namespace}-sub-menu-content {
+	height: var(--menu-item-height);
+
+	@include menu-item;
+
+	&__icon-arrow {
+		position: absolute !important;
+		top: 50%;
+		right: 10px;
+		width: inherit;
+		margin-top: -8px;
+		margin-right: 0;
+		font-weight: normal;
+		opacity: 1;
+		transition: transform 0.25s ease;
+	}
+
+	&__title {
+		@include menu-title;
+	}
+
+	&.is-collapse-show-title {
+		flex-direction: column;
+		padding: 32px 0 !important;
+		.#{$namespace}-menu__icon {
+			display: block;
+			font-size: 20px !important;
+			transition: all 0.25s ease;
+		}
+		.#{$namespace}-sub-menu-content__title {
+			display: inline-flex;
+			flex-shrink: 0;
+			margin-top: 8px;
+			margin-bottom: 0;
+			font-size: 12px;
+			font-weight: 400;
+			line-height: normal;
+			transition: all 0.25s ease;
+		}
+	}
+
+	&.is-more {
+		padding-right: 12px !important;
+	}
+
+	&:hover {
+		color: var(--menu-submenu-hover-color);
+		text-decoration: none;
+		cursor: pointer;
+		background: var(--menu-submenu-hover-background-color) !important;
+	}
+}
+
+.collapse-transition {
+	transition:
+		0.2s height ease-in-out,
+		0.2s padding-top ease-in-out,
+		0.2s padding-bottom ease-in-out;
+}
+
+.collapse-transition-leave-active,
+.collapse-transition-enter-active {
+	transition:
+		0.2s max-height ease-in-out,
+		0.2s padding-top ease-in-out,
+		0.2s margin-top ease-in-out;
+}
+
+.menu-align-start {
+	--menu-align: start;
+}
+
+.menu-align-center {
+	--menu-align: center;
+}
+
+.menu-align-end {
+	--menu-align: end;
+}
+
+.#{$namespace}-normal-menu {
+	--menu-item-margin-y: 4px;
+	--menu-item-margin-x: 0px;
+	--menu-item-padding-y: 9px;
+	--menu-item-padding-x: 0px;
+	--menu-item-radius: 0px;
+
+	height: calc(100% - 4px);
+
+	&.is-rounded {
+		--menu-item-radius: 6px;
+		--menu-item-margin-x: 8px;
+	}
+
+	&.is-dark {
+		.#{$namespace}-normal-menu__item {
+			color: hsl(var(--foreground) / 80%);
+
+			&:not(.is-active):hover {
+				color: hsl(var(--foreground));
+				background-color: hsl(var(--accent));
+			}
+
+			&.is-active {
+				background-color: hsl(var(--accent));
+				.#{$namespace}-normal-menu__name,
+				.#{$namespace}-normal-menu__icon {
+					color: hsl(var(--foreground));
+				}
+			}
+		}
+	}
+
+	&.is-collapse {
+		.#{$namespace}-normal-menu__name {
+			width: 0;
+			height: 0;
+			margin-top: 0;
+			overflow: hidden;
+			opacity: 0;
+		}
+
+		.#{$namespace}-normal-menu__icon {
+			font-size: 20px;
+		}
+	}
+
+	&__item {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: var(--menu-item-padding-y) var(--menu-item-padding-x);
+		margin: var(--menu-item-margin-y) var(--menu-item-margin-x);
+		color: hsl(var(--foreground) / 90%);
+		cursor: pointer;
+		border-radius: var(--menu-item-radius);
+		transition:
+			background 0.15s ease,
+			padding 0.15s ease,
+			border-color 0.15s ease;
+
+		&.is-active {
+			color: hsl(var(--foreground) / 0.8);
+			background-color: hsl(var(--primary));
+
+			.#{$namespace}-normal-menu__name,
+			.#{$namespace}-normal-menu__icon {
+				color: hsl(var(--primary-foreground));
+
+				// @apply text-primary-foreground font-semibold;
+			}
+		}
+
+		&:not(.is-active):hover {
+			// @apply dark:bg-accent text-primary bg-heavy dark:text-foreground;
+		}
+
+		&:hover {
+			.#{$namespace}-normal-menu__icon {
+				transform: scale(1.2);
+			}
+		}
+	}
+
+	&__icon {
+		max-height: 20px;
+		font-size: 20px;
+		transition: all 0.25s ease;
+	}
+
+	&__name {
+		margin-top: 8px;
+		margin-bottom: 0;
+		font-size: 12px;
+		font-weight: 400;
+		transition: all 0.25s ease;
+	}
+}
+
+.scrollbar-top-shadow {
+	background: linear-gradient(
+		to bottom,
+		hsl(var(--scroll-shadow, var(--background))),
+		transparent
+	);
+}
+
+.scrollbar-bottom-shadow {
+	background: linear-gradient(to top, hsl(var(--scroll-shadow, var(--background))), transparent);
+}
+
+.ui-global-search .el-input__wrapper {
+	box-shadow: none;
+}
+
+.ui-segmented.el-segmented {
+	--el-segmented-item-selected-color: hsl(var(--muted-foreground));
+	--el-segmented-item-selected-bg-color: #fff;
+	--el-border-radius-base: 8px;
+	background-color: hsl(var(--accent));
+	color: hsl(var(--muted-foreground));
+}
+
+.perference {
+	.el-radio-button__inner {
+		padding: 6px 15px;
+	}
+}
+
+.#{$namespace}-reuse-tabs {
+	.el-tabs__header,
+	.el-tabs,
+	.el-tabs__nav-wrap,
+	.el-tabs__nav-scroll,
+	.el-tabs__nav,
+	.el-tabs__item {
+		height: 100%;
+	}
+	.el-tabs__nav-wrap {
+		margin-bottom: 0;
+	}
+	.el-tabs__header {
+		margin: 0;
+	}
+	.el-tabs__nav {
+		border: none !important;
+	}
+
+	.el-tabs__item {
+		padding: 0 !important;
+	}
+
+	.el-icon.is-icon-close {
+		display: none;
+	}
+
+	&-plain,
+	&-card,
+	&-chrome {
+		.el-tabs__active-bar {
+			display: none;
+		}
+	}
+
+	.el-tabs {
+		&__new-tab {
+			width: 66px;
+			border: none;
+			margin: 0;
+			height: 100%;
+		}
+		&__item {
+			&.is-active {
+				.is-active {
+					z-index: 2;
+				}
+				& + .el-tabs__item {
+					.tabs-chrome__divider {
+						opacity: 0;
+					}
+				}
+			}
+		}
+
+		.tabs-chrome {
+			&__item {
+				padding-top: 3px;
+			}
+			&__item:not(.dragging) {
+				&:hover:not(.is-active) {
+					color: #222;
+					.tabs-chrome__divider {
+						opacity: 0;
+					}
+
+					.tabs-chrome__background {
+						padding-bottom: 2px;
+
+						&-content {
+							background-color: hsl(var(--accent));
+							margin: 0 2px;
+							border-radius: 6px;
+						}
+					}
+				}
+			}
+		}
+	}
+
+	.el-tabs__nav-wrap:after {
+		height: 0;
+	}
+}
+
+.z-popup {
+	z-index: 1000;
+}
+
+.dt-tabs-context-menu {
+	width: 162px;
+	padding: 4px;
+	font-size: 14px;
+}
+
+.tab-contextmenu {
+	box-shadow:
+		0 4px 6px -1px rgba(0, 0, 0, 0.1),
+		0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
+}
+
+.el-tabs__nav-wrap:after {
+	height: 1px;
+}
+
+.text-primary {
+	color: var(--el-color-primary);
+}
+
+.hover\:text-primary {
+	&:hover {
+		color: var(--el-color-primary);
+	}
+}
+
+.computer-status {
+	bottom: 60px;
+	right: 60px;
+	font-size: 24px;
+
+	.network {
+		position: relative;
+
+		&.offline::before {
+			content: '';
+			position: absolute;
+			left: 50%;
+			top: 50%;
+			width: 2px;
+			height: 28px;
+			transform: translate(-50%, -50%) rotate(45deg);
+			background-color: red;
+			z-index: 10;
+		}
+	}
+}
+
+.lockscreen {
+	.local-time {
+		font-family: helvetica;
+	}
+}
+
+.dt-lock-page {
+	& > div:nth-of-type(2) {
+		filter: contrast(15) hue-rotate(0);
+		animation: hueRotate 10s infinite linear;
+	}
+
+	.circle {
+		width: 300px;
+		height: 300px;
+		filter: blur(8px);
+
+		&::after {
+			position: absolute;
+			top: 40%;
+			left: 50%;
+			width: 200px;
+			height: 200px;
+			background-color: #00ff6f;
+			border-radius: 42% 38% 62% 49% / 45%;
+			content: '';
+			transform: translate(-50%, -50%) rotate(0);
+			animation: circleRotate 10s infinite linear;
+		}
+
+		&::before {
+			position: absolute;
+			top: 40%;
+			left: 50%;
+			z-index: 10;
+			width: 176px;
+			height: 176px;
+			background-color: #000;
+			border-radius: 50%;
+			content: '';
+			transform: translate(-50%, -50%);
+		}
+	}
+
+	.bubbles {
+		width: 100px;
+		height: 40px;
+		background-color: #00ff6f;
+		border-radius: 100px 100px 0 0;
+		filter: blur(5px);
+		transform: translate(-50%, 0);
+
+		li {
+			position: absolute;
+			background: #00ff6f;
+			border-radius: 50%;
+		}
+	}
+
+	.charging {
+		font-size: 20px;
+		text-align: center;
+	}
+}
+
+@keyframes circleRotate {
+	50% {
+		border-radius: 45% / 42% 38% 58% 49%;
+	}
+
+	100% {
+		transform: translate(-50%, -50%) rotate(720deg);
+	}
+}
+
+@keyframes hueRotate {
+	100% {
+		filter: contrast(15) hue-rotate(360deg);
+	}
+}