Thảo luận Thành viên:NguoiDungKhongDinhDanh/Danh sách việc cần làm/P/styles.css

/* See also: [[:en:Template:Phab/sandbox/styles.css]] */
.phab-tag-outer {
	position: relative;
	left: 0;
	bottom: 0;
}
.phab-tag-outer :not(.phab-tag-not) ~ * { /* Ghi công: //stackoverflow.com/a/71281004/18101811 */
	font-size: 92.8%; /* More precisely 92.7835; I took screenshots and did some calculation. */
	font-family: 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Lato', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
}
.phab-tag-outer:hover {
	cursor: pointer;
}
.phab-tag-outer:hover > .extiw {
	text-decoration: none !important;
}
.phab-tag-outer:focus > .extiw {
	text-decoration: none !important;
}
.phab-tag-inner {
	border: 1px solid #C7CCD9;
	border-radius: 3px;
	padding: 0 4px;
	background-color: #EBECEE;
	color: #000000;
}
.phab-tag-desc-float {
	position: absolute;
	left: 0;
	bottom: 41px;
	width: 371px;
	height: 58px;
	z-index: 99;
	border-radius: 3px;
	border-top: 1px solid #DDE8EF;
	border-left: 4px solid transparent;
	border-right: 1px solid #DDE8EF;
	border-bottom: 1px solid #BFCFDA;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
	background-color: #FFFFFF;
	padding: 7px 12px;
	text-align: left;
	display: none;
}
span[class="phab-tag-desc-float phab-tag-open"] {
	border-left: 4px solid #8E44AD !important;
}
span[class="phab-tag-desc-float phab-tag-closed"] {
	border-left: 4px solid #92969D !important;
}
.phab-tag-desc-float-layer {
	position: absolute;
	left: 0;
	bottom: -10px;
	width: 400px;
	height: 120px;
	background-color: transparent;
	visibility: hidden;
	display: none;
}
.phab-tag-outer:hover .phab-tag-desc-float {
	display: block !important;
	position: absolute;
	z-index: 200;
}
.phab-tag-desc-float:hover, .phab-tag-desc-float:focus {
	display: block !important;
	position: absolute;
	border-radius: 3px;
	border-top: 1px solid #DDE8EF;
	border-left: 4px solid #8E44AD;
	border-right: 1px solid #DDE8EF;
	border-bottom: 1px solid #BFCFDA;
	box-shadow:0 2px 12px rgba(0,0,0,.20);
	background-color: #FFFFFF;
}
.phab-tag-desc-float-desc {
	padding-left: 2px;
}
.phab-tag-open .phab-tag-desc-float-num,
.phab-tag-open .phab-tag-desc-float-desc {
	color: #000000 !important;
}
.phab-tag-closed .phab-tag-desc-float-num,
.phab-tag-closed .phab-tag-desc-float-desc {
	color: #74777D !important;
}
.phab-tag-desc-float-desc:hover {
	text-decoration: underline;
	cursor: pointer;
}
.phab-tag-num {
	font-weight: bold;
}
.phab-tag-open:hover {
	border: 1px solid #A1A6B0;
}
.phab-tag-closed > .phab-tag-num,
.phab-tag-closed > .phab-tag-desc {
	text-decoration: line-through;
}
.phab-tag-inner:hover > .phab-tag-num {
	text-decoration: none !important;
}
.phab-tag-closed:hover {
	border: 1px solid #A0A5AF;
}