|
|
| 第1行： |
第1行： |
| .mbox {
| |
| position: relative;
| |
| display: flex;
| |
| flex-direction: column;
| |
| margin-top: 0.4rem;
| |
| margin-bottom: 0.8rem;
| |
| 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: 10px 15px;
| |
| font-weight: 500;
| |
| }
| |
|
| |
| .mbox-icon img {
| |
| width: 14px;
| |
| height: auto;
| |
| margin-right: 10px;
| |
| opacity: 0.5;
| |
| }
| |
|
| |
| .mbox-text {
| |
| position: absolute;
| |
| z-index: 10;
| |
| padding: 15px 20px;
| |
| width: calc(100% - 40px);
| |
| background-color: var( --color-surface-2 );
| |
| border-radius: var( --border-radius--medium );
| |
| box-shadow: var( --box-shadow-dialog );
| |
| opacity: 0;
| |
| transition: opacity 0.2s ease, box-shadow 0.2s ease;
| |
| 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 );
| |
| }
| |
|
| |
| .mbox-需要翻译{
| |
| background-color: #ffcc3382;
| |
| color: rgba(0,0,0,0.8);
| |
| border-radius: var(--border-radius--medium);
| |
| }
| |
|
| |
| /* Dark mode */
| |
| html.skin-citizen-dark .mbox-icon img {
| |
| filter: invert( 1 );
| |
| }
| |
|
| |
| /* Readability fixes */
| |
| html.skin-citizen-dark .mbox {
| |
| color: var( --color-base--emphasized );
| |
| }
| |
