add: journals + notes
This commit is contained in:
parent
c08a26ae8d
commit
c1568ad866
26 changed files with 1431 additions and 265 deletions
232
crates/app/src/public/css/chats.css
Normal file
232
crates/app/src/public/css/chats.css
Normal file
|
|
@ -0,0 +1,232 @@
|
|||
:root {
|
||||
--list-bar-width: 64px;
|
||||
--channels-bar-width: 256px;
|
||||
--sidebar-height: calc(100dvh - 42px);
|
||||
--channel-header-height: 48px;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.name.shortest {
|
||||
max-width: 165px;
|
||||
overflow-wrap: normal;
|
||||
}
|
||||
|
||||
.send_button {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.send_button .icon {
|
||||
width: 2em;
|
||||
height: 2em;
|
||||
}
|
||||
|
||||
a.channel_icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
a.channel_icon .icon {
|
||||
min-width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
a.channel_icon.small {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
min-height: 24px;
|
||||
}
|
||||
|
||||
a.channel_icon.small .icon {
|
||||
min-width: 12px;
|
||||
height: 12px;
|
||||
}
|
||||
|
||||
a.channel_icon:has(img) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
a.channel_icon img {
|
||||
min-width: 48px;
|
||||
min-height: 48px;
|
||||
}
|
||||
|
||||
a.channel_icon img,
|
||||
a.channel_icon:has(.icon) {
|
||||
transition:
|
||||
outline 0.25s,
|
||||
background 0.15s !important;
|
||||
}
|
||||
|
||||
a.channel_icon:not(.selected):hover img,
|
||||
a.channel_icon:not(.selected):hover:has(.icon) {
|
||||
outline: solid 1px var(--color-text);
|
||||
}
|
||||
a.channel_icon.selected img,
|
||||
a.channel_icon.selected:has(.icon) {
|
||||
outline: solid 2px var(--color-text);
|
||||
}
|
||||
|
||||
nav {
|
||||
background: var(--color-raised);
|
||||
color: var(--color-text-raised) !important;
|
||||
height: 42px;
|
||||
position: sticky !important;
|
||||
}
|
||||
|
||||
nav::after {
|
||||
display: block;
|
||||
position: absolute;
|
||||
background: var(--color-super-lowered);
|
||||
height: 1px;
|
||||
width: calc(100% - var(--list-bar-width));
|
||||
bottom: 0;
|
||||
left: var(--list-bar-width);
|
||||
content: "";
|
||||
}
|
||||
|
||||
nav .content_container {
|
||||
max-width: 100% !important;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.chats_nav {
|
||||
display: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.chats_nav button {
|
||||
justify-content: flex-start;
|
||||
width: 100% !important;
|
||||
flex-direction: row !important;
|
||||
font-size: 16px !important;
|
||||
margin-top: -4px;
|
||||
}
|
||||
|
||||
.chats_nav button svg {
|
||||
margin-right: var(--pad-4);
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
background: var(--color-raised);
|
||||
color: var(--color-text-raised);
|
||||
border-right: solid 1px var(--color-super-lowered);
|
||||
padding: 0.4rem;
|
||||
width: max-content;
|
||||
height: var(--sidebar-height);
|
||||
overflow: auto;
|
||||
transition: left 0.15s;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.sidebar .title:not(.dropdown *) {
|
||||
padding: var(--pad-4);
|
||||
border-bottom: solid 1px var(--color-super-lowered);
|
||||
}
|
||||
|
||||
.sidebar#channels_list {
|
||||
width: var(--channels-bar-width);
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
.sidebar#notes_list {
|
||||
width: calc(var(--channels-bar-width) + var(--list-bar-width));
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
#stream {
|
||||
width: calc(
|
||||
100dvw - var(--list-bar-width) - var(--channels-bar-width)
|
||||
) !important;
|
||||
height: var(--sidebar-height);
|
||||
}
|
||||
|
||||
.message {
|
||||
transition: background 0.15s;
|
||||
box-shadow: none;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.message:hover {
|
||||
background: var(--color-raised);
|
||||
}
|
||||
|
||||
.message:hover .hidden,
|
||||
.message:focus .hidden,
|
||||
.message:active .hidden {
|
||||
display: flex !important;
|
||||
}
|
||||
|
||||
.message.grouped {
|
||||
padding: var(--pad-1) var(--pad-4) var(--pad-1)
|
||||
calc(var(--pad-4) + var(--pad-2) + 42px);
|
||||
}
|
||||
|
||||
turbo-frame {
|
||||
display: contents;
|
||||
}
|
||||
|
||||
.channel_header {
|
||||
height: var(--channel-header-height);
|
||||
}
|
||||
|
||||
.members_list_half {
|
||||
padding-top: var(--pad-4);
|
||||
border-top: solid 1px var(--color-super-lowered);
|
||||
}
|
||||
|
||||
.channels_list_half:not(.no_members),
|
||||
.members_list_half {
|
||||
overflow: auto;
|
||||
height: calc(
|
||||
(var(--sidebar-height) - var(--channel-header-height) - 8rem) / 2
|
||||
);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
:root {
|
||||
--sidebar-height: calc(100dvh - 42px * 2);
|
||||
}
|
||||
|
||||
.message.grouped {
|
||||
padding: var(--pad-1) var(--pad-4) var(--pad-1)
|
||||
calc(var(--pad-4) + var(--pad-2) + 31px);
|
||||
}
|
||||
|
||||
body:not(.sidebars_shown) .sidebar {
|
||||
position: absolute;
|
||||
left: -200%;
|
||||
}
|
||||
|
||||
body.sidebars_shown .sidebar {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
#stream {
|
||||
width: 100dvw !important;
|
||||
height: var(--sidebar-height);
|
||||
}
|
||||
|
||||
nav::after {
|
||||
width: 100dvw;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.chats_nav {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
nav:has(+ .chats_nav) .dropdown .inner {
|
||||
top: calc(100% + 44px);
|
||||
}
|
||||
|
||||
.padded_section {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -116,7 +116,7 @@ article {
|
|||
padding: 0;
|
||||
}
|
||||
|
||||
body .card:not(.card *):not(#stream *):not(.user_plate),
|
||||
body .card:not(.card *):not(.user_plate),
|
||||
body .pillmenu:not(.card *) > a,
|
||||
body .card-nest:not(.card *) > .card,
|
||||
body .banner {
|
||||
|
|
|
|||
|
|
@ -273,6 +273,12 @@ button,
|
|||
font-weight: 600;
|
||||
}
|
||||
|
||||
button:disabled,
|
||||
.button:disabled {
|
||||
cursor: not-allowed;
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
button.small,
|
||||
.button.small {
|
||||
/* min-height: max-content; */
|
||||
|
|
@ -714,6 +720,13 @@ nav .button:not(.title):not(.active):hover {
|
|||
border-bottom-right-radius: var(--radius) !important;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 900px) {
|
||||
.mobile_nav:not(.mobile) {
|
||||
border-radius: var(--radius);
|
||||
border: solid 1px var(--color-super-lowered);
|
||||
}
|
||||
}
|
||||
|
||||
/* dialog */
|
||||
dialog {
|
||||
padding: 0;
|
||||
|
|
@ -1072,7 +1085,7 @@ details[open] summary::after {
|
|||
animation: fadein ease-in-out 1 0.1s forwards running;
|
||||
}
|
||||
|
||||
details .card {
|
||||
details > .card {
|
||||
background: var(--color-super-raised);
|
||||
}
|
||||
|
||||
|
|
@ -1113,3 +1126,127 @@ details.accordion .inner {
|
|||
border: solid 1px var(--color-super-lowered);
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
/* codemirror */
|
||||
.CodeMirror {
|
||||
color: var(--color-text) !important;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
background: transparent !important;
|
||||
font-family: inherit !important;
|
||||
height: 10rem !important;
|
||||
min-height: 100%;
|
||||
max-height: 100%;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
.CodeMirror-cursor {
|
||||
border-color: rgb(0, 0, 0) !important;
|
||||
}
|
||||
|
||||
.CodeMirror-cursor:is(.dark *) {
|
||||
border-color: rgb(255, 255, 255) !important;
|
||||
}
|
||||
|
||||
.CodeMirror-cursor {
|
||||
height: 22px !important;
|
||||
}
|
||||
|
||||
[role="presentation"]::-moz-selection,
|
||||
[role="presentation"] *::-moz-selection {
|
||||
background-color: rgb(191, 219, 254) !important;
|
||||
}
|
||||
|
||||
[role="presentation"]::selection,
|
||||
[role="presentation"] *::selection,
|
||||
.CodeMirror-selected {
|
||||
background-color: rgb(191, 219, 254) !important;
|
||||
}
|
||||
|
||||
[role="presentation"]:is(.dark *)::-moz-selection,
|
||||
[role="presentation"] *:is(.dark *)::-moz-selection {
|
||||
background-color: rgb(64, 64, 64) !important;
|
||||
}
|
||||
|
||||
[role="presentation"]:is(.dark *)::selection,
|
||||
[role="presentation"] *:is(.dark *)::selection,
|
||||
.CodeMirror-selected:is(.dark *) {
|
||||
background-color: rgb(64, 64, 64) !important;
|
||||
}
|
||||
|
||||
.cm-header {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.cm-variable-2,
|
||||
.cm-quote,
|
||||
.cm-keyword,
|
||||
.cm-string,
|
||||
.cm-atom {
|
||||
color: rgb(63, 98, 18) !important;
|
||||
}
|
||||
|
||||
.cm-variable-2:is(.dark *),
|
||||
.cm-quote:is(.dark *),
|
||||
.cm-keyword:is(.dark *),
|
||||
.cm-string:is(.dark *),
|
||||
.cm-atom:is(.dark *) {
|
||||
color: rgb(217, 249, 157) !important;
|
||||
}
|
||||
|
||||
.cm-comment {
|
||||
color: rgb(153 27 27) !important;
|
||||
}
|
||||
|
||||
.cm-comment:is(.dark *) {
|
||||
color: rgb(254, 202, 202) !important;
|
||||
}
|
||||
|
||||
.cm-comment {
|
||||
font-family: ui-monospace, monospace;
|
||||
}
|
||||
|
||||
.cm-link {
|
||||
color: var(--color-link) !important;
|
||||
}
|
||||
|
||||
.cm-url,
|
||||
.cm-property,
|
||||
.cm-qualifier {
|
||||
color: rgb(29, 78, 216) !important;
|
||||
}
|
||||
|
||||
.cm-url:is(.dark *),
|
||||
.cm-property:is(.dark *),
|
||||
.cm-qualifier:is(.dark *) {
|
||||
color: rgb(191, 219, 254) !important;
|
||||
}
|
||||
|
||||
.cm-variable-3,
|
||||
.cm-tag,
|
||||
.cm-def,
|
||||
.cm-attribute,
|
||||
.cm-number {
|
||||
color: rgb(91, 33, 182) !important;
|
||||
}
|
||||
|
||||
.cm-variable-3:is(.dark *),
|
||||
.cm-tag:is(.dark *),
|
||||
.cm-def:is(.dark *),
|
||||
.cm-attribute:is(.dark *),
|
||||
.cm-number:is(.dark *) {
|
||||
color: rgb(221, 214, 254) !important;
|
||||
}
|
||||
|
||||
.CodeMirror {
|
||||
height: auto !important;
|
||||
}
|
||||
|
||||
.CodeMirror-line {
|
||||
padding-left: 0 !important;
|
||||
}
|
||||
|
||||
.CodeMirror-focused .CodeMirror-placeholder {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue