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
/* Generic (cross-platform) multimessage view CSS. Some bits will be overridden
by theme specific files */
:root {
user-select: auto; /* Overrides messenger.css. */
--heading-wrapper-padding: 6px 9px;
--content-padding: 6px 18px;
&[uidensity="compact"] {
--heading-wrapper-padding: 3px 6px;
--content-padding: 3px 12px;
}
&[uidensity="touch"] {
--heading-wrapper-padding: 6px 12px;
--content-padding: 9px 21px;
}
}
body {
background-color: var(--layout-background-0);
font-size: 1.1rem;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
/* The heading area */
#headingWrapper {
display: flex;
flex-wrap: wrap;
flex-direction: row-reverse;
align-items: center;
gap: 6px;
padding: var(--heading-wrapper-padding);
color: var(--layout-color-1);
background-color: var(--layout-background-1);
border-bottom: 1px solid var(--splitter-color);
@media (prefers-color-scheme: dark) {
--toolbarbutton-hover-background: rgba(179, 179, 179, 0.4);
--toolbarbutton-hover-bordercolor: rgba(179, 179, 179, 0.4);
--toolbarbutton-header-bordercolor: rgba(179, 179, 179, 0.4);
--toolbarbutton-active-background: rgba(179, 179, 179, 0.6);
--toolbarbutton-active-bordercolor: rgba(179, 179, 179, 0.6);
--toolbarbutton-active-boxshadow: none;
}
@media print {
position: static;
}
}
#heading {
flex: 1;
font-size: 1.3rem;
font-weight: normal;
margin: 0;
padding: 0;
}
#summarySubtitle {
font-size: 1.1rem;
white-space: nowrap;
margin-inline-start: 9px;
}
/* The main content area */
#content {
flex: 1 1 0;
overflow: auto;
padding: var(--content-padding);
}
#messageList {
margin: 0;
padding: 0;
list-style-type: none;
& > li {
position: relative;
margin-bottom: 9px;
padding-bottom: 9px;
padding-inline: 12px 9px;
border-bottom: 1px solid var(--layout-background-4);
}
}
.star {
width: 16px;
height: 16px;
position: absolute;
inset-inline-start: -7px;
inset-block-start: 6px;
background-repeat: no-repeat;
.starred & {
background-image: var(--icon-star);
background-size: contain;
-moz-context-properties: fill, stroke;
fill: var(--thread-pane-flag-fill);
stroke: var(--thread-pane-flag-stroke);
}
}
.item-header {
display: flex;
flex-wrap: nowrap;
align-items: baseline;
justify-content: space-between;
gap: 6px;
padding-block: 6px;
margin-block: 0;
font-weight: normal;
& .left-block {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 3px 6px;
flex: 1 auto;
.author {
width: min-content;
flex-grow: 1;
}
}
& .link {
font-weight: 600;
&:hover {
text-decoration: underline;
cursor: pointer;
}
}
}
.unread .primary {
font-weight: bold;
}
.count {
font-weight: 600;
white-space: nowrap;
}
.tags {
font-size: 1rem;
display: flex;
align-items: center;
gap: 6px;
}
.tag {
display: inline-block;
white-space: nowrap;
padding: 2px 4px;
line-height: 1em;
border-radius: 3px;
}
.count,
.info,
.date,
.snippet {
color: var(--layout-color-2);
}
.snippet {
margin: 0;
}
a {
color: LinkText;
font-weight: bold;
&:hover {
text-decoration: underline;
}
}
#header-view-toolbox {
font: message-box;
font-size: 1rem;
@media print {
display: none;
}
}
#header-view-toolbar {
display: flex;
align-items: center;
gap: 6px;
user-select: none;
}