x>BakiDance |
|
| Line 1: |
Line 1: |
| .mbox {
| | html { |
| position: relative;
| |
| display: flex;
| |
| flex-direction: column;
| |
| margin-top: var( --space-xs );
| |
| margin-bottom: var( --space-md );
| |
| background-color: var( --color-surface-2 );
| |
| border-radius: var( --border-radius--medium );
| |
| color: var( --color-base--subtle );
| |
| font-size: 0.875rem;
| |
| }
| |
|
| |
|
| .mbox.mbox-high {
| |
| background-color: var( --background-color-destructive );
| |
| }
| |
|
| |
| .mbox.mbox-med {
| |
| background-color: var( --background-color-warning );
| |
| }
| |
|
| |
| .mbox-title {
| |
| display: flex;
| |
| align-items: center;
| |
| padding: var( --space-sm ) var( --space-md );
| |
| font-weight: 500;
| |
| }
| |
|
| |
| .mbox-icon img {
| |
| width: 14px;
| |
| height: auto;
| |
| margin-right: var( --space-xs );
| |
| opacity: 0.5;
| |
| }
| |
|
| |
| .mbox-text {
| |
| position: absolute;
| |
| z-index: 10;
| |
| padding: var( --space-md );
| |
| width: 100%;
| |
| box-sizing: border-box;
| |
| background-color: var( --color-surface-2 );
| |
| border-radius: var( --border-radius--medium );
| |
| box-shadow: var( --box-shadow-dialog );
| |
| opacity: 0;
| |
| visibility: hidden;
| |
| }
| |
|
| |
| .mbox:hover .mbox-text {
| |
| opacity: 1;
| |
| visibility: visible;
| |
| }
| |
|
| |
| .mbox-high .mbox-text {
| |
| background-color: var( --background-color-destructive );
| |
| }
| |
|
| |
| .mbox-med .mbox-text {
| |
| background-color: var( --background-color-warning );
| |
| }
| |
|
| |
| /* Dark mode */
| |
| html.skin-citizen-dark .mbox-icon img {
| |
| filter: invert( 1 );
| |
| }
| |
|
| |
| /* Readability fixes */
| |
| html.skin-citizen-dark .mbox {
| |
| color: var( --color-base--emphasized );
| |
| }
| |
| .mbox-icon.metadata {
| |
| vertical-align: text-bottom;
| |
| } | | } |
