xref: /plugin/botmon/style.less (revision 9bc80cc5e9496f9b2f4ae6f9ac5a3601cf695ec5)

#monitor__admin {

	section[role="tabpanel"] {
		margin: .25rem 0;
	}

	#monitor__today {

		header {
			background-color: #F0F0F0;
			color: #333;
			border: #CCC solid 1px;
			border-radius: .5rem .5rem 0 0;
			margin: .5rem 0 1pt 0;
			padding: .25rem .5rem;
			font-size: 1rem;
		}

		/* list formatting */
		dl {
			& {
				border-left: #555 solid 1px;
				padding-left: .5rem;
				margin: 0;
			}
			&:first-child {
				border-left: none;
				padding-left: 0;
			}
			dt {
				margin-bottom: .2em;
			}
			dd {
				display: flex;
				justify-content: space-between;
				padding: 0; margin: 0;
			}
			dd:nth-child(even) {
				background-color: #EEE;
			}
		}

		#monitor__today__content {
			& > details {
				& {
					margin: 0 0 1pt 0;
				}
				summary {
					& {
						font-weight: bold;
						font-size: 1rem;
						padding: .25rem .5rem;
						background-color: #F0F0F0;
						color: #333;
						border: #CCC solid 1px;
						display: flex;
						justify-content: space-between;
						margin: 0;
					}
					&::marker {
						content: '';
					}
					&::after {
						content: '＋';
						display: inline-block;
						color: @ini_link;
					}
				}
				&[open] {
					summary::after {
						content: '－';
					}
				}
				& > div {
					padding: .5rem;
				}
			}
		}

		footer {
			& {
				display: flex;
				align-items: center;
				column-gap: .25rem;
				background-color: #F0F0F0;
				color: #333;
				border: #CCC solid 1px;
				border-radius: 0 0 .5rem .5rem;
				margin: 1pt 0 0 0;
				padding: .25rem .5rem;
			}
			& > svg {
				width: 1.25em; height: 1.25em;
				fill: #333;
				flex-shrink: 0;
			}
			& > span {
				font-size: .96rem;
				line-height: 1.25rem;
			}
			& > span.error {
				color: #961D1B;
				font-weight: bold;
			}
		}
	}
}