/* 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; }