forked from Kieran/snort
commit
57136afda5
@ -7,7 +7,7 @@
|
|||||||
.copy .body {
|
.copy .body {
|
||||||
font-family: monospace;
|
font-family: monospace;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
background: var(--gray-secondary);
|
background: var(--note-bg);
|
||||||
color: var(--font-color);
|
color: var(--font-color);
|
||||||
padding: 2px 4px;
|
padding: 2px 4px;
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
@ -2,7 +2,6 @@
|
|||||||
border-bottom: none;
|
border-bottom: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.note > .header .reply {
|
.note > .header .reply {
|
||||||
font-size: var(--font-size-tiny);
|
font-size: var(--font-size-tiny);
|
||||||
color: var(--font-secondary-color);
|
color: var(--font-secondary-color);
|
||||||
@ -16,6 +15,7 @@
|
|||||||
|
|
||||||
.note > .body {
|
.note > .body {
|
||||||
margin-top: 12px;
|
margin-top: 12px;
|
||||||
|
padding-left: 56px;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
white-space: pre-wrap;
|
white-space: pre-wrap;
|
||||||
word-break: normal;
|
word-break: normal;
|
||||||
@ -23,6 +23,10 @@
|
|||||||
overflow-y: visible;
|
overflow-y: visible;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.note > .footer {
|
||||||
|
padding-left: 46px;
|
||||||
|
}
|
||||||
|
|
||||||
.note > .header img:hover, .note > .header .name > .reply:hover, .note .body:hover {
|
.note > .header img:hover, .note > .header .name > .reply:hover, .note .body:hover {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
@ -86,11 +90,6 @@
|
|||||||
font-feature-settings: "tnum";
|
font-feature-settings: "tnum";
|
||||||
}
|
}
|
||||||
|
|
||||||
.trash-icon {
|
|
||||||
color: var(--error);
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reaction-pill .reaction-pill-number {
|
.reaction-pill .reaction-pill-number {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
}
|
}
|
||||||
@ -103,6 +102,11 @@
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.trash-icon {
|
||||||
|
color: var(--error);
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.note.active > .header .reply {
|
.note.active > .header .reply {
|
||||||
color: var(--font-tertiary-color);
|
color: var(--font-tertiary-color);
|
||||||
}
|
}
|
||||||
@ -115,6 +119,10 @@
|
|||||||
color: var(--font-tertiary-color);
|
color: var(--font-tertiary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.note.active > .footer > .reaction-pill.reacted {
|
||||||
|
color: var(--highlight);
|
||||||
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
.indented .active {
|
.indented .active {
|
||||||
background-color: var(--gray-secondary);
|
background-color: var(--gray-secondary);
|
||||||
@ -128,7 +136,4 @@
|
|||||||
.note.active > .footer > .reaction-pill {
|
.note.active > .footer > .reaction-pill {
|
||||||
color: var(--font-secondary-color);
|
color: var(--font-secondary-color);
|
||||||
}
|
}
|
||||||
.note.active > .footer > .reaction-pill.reacted {
|
|
||||||
color: var(--highlight);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
@ -1,7 +1,9 @@
|
|||||||
.note-creator {
|
.note-creator {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
background-color: var(--gray);
|
background-color: var(--note-bg);
|
||||||
|
border: 1px solid var(--gray);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
|
padding: 6px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.note-reply {
|
.note-reply {
|
||||||
@ -12,6 +14,7 @@
|
|||||||
outline: none;
|
outline: none;
|
||||||
resize: none;
|
resize: none;
|
||||||
min-height: 40px;
|
min-height: 40px;
|
||||||
|
background-color: var(--note-bg);
|
||||||
border-radius: 10px 10px 0 0;
|
border-radius: 10px 10px 0 0;
|
||||||
max-width: -webkit-fill-available;
|
max-width: -webkit-fill-available;
|
||||||
max-width: -moz-available;
|
max-width: -moz-available;
|
||||||
@ -43,7 +46,7 @@
|
|||||||
.note-creator .btn {
|
.note-creator .btn {
|
||||||
border-radius: 20px;
|
border-radius: 20px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
background-color: var(--gray-secondary);
|
background-color: var(--bg-color);
|
||||||
color: var(--gray-superlight);
|
color: var(--font-color);
|
||||||
border-color: var(--gray-superlight);
|
font-size: var(--font-size);
|
||||||
}
|
}
|
||||||
|
@ -9,8 +9,8 @@
|
|||||||
|
|
||||||
.pfp .avatar {
|
.pfp .avatar {
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
width: 40px;
|
width: 48px;
|
||||||
height: 40px;
|
height: 48px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -1,5 +1,9 @@
|
|||||||
.text a {
|
.text a {
|
||||||
color: var(--highlight);
|
color: var(--highlight);
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
.text a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
}
|
}
|
||||||
|
|
||||||
.text h1 {
|
.text h1 {
|
||||||
@ -26,6 +30,10 @@
|
|||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.text p:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.text pre {
|
.text pre {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
@ -1,5 +1,17 @@
|
|||||||
|
.rta__list {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.rta__item:not(:last-child) {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.rta__entity--selected .user-item, .rta__entity--selected .emoji-item {
|
||||||
|
text-decoration: none;
|
||||||
|
background: var(--gray-secondary);
|
||||||
|
}
|
||||||
|
|
||||||
.user-item, .emoji-item {
|
.user-item, .emoji-item {
|
||||||
background: var(--gray);
|
color: var(--font-color);
|
||||||
|
background: var(--note-bg);
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
@ -63,7 +63,7 @@ const Textarea = ({ users, onChange, ...rest }: any) => {
|
|||||||
|
|
||||||
const emojiDataProvider = (token: string) => {
|
const emojiDataProvider = (token: string) => {
|
||||||
return emoji(token)
|
return emoji(token)
|
||||||
.slice(0, 10)
|
.slice(0, 5)
|
||||||
.map(({ name, char }) => ({ name, char }));
|
.map(({ name, char }) => ({ name, char }));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -12,8 +12,9 @@
|
|||||||
line-height: 1.5em;
|
line-height: 1.5em;
|
||||||
top: -10px;
|
top: -10px;
|
||||||
left: -10px;
|
left: -10px;
|
||||||
font-size: small;
|
font-size: var(--font-size-small);
|
||||||
background-color: var(--error);
|
background-color: var(--error);
|
||||||
|
color: var(--note-bg);
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
|
@ -4,7 +4,7 @@
|
|||||||
--bg-color: #000;
|
--bg-color: #000;
|
||||||
--font-color: #FFF;
|
--font-color: #FFF;
|
||||||
--font-secondary-color: #555;
|
--font-secondary-color: #555;
|
||||||
--font-tertiary-color: #999;
|
--font-tertiary-color: #666;
|
||||||
--font-size: 16px;
|
--font-size: 16px;
|
||||||
--font-size-small: 14px;
|
--font-size-small: 14px;
|
||||||
--font-size-tiny: 12px;
|
--font-size-tiny: 12px;
|
||||||
@ -30,15 +30,17 @@
|
|||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
:root {
|
:root {
|
||||||
--bg-color: #FFF;
|
--bg-color: #F1F1F1;
|
||||||
--font-color: #000;
|
--font-color: #57534E;
|
||||||
--font-secondary-color: #444;
|
--font-secondary-color: #B9B9B9;
|
||||||
--font-tertiary-color: #666;
|
--font-tertiary-color: #F3F3F3;
|
||||||
--highlight-light: #FFC852;
|
|
||||||
--highlight: #FF9B00;
|
--highlight-light: #16AAC1;
|
||||||
--highlight-dark: #944F05;
|
--highlight: #0284C7;
|
||||||
|
--highlight-dark: #0A52B5;
|
||||||
--modal-bg-color: rgba(240, 240, 240, 0.8);
|
--modal-bg-color: rgba(240, 240, 240, 0.8);
|
||||||
--note-bg: #EEE;
|
|
||||||
|
--note-bg: white;
|
||||||
|
|
||||||
--gray: #CCC;
|
--gray: #CCC;
|
||||||
--gray-secondary: #DDD;
|
--gray-secondary: #DDD;
|
||||||
@ -88,10 +90,15 @@ code {
|
|||||||
margin-bottom: 12px;
|
margin-bottom: 12px;
|
||||||
border-radius: 16px;
|
border-radius: 16px;
|
||||||
background-color: var(--note-bg);
|
background-color: var(--note-bg);
|
||||||
padding: 12px;
|
padding: 6px 12px;
|
||||||
}
|
}
|
||||||
@media (min-width: 720px) {
|
@media (min-width: 720px) {
|
||||||
.card { margin-bottom: 24px; padding: 24px; }
|
.card { margin-bottom: 24px; padding: 12px 24px; }
|
||||||
|
}
|
||||||
|
@media (prefers-color-scheme: light) {
|
||||||
|
.card {
|
||||||
|
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.card .header {
|
.card .header {
|
||||||
@ -112,6 +119,7 @@ code {
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
background-color: var(--bg-color);
|
background-color: var(--bg-color);
|
||||||
|
color: var(--font-color);
|
||||||
border: 1px solid;
|
border: 1px solid;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user