fractal/data/resources/style.css
2022-04-13 13:00:26 +00:00

531 lines
8.8 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 {
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;
}
preferencesgroup .body,
.large-line-height {
line-height: 140%;
}
preferencespage.status-page clamp > box {
margin: 42px 12px;
}
button.row {
min-height: 50px;
border-radius: 12px;
}
/* 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;
}
row.entry {
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;
}
row.entry:focus-within {
outline-color: alpha(@accent_color, 0.5);
outline-width: 2px;
outline-offset: -2px;
}
row.entry.success:focus-within {
outline-color: @success_color;
}
row.entry.warning:focus-within {
outline-color: @warning_color;
}
row.entry.error:focus-within {
outline-color: @error_color;
}
row.entry .hint {
font-size: 0.8em;
}
row.entry .header {
margin-top: 6px;
margin-bottom: 6px;
}
row.entry text:disabled,
row.entry text placeholder {
opacity: 0.5;
}
row.entry levelbar.discrete block {
min-height: 5px;
}
row.entry levelbar.discrete block.filled {
background-color: alpha(currentColor, 0.5);
}
row.entry.accent levelbar.discrete block.filled {
background-color: @accent_color;
}
row.entry.success levelbar.discrete block.filled {
background-color: @success_color;
}
row.entry.warning levelbar.discrete block.filled {
background-color: @warning_color;
}
row.entry.error levelbar.discrete block.filled {
background-color: @error_color;
}
row .heading {
font-weight: 600;
}
/* Login */
login {
min-width: 250px;
}
.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 row {
border-radius: 10px;
margin-top: 2px;
margin-bottom: 2px;
padding-top: 7px;
padding-bottom: 7px;
}
#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:selected {
background: none;
}
.sidebar-list row > * {
margin: 0 12px;
padding: 12px 6px;
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;
}
.sidebar-list row:focus-within > * {
outline-color: alpha(@accent_color, 0.5);
outline-width: 2px;
outline-offset: -2px;
}
.sidebar-list:not(.drop-mode) row:hover > * {
background-color: alpha(currentColor, 0.07);
}
.sidebar-list row:active > * {
background-color: alpha(currentColor, 0.16);
}
.sidebar-list row:selected > * {
background-color: alpha(currentColor, 0.1);
}
.sidebar-list:not(.drop-mode) row:selected:hover > *,
.sidebar-list row:selected.has-open-popup > * {
background-color: alpha(currentColor, 0.13);
}
.sidebar-list row:selected:active > * {
background-color: alpha(currentColor, 0.19);
}
.sidebar-list row.entry {
font-weight: bold;
}
.sidebar-list row.category {
margin-top: 6px;
font-size: 0.8em;
font-weight: bold;
}
.sidebar-list row.category image.arrow {
transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.sidebar-list row.category .category-row:not(:checked) image.arrow:dir(ltr) {
transform: rotate(-0.25turn);
}
.sidebar-list row.category .category-row:not(:checked) image.arrow:dir(rtl) {
transform: rotate(0.25turn);
}
.sidebar-list row.room .notification_count {
font-weight: bold;
font-size: 0.8em;
border-radius: 10px;
min-width: 0.7em;
padding: 2px 5px;
}
.sidebar-list row.room .highlight {
color: @accent_fg_color;
background-color: @accent_bg_color;
}
.sidebar-list sidebar-row.drag {
color: @accent_fg_color;
background-color: @accent_bg_color;
opacity: 0.6;
}
.sidebar-list sidebar-row.drop-disabled > * {
opacity: 0.6;
}
.sidebar-list sidebar-row.drop-empty {
color: @accent_color;
}
.sidebar-list sidebar-row.forget {
color: @error_color;
background: none;
}
.sidebar-list row.drop-active {
background-color: alpha(@accent_color, 0.1);
}
.sidebar-list row.category.drop-active,
.sidebar-list row.drop-active sidebar-row.forget {
color: @accent_color;
}
.sidebar-list row.drop-active .dim-label,
.sidebar-list row.drop-active sidebar-row.drop-empty .dim-label {
opacity: 1;
}
/* Room History */
.room-history {
background: @view_bg_color;
}
.room-history row {
min-height: 0;
padding-top: 6px;
padding-bottom: 6px;
}
.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 .event-content .emoji {
font-size: 3em;
}
.room-history .event-content .location .map {
border-radius: 6px;
background-color: @borders;
}
.room-history .event-content .location .map-marker {
color: @accent_color;
}
.room-history .event-content .thumbnail {
border-radius: 6px;
background-color: @borders;
}
.room-history .event-content .thumbnail .osd.circular {
min-width: 64px;
min-height: 64px;
border-radius: 32px;
}
.room-history .event-content .thumbnail .timestamp {
border-radius: 4px;
padding: 2px 5px;
}
.room-history .event-content .quote {
border-left: 2px solid @accent_bg_color;
padding-left: 6px;
opacity: 0.7;
}
message-reactions .toggle {
padding: 1px 4px 0 5px;
background-color: @view_bg_color;
border: 1px solid alpha(currentColor, 0.3);
}
message-reactions .toggle:checked,
.reaction-chooser button:checked {
background-color: alpha(@blue_1, 0.4);
}
message-reactions .toggle:checked {
border-color: alpha(@accent_bg_color, 0.7);
}
message-reactions .reaction-key {
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;
}
.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;
}
/* Event Source Dialog */
.event-source-dialog .sourceview {
font-family: monospace;
}
/* Explore */
.explore listview row {
padding: 12px;
}
/* Invite */
.invite-room-name {
font-size: 1.6em;
}
/* Room Details */
.room-details-group overlay {
margin-bottom: 6px;
}
.room-details-group avatar * {
/* Undo non-sensitive style. */
filter: none;
}
.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 {
font-size: 2em;
margin-bottom: 6px;
}
.room-details-topic {
margin-bottom: 6px;
}
.cutout-button {
background-color: @window_bg_color;
border-radius: 9999px;
padding: 2px;
}
dragoverlay statuspage {
background-color: alpha(@accent_bg_color, 0.5);
color: @accent_fg_color;
}