790 lines
12 KiB
CSS
790 lines
12 KiB
CSS
/* Global */
|
|
|
|
textview, text {
|
|
color: inherit;
|
|
background: none;
|
|
}
|
|
|
|
.bold {
|
|
font-weight: bold;
|
|
}
|
|
|
|
button.pill.large {
|
|
padding: 12px 40px;
|
|
}
|
|
|
|
.emoji {
|
|
font-size: 2em;
|
|
}
|
|
|
|
listview.content {
|
|
border-radius: 9px;
|
|
border-width: 1px;
|
|
border-style: solid;
|
|
}
|
|
|
|
listview.content row:last-child {
|
|
border-bottom-width: 0px;
|
|
}
|
|
|
|
headerbar .suggested-action, .standalone-button {
|
|
min-width: 70px;
|
|
}
|
|
|
|
button.opaque.success {
|
|
color: @success_fg_color;
|
|
background-color: @success_bg_color;
|
|
}
|
|
|
|
.extra-large-icon {
|
|
-gtk-icon-size: 128px;
|
|
}
|
|
|
|
.extra-large-icon.error {
|
|
color: @error_bg_color;
|
|
}
|
|
|
|
button.row {
|
|
min-height: 34px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
.round-corners {
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.form-page scrolledwindow > viewport > clamp > box {
|
|
margin: 42px 12px;
|
|
border-spacing: 24px;
|
|
}
|
|
|
|
.form-page .card {
|
|
padding: 2px;
|
|
}
|
|
|
|
.form-page levelbar.discrete block {
|
|
min-height: 5px;
|
|
}
|
|
|
|
box.paragraphs {
|
|
border-spacing: 12px;
|
|
}
|
|
|
|
levelbar.discrete.accent block.filled {
|
|
background-color: @accent_color;
|
|
}
|
|
|
|
levelbar.discrete.success block.filled {
|
|
background-color: @success_color;
|
|
}
|
|
|
|
levelbar.discrete.warning block.filled {
|
|
background-color: @warning_color;
|
|
}
|
|
|
|
levelbar.discrete.error block.filled {
|
|
background-color: @error_color;
|
|
}
|
|
|
|
.content .label-button {
|
|
min-width: 86px;
|
|
}
|
|
|
|
|
|
/* Components */
|
|
|
|
.inline-pill {
|
|
border-radius: 9999px;
|
|
background-color: alpha(@view_fg_color, 0.1);
|
|
padding-right: 6px;
|
|
}
|
|
|
|
.app-notification {
|
|
border-radius: 9999px;
|
|
padding-left: 24px;
|
|
}
|
|
|
|
.app-notification .inline-pill {
|
|
background-color: alpha(@window_bg_color, 0.2);
|
|
}
|
|
|
|
.selected-avatar avatar {
|
|
border: 2px solid @accent_bg_color;
|
|
}
|
|
|
|
.blue-checkmark {
|
|
color: @light_1;
|
|
border-radius: 9999px;
|
|
border: solid @accent_bg_color 2px;
|
|
background-color: @accent_bg_color;
|
|
}
|
|
|
|
.badge {
|
|
color: @dark_5;
|
|
background-color: @light_3;
|
|
border-radius: 0.4em;
|
|
padding: 0.1em 0.5em;
|
|
font-size: 0.8em;
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
.badge.admin {
|
|
color: @light_1;
|
|
background-color: @red_2;
|
|
}
|
|
|
|
.badge.mod {
|
|
background-color: @yellow_5;
|
|
}
|
|
|
|
media-viewer headerbar {
|
|
background: black;
|
|
color: white;
|
|
}
|
|
|
|
media-content-viewer controls {
|
|
min-width: 300px;
|
|
}
|
|
|
|
location-viewer .map-marker {
|
|
color: @accent_color;
|
|
}
|
|
|
|
entry .inline-pill {
|
|
margin-bottom: -0.5em;
|
|
}
|
|
|
|
editable-avatar .cutout {
|
|
background-color: @window_bg_color;
|
|
border-radius: 9999px;
|
|
padding: 2px;
|
|
}
|
|
|
|
|
|
/* Login */
|
|
|
|
login {
|
|
min-width: 250px;
|
|
}
|
|
|
|
.qrcode {
|
|
background-color: white;
|
|
padding: 12px;
|
|
}
|
|
|
|
.sso-button {
|
|
padding: 4px;
|
|
-gtk-icon-size: 26px;
|
|
min-height: 34px;
|
|
}
|
|
|
|
/* Session */
|
|
|
|
.session-loading-spinner {
|
|
min-width: 32px;
|
|
min-height: 32px;
|
|
}
|
|
|
|
|
|
/* Verification */
|
|
|
|
.session-verification clamp {
|
|
margin: 12px;
|
|
}
|
|
|
|
.session-verification .text-button {
|
|
min-width: 200px;
|
|
}
|
|
|
|
|
|
/* Account switcher */
|
|
|
|
.account-switcher list {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.account-switcher .account-switcher-row {
|
|
border-radius: 10px;
|
|
margin: 3px 0px;
|
|
padding: 6px 12px;
|
|
}
|
|
|
|
.account-switcher .account-switcher-row:first-child {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.account-switcher button.account-switcher-row {
|
|
font-weight: normal;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
#new-login-icon {
|
|
padding: 12px; /* 2 * padding + pixel-size = size (of avatar) */
|
|
background-color: alpha(currentColor, .1);
|
|
border-radius: 9999px;
|
|
}
|
|
|
|
|
|
/* Sidebar */
|
|
|
|
.sidebar-list row {
|
|
margin: 0;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.sidebar-list row:focus-within {
|
|
outline: 0;
|
|
}
|
|
|
|
.sidebar-list row:hover,
|
|
.sidebar-list row:selected {
|
|
background: none;
|
|
}
|
|
|
|
sidebar-row > * {
|
|
margin: 0 6px;
|
|
padding: 9px;
|
|
border-radius: 6px;
|
|
transition-property: outline, outline-width, outline-offset, outline-color;
|
|
transition-duration: 300ms;
|
|
animation-timing-function: ease-in-out;
|
|
outline: 0 solid transparent;
|
|
outline-offset: 2px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
sidebar-row:focus > * {
|
|
outline-color: alpha(@accent_color, 0.5);
|
|
outline-width: 2px;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
sidebar-row:not(.drop-mode) > *:hover {
|
|
background-color: alpha(currentColor, 0.07);
|
|
}
|
|
|
|
.sidebar-list row:active sidebar-row > * {
|
|
background-color: alpha(currentColor, 0.16);
|
|
}
|
|
|
|
.sidebar-list row:selected sidebar-row > * {
|
|
background-color: alpha(currentColor, 0.1);
|
|
}
|
|
|
|
.sidebar-list row:selected sidebar-row:not(.drop-mode) > *:hover {
|
|
background-color: alpha(currentColor, 0.13);
|
|
}
|
|
|
|
.sidebar-list row:selected:active sidebar-row > * {
|
|
background-color: alpha(currentColor, 0.19);
|
|
}
|
|
|
|
sidebar-row icon-item {
|
|
background: none;
|
|
font-weight: bold;
|
|
}
|
|
|
|
sidebar-row icon-item image {
|
|
min-width: 24px; /* Same width as avatars, so the text is aligned */
|
|
}
|
|
|
|
sidebar-row category {
|
|
margin-top: 6px;
|
|
font-size: 0.8em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
sidebar-row category image.arrow {
|
|
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
|
|
sidebar-row category:not(:checked) image.arrow:dir(ltr) {
|
|
transform: rotate(-0.5turn);
|
|
}
|
|
|
|
sidebar-row category:not(:checked) image.arrow:dir(rtl) {
|
|
transform: rotate(0.5turn);
|
|
}
|
|
|
|
sidebar-row room .notification_count {
|
|
font-weight: bold;
|
|
font-size: 0.8em;
|
|
border-radius: 10px;
|
|
min-width: 0.7em;
|
|
padding: 2px 5px;
|
|
color: currentColor;
|
|
background-color: alpha(currentColor, 0.15);
|
|
}
|
|
|
|
sidebar-row room .highlight {
|
|
color: @accent_fg_color;
|
|
background-color: @accent_bg_color;
|
|
}
|
|
|
|
sidebar-row.drag > * {
|
|
color: @accent_fg_color;
|
|
background-color: @accent_bg_color;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
sidebar-row.drop-disabled > * {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
sidebar-row.drop-empty > * {
|
|
color: @accent_color;
|
|
}
|
|
|
|
sidebar-row icon-item.forget {
|
|
color: @error_color;
|
|
background: none;
|
|
}
|
|
|
|
sidebar-row.drop-active {
|
|
background-color: alpha(@accent_color, 0.1);
|
|
}
|
|
|
|
sidebar-row.drop-active category {
|
|
color: @accent_color;
|
|
}
|
|
|
|
sidebar-row.drop-active .dim-label,
|
|
sidebar-row.drop-active.drop-empty .dim-label {
|
|
opacity: 1;
|
|
}
|
|
|
|
|
|
/* Room History */
|
|
|
|
.room-history listview {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.room-history row {
|
|
min-height: 0;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
}
|
|
|
|
room-history-row {
|
|
padding-top: 6px;
|
|
padding-bottom: 6px;
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
border-radius: 6px;
|
|
transition-property: outline, outline-width, outline-offset, outline-color;
|
|
transition-duration: 300ms;
|
|
animation-timing-function: ease-in-out;
|
|
outline: 0 solid transparent;
|
|
outline-offset: 2px;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
room-history-row.has-header {
|
|
margin-top: 6px;
|
|
}
|
|
|
|
room-history-row:not(.has-header) .event-content:dir(ltr),
|
|
room-history-row:not(.has-header) message-reactions:dir(ltr) {
|
|
margin-left: 46px;
|
|
}
|
|
|
|
room-history-row:not(.has-header) .event-content:dir(rtl),
|
|
room-history-row:not(.has-header) message-reactions:dir(rtl) {
|
|
margin-right: 46px;
|
|
}
|
|
|
|
room-history-row:focus {
|
|
outline-color: alpha(@accent_color, 0.5);
|
|
outline-width: 2px;
|
|
outline-offset: -2px;
|
|
}
|
|
|
|
room-history-row.has-open-popup {
|
|
background-color: alpha(currentColor, 0.07);
|
|
}
|
|
|
|
room-history-row.selected {
|
|
background-color: alpha(currentColor, 0.1);
|
|
}
|
|
|
|
room-history-row.selected.has-open-popup {
|
|
background-color: alpha(currentColor, 0.13);
|
|
}
|
|
|
|
room-history-row.highlight {
|
|
background-color: alpha(@accent_bg_color, .2);
|
|
}
|
|
|
|
room-history-row.highlight.has-open-popup {
|
|
background-color: alpha(@accent_bg_color, .25);
|
|
}
|
|
|
|
room-history-row.highlight.selected {
|
|
background-color: alpha(@accent_bg_color, .3);
|
|
}
|
|
|
|
room-history-row.highlight.selected.has-open-popup {
|
|
background-color: alpha(@accent_bg_color, .33);
|
|
}
|
|
|
|
room-history-row .event-content .emoji {
|
|
font-size: 3em;
|
|
}
|
|
|
|
room-history-row .event-content .emote {
|
|
color: @accent_color;
|
|
}
|
|
|
|
.content-thumbnail {
|
|
border-radius: 6px;
|
|
background-color: @borders;
|
|
}
|
|
|
|
.content-thumbnail .osd.circular {
|
|
min-width: 64px;
|
|
min-height: 64px;
|
|
border-radius: 32px;
|
|
}
|
|
|
|
.content-thumbnail .timestamp {
|
|
border-radius: 4px;
|
|
padding: 2px 5px;
|
|
}
|
|
|
|
room-history-row .event-content .quote,
|
|
.related-event-content {
|
|
border-left: 2px solid @accent_bg_color;
|
|
padding-left: 6px;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
message-reactions .toggle {
|
|
padding: 1px 4px 0 5px;
|
|
}
|
|
|
|
message-reactions .reaction-key {
|
|
font-size: 0.8em;
|
|
}
|
|
message-reactions .reaction-key.emoji{
|
|
font-size: 1.1em;
|
|
}
|
|
|
|
message-reactions .reaction-count {
|
|
font-size: 0.8em;
|
|
padding-left: 6px;
|
|
}
|
|
|
|
.reaction-chooser {
|
|
margin: 6px;
|
|
}
|
|
|
|
.reaction-chooser button {
|
|
font-size: 1.3em;
|
|
-gtk-icon-size: 1.3em;
|
|
padding: 2px;
|
|
}
|
|
|
|
read-receipts-list {
|
|
min-height: 24px;
|
|
min-width: 16px;
|
|
padding: 5px 10px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
read-receipts-list:hover {
|
|
background-color: alpha(currentColor, .07);
|
|
}
|
|
|
|
read-receipts-list:active {
|
|
background-color: alpha(currentColor, .16);
|
|
}
|
|
|
|
read-receipts-list:checked {
|
|
background-color: alpha(currentColor, .1);
|
|
}
|
|
|
|
read-receipts-list .cutout {
|
|
background-color: @view_bg_color;
|
|
border-radius: 999px;
|
|
padding: 1px;
|
|
}
|
|
|
|
.divider-row {
|
|
font-size: 0.9em;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.timestamp {
|
|
min-width: 36px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.codeview {
|
|
border-radius: 5px;
|
|
padding: 6px;
|
|
font-family: monospace;
|
|
background-color: @text_view_bg;
|
|
color: @view_fg_color;
|
|
}
|
|
|
|
.list-popover contents {
|
|
padding: 0;
|
|
}
|
|
|
|
.list-popover viewport, .list-popover listview {
|
|
padding: 8px;
|
|
}
|
|
|
|
.list-popover list, .list-popover listview {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.list-popover .list-popover-row {
|
|
border-radius: 6px;
|
|
margin: 3px 0px;
|
|
padding: 6px;
|
|
}
|
|
|
|
.list-popover .list-popover-row:first-child {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
.list-popover .list-popover-row:last-child {
|
|
margin-bottom: 0px;
|
|
}
|
|
|
|
.related-event-toolbar {
|
|
padding: 0 6px 0 12px;
|
|
}
|
|
|
|
.related-event-toolbar button {
|
|
margin: 12px 6px;
|
|
min-height: 24px;
|
|
min-width: 24px;
|
|
}
|
|
|
|
.related-event-content {
|
|
padding-top: 2px;
|
|
padding-bottom: 2px;
|
|
}
|
|
|
|
typing-row {
|
|
padding: 0 6px;
|
|
min-height: 30px;
|
|
font-style: italic;
|
|
}
|
|
|
|
typing-row .cutout {
|
|
background-color: @view_bg_color;
|
|
border-radius: 999px;
|
|
padding: 2px;
|
|
}
|
|
|
|
.h1 {
|
|
font-weight: 800;
|
|
font-size: 15pt;
|
|
}
|
|
|
|
.h2 {
|
|
font-weight: 800;
|
|
font-size: 14pt;
|
|
}
|
|
|
|
.h3 {
|
|
font-weight: 700;
|
|
font-size: 14pt;
|
|
}
|
|
|
|
.h4 {
|
|
font-weight: 700;
|
|
font-size: 13pt;
|
|
}
|
|
|
|
.h5 {
|
|
font-weight: 700;
|
|
font-size: 12pt;
|
|
}
|
|
|
|
.h6 {
|
|
font-weight: 700;
|
|
font-size: 11pt;
|
|
}
|
|
|
|
roomtitle {
|
|
margin-top: -6px;
|
|
margin-bottom: -6px;
|
|
min-height: 12px;
|
|
}
|
|
|
|
roomtitle .title {
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
roomtitle .subtitle {
|
|
font-size: smaller;
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
|
|
/* Event Source Dialog */
|
|
|
|
.event-source-dialog .sourceview {
|
|
font-family: monospace;
|
|
}
|
|
|
|
|
|
/* Explore */
|
|
|
|
.explore .padded-button {
|
|
min-width: 64px;
|
|
}
|
|
|
|
.explore-servers-popover list {
|
|
background-color: transparent;
|
|
color: inherit;
|
|
}
|
|
|
|
.explore-servers-popover list row {
|
|
min-height: 36px;
|
|
padding: 0 8px;
|
|
border-radius: 6px;
|
|
margin: 0 0 2px;
|
|
}
|
|
|
|
.explore-servers-popover list row button {
|
|
min-height: 24px;
|
|
min-width: 24px;
|
|
}
|
|
|
|
|
|
/* Invite */
|
|
|
|
.invite-room-name {
|
|
font-size: 1.6em;
|
|
}
|
|
|
|
.invite-search-results {
|
|
padding: 12px 0px;
|
|
}
|
|
|
|
.invite-search-results > row {
|
|
border-radius: 6px;
|
|
}
|
|
|
|
/* Media History Viewer */
|
|
|
|
mediahistoryviewer {
|
|
background: black;
|
|
color: white;
|
|
}
|
|
|
|
mediahistoryviewer headerbar {
|
|
background: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
mediahistoryviewer gridview {
|
|
background: none;
|
|
padding: 2px;
|
|
}
|
|
|
|
mediahistoryviewer gridview > child {
|
|
background: none;
|
|
padding: 2px;
|
|
/* ease-out-quad */
|
|
transition: 100ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
|
|
}
|
|
|
|
mediahistoryviewer gridview > child:hover {
|
|
transform: scale(1.03);
|
|
}
|
|
|
|
mediahistoryviewer gridview > child:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
mediahistoryvieweritem > overlay > image {
|
|
border-radius: 100%;
|
|
padding: 12px;
|
|
-gtk-icon-size: 24px;
|
|
}
|
|
|
|
|
|
/* File History Viewer */
|
|
|
|
filehistoryviewer listview > row {
|
|
border-radius: 0;
|
|
}
|
|
|
|
|
|
/* Audio History Viewer */
|
|
|
|
audiohistoryviewer listview > row {
|
|
border-radius: 0;
|
|
}
|
|
|
|
|
|
/* Room Details */
|
|
|
|
.room-details listview {
|
|
background: transparent;
|
|
}
|
|
|
|
.room-details-group entry:disabled {
|
|
border-color: transparent;
|
|
/* Undo non-sensitive style. */
|
|
color: @view_fg_color;
|
|
background: none;
|
|
}
|
|
|
|
.room-details-group entry textview {
|
|
/* Undo non-sensitive style. */
|
|
color: @view_fg_color;
|
|
background: none;
|
|
}
|
|
|
|
.room-details-group entry text {
|
|
/* Undo non-sensitive style. */
|
|
color: @view_fg_color;
|
|
background: none;
|
|
}
|
|
|
|
.room-details-name:disabled {
|
|
font-size: 20pt;
|
|
font-weight: 800;
|
|
margin-top: 24px;
|
|
filter: opacity(1);
|
|
}
|
|
|
|
.room-details-topic:not(:disabled) {
|
|
min-height: 102px;
|
|
}
|
|
|
|
.room-details-topic:disabled {
|
|
filter: opacity(1);
|
|
}
|
|
|
|
members-list row {
|
|
margin-bottom: 6px;
|
|
padding: 8px 12px;
|
|
min-height: 32px;
|
|
border-radius: 12px;
|
|
}
|
|
|
|
members-list row .icon:dir(ltr) {
|
|
margin-right: 6px;
|
|
}
|
|
|
|
members-list row .icon:dir(rtl) {
|
|
margin-left: 6px;
|
|
}
|
|
|
|
dragoverlay statuspage {
|
|
background-color: alpha(@accent_bg_color, 0.5);
|
|
color: @accent_fg_color;
|
|
}
|