note adjustments

This commit is contained in:
Alejandro Gomez 2023-01-20 16:57:45 +01:00
parent c6e0c2b7c9
commit 6f1a4c0cd0
No known key found for this signature in database
GPG Key ID: 4DF39E566658C817
6 changed files with 36 additions and 29 deletions

View File

@ -7,7 +7,7 @@
.copy .body {
font-family: monospace;
font-size: 14px;
background: var(--gray-secondary);
background: var(--note-bg);
color: var(--font-color);
padding: 2px 4px;
border-radius: 10px;

View File

@ -1,19 +1,3 @@
.note {
margin-bottom: 12px;
border-radius: 16px;
background-color: var(--note-bg);
padding: 12px;
min-height: 110px;
}
@media (min-width: 720px) {
.note { margin-bottom: 24px; padding: 24px; }
}
@media (prefers-color-scheme: light) {
.note {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.05);
}
}
.note.thread {
border-bottom: none;
}
@ -31,6 +15,7 @@
.note > .body {
margin-top: 12px;
padding-left: 56px;
text-overflow: ellipsis;
white-space: pre-wrap;
word-break: normal;
@ -38,6 +23,10 @@
overflow-y: visible;
}
.note > .footer {
padding-left: 46px;
}
.note > .header img:hover, .note > .header .name > .reply:hover, .note .body:hover {
cursor: pointer;
}
@ -130,6 +119,10 @@
color: var(--font-tertiary-color);
}
.note.active > .footer > .reaction-pill.reacted {
color: var(--highlight);
}
@media (prefers-color-scheme: light) {
.indented .active {
background-color: var(--gray-secondary);
@ -143,7 +136,4 @@
.note.active > .footer > .reaction-pill {
color: var(--font-secondary-color);
}
.note.active > .footer > .reaction-pill.reacted {
color: var(--highlight);
}
}

View File

@ -1,7 +1,9 @@
.note-creator {
margin-bottom: 10px;
background-color: var(--gray);
background-color: var(--note-bg);
border: 1px solid var(--gray);
border-radius: 10px;
padding: 6px;
}
.note-reply {
@ -12,6 +14,7 @@
outline: none;
resize: none;
min-height: 40px;
background-color: var(--note-bg);
border-radius: 10px 10px 0 0;
max-width: -webkit-fill-available;
max-width: -moz-available;
@ -43,7 +46,7 @@
.note-creator .btn {
border-radius: 20px;
font-weight: bold;
background-color: var(--gray-secondary);
color: var(--gray-superlight);
border-color: var(--gray-superlight);
background-color: var(--bg-color);
color: var(--font-color);
font-size: var(--font-size);
}

View File

@ -9,8 +9,8 @@
.pfp .avatar {
border-width: 1px;
width: 40px;
height: 40px;
width: 48px;
height: 48px;
cursor: pointer;
}

View File

@ -1,5 +1,9 @@
.text a {
color: var(--highlight);
text-decoration: none;
}
.text a:hover {
text-decoration: underline;
}
.text h1 {
@ -26,6 +30,10 @@
margin-bottom: 4px;
}
.text p:last-child {
margin-bottom: 0;
}
.text pre {
margin: 0;
}

View File

@ -4,7 +4,7 @@
--bg-color: #000;
--font-color: #FFF;
--font-secondary-color: #555;
--font-tertiary-color: #999;
--font-tertiary-color: #666;
--font-size: 16px;
--font-size-small: 14px;
--font-size-tiny: 12px;
@ -88,10 +88,15 @@ code {
margin-bottom: 12px;
border-radius: 16px;
background-color: var(--note-bg);
padding: 12px;
padding: 6px 12px;
}
@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 {
@ -112,6 +117,7 @@ code {
cursor: pointer;
user-select: none;
background-color: var(--bg-color);
color: var(--font-color);
border: 1px solid;
display: inline-block;
}