Source code
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
/* Abuse Reports card */
:root {
--close-icon-size: 20px;
--modal-panel-min-width: 60%;
--modal-panel-margin-top: 36px;
--modal-panel-margin-bottom: 36px;
--modal-panel-margin: 20%;
--modal-panel-padding: 40px;
--line-height: 20px;
--textarea-height: 220px;
--listitem-padding-bottom: 14px;
--list-radio-column-size: 28px;
--note-font-size: 14px;
--note-font-weight: 400;
--subtitle-font-size: 16px;
--subtitle-font-weight: 600;
}
/* Ensure that the document (embedded in the XUL about:addons using a
XUL browser) has a transparent background */
html {
background-color: transparent;
}
.modal-overlay-outer {
background: var(--grey-90-a60);
width: 100%;
height: 100%;
position: fixed;
z-index: -1;
}
.modal-panel-container {
padding-top: var(--modal-panel-margin-top);
padding-bottom: var(--modal-panel-margin-bottom);
padding-left: var(--modal-panel-margin);
padding-right: var(--modal-panel-margin);
}
.addon-abuse-report {
min-width: var(--modal-panel-min-width);
padding: var(--modal-panel-padding);
display: flex;
flex-direction: column;
position: relative;
}
.addon-abuse-report:hover {
/* Avoid the card box highlighting on hover. */
box-shadow: none;
}
.abuse-report-close-icon {
/* position the close button in the panel upper-right corner */
position: absolute;
top: 12px;
inset-inline-end: 16px;
}
button.abuse-report-close-icon {
background: var(--close-icon-url) no-repeat center center;
-moz-context-properties: fill;
color: inherit !important;
fill: currentColor;
min-width: auto;
min-height: auto;
width: var(--close-icon-size);
height: var(--close-icon-size);
margin: 0;
padding: 0;
}
button.abuse-report-close-icon:hover {
fill-opacity: 0.1;
}
button.abuse-report-close-icon:hover:active {
fill-opacity: 0.2;
}
.abuse-report-header {
display: flex;
flex-direction: row;
}
.abuse-report-contents,
.abuse-report-contents > hr {
width: 100%;
}
.abuse-report-note {
color: var(--text-color-deemphasized);
font-size: var(--note-font-size);
font-weight: var(--note-font-weight);
line-height: var(--line-height);
}
.abuse-report-subtitle {
font-size: var(--subtitle-font-size);
font-weight: var(--subtitle-font-weight);
line-height: var(--line-height);
}
ul.abuse-report-reasons {
list-style-type: none;
padding-inline-start: 0;
}
ul.abuse-report-reasons > li {
display: flex;
padding-bottom: var(--listitem-padding-bottom);
}
ul.abuse-report-reasons > li > label {
display: grid;
grid-template-columns: var(--list-radio-column-size) auto;
grid-template-rows: 50% auto;
width: 100%;
line-height: var(--line-height);
font-size: var(--subtitle-font-size);
font-weight: var(--note-font-weight);
margin-inline-start: 4px;
}
ul.abuse-report-reasons > li > label > [type="radio"] {
grid-column: 1;
}
ul.abuse-report-reasons > li > label > span {
grid-column: 2;
}
abuse-report-submit-panel textarea {
width: 100%;
height: var(--textarea-height);
resize: none;
box-sizing: border-box;
}
/* Adapt styles for the panel opened in its own dialog window */
html.dialog-window {
background-color: var(--in-content-box-background);
height: 100%;
min-width: 740px;
}
html.dialog-window body {
overflow: hidden;
min-height: 100%;
display: flex;
flex-direction: column;
}
html.dialog-window .abuse-report-close-icon {
display: none;
}
html.dialog-window addon-abuse-report {
flex-grow: 1;
display: flex;
/* Ensure that the dialog window starts from a reasonable initial size */
--modal-panel-min-width: 700px;
}
html.dialog-window addon-abuse-report form {
display: flex;
}
html.dialog-window addon-abuse-report form .abuse-report-contents {
flex-grow: 1;
}