3c69886320
Also: - New schema version 8 with video/image thumbnails, screenshots, sizes - Upgrade messages not at current schema version when loading messages to show in conversation - New MessageDetail react component - New ConversationHeader react component
62 lines
1.3 KiB
SCSS
62 lines
1.3 KiB
SCSS
.lightbox-container {
|
||
display: none;
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
z-index: 100;
|
||
}
|
||
|
||
.iconButton {
|
||
// NOTE: Cannot move these to inline styles as hover breaks due to precedence.
|
||
// We use vanilla CSS-in-JS which outputs inline styles. The `:hover`
|
||
// pseudo-class cannot be expressed using vanilla CSS-in-JS, so we define it
|
||
// here. If we move the other properties to JS, they have higher precedence
|
||
// as they are inline and the `:hover` `background` change won’t override the
|
||
// base `background` definition. Revisit this as we adopt a more sophisticated
|
||
// style system in the future:
|
||
background: transparent;
|
||
width: 50px;
|
||
height: 50px;
|
||
|
||
display: inline-block;
|
||
cursor: pointer;
|
||
border-radius: 50%;
|
||
padding: 3px;
|
||
|
||
&:before {
|
||
content: '';
|
||
display: block;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
&:hover {
|
||
background: $grey;
|
||
}
|
||
|
||
&.save {
|
||
&:before {
|
||
@include color-svg('../images/save.svg', white);
|
||
}
|
||
}
|
||
|
||
&.close {
|
||
&:before {
|
||
@include color-svg('../images/x.svg', white);
|
||
}
|
||
}
|
||
|
||
&.previous {
|
||
&:before {
|
||
@include color-svg('../images/back.svg', white);
|
||
}
|
||
}
|
||
|
||
&.next {
|
||
&:before {
|
||
@include color-svg('../images/forward.svg', white);
|
||
}
|
||
}
|
||
}
|