xref: /plugin/botmon/style.less (revision 454b7f55f8f52f67af19323c6d078fe8a574cec4)

#botmon__admin {

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

	#botmon__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;
			line-height: 1.25;
		}

		/* list formatting */
		dl {
			& {
				border-left: #555 solid 1px;
				padding-left: .5rem;
				margin: 0;
				font-size: 1rem;
				line-height: 1.5;
			}
			&: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;
			}
		}

		#botmon__today__content {
			& > details {
				& {
					margin: 0 0 1pt 0;
					text-align: left;
				}
				summary {
					& {
						font-weight: bold;
						font-size: 1rem;
						line-height: 1.5;
						padding: .25rem .5rem;
						background-color: #F0F0F0;
						color: #333;
						border: #CCC solid 1px;
						display: flex;
						justify-content: space-between;
						margin: 0;
					}
					&::marker, &::before {
						content: '';
						display: none;
					}
					&::after {
						content: '＋';
						display: inline-block;
						color: @ini_link;
						background-color: transparent;
					}
				}
				&[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;
				line-height: 1.25;
			}
			& > 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;
			}
		}
	}
}

/* dark mode overrides */
@media (prefers-color-scheme: dark) {
	body.darkmode.mode_admin #botmon__admin {

		#botmon__today {

			header {
				background-color: #0c0c0d;
				color: #adadb3;
				border-color: #666;
			}

			/* list formatting */
			dl {
				& {
					border-left-color: #777;
				}
				dt {
					color: #adadb3;
				}
				dd:nth-child(even) {
					background-color: #4E4E50;
				}
			}

			#botmon__today__content  > details summary {
				& {
					background-color: #0c0c0d;
					color: #adadb3;
					border-color: #666;
				}
				&::after {
					color: #76b0fd;
				}
			}

			footer {
				& {
					background-color: #0c0c0d;
					color: #adadb3;
					border-color: #CCC;
				}
				& > svg {
					fill: #777;
				}
				& > span.error {
					color: #961D1B;
				}
			}
		}
	}
}