Warning: You are not logged in. Your IP address will be publicly visible if you make any edits. If you
log in or
create an account, your edits will be attributed to your username, along with other benefits.
The edit can be undone.
Please check the comparison below to verify that this is what you want to do, and then publish the changes below to finish undoing the edit.
| Latest revision |
Your text |
| 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;
| |
| } | | } |
