108 lines
1.7 KiB
SCSS
108 lines
1.7 KiB
SCSS
@import '../../../../variables';
|
|
|
|
$noteFontSize: 14px;
|
|
$noteFontSize: 12px;
|
|
|
|
:host {
|
|
display: block;
|
|
margin-right: $s;
|
|
|
|
:host-context([dir=rtl]) {
|
|
margin-left: $s;
|
|
margin-right: unset;
|
|
}
|
|
}
|
|
|
|
|
|
.note {
|
|
@include noteStyle;
|
|
|
|
&:hover,
|
|
&.isFocused {
|
|
transform: scale(1.04);
|
|
transform-origin: center center;
|
|
position: relative;
|
|
z-index: 4;
|
|
box-shadow: $whiteframe-shadow-3dp;
|
|
//outline: 2px dashed $c-accent;
|
|
}
|
|
|
|
&.isFocused {
|
|
z-index: 5;
|
|
}
|
|
|
|
&.isImg {
|
|
border: 0;
|
|
}
|
|
|
|
:host.gu-mirror & {
|
|
box-shadow: $whiteframe-shadow-8dp !important;
|
|
}
|
|
}
|
|
|
|
.controls {
|
|
position: absolute;
|
|
top: -$s*0.75;
|
|
right: -$s*0.75;
|
|
|
|
:host-context([dir=rtl]) & {
|
|
position: absolute;
|
|
right: unset;
|
|
left: -$s*0.75;
|
|
}
|
|
|
|
// fixes drag and drop on mobile
|
|
touch-action: none;
|
|
|
|
@include mq(xs) {
|
|
opacity: 0;
|
|
transition: $transition-standard;
|
|
|
|
.note:focus &,
|
|
.note:hover & {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.note-img {
|
|
max-width: 100%;
|
|
border-radius: $card-border-radius;
|
|
cursor: zoom-in;
|
|
}
|
|
|
|
.content {
|
|
text-align: start;
|
|
font-size: $noteFontSize;
|
|
|
|
inline-markdown ::ng-deep {
|
|
.markdown-wrapper {
|
|
min-height: 40px;
|
|
}
|
|
|
|
.markdown-unparsed,
|
|
.markdown-parsed {
|
|
font-size: $noteFontSize;
|
|
border-radius: $card-border-radius;
|
|
background: #ffffff;
|
|
color: $standard-note-fg-light;
|
|
box-sizing: border-box;
|
|
|
|
@include darkTheme {
|
|
background: $standard-note-bg-dark;
|
|
color: $standard-note-fg-dark;
|
|
border-color: #333333;
|
|
}
|
|
}
|
|
|
|
.markdown-unparsed,
|
|
.markdown-parsed > *:first-child {
|
|
padding-right: $s*1.25;
|
|
}
|
|
|
|
.markdown-parsed > *:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|