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
.container {
display: flex;
flex-direction: column;
justify-content: center;
height: 100vh;
> .beforeList {
margin: 20px;
.searchContainer {
margin-block-start: 8px;
padding: 8px;
cursor: text;
border-radius: 4px;
border: 1px solid var(--in-content-border-color);
box-sizing: border-box;
width: 100%;
display: flex;
&:focus-within{
outline: 1px auto;
}
}
.searchIcon{
background-position: center;
background-repeat: no-repeat;
fill: currentColor;
width: 18px;
margin-inline-end: 4px;
flex-shrink: 0;
}
.search {
border: none;
background-color: transparent;
outline: none;
min-width: 0;
flex-grow: 1;
}
}
}
virtualized-list {
position: relative;
overflow: auto;
margin-block: 20px;
padding-inline: 20px;
flex-grow: 1;
.lines-container {
padding-inline-start: unset;
}
}
.line {
display: flex;
align-items: stretch;
position: absolute;
width: calc(100% - 40px);
user-select: none;
box-sizing: border-box;
height: 64px;
background-color: var(--in-content-box-background-odd);
border-inline: 1px solid var(--in-content-border-color);
color: var(--in-content-text-color);
&.start {
border-block-start: 1px solid var(--in-content-border-color);
border-start-start-radius: 8px;
border-start-end-radius: 8px;
}
&.end {
border-block-end: 1px solid var(--in-content-border-color);
border-end-start-radius: 8px;
border-end-end-radius: 8px;
height: 54px;
}
> .menuButton {
position: relative;
visibility: hidden;
> button {
border: none;
margin-inline-start: 2px;
padding: 2px;
background-color: transparent;
/* Fix: too lazy to load the svg */
width: 32px;
color: unset;
}
> .menuPopup {
position: absolute;
inset-inline-end: 0;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 1;
background-color: var(--in-content-table-background);
padding: 4px;
> .separator {
border-block-start: 1px solid var(--in-content-border-color);
margin: 4px 0;
}
> button {
text-align: start;
border-style: none;
padding: 12px;
margin-block-end: 2px;
width: 100%;
text-wrap: nowrap;
}
}
}
> .content {
flex-grow: 1;
&:not(.section) {
display: grid;
grid-template-rows: max-content 1fr;
grid-template-columns: max-content;
grid-column-gap: 8px;
padding-inline-start: 8px;
padding-block-start: 4px;
}
> div {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
&:last-child {
padding-block-end: 10px;
}
}
> .icon {
margin-inline-start: 4px;
width: 16px;
height: 16px;
-moz-context-properties: fill;
fill: currentColor;
}
> .label {
color: var(--text-color-deemphasized);
padding-block: 2px 4px;
grid-row: 1;
align-content: end;
}
> .value {
user-select: text;
> .icon {
-moz-context-properties: fill;
fill: currentColor;
width: auto;
height: 16px;
margin-inline-end: 4px;
vertical-align: text-bottom;
}
> .icon:not([src]) {
display: none;
}
&:is(a) {
color: currentColor;
}
}
> .stickers {
grid-row: 1;
align-content: start;
> span {
padding: 4px;
margin-inline-end: 2px;
border-radius: 24px;
font-size: xx-small;
}
/* Hard-coded colors will be addressed in FXCM-1013 */
> span.risk {
background-color: slateblue;
border: 1px solid darkslateblue;
color: whitesmoke;
}
> span.warning {
background-color: firebrick;
border: 1px solid maroon;
color: whitesmoke;
}
> span.error {
background-color: orange;
border: 1px solid orangered;
color: black;
}
}
&.section {
font-size: larger;
> .label {
display: inline-block;
margin: 0;
color: unset;
}
> .value {
margin-inline-end: 8px;
text-align: end;
font-size: smaller;
color: var(--text-color-deemphasized);
user-select: unset;
}
}
}
&.selected {
color: var(--in-content-item-selected-text);
background-color: var(--in-content-item-selected);
> .menuButton {
visibility: inherit;
}
}
&:hover {
color: var(--in-content-item-hover-text);
background-color: var(--in-content-item-hover);
> .menuButton {
visibility: visible;
}
}
}
/* Dialog styles */
.dialog-overlay {
display: flex;
justify-content: center;
align-items: center;
padding: 16px;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
background-color: rgba(0, 0, 0, 0.5);
box-sizing: border-box;
/* TODO: probably want to remove this later ? */
backdrop-filter: blur(6px);
}
.dialog-container {
display: grid;
padding: 16px 32px;
color: var(--in-content-text-color);
background-color: var(--in-content-box-background);
border: 1px solid var(--in-content-border-color);
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.1);
}
.dialog-title {
margin: 0;
}
.dismiss-button {
justify-self: end;
}
.dialog-content {
margin-block-start: 16px;
margin-block-end: 16px;
.checkbox-text {
margin-block-start: 8px;
}
}