|
|
| 第1行： |
第1行： |
| .mbox {
| | <includeonly><nowiki>{{</nowiki>[[Template:{{{1}}}|{{{1}}}]]{{t/piece|{{{2|---}}}}}{{t/piece|{{{3|---}}}}}{{t/piece|{{{4|---}}}}}{{t/piece|{{{5|---}}}}}{{t/piece|{{{6|---}}}}}{{t/piece|{{{7|---}}}}}{{t/piece|{{{8|---}}}}}{{t/piece|{{{9|---}}}}}{{t/piece|{{{10|---}}}}}{{t/piece|{{{11|---}}}}}{{t/piece|{{{12|---}}}}}{{t/piece|{{{13|---}}}}}{{t/piece|{{{14|---}}}}}{{t/piece|{{{15|---}}}}}{{t/piece|{{{16|---}}}}}{{t/piece|{{{17|---}}}}}{{t/piece|{{{18|---}}}}}{{t/piece|{{{19|---}}}}}{{t/piece|{{{20|---}}}}}{{t/piece|{{{21|---}}}}}<nowiki>}}</nowiki></includeonly><noinclude> |
| position: relative;
| | {{documentation}}</noinclude> |
| 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 );
| |
| } | |
