living-together/source/Component/Container/Container.scss

@import "../Theme/Theme.scss";

$container-header-tab-bar-height: 32px;

div.app-container {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: stretch;
	overflow: hidden;
	box-sizing: border-box;

	div.drag-bar {
		width: 0;
		height: 0;
		display: flex;
		justify-content: center;
		align-items: center;

		div {
			position: relative;
			z-index: 10;
			width: 100%;
			height: 100%;
			border: 2px solid rgba($color: #000000, $alpha: 0);
			transition: all 300ms ease-in-out;
		}

		div:hover {
			background-color: $lt-blue;
		}
	}

	div.app-tab-header {
		height: $container-header-tab-bar-height;
		min-height: $container-header-tab-bar-height;
		flex-shrink: 1;
		width: 100%;
		display: flex;
		user-select: none;
		
		div.app-tab-header-item {
			height: 100%;
			box-sizing: border-box;
			display: flex;
			border: .8px solid rgba($color: #000000, $alpha: 0);
			// transition: all 300ms ease-in-out;
			justify-content: space-between;
			align-items: stretch;
			flex-direction: column;
			cursor: pointer;

			div.border-view {
				position: relative;
				display: flex;
				justify-content: center;
				flex-direction: row;
				max-height: 0;
				height: 0;
			}

			div.border-view::after {
				content: "";
				width: 100%;
				box-sizing: border-box;
				height: 32.8px;
				border: .8px solid rgba($color: #000000, $alpha: 0);
				// transition: all 300ms ease-in-out;
			}

			div.title-view {
				padding: 0 10px;
				display: inline-block;
				vertical-align: middle;
				position: relative;
				transition: all 300ms ease-in-out;
				word-break: keep-all;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				z-index: 1;
			}
		}

		div.app-tab-header-item.active {
			border: .8px solid $lt-blue;
			transition: none;
		}

		div.app-tab-header-item::after {
			content: "";
			width: 0;
			height: 0;
			display: block;
		}
	}

	div.app-panel.has-padding {
		padding: 10px;
	}

	div.app-panel-root {
		width: 100%;
		height: calc( 100% - 32px );
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
		flex-direction: column;
		border: .8px solid rgba($color: #000000, $alpha: 0);
	}

	div.app-panel {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		overflow: scroll;
		-ms-overflow-style: none;
		flex-shrink: 1;
	}

	div.app-panel.hide-scrollbar::-webkit-scrollbar {
		width : 0;  /*高宽分别对应横竖滚动条的尺寸*/
		height: 0;
	}
	
	div.app-panel::-webkit-scrollbar {
		width : 8px;  /*高宽分别对应横竖滚动条的尺寸*/
  		height: 0;
	}

	div.app-panel::-webkit-scrollbar-thumb {
		/*滚动条里面小方块*/
		border-radius: 8px;
	}

	div.app-panel::-webkit-scrollbar-track {
		/*滚动条里面轨道*/
		border-radius: 8px;
		background-color: rgba($color: #000000, $alpha: 0);
	}

	div.app-panel-root.active {
		border: .8px solid $lt-blue !important;
	}
}

div.dark.app-container.end-containe {
	border: .8px solid $lt-bg-color-lvl3-dark;

	div.app-tab-header-item.tab,
	div.app-tab-header-item.active,
	div.app-tab-header-item:hover {
		transition: none;
		background-color: $lt-bg-color-lvl4-dark;
		color: rgba($color: #FFFFFF, $alpha: .85);
	}

    div.app-tab-header-item.deep.tab,
	div.app-tab-header-item.deep.active,
	div.app-tab-header-item.deep:hover {
        background-color: $lt-bg-color-lvl5-dark;
    }
	
    div.app-tab-header-item.tab,
	div.app-tab-header-item.active {
        div.border-view::after {
            background-color: $lt-bg-color-lvl4-dark;
            transition: none;
        }
    }
    
    div.app-tab-header-item.deep.tab,
	div.app-tab-header-item.deep.active {
        div.border-view::after {
            background-color: $lt-bg-color-lvl5-dark;
            transition: none;
        }
    }

	div.app-panel::-webkit-scrollbar-thumb {
		background-color: $lt-bg-color-lvl1-dark;
	}
}

div.light.app-container.end-containe {
	border: .8px solid $lt-bg-color-lvl3-light;

	div.app-tab-header-item.tab,
	div.app-tab-header-item.active,
	div.app-tab-header-item:hover {
		transition: none;
		background-color: $lt-bg-color-lvl4-light;
		color: rgba($color: #000000, $alpha: .85);
	}

    div.app-tab-header-item.deep.tab,
	div.app-tab-header-item.deep.active,
	div.app-tab-header-item.deep:hover {
        background-color: $lt-bg-color-lvl5-light;
    }
	
    div.app-tab-header-item.tab,
	div.app-tab-header-item.active {
        div.border-view::after {
            background-color: $lt-bg-color-lvl4-light;
            transition: none;
        }
    }
    
    div.app-tab-header-item.deep.tab,
	div.app-tab-header-item.deep.active {
        div.border-view::after {
            background-color: $lt-bg-color-lvl5-light;
            transition: none;
        }
    }

	div.app-panel::-webkit-scrollbar-thumb {
		background-color: $lt-bg-color-lvl1-light;
	}
}