Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
/* ===== alert.css =====================================================
== Styles specific to the alerts dialog.
======================================================================= */
#alertContainer {
border: 1px solid threedshadow;
background-color: -moz-Dialog;
color: -moz-DialogText;
opacity: 0;
@media (prefers-color-scheme: dark) {
background-color: #2a2a2e;
color: #f9f9fa;
}
&[noanimation] {
opacity: 1;
}
&[fade-in] {
animation-timing-function: ease-out;
animation-duration: 2s;
animation-fill-mode: both;
animation-name: fade-in;
}
&[fade-out] {
animation-timing-function: ease-in;
animation-duration: 2s;
animation-fill-mode: both;
animation-name: fade-out;
}
}
@keyframes fade-in {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fade-out {
from {opacity: 1;}
to {opacity: 0;}
}
#alertImageBox {
display: block;
padding: 4px;
background-image: linear-gradient(rgba(255, 255, 255, 0.6),
rgba(255, 255, 255, 0.6));
border-inline-end: 1px solid rgba(0, 0, 0, 0.1);
}
#alertImage {
width: 64px;
height: 64px;
}
#alertTextBox {
padding: 4px;
padding-inline-end: 0;
}
#alertTitle {
font-weight: bold;
font-size: 110%;
padding-inline: 5px;
}
#alertSeparator {
height: 0;
margin-block: 0.4em;
margin-inline-start: 11px;
border-top: 1px solid -moz-DialogText;
@media (prefers-color-scheme: dark) {
border-top-color: #f9f9fa;
}
}
folder-summary {
flex-direction: column;
}
.folderSummary-message-row {
/* This max width ends up dictating the overall width of the alert window
because it controls how large the preview, subject and sender text can be
before cropping kicks in */
max-width: 450px;
padding: 0 5px;
.folderSummaryMessage:hover > & {
cursor: pointer;
color: -moz-hyperlinktext;
}
.folderSummaryMessage:hover:active > & {
color: -moz-activehyperlinktext;
}
}
.folderSummary-sender,
.folderSummary-subject {
cursor: inherit;
}
.folderSummary-subject {
font-weight: bold;
width: 300px;
overflow-wrap: anywhere;
}
.folderSummary-sender {
width: 150px;
}
.folderSummary-previewText {
color: grey;
overflow-wrap: anywhere;
}
#closeButton {
align-items: flex-start;
width: auto;
& > .toolbarbutton-icon {
padding: 5px;
}
}