Skip to content

Instantly share code, notes, and snippets.

@JadedBlueEyes

JadedBlueEyes/bubbles.css

Last active January 2, 2025 16:11
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save JadedBlueEyes/e762e7c102f3cdd1fa09d7a367c3ad0f to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save JadedBlueEyes/e762e7c102f3cdd1fa09d7a367c3ad0f to your computer and use it in GitHub Desktop.
Download ZIP
Gomuks themes
Raw
bubbles.css
:root {
--gutter-size: 11px;
--avatar-size: 40px;
--bubble-chain-gap: 2px;
--grid-gap: .5rem;
--bubble-avatar-overlap: calc(1/3);
--bubble-line-margin-inline-start: calc(-1 * (var(--avatar-size) * var(--bubble-avatar-overlap) + var(--grid-gap)));
--bubble-line-margin-inline-end: -12px;
--corner-radius: 12px;
--max-width: 70%;
--accent-color: oklch(35% 0.125 320deg);
--bubble-background-color: oklch(from var(--accent-color) 23.93% 0.01 h);
--bubble-self-background-color: oklch(from var(--accent-color) 22% 0.1 h);
}
div.timeline-event {
margin-top: calc(var(--gutter-size)/2);
max-width: none;
padding-top: 0;
contain: layout;
>div.sender-avatar {
grid-area: avatar;
width: var(--avatar-size);
height: var(--avatar-size);
margin-top: 2px;
z-index: 1;
}
>div.event-sender-and-time {
margin-inline-start: calc(-1*var(--grid-gap)/2);
}
>div.event-time-only {
grid-area: unset;
bottom: 0;
padding: 4px 8px;
position: absolute;
right: 0;
z-index: 3;
visibility: hidden;
}
&:hover>div.event-time-only {
visibility: visible;
}
&:not(.small-event)>div.event-content {
overflow: visible;
contain: content;
margin-inline: var(--bubble-line-margin-inline-start) var(--bubble-line-margin-inline-end);
}
>div.event-send-status {
/* Align send status with bottom of message */
align-self: flex-end;
}
>div.context-menu-container {
/* Hack to deal with large messages expanding the grid */
position: static;
}
>div.event-content>div.message-text {
background-color: var(--bubble-background-color);
padding: calc(var(--gutter-size) - 1px);
padding-inline-end: calc(var(--gutter-size) * 2);
>div.sender-avatar {
grid-area: avatar;
width: var(--avatar-size);
height: var(--avatar-size);
margin-top: 2px;
z-index: 1;
}
max-width: var(--max-width);
width: fit-content;
border-top-left-radius: var(--corner-radius);
border-top-right-radius: var(--corner-radius);
}
&.same-sender {
margin-top: var(--bubble-chain-gap);
}
/* The last message in a chain */
&:not(:has(+ .same-sender)) {
margin-bottom: calc(var(--gutter-size)/2);
}
&:not(.sender-self) {
>div.event-content>div.message-text {
border-bottom-right-radius: var(--corner-radius);
}
&.same-sender {
>div.event-content>div.message-text {
border-top-left-radius: 0;
}
}
&:not(:has(+ .same-sender)) {
>div.event-content>div.message-text {
border-bottom-left-radius: var(--corner-radius);
}
}
}
&.sender-self {
grid-template:
"cmc cmc cmc cmc" 0
"sender sender gap avatar" auto
"content content gap avatar" auto
/ 2rem 1fr .5rem 2.5rem;
justify-items: end;
/* margin-inline-start: auto; */
>div.event-send-status {
grid-area: avatar;
}
>div.event-sender-and-time>.event-time{
order: -1;
}
&:not(.small-event)>div.event-content {
margin-inline: var(--bubble-line-margin-inline-end) var(--bubble-line-margin-inline-start);
align-content: right;
}
>div.event-time-only {
right: unset;
left: 0;
}
>div.event-content>div.message-text {
background-color: var(--bubble-self-background-color);
border-bottom-left-radius: var(--corner-radius);
float: right;
}
&.same-sender {
>div.event-content>div.message-text {
border-top-right-radius: 0;
}
}
&:not(:has(+ .same-sender)) {
>div.event-content>div.message-text {
border-bottom-right-radius: var(--corner-radius);
}
}
}
}
Raw
jadetheme.css
:root {
--gutter-size: 11px;
--avatar-size: 40px;
--bubble-chain-gap: 2px;
--grid-gap: .5rem;
--bubble-avatar-overlap: calc(1/3);
--bubble-line-margin-inline-start: calc(-1 * (var(--avatar-size) * var(--bubble-avatar-overlap) + var(--grid-gap)));
--bubble-line-margin-inline-end: -12px;
--corner-radius: 12px;
--max-width: 70%;
--accent-color: oklch(35% 0.125 320deg);
--bubble-background-color: oklch(from var(--accent-color) 23.93% 0.01 h);
--bubble-self-background-color: oklch(from var(--accent-color) 22% 0.1 h);
--timeline-status-size: 1rem;
--room-list-background: oklch(from var(--accent-color) 20% 0.01 h / 90%);
--room-list-background-overlay: transparent;
--room-list-search-background-overlay: oklch(from var(--room-list-background) 25% c h);
}
div.room-entry {
padding: .2rem;
box-sizing: border-box;
height: 3.45rem;
}
div.room-view {
grid-template: "header" 3.5rem "messageview" 1fr "autocomplete" 0 "typing" auto "input" auto / 1fr;
}
div.message-composer {
margin: 0;
border-radius: 0;
}
div.typing-notifications {
min-block-size: 1.6rem;
margin: 0;
padding-block: .25rem;
padding-inline: 1.6rem;
background-color: var(--background-color);
width: 100%;
box-shadow: 0 0 1rem var(--background-color);
bottom: 0;
position: absolute;
&.empty {
display: none;
}
}
div.timeline-event {
margin-top: calc(var(--gutter-size)/2);
max-width: none;
padding-top: 0;
contain: layout;
> div.read-receipts {
overflow: visible;
}
>div.sender-avatar {
grid-area: avatar;
width: var(--avatar-size);
height: var(--avatar-size);
margin-top: 2px;
z-index: 1;
}
>div.event-sender-and-time {
margin-inline-start: calc(-1*var(--grid-gap)/2);
}
>div.event-time-only {
grid-area: unset;
bottom: 0;
padding: 4px 8px;
position: absolute;
right: 0;
z-index: 3;
visibility: hidden;
}
&:hover>div.event-time-only {
visibility: visible;
}
&:not(.small-event)>div.event-content {
contain: content;
margin-inline: var(--bubble-line-margin-inline-start) var(--bubble-line-margin-inline-end);
display: flex;
flex-direction: column;
}
>div.event-send-status {
/* Align send status with bottom of message */
align-self: flex-end;
}
>div.context-menu-container {
/* Hack to deal with large messages expanding the grid */
/* position: static; */
}
>div.event-content>div.message-text {
background-color: var(--bubble-background-color);
padding: calc(var(--gutter-size) - 1px);
padding-inline-end: calc(var(--gutter-size) * 2);
max-width: var(--max-width);
width: fit-content;
border-top-left-radius: var(--corner-radius);
border-top-right-radius: var(--corner-radius);
>div.sender-avatar {
grid-area: avatar;
width: var(--avatar-size);
height: var(--avatar-size);
margin-top: 2px;
z-index: 1;
}
}
&.same-sender {
margin-top: var(--bubble-chain-gap);
}
/* The last message in a chain */
&:not(:has(+ .same-sender)) {
margin-bottom: calc(var(--gutter-size)/2);
}
&.own-event {
>div.event-content>div.message-text {
background-color: var(--bubble-self-background-color);
}
}
&:not(.own-event) {
>div.event-content>div.message-text {
border-bottom-right-radius: var(--corner-radius);
}
&.same-sender {
>div.event-content>div.message-text {
border-top-left-radius: 0;
}
}
&:not(:has(+ .same-sender)) {
>div.event-content>div.message-text {
border-bottom-left-radius: var(--corner-radius);
}
}
}
/* grid-template:
"cmc cmc cmc empty" 0
"avatar gap sender sender" auto
"avatar gap content status" auto
/ var(--timeline-avatar-size) var(--timeline-avatar-gap) 1fr var(--timeline-status-size); */
&.own-event {
&:not(.small-event) {
grid-template:
"cmc cmc cmc cmc" 0
"sender gap avatar empty" auto
"content gap avatar status" auto
/ 1fr var(--timeline-avatar-gap) var(--timeline-avatar-size) var(--timeline-status-size);
}
>div.event-sender-and-time{
/* direction: rtl; */
justify-self: end;
>.event-time{
order: -1;
}
}
&:not(.small-event)>div.event-content {
margin-inline: var(--bubble-line-margin-inline-end) var(--bubble-line-margin-inline-start);
/* justify-self: end; */
/* margin-inline-start: auto; */
/* direction: rtl; */
align-items: flex-end;
}
>div.event-time-only {
right: unset;
left: 0;
}
>div.event-content>div.message-text {
border-bottom-left-radius: var(--corner-radius);
}
&.same-sender {
>div.event-content>div.message-text {
border-top-right-radius: 0;
}
}
&:not(:has(+ .same-sender)) {
>div.event-content>div.message-text {
border-bottom-right-radius: var(--corner-radius);
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment