3708 lines
82 KiB
CSS
3708 lines
82 KiB
CSS
:root {
|
|
color-scheme: light dark;
|
|
|
|
/* Size of text in message bubbles */
|
|
--message-text-size: 10pt;
|
|
|
|
/* Height of caption panel */
|
|
--caption-panel-height: 4rem;
|
|
|
|
/* Core Palette */
|
|
--clr-bright: light-dark(#fff, #181818);
|
|
--clr-dark: light-dark(#000, #fff);
|
|
--clr-transparent: transparent;
|
|
--clr-std-gray: #808080; /* Standard gray color */
|
|
--clr-std-ltgray: light-dark(#c0c0c0, #3f3f3f); /* Standard silver color */
|
|
--clr-std-teal: teal; /* Standard teal color */
|
|
--clr-std-grey: grey; /* Standard grey color */
|
|
--clr-std-orange: #ffa500; /* Standard orange color */
|
|
|
|
/* Primary Accent Colors */
|
|
--clr-primary-accent: light-dark(#2094f3, #0e6dba); /* blue 500, links, borders */
|
|
--clr-primary-accent-hover: light-dark(#0a6ebd, #116ab4); /* hover for primary accent */
|
|
--clr-primary-accent-focus-shadow: light-dark(rgba(33, 150, 243, 0.25), rgba(3, 7, 12, 0.25)); /* focus shadow for inputs with primary accent */
|
|
--clr-primary-accent-transparent-medium: light-dark(rgba(33, 150, 243, 0.3), rgba(20, 70, 120, 0.3)); /* for active call shadow */
|
|
--clr-primary-action: light-dark(#1e89e6, #1571c1); /* blue 600, primary buttons */
|
|
--clr-primary-action-hover: light-dark(#2962ff, #0037b8); /* hover for primary action */
|
|
--clr-primary-light-blue: light-dark(#bcdefb, #78a0be); /* light-blue 100, side caption panel text/link */
|
|
--clr-light-blue-accent: light-dark(#0398e2, #0379b5); /* light-blue accent, reply quote border, pinned active dot */
|
|
|
|
/* Secondary/Neutral Grays & Backgrounds */
|
|
--clr-body-background: var(--clr-std-ltgray); /* Main page background */
|
|
--clr-text-primary: light-dark(#666, #999); /* Default text color */
|
|
--clr-text-secondary: light-dark(#757575, #8a8a8a); /* Muted text, icons e.g. menu trigger */
|
|
--clr-text-tertiary: light-dark(#999, #787878); /* Even more muted text, borders, some icons */
|
|
--clr-text-placeholder: light-dark(#bbb, #555); /* Placeholder text */
|
|
--clr-text-disabled: light-dark(#888, #777); /* Disabled text e.g. in-place-edit */
|
|
--clr-border-light: light-dark(#ccc, #555); /* Common light border, separator */
|
|
--clr-border-muted: light-dark(#ddd, #444); /* Softer border, e.g. in-place-edit dashed */
|
|
--clr-background-off-white: light-dark(#fafafa, #282828); /* Common very light background */
|
|
--clr-background-light-gray: light-dark(#f0f0f0, #0f0f0f); /* HR background, action button hover */
|
|
--clr-background-extra-light-gray: light-dark(#eee, #222); /* Flat button faux bg, tabbar bg, chip bg */
|
|
--clr-background-blue-gray-50: light-dark(#edf0f2, #202c33); /* Contact hover, messages panel, send message panel */
|
|
--clr-background-blue-gray-75: light-dark(#e1e8eb, #182124); /* Contact pinned */
|
|
--clr-background-blue-gray-100: light-dark(#cfd8dc, #20272a); /* Contact selected, uploader bar */
|
|
--clr-background-blue-gray-300: light-dark(#b0bec5, #354146); /* Topic/Info caption panel bg, some lettertiles */
|
|
--clr-blue-wash-light: light-dark(#f0f0ff, #22222d); /* bot form button bg */
|
|
--clr-blue-wash-medium: light-dark(#d8e8ff, #123550); /* Pinned active bg */
|
|
--clr-primary-wash: light-dark(#e3f2fd, #072f45); /* Secondary button hover, avatar upload hover, bubble meta deleted bg */
|
|
--clr-indigo-50: light-dark(#e8eaf6, #1a2c44); /* Outline button hover */
|
|
|
|
/* Semantic Colors: Danger, Warning, Success, Info */
|
|
--clr-danger-text: light-dark(#d33131, #931f1f); /* Danger text, invalid label */
|
|
--clr-danger-text-hover: light-dark(#f44034, #cc1100); /* Hover for danger text */
|
|
--clr-error-text-muted: light-dark(#cc6666, #993333); /* For less critical errors like invalid in-place edit icon/text */
|
|
--clr-error-bg-light: light-dark(#ffccd1, #ff6675); /* Info box error bg */
|
|
--clr-error-border-light: light-dark(#ffbdc6, #ff334e); /* Info box error border */
|
|
--clr-error-text-dark: light-dark(#b51c1c, #de2323); /* Info box error text, icon */
|
|
--clr-error-icon: light-dark(#ef5552, #d81b0e); /* Info box error icon specific */
|
|
--clr-warning-accent: light-dark(#FFC107, #000e16); /* Amber, danger-color */
|
|
--clr-warning-bg-light: light-dark(#fff9c4, #00060c); /* Info box warning bg */
|
|
--clr-warning-border-light: light-dark(#fff59d, #000a2b); /* Info box warning border */
|
|
--clr-warning-text-dark: light-dark(#6d4c41, #a08356); /* Info box warning text */
|
|
--clr-warning-icon: light-dark(#fbc02d, #b48204); /* Info box warning icon specific */
|
|
--clr-info-bg-light: light-dark(#e1f5fe, #010a0e); /* Info box info bg */
|
|
--clr-info-border-light: light-dark(#b3e5fc, #001824); /* Info box info border */
|
|
--clr-info-text-dark: light-dark(#0288d1, #00151f); /* Info box info text, icon */
|
|
|
|
/* Special UI Elements Colors */
|
|
--clr-header-stripe-bg: light-dark(#3949AB, #12152f); /* Deep-blue stripe at top */
|
|
--clr-scrollbar-thumb: light-dark(rgba(0,0,0,0.3), rgba(255,255,255,0.3));
|
|
--clr-scrollbar-track: light-dark(rgba(255,255,255,0.1), rgba(0,0,0,0.1));
|
|
--clr-menu-item-hover-bg: light-dark(#f5f5f5, #0a0a0a);
|
|
--clr-alert-overlay-bg: light-dark(rgba(240,240,240,0.85), rgba(15,15,15,0.85));
|
|
--clr-verified-accent: light-dark(#02a6f2, #027db6); /* Verified color */
|
|
--clr-staff-accent: light-dark(#689f38, #598830); /* Staff color */
|
|
--clr-badge-inv: light-dark(#fffd, #cccd); /* Badge inverted text */
|
|
--clr-cyan-accent: light-dark(#0097a8, #006570); /* Checkmark icon, unread badge bg */
|
|
--clr-cyan-50: light-dark(#e0f7fa, #2f3e43); /* Dummy view bg */
|
|
--clr-overlay-white-strong: light-dark(rgba(255, 255, 255, 0.9), rgba(0,0,0,0.90)); /* Image preview bg, video container bg */
|
|
--clr-gray-medium-bg: light-dark(#777, #444); /* Image preview container bg (darker gray) */
|
|
--clr-toast-bg: #333;
|
|
--clr-toast-text: light-dark(#eee, #aaa);
|
|
--clr-online: #4caf50;
|
|
--clr-offline: light-dark(#ccc, #999);
|
|
|
|
/* Shadow Colors & Values */
|
|
--clr-shadow-input-underline: rgba(0,0,0, 0.1);
|
|
--clr-shadow-hr-inset: rgba(0,0,0,0.15);
|
|
--clr-shadow-scrollbar-track-webkit: rgba(0,0,0,0.2);
|
|
--clr-shadow-button: rgba(0,0,0, 0.25); /* General purpose shadow for buttons, spinners etc. */
|
|
--clr-shadow-button-inset-active: rgba(0,0,0, 0.125);
|
|
--clr-shadow-dialog: rgba(0,0,0, 0.45); /* For menus, alerts, dialogs */
|
|
--clr-shadow-panel-divider: rgba(0,0,0,0.1); /* For subtle shadows under/above panels */
|
|
--clr-shadow-gray-strong: light-dark(var(--clr-std-gray), #333); /* For panel box-shadows using 'gray' keyword */
|
|
--clr-shadow-silver-subtle: light-dark(var(--clr-std-ltgray), #333); /* For panel box-shadows using 'silver' keyword */
|
|
--clr-shadow-bubble-drop: rgba(0,0,0,0.3);
|
|
|
|
/* Buttons */
|
|
--clr-button-primary-bg: var(--clr-primary-action);
|
|
--clr-button-primary-text: var(--clr-bright);
|
|
--clr-button-primary-hover-bg: var(--clr-primary-action-hover);
|
|
--clr-button-secondary-bg: var(--clr-bright);
|
|
--clr-button-secondary-text: var(--clr-primary-accent);
|
|
--clr-button-secondary-hover-bg: var(--clr-primary-wash);
|
|
--clr-button-outline-text: var(--clr-primary-accent);
|
|
--clr-button-outline-border: var(--clr-std-ltgray);
|
|
--clr-button-outline-hover-bg: var(--clr-indigo-50);
|
|
--clr-button-danger-bg: light-dark(#ec645f, #d74742);
|
|
--clr-button-danger-text: var(--clr-bright);
|
|
--clr-button-danger-hover-bg: light-dark(#f77, #a55);
|
|
--clr-button-positive-bg: light-dark(#71c46f, #0d1e0d);
|
|
--clr-button-positive-text: var(--clr-bright);
|
|
--clr-button-positive-hover-bg: light-dark(#7fed7f, #0a120a);
|
|
|
|
/* Inputs */
|
|
--clr-input-text: var(--clr-text-primary);
|
|
--clr-input-border: var(--clr-border-light);
|
|
--clr-input-border-focus: var(--clr-primary-accent);
|
|
--clr-input-shadow: var(--clr-shadow-input-underline);
|
|
--clr-input-shadow-focus: var(--clr-primary-accent-focus-shadow);
|
|
--clr-input-invalid-border: light-dark(#e57171, #561010);
|
|
--clr-input-invalid-shadow: light-dark(rgba(229, 115, 115, 0.25), rgba(26, 12, 12, 0.25));
|
|
--clr-input-placeholder-text: var(--clr-text-placeholder);
|
|
|
|
/* Chat Bubbles */
|
|
--clr-bubble-left-bg: light-dark(#c4e0a3, #3e5c1f);
|
|
--clr-bubble-left-bg-flash: light-dark(#94a97c, #2c4517);
|
|
--clr-bubble-right-bg: var(--clr-background-off-white);
|
|
--clr-bubble-right-bg-flash: var(--clr-border-light);
|
|
--clr-bubble-text: light-dark(#212121, #bbc);
|
|
--clr-bubble-meta-text: var(--clr-text-primary);
|
|
--clr-bubble-meta-deleted-bg: var(--clr-primary-wash);
|
|
--clr-bubble-meta-date-bg: light-dark(rgba(255 255 255 / 80%), rgba(40 40 40 / 80%));
|
|
--clr-bubble-timestamp-text: light-dark(#777, #888);
|
|
--clr-bubble-author-text: light-dark(#777, #666);
|
|
|
|
/* Reply Quotes */
|
|
--clr-reply-quote-border: var(--clr-light-blue-accent);
|
|
--clr-reply-quote-text: var(--clr-text-primary);
|
|
--clr-reply-quote-left-bg: light-dark(rgba(255, 255, 255, 0.4), rgba(0, 0, 0, 0.4));
|
|
--clr-reply-quote-right-bg: light-dark(#8080801f, #c4c4c42e);
|
|
--clr-reply-quote-preview-bg: var(--clr-background-off-white);
|
|
|
|
/* Badges (small inline labels) */
|
|
--clr-badge-default-bg: light-dark(#e8e8e8, #171717);
|
|
--clr-badge-default-text: var(--clr-text-primary);
|
|
--clr-badge-default-border: var(--clr-std-ltgray);
|
|
--clr-badge-green-bg: light-dark(#efe, #131);
|
|
--clr-badge-green-text: light-dark(#383, #363);
|
|
--clr-badge-green-border: light-dark(#aca, #242);
|
|
--clr-badge-yellow-bg: light-dark(#ffe, #331); /* Note: #ffe is close to white, dark will be black */
|
|
--clr-badge-yellow-text: light-dark(#660, #660);
|
|
--clr-badge-yellow-border: light-dark(#cc9, #552);
|
|
--clr-badge-blue-bg: light-dark(#f0f0ff, #224);
|
|
--clr-badge-blue-text: light-dark(#339, #447);
|
|
--clr-badge-blue-border: light-dark(#aad, #336);
|
|
--clr-badge-red-bg: light-dark(#fee, #522);
|
|
--clr-badge-red-text: light-dark(#933, #744);
|
|
--clr-badge-red-border: light-dark(#c99, #633);
|
|
--clr-badge-magenta-bg: light-dark(#fef, #535);
|
|
--clr-badge-magenta-text: light-dark(#939, #747);
|
|
--clr-badge-magenta-border: light-dark(#c9c, #636);
|
|
|
|
/* Letter Tiles Base */
|
|
--clr-lettertile-default-text: light-dark(#fafafacc, #dcdcdccc);
|
|
--clr-lettertile-hover-text: var(--clr-bright);
|
|
|
|
/* Letter Tile Backgrounds (lt-bg) */
|
|
--clr-lt-bg-0: #ef9a9a;
|
|
--clr-lt-bg-1: #90caf9;
|
|
--clr-lt-bg-2: #b0bec4;
|
|
--clr-lt-bg-3: #b49edb;
|
|
--clr-lt-bg-4: #ffa98f;
|
|
--clr-lt-bg-5: #a4d5a6;
|
|
--clr-lt-bg-6: #ededed;
|
|
--clr-lt-bg-7: #e6ee9b;
|
|
--clr-lt-bg-8: #c4e0a3;
|
|
--clr-lt-bg-9: #f0e57f;
|
|
--clr-lt-bg-10: #f490b1;
|
|
--clr-lt-bg-11: #a0a8da;
|
|
--clr-lt-bg-12: #ffdf80;
|
|
--clr-lt-bg-13: #bcaaa4;
|
|
--clr-lt-bg-14: #80deea;
|
|
--clr-lt-bg-15: #cd92d8;
|
|
|
|
/* Letter Tile Dark Backgrounds (dk-bg) */
|
|
--clr-dk-bg-0: #c72929;
|
|
--clr-dk-bg-1: #ad1457;
|
|
--clr-dk-bg-2: #681b98;
|
|
--clr-dk-bg-3: #4527a0;
|
|
--clr-dk-bg-4: #293594;
|
|
--clr-dk-bg-5: #1565c1;
|
|
--clr-dk-bg-6: #0277bb;
|
|
--clr-dk-bg-7: #00838f;
|
|
--clr-dk-bg-8: #006b5f;
|
|
--clr-dk-bg-9: #2f7f33;
|
|
--clr-dk-bg-10: #54892f;
|
|
--clr-dk-bg-11: #9e9e24;
|
|
--clr-dk-bg-12: #f9a824;
|
|
--clr-dk-bg-13: #ff9100;
|
|
--clr-dk-bg-14: #f06c00;
|
|
--clr-dk-bg-15: #d54215;
|
|
|
|
/* Letter Tile Foreground Colors (lt-fg) */
|
|
--clr-lt-fg-0: var(--clr-lt-bg-0); /* Use same as bg, as these are for text, will follow light-dark */
|
|
--clr-lt-fg-1: var(--clr-lt-bg-1);
|
|
--clr-lt-fg-2: var(--clr-lt-bg-2);
|
|
--clr-lt-fg-3: var(--clr-lt-bg-3);
|
|
--clr-lt-fg-4: var(--clr-lt-bg-4);
|
|
--clr-lt-fg-5: var(--clr-lt-bg-5);
|
|
--clr-lt-fg-6: var(--clr-lt-bg-6);
|
|
--clr-lt-fg-7: var(--clr-lt-bg-7);
|
|
--clr-lt-fg-8: var(--clr-lt-bg-8);
|
|
--clr-lt-fg-9: var(--clr-lt-bg-9);
|
|
--clr-lt-fg-10: var(--clr-lt-bg-10);
|
|
--clr-lt-fg-11: var(--clr-lt-bg-11);
|
|
--clr-lt-fg-12: var(--clr-lt-bg-12);
|
|
--clr-lt-fg-13: var(--clr-lt-bg-13);
|
|
--clr-lt-fg-14: var(--clr-lt-bg-14);
|
|
--clr-lt-fg-15: var(--clr-lt-bg-15);
|
|
|
|
/* Letter Tile Dark Foreground Colors (dk-fg) */
|
|
--clr-dk-fg-0: var(--clr-dk-bg-0); /* Use same as bg, as these are for text, will follow light-dark */
|
|
--clr-dk-fg-1: var(--clr-dk-bg-1);
|
|
--clr-dk-fg-2: var(--clr-dk-bg-2);
|
|
--clr-dk-fg-3: var(--clr-dk-bg-3);
|
|
--clr-dk-fg-4: var(--clr-dk-bg-4);
|
|
--clr-dk-fg-5: var(--clr-dk-bg-5);
|
|
--clr-dk-fg-6: var(--clr-dk-bg-6);
|
|
--clr-dk-fg-7: var(--clr-dk-bg-7);
|
|
--clr-dk-fg-8: var(--clr-dk-bg-8);
|
|
--clr-dk-fg-9: var(--clr-dk-bg-9);
|
|
--clr-dk-fg-10: var(--clr-dk-bg-10);
|
|
--clr-dk-fg-11: var(--clr-dk-bg-11);
|
|
--clr-dk-fg-12: var(--clr-dk-bg-12);
|
|
--clr-dk-fg-13: var(--clr-dk-bg-13);
|
|
--clr-dk-fg-14: var(--clr-dk-bg-14);
|
|
--clr-dk-fg-15: var(--clr-dk-bg-15);
|
|
|
|
/* Chips */
|
|
--clr-chip-bg: var(--clr-background-extra-light-gray);
|
|
--clr-chip-invalid-text: var(--clr-error-text-muted);
|
|
--clr-chip-invalid-bg: var(--clr-badge-red-bg);
|
|
--clr-chip-remove-icon-bg: light-dark(#aaa, #555);
|
|
--clr-chip-remove-icon-text: var(--clr-background-extra-light-gray);
|
|
--clr-chip-remove-icon-hover-bg: var(--clr-text-placeholder);
|
|
--clr-chip-remove-icon-hover-text: var(--clr-bright);
|
|
|
|
/* Miscellaneous UI */
|
|
--clr-highlight-text: var(--clr-std-teal);
|
|
--clr-highlight-preview-text: light-dark(#5f9ea0, #205e60);
|
|
--clr-spinner-track: light-dark(#f3f3f3, #0c0c0c);
|
|
--clr-spinner-active: var(--clr-primary-action);
|
|
--clr-cropper-bounding-box-border: var(--clr-primary-action);
|
|
--clr-cropper-bounding-box-bg: var(--clr-text-tertiary);
|
|
--clr-cropper-cutout-border: var(--clr-text-tertiary);
|
|
--clr-cropper-cutout-shadow: light-dark(rgb(230 246 255 / 66%), rgb(25 10 0 / 66%));
|
|
--clr-audio-bg: var(--clr-background-extra-light-gray);
|
|
--clr-audio-icon: light-dark(rgba(102, 117, 117, 0.8), rgba(153, 138, 138, 0.8));
|
|
--clr-audio-icon-disabled: light-dark(rgba(153 153 153 / 75%), rgba(102 102 102 / 75%));
|
|
--clr-audio-timer-text: light-dark(rgba(102, 102, 102, 0.75), rgba(153, 153, 153, 0.75));
|
|
--clr-pinned-menu-bg: light-dark(#f8f8f8, #1a1a1a);
|
|
--clr-drag-n-drop-border: var(--clr-std-grey);
|
|
--clr-drag-n-drop-text: var(--clr-std-grey);
|
|
--clr-drag-n-drop-bg: light-dark(rgba(255,255,255,.95), rgba(0,0,0,.95));
|
|
--clr-drag-n-drop-outline: light-dark(rgba(255,255,255,.95), rgba(0,0,0,.95));
|
|
|
|
/* Tabbar */
|
|
--clr-tabbar-bg: var(--clr-background-extra-light-gray);
|
|
--clr-tabbar-inactive-text: light-dark(rgba(33,150,243,0.6), rgba(22,90,160,0.6));
|
|
--clr-tabbar-active-text: var(--clr-primary-accent);
|
|
--clr-tabbar-inactive-border: var(--clr-border-light);
|
|
--clr-tabbar-active-border: var(--clr-primary-accent);
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
padding: 0;
|
|
margin: 0;
|
|
font-family: Roboto, Arial, sans-serif;
|
|
text-rendering: optimizeLegibility;
|
|
scrollbar-width: thin;
|
|
scrollbar-color: var(--clr-scrollbar-thumb) var(--clr-scrollbar-track);
|
|
}
|
|
|
|
/* Basic elements defined */
|
|
|
|
html, body {
|
|
height: 100%;
|
|
width: 100%;
|
|
font-size: 10pt; /* 13.33 px/rem */
|
|
color: var(--clr-text-primary);
|
|
overflow: hidden;
|
|
background-color: var(--clr-body-background);
|
|
box-shadow: inset 0 10rem var(--clr-header-stripe-bg); /* the deep-plue stripe accross the top */
|
|
}
|
|
|
|
tt {
|
|
font-family: 'Roboto Mono', Courier, monospace;
|
|
}
|
|
|
|
a {
|
|
color: var(--clr-primary-accent);
|
|
text-decoration: none;
|
|
}
|
|
a:hover,
|
|
a:focus {
|
|
color: var(--clr-primary-accent-hover);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
a.danger {
|
|
color: var(--clr-danger-text);
|
|
}
|
|
a.danger:hover,
|
|
a.danger:focus {
|
|
color: var(--clr-danger-text-hover);
|
|
}
|
|
|
|
a.gray:hover,
|
|
a.gray:focus {
|
|
color: var(--clr-text-tertiary);
|
|
}
|
|
|
|
form {
|
|
font-size: 1.1rem;
|
|
padding: 0.5rem 0.75rem;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
label {
|
|
font-size: 1.1rem;
|
|
margin-right: auto;
|
|
}
|
|
|
|
label.small {
|
|
color: var(--clr-primary-action);
|
|
font-size: 0.95rem;
|
|
}
|
|
|
|
label.large {
|
|
color: var(--clr-primary-action);
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
label.invalid {
|
|
color: var(--clr-danger-text);
|
|
}
|
|
|
|
img.avatar {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
img.avatar.self {
|
|
padding: 7%;
|
|
}
|
|
|
|
/* Input fields and buttons */
|
|
|
|
button {
|
|
display: inline-block;
|
|
font-family: inherit;
|
|
font-size: 1.05rem;
|
|
height: 2.2rem;
|
|
line-height: 2.2rem;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
touch-action: manipulation;
|
|
cursor: pointer;
|
|
border: 1px solid var(--clr-transparent);
|
|
white-space: nowrap;
|
|
padding-left: 1.2rem;
|
|
padding-right: 1.2rem;
|
|
border-radius: 4px;
|
|
box-shadow: 0 1px 3px 0 var(--clr-shadow-button);
|
|
text-transform: uppercase;
|
|
min-width: 5rem;
|
|
margin: 0 0.35rem 0 0.35rem;
|
|
}
|
|
|
|
button[disabled],
|
|
html input[disabled] {
|
|
cursor: default;
|
|
opacity: 0.65;
|
|
box-shadow: none;
|
|
filter: grayscale(50%);
|
|
}
|
|
|
|
button.round {
|
|
border-radius: 50%;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
padding: 0;
|
|
margin: 0;
|
|
line-height: 3.5rem;
|
|
outline: none; /* otherwise a square outline is shown */
|
|
box-shadow: 0 2px 0.5rem 0 var(--clr-shadow-button);
|
|
z-index: 2;
|
|
}
|
|
|
|
button.round.small {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
line-height: 2rem;
|
|
box-shadow: 0 2px 0.35rem 0 var(--clr-shadow-button);
|
|
}
|
|
|
|
button:hover:not([disabled]), button:active:not([disabled]) {
|
|
color: var(--clr-bright);
|
|
}
|
|
button:active {
|
|
box-shadow: inset 0 3px 0.5rem var(--clr-shadow-button-inset-active);
|
|
}
|
|
button:active.round.small {
|
|
box-shadow: inset 0 2px 0.35rem var(--clr-shadow-button-inset-active);
|
|
}
|
|
|
|
button.primary {
|
|
background-color: var(--clr-button-primary-bg);
|
|
color: var(--clr-button-primary-text);
|
|
}
|
|
button.primary:hover:not([disabled]), button.primary:active:not([disabled]) {
|
|
background-color: var(--clr-button-primary-hover-bg);
|
|
}
|
|
|
|
button.secondary {
|
|
background-color: var(--clr-button-secondary-bg);
|
|
color: var(--clr-button-secondary-text);
|
|
}
|
|
button.secondary:hover:not([disabled]), button.secondary:active:not([disabled]) {
|
|
background-color: var(--clr-button-secondary-hover-bg);
|
|
}
|
|
|
|
button.outline {
|
|
background-color: var(--clr-transparent);
|
|
color: var(--clr-button-outline-text);
|
|
border: 1px solid var(--clr-button-outline-border);
|
|
box-shadow: none;
|
|
}
|
|
button.outline:hover:not([disabled]), button.outline:active:not([disabled]) {
|
|
color: var(--clr-button-outline-text);
|
|
background-color: var(--clr-button-outline-hover-bg);
|
|
}
|
|
|
|
button.danger {
|
|
background-color: var(--clr-button-danger-bg);
|
|
color: var(--clr-button-danger-text);
|
|
}
|
|
button.danger:hover:not([disabled]), button.danger:active:not([disabled]) {
|
|
background-color: var(--clr-button-danger-hover-bg);
|
|
}
|
|
|
|
button.positive {
|
|
background-color: var(--clr-button-positive-bg);
|
|
color: var(--clr-button-positive-text);
|
|
}
|
|
button.positive:hover:not([disabled]), button.positive:active:not([disabled]) {
|
|
background-color: var(--clr-button-positive-hover-bg);
|
|
}
|
|
|
|
textarea, input {
|
|
font-family: inherit;
|
|
font-size: 1.1rem;
|
|
background: var(--clr-transparent);
|
|
border: none;
|
|
margin: 0.25rem 0;
|
|
padding: 0 0.125rem;
|
|
outline: none;
|
|
color: var(--clr-input-text);
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
input[type="search"],
|
|
input[type="tel"],
|
|
textarea {
|
|
height: 2.5rem;
|
|
border-bottom: 1px solid var(--clr-input-border);
|
|
box-shadow: 0 1px 0 var(--clr-input-shadow);
|
|
transition: all 0.1s ease-in-out, height 0s;
|
|
}
|
|
|
|
input[type="text"],
|
|
input[type="email"],
|
|
input[type="password"],
|
|
input[type="tel"],
|
|
textarea {
|
|
width: 100%;
|
|
}
|
|
|
|
textarea:focus,
|
|
input[type="text"]:focus,
|
|
input[type="email"]:focus,
|
|
input[type="password"]:focus,
|
|
input[type="search"]:focus,
|
|
input[type="tel"]:focus {
|
|
border-bottom: 1px solid var(--clr-input-border-focus);
|
|
box-shadow: 0 1px 0 var(--clr-input-shadow-focus);
|
|
}
|
|
|
|
textarea.invalid,
|
|
input[type="text"].invalid,
|
|
input[type="email"].invalid,
|
|
input[type="password"].invalid,
|
|
input[type="search"].invalid,
|
|
input[type="tel"].invalid {
|
|
border-bottom: 1px solid var(--clr-input-invalid-border);
|
|
box-shadow: 0 1px 0 var(--clr-input-invalid-shadow);
|
|
}
|
|
|
|
input[type="text"]::placeholder,
|
|
input[type="email"]::placeholder,
|
|
input[type="password"]::placeholder,
|
|
input[type="search"]::placeholder,
|
|
input[type="tel"]::placeholder,
|
|
textarea::placeholder {
|
|
color: var(--clr-input-placeholder-text);
|
|
font-weight: lighter;
|
|
}
|
|
|
|
input[type="text"].with-icon-right,
|
|
input[type="password"].with-icon-right {
|
|
margin-right:-2rem;
|
|
padding-right:2rem;
|
|
}
|
|
|
|
input[type="text"].with-icon-left,
|
|
input[type="password"].with-icon-left {
|
|
margin-left:-1.45rem;
|
|
padding-left:1.75rem;
|
|
}
|
|
|
|
textarea {
|
|
resize: none;
|
|
padding-top: 0.45rem;
|
|
}
|
|
|
|
input[type="range"] {
|
|
width: 90%;
|
|
}
|
|
|
|
option {
|
|
padding: 0;
|
|
}
|
|
|
|
datalist {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
}
|
|
|
|
/* END of input and buttons */
|
|
|
|
/* BEGIN scrollbar styling. */
|
|
|
|
/* Chrome & other webkit browsers */
|
|
::-webkit-scrollbar {
|
|
width: 0.6rem;
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
-webkit-box-shadow: inset 0 0 6px var(--clr-shadow-scrollbar-track-webkit);
|
|
box-shadow: inset 0 0 6px var(--clr-shadow-scrollbar-track-webkit);
|
|
background-color: var(--clr-scrollbar-track);
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: var(--clr-scrollbar-thumb);
|
|
}
|
|
|
|
/* END of Scrollbar styling. */
|
|
|
|
/* BEGIN Popup/dropdown menu */
|
|
|
|
ul.menu {
|
|
position: absolute;
|
|
list-style: none;
|
|
width: 12rem;
|
|
border-radius: 0.2rem;
|
|
padding-top: 0.35rem;
|
|
padding-bottom: 0.35rem;
|
|
box-shadow: 0 1px 6px var(--clr-shadow-dialog);
|
|
background-color: var(--clr-bright);
|
|
z-index: 4;
|
|
}
|
|
|
|
ul.menu > li {
|
|
padding: 0.75rem 0.75rem 0.75rem 1.25rem;
|
|
cursor: pointer;
|
|
}
|
|
|
|
ul.menu > li:hover {
|
|
background-color: var(--clr-menu-item-hover-bg);
|
|
}
|
|
|
|
ul.menu > li.separator {
|
|
padding: 0;
|
|
margin: 2px;
|
|
height: 1px;
|
|
background-color: var(--clr-border-light);
|
|
}
|
|
|
|
ul.menu > li.separator:hover {
|
|
background-color: var(--clr-border-light);
|
|
}
|
|
|
|
ul.menu > li.disabled {
|
|
pointer-events: none;
|
|
opacity: 0.6;
|
|
}
|
|
|
|
/* The down arrow head - trigger for context menu */
|
|
.menuTrigger {
|
|
position: absolute;
|
|
right: 0.25rem;
|
|
width: 1.4rem;
|
|
height: 1.4rem;
|
|
line-height: 1.4rem;
|
|
border-radius: 0.7rem;
|
|
text-align: center;
|
|
opacity: 0;
|
|
background-color: inherit;
|
|
user-select: none;
|
|
}
|
|
.menuTrigger a {
|
|
color: var(--clr-text-secondary);
|
|
}
|
|
|
|
li .menuTrigger {
|
|
top: 0.25rem;
|
|
}
|
|
li:hover .menuTrigger {
|
|
opacity: 0.9;
|
|
}
|
|
li:hover .menuTrigger a {
|
|
color: var(--clr-text-secondary);
|
|
}
|
|
|
|
/* END popup/dropdown menu */
|
|
|
|
/* Begin Alert: modal window with message and buttons. */
|
|
div.alert-container {
|
|
position: absolute;
|
|
display: flex;
|
|
padding: 1rem;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
background: var(--clr-alert-overlay-bg);
|
|
z-index: 3;
|
|
}
|
|
|
|
div.alert {
|
|
position: relative;
|
|
background-color: var(--clr-bright);
|
|
box-shadow: 0.15rem 0.15rem 1.5rem var(--clr-shadow-dialog);
|
|
padding: 1rem;
|
|
border-radius: 0.3rem;
|
|
margin: auto 2rem auto 2rem;
|
|
width: fit-content;
|
|
height: min-content;
|
|
min-width: 16rem;
|
|
max-width: 24rem;
|
|
max-height: 40rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
div.alert-container .title {
|
|
position: relative;
|
|
color: var(--clr-primary-accent);
|
|
font-size: 1.2rem;
|
|
font-weight: 500;
|
|
width: 100%;
|
|
padding: 0 0 0.35rem 0;
|
|
}
|
|
|
|
div.alert-container .title.with-control {
|
|
position: relative;
|
|
display: flex;
|
|
padding: 0.5rem 0.5rem 0 0.5rem;
|
|
align-items: center;
|
|
flex: none;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
div.alert-container .content {
|
|
position: relative;
|
|
padding: 0.5rem 0 0.5rem 0;
|
|
}
|
|
/* END Alert */
|
|
|
|
/* BEGIN trusted badges with legend */
|
|
div.trusted-badge {
|
|
margin: 0.25rem 0;
|
|
}
|
|
/* END trusted badges */
|
|
|
|
/* Generic text colors */
|
|
.blue {
|
|
color: var(--clr-primary-accent)!important; /* blue 500 */
|
|
}
|
|
.lt-blue {
|
|
color: var(--clr-lt-fg-1)!important; /* blue 300, using lt-fg-1 which is #90caf9 */
|
|
}
|
|
|
|
.orange {
|
|
color: var(--clr-std-orange)!important;
|
|
}
|
|
|
|
.verified-color {
|
|
color: var(--clr-verified-accent)!important; /* lt-blue 500 */
|
|
}
|
|
|
|
.staff-color {
|
|
color: var(--clr-staff-accent)!important; /* light green 700 */
|
|
}
|
|
|
|
.danger-color {
|
|
color: var(--clr-warning-accent)!important; /* amber 500 */
|
|
}
|
|
|
|
.green {
|
|
color: light-dark(#388e3c, #1a9a1d); /* green 700 */
|
|
}
|
|
|
|
.white {
|
|
color: var(--clr-bright)!important; /* 100% white */
|
|
}
|
|
|
|
.red {
|
|
color: var(--clr-danger-text)!important; /* red 700 */
|
|
}
|
|
|
|
/* Color of an inverted icon badges */
|
|
.badge-inv {
|
|
color: var(--clr-badge-inv)!important;
|
|
}
|
|
|
|
.gray {
|
|
color: var(--clr-text-secondary)!important;
|
|
}
|
|
|
|
.light-gray {
|
|
color: var(--clr-text-placeholder)!important;
|
|
}
|
|
|
|
.large {
|
|
font-size: 120%;
|
|
}
|
|
|
|
/* Other universal style components */
|
|
.small {
|
|
font-size: 90%;
|
|
}
|
|
|
|
.float-right {
|
|
position: absolute;
|
|
right: 0.5rem;
|
|
}
|
|
|
|
.hr {
|
|
display: block;
|
|
width: 100%;
|
|
height: 0.45rem;
|
|
min-height: 0.3rem;
|
|
background-color: var(--clr-background-light-gray);
|
|
box-shadow: inset 0 0.25rem 0.25rem -0.25rem var(--clr-shadow-hr-inset),
|
|
inset 0 -0.25rem 0.25rem -0.25rem var(--clr-shadow-hr-inset);
|
|
}
|
|
|
|
.hr.thin {
|
|
height: 0.015rem;
|
|
}
|
|
|
|
.ellipsized {
|
|
overflow-x: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.flat-button {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 0.15rem 0.35rem;
|
|
height: 2em;
|
|
line-height: 2em;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
touch-action: manipulation;
|
|
white-space: nowrap;
|
|
text-transform: uppercase;
|
|
background-color: var(--clr-bright);
|
|
z-index: 1;
|
|
}
|
|
.flat-button:hover,
|
|
.flat-button:focus {
|
|
text-decoration: none;
|
|
}
|
|
|
|
.flat-button.faux {
|
|
display: inline-block;
|
|
height: 1.4em;
|
|
line-height: 1.4em;
|
|
text-transform: none;
|
|
padding: 0 .35rem;
|
|
margin: 0.15rem;
|
|
border: 1px solid var(--clr-text-tertiary);
|
|
border-radius: 3px;
|
|
background-color: var(--clr-background-extra-light-gray);
|
|
}
|
|
|
|
.action-button {
|
|
display: block;
|
|
position: absolute;
|
|
color: var(--clr-text-tertiary);
|
|
font-size: 1.8rem;
|
|
background-color: var(--clr-background-off-white);
|
|
border-radius: 50%;
|
|
width: 3.25rem;
|
|
height: 3.25rem;
|
|
min-width: unset;
|
|
min-height: unset;
|
|
padding: 0;
|
|
margin: 0;
|
|
outline: none; /* otherwise a square outline is shown */
|
|
box-shadow: 0 2px 0.5rem 0 var(--clr-shadow-button);
|
|
transition: all 150ms;
|
|
z-index: 2;
|
|
}
|
|
|
|
.action-button:focus, .action-button:hover {
|
|
color: var(--clr-text-disabled);
|
|
background-color: var(--clr-background-light-gray);
|
|
}
|
|
.action-button:active {
|
|
color: light-dark(#777, #666); /* #777 */
|
|
background-color: var(--clr-background-extra-light-gray);
|
|
}
|
|
|
|
.action-button.hidden {
|
|
width: 1px;
|
|
height: 1px;
|
|
font-size: 1px;
|
|
line-height: 1px;
|
|
right: 2.625rem;
|
|
bottom: 2.625rem;
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Element which can take focus but shows no outline */
|
|
.group-focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* END generic text colors */
|
|
|
|
/* END of basic elements */
|
|
|
|
#mountPoint {
|
|
height: 100%;
|
|
padding-top: 1rem;
|
|
padding-bottom: 1rem;
|
|
}
|
|
|
|
/* Top-level application layout style: sidepanel + main view */
|
|
#noscript-message {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
max-width: 30rem;
|
|
overflow: hidden;
|
|
margin-top: 5rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
border-radius: 0.25rem;
|
|
box-shadow: 1px 2px 0.3rem var(--clr-shadow-gray-strong);
|
|
background-color: var(--clr-bright);
|
|
}
|
|
|
|
#noscript-title {
|
|
padding: 1rem;
|
|
font-size: 120%;
|
|
font-weight: bolder;
|
|
background-color: var(--clr-primary-accent); /* blue 500 */
|
|
color: var(--clr-primary-light-blue); /* light-blue 100 */
|
|
}
|
|
|
|
#noscript-content {
|
|
padding: 1rem;
|
|
}
|
|
|
|
#app-container {
|
|
position: relative;
|
|
display: flex;
|
|
height: 100%;
|
|
max-width: 84rem;
|
|
overflow: hidden;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
border-radius: 0.25rem;
|
|
box-shadow: 1px 2px 0.3rem var(--clr-shadow-gray-strong);
|
|
background-color: var(--clr-bright);
|
|
}
|
|
|
|
#sidepanel {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 0;
|
|
flex-shrink: 0.3;
|
|
width: 24rem;
|
|
min-width: 18rem;
|
|
height: 100%;
|
|
}
|
|
|
|
#topic-view {
|
|
position: relative;
|
|
display: flex;
|
|
overflow-x: hidden;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#info-view {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-grow: 0;
|
|
flex-shrink: 0.3;
|
|
width: 24rem;
|
|
min-width: 18rem;
|
|
height: 100%;
|
|
}
|
|
|
|
/* Generic announcement text, centered vertically and horizontally */
|
|
.center-medium-text {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
/* Class to alternatively hide sidepanel/topic-view/info-view */
|
|
.nodisplay {
|
|
display: none!important;
|
|
}
|
|
|
|
/* Quoted div */
|
|
.quoted {
|
|
margin-left: 1rem;
|
|
}
|
|
|
|
/* Extra space on the right */
|
|
.space-right {
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
/* Container with whitish background and rounded corners */
|
|
.rounded-container {
|
|
position: relative;
|
|
background-color: var(--clr-background-off-white);
|
|
border-radius: 0.1rem;
|
|
padding: 0.25rem;
|
|
margin: 0.25rem;
|
|
}
|
|
|
|
/* BEGIN InPlaceEdit styles */
|
|
span.in-place-edit, div.in-place-edit {
|
|
display: inline-block;
|
|
font-family: inherit;
|
|
font-size: 1rem;
|
|
margin: 0.25rem 0.125rem 0 0.125rem;
|
|
width: 100%;
|
|
vertical-align: baseline;
|
|
border-bottom: 1px dashed var(--clr-border-muted);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.in-place-edit.short {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
font-size: 1.1rem;
|
|
height: 2.5rem;
|
|
line-height: 2.25;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.in-place-edit.disabled {
|
|
border-bottom: none;
|
|
cursor: default;
|
|
color: var(--clr-text-disabled);
|
|
}
|
|
|
|
.in-place-edit.placeholder {
|
|
color: var(--clr-text-placeholder);
|
|
}
|
|
|
|
.in-place-edit span {
|
|
display: inline-block;
|
|
}
|
|
|
|
.in-place-edit.short span {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow-x: hidden;
|
|
width: 100%;
|
|
}
|
|
|
|
.in-place-edit .material-icons {
|
|
display: inline-block;
|
|
}
|
|
|
|
.material-icons.invalid {
|
|
color: var(--clr-error-text-muted);
|
|
}
|
|
|
|
textarea.in-place-edit {
|
|
height: unset;
|
|
font-size: unset;
|
|
}
|
|
|
|
input.in-place-edit.invalid {
|
|
color: var(--clr-error-text-muted);
|
|
}
|
|
|
|
/* END of InPlaceEdit styles */
|
|
|
|
table.permission-editor {
|
|
width: 100%;
|
|
}
|
|
|
|
table.permission-editor td {
|
|
margin: 0.35rem 0;
|
|
font-size: 1.1rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
table.permission-editor td.checkbox {
|
|
text-align: center;
|
|
color: var(--clr-text-tertiary);
|
|
}
|
|
|
|
.permission-editor .material-icons {
|
|
font-size: 1.3rem;
|
|
line-height: 1.3rem;
|
|
}
|
|
|
|
.material-icons.clickable {
|
|
cursor: pointer;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.clickable {
|
|
border-bottom: 1px dashed var(--clr-border-muted);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.image-clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.clean-clickable {
|
|
cursor: pointer;
|
|
}
|
|
|
|
|
|
/* END of top-level layout */
|
|
|
|
/* Sidepanel styles */
|
|
.panel-title {
|
|
font-size: 1.4rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.panel-title.deleted {
|
|
text-decoration: line-through;
|
|
}
|
|
|
|
.caption-panel {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: none;
|
|
padding: 0.5rem;
|
|
height: var(--caption-panel-height);
|
|
white-space: nowrap;
|
|
box-shadow: 0 1px 2px var(--clr-shadow-gray-strong);
|
|
overflow-x: hidden;
|
|
z-index: 1; /* otherwise the shadow becomes invisible */
|
|
}
|
|
|
|
.dialog-buttons {
|
|
display: flex;
|
|
padding: 0.5rem;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
.dialog-buttons button {
|
|
margin: 0 0.5rem;
|
|
}
|
|
|
|
.avatar-box {
|
|
position: relative;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.bot-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow: hidden;
|
|
min-width: 8rem;
|
|
line-height: 2rem;
|
|
}
|
|
.bot-form div {
|
|
min-height: 2rem;
|
|
vertical-align: middle;
|
|
}
|
|
.bot-form button {
|
|
display: inline-block;
|
|
margin: 0.15rem;
|
|
background-color: var(--clr-blue-wash-light);
|
|
color: var(--clr-primary-accent); /* blue 500 */
|
|
font-size: inherit;
|
|
text-transform: none;
|
|
height: 2rem;
|
|
line-height: 2rem;
|
|
}
|
|
.bot-form > div > button {
|
|
width: auto;
|
|
}
|
|
.bot-form button:focus,
|
|
.bot-form button:hover,
|
|
.bot-form button:active {
|
|
outline: 0;
|
|
color: var(--clr-dk-fg-5); /* #1565C0, a darker blue */
|
|
background-color: var(--clr-primary-wash);
|
|
}
|
|
|
|
#side-caption-panel {
|
|
background-color: var(--clr-primary-accent); /* blue 500 */
|
|
color: var(--clr-primary-light-blue); /* light-blue 100 */
|
|
}
|
|
|
|
#side-caption-panel a {
|
|
color: var(--clr-primary-light-blue); /* blue 100 */
|
|
padding-left: 0.5rem;
|
|
line-height: 1;
|
|
}
|
|
|
|
#side-caption-panel :hover {
|
|
color: var(--clr-bright);
|
|
}
|
|
|
|
#sidepanel-title {
|
|
margin-right: auto;
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
#self-avatar {
|
|
width: 3rem;
|
|
min-width: 3rem;
|
|
height: 3rem;
|
|
flex: none;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
#self-avatar.avatar-box {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
/* Application settings */
|
|
#settings-form ul {
|
|
list-style: none;
|
|
}
|
|
|
|
#settings-form li {
|
|
vertical-align: middle;
|
|
}
|
|
#settings-form label {
|
|
display: inline-block;
|
|
padding-left: 0.5rem;
|
|
}
|
|
|
|
input#host-name {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Input with a search icon on the left */
|
|
input.search {
|
|
text-indent: 1.4rem;
|
|
}
|
|
i.search {
|
|
position: absolute;
|
|
left: .6rem;
|
|
}
|
|
|
|
/* Area which displays an error message */
|
|
.info-box {
|
|
position: relative;
|
|
display: none;
|
|
overflow: hidden;
|
|
padding: 1rem 1.5rem 0.75rem 0.5rem;
|
|
}
|
|
|
|
.info-box > span {
|
|
line-height: 1.35rem;
|
|
}
|
|
|
|
.info-box .cancel {
|
|
position: absolute;
|
|
right: 0.25rem;
|
|
top: 0.5rem;
|
|
}
|
|
|
|
.info-box.error {
|
|
display: flex;
|
|
background-color: var(--clr-error-bg-light);
|
|
border-bottom: 1px solid var(--clr-error-border-light);
|
|
color: var(--clr-error-text-dark);
|
|
}
|
|
.info-box.warning {
|
|
display: flex;
|
|
background-color: var(--clr-warning-bg-light);
|
|
border-bottom: 1px solid var(--clr-warning-border-light);
|
|
color: var(--clr-warning-text-dark);
|
|
}
|
|
.info-box.info {
|
|
display: flex;
|
|
background-color: var(--clr-info-bg-light);
|
|
border-bottom: 1px solid var(--clr-info-border-light);
|
|
color: var(--clr-info-text-dark);
|
|
}
|
|
|
|
.info-box .cancel .material-icons {
|
|
font-size: 1rem;
|
|
color: var(--clr-text-secondary);
|
|
}
|
|
.info-box.error .cancel .material-icons {
|
|
color: var(--clr-error-text-dark);
|
|
}
|
|
.info-box .icon {
|
|
display: block;
|
|
margin-right: 0.5rem;
|
|
}
|
|
.info-box .icon .material-icons {
|
|
font-size: 1.5rem;
|
|
}
|
|
.info-box.warning .icon .material-icons {
|
|
color: var(--clr-warning-icon);
|
|
}
|
|
.info-box.error .icon .material-icons {
|
|
color: var(--clr-error-icon);
|
|
}
|
|
.info-box.info .icon .material-icons {
|
|
color: var(--clr-info-text-dark);
|
|
}
|
|
/* List of contacts */
|
|
.flex-column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.flex-column.narrow {
|
|
height: auto;
|
|
}
|
|
|
|
.scrollable-panel {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
margin-top: 0.25rem;
|
|
margin-bottom: auto;
|
|
height: 100%;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
.contact-box {
|
|
list-style: none;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.contact-box > li {
|
|
position: relative;
|
|
display: flex;
|
|
padding: 0.35rem 0.25rem 0.5rem 0.35rem;
|
|
min-height: 3.75rem;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
/* partial bottom border */
|
|
background: linear-gradient(to right, var(--clr-transparent) 3.5rem, var(--clr-background-extra-light-gray) 1px, var(--clr-background-extra-light-gray) 100%) 0 100% / 100% 1px no-repeat, var(--clr-bright);
|
|
overflow-x: hidden;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.contact-box.small > li {
|
|
padding: 0.25rem 0.25rem 0.35rem 0.35rem;
|
|
min-height: 2.5rem;
|
|
}
|
|
|
|
.contact-box > li:last-child {
|
|
/* remove border from the last contact */
|
|
background: var(--clr-bright);
|
|
}
|
|
.contact-box > li:hover {
|
|
background-color: var(--clr-background-blue-gray-50); /* blue-gray 50 highlight */
|
|
}
|
|
.contact-box > li.selected {
|
|
background-color: var(--clr-background-blue-gray-100); /* blue-gray 100 highlight */
|
|
}
|
|
.contact-box > li.tpinned {
|
|
background-color: var(--clr-background-blue-gray-75); /* blue-gray 75 highlight */
|
|
}
|
|
.contact-box > li.action {
|
|
min-height: 2.5rem;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.contact-box .text-box {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.contact-box .contact-title {
|
|
font-size: 1.05rem;
|
|
text-overflow: ellipsis;
|
|
overflow-x: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.contact-box .contact-title.deleted {
|
|
opacity: 0.66;
|
|
text-decoration: line-through;
|
|
text-decoration-thickness: 0.5px;
|
|
}
|
|
|
|
.contact-box .contact-comment {
|
|
text-overflow: ellipsis;
|
|
overflow-x: hidden;
|
|
white-space: nowrap;
|
|
font-weight: lighter;
|
|
}
|
|
|
|
.contact-box .contact-comment > span {
|
|
overflow-x: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.contact-box .contact-comment b {
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.contact-box .contact-comment .material-icons {
|
|
margin-bottom: 0.2rem;
|
|
color: light-dark(#777, #666); /* #777 */
|
|
}
|
|
|
|
/* Avatar and online-offline indicator */
|
|
.contact-box .avatar-box {
|
|
position: relative;
|
|
margin-right: 0.35rem;
|
|
width: 3rem;
|
|
min-width: 3rem;
|
|
height: 3rem;
|
|
min-height: 3rem;
|
|
font-size: 1.8rem;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
}
|
|
.contact-box .avatar {
|
|
width: 3rem;
|
|
height: 3rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.contact-box.small .avatar-box {
|
|
width: 2rem;
|
|
min-width: 2rem;
|
|
height: 2rem;
|
|
min-height: 2rem;
|
|
font-size: 1.2rem;
|
|
}
|
|
.contact-box.small .avatar {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
|
|
.avatar.deleted {
|
|
opacity: 0.75;
|
|
filter: grayscale(1);
|
|
}
|
|
|
|
.contact-box .avatar-box > .material-icons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
font-size: 2.4rem;
|
|
line-height: 3rem;
|
|
}
|
|
.contact-box.small .avatar-box > .material-icons {
|
|
font-size: 1.6rem;
|
|
line-height: 2rem;
|
|
}
|
|
.contact-box .text-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-around;
|
|
}
|
|
.contact-box .text-box > div {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
}
|
|
|
|
.contact-box .action-text {
|
|
text-align: center;
|
|
font-size: 0.95rem;
|
|
line-height: 2.5rem;
|
|
margin: 0 auto 0 auto;
|
|
cursor: pointer;
|
|
}
|
|
|
|
img.channel {
|
|
width: 1.25rem;
|
|
height: 1.25rem;
|
|
vertical-align: middle;
|
|
margin-left: 0.3rem;
|
|
}
|
|
|
|
.large img.channel {
|
|
width: 1.45rem;
|
|
height: 1.45rem;
|
|
margin-left: 0.5rem;
|
|
margin-bottom: 0.15rem;
|
|
}
|
|
|
|
/* Online-offline indicator positioned inside avatar-box */
|
|
.avatar-box .online, .offline {
|
|
position: absolute;
|
|
width: 0.75rem;
|
|
min-width: 0.75rem;
|
|
height: 0.75rem;
|
|
min-height: 0.75rem;
|
|
flex-shrink: 0;
|
|
border-radius: 50%;
|
|
right: 0;
|
|
bottom: 0.1rem;
|
|
}
|
|
.avatar-box .online {
|
|
background-color: var(--clr-online); /* Specific green for online status */
|
|
}
|
|
.avatar-box .offline {
|
|
background-color: var(--clr-offline); /* #C0C0C0 (silver) or #ccc */
|
|
}
|
|
|
|
/* Typing indicator: animation of the online dot */
|
|
.online.typing {
|
|
animation: typing 0.5s infinite;
|
|
}
|
|
@keyframes typing {
|
|
0%, 100% {
|
|
transform: translateX(0);
|
|
}
|
|
50% {
|
|
transform: translateX(-0.3rem);
|
|
}
|
|
}
|
|
|
|
.contact-box .checkmark.material-icons {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
font-size: 1.5rem;
|
|
color: var(--clr-cyan-accent);
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: var(--clr-bright);
|
|
overflow: visible;
|
|
border: 0.0px solid var(--clr-transparent);
|
|
padding-left: 0.5px;
|
|
}
|
|
|
|
.contact-box .deleted.material-icons {
|
|
width: 1.5rem;
|
|
height: 1.5rem;
|
|
font-size: 1.5rem;
|
|
color: var(--clr-text-tertiary);
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
background-color: var(--clr-bright);
|
|
}
|
|
|
|
/* END of avatar box */
|
|
|
|
#add-topic {
|
|
position: absolute;
|
|
right: 1rem;
|
|
bottom: 1rem;
|
|
}
|
|
|
|
/* Various forms inside a panel (signup form, new topic form) */
|
|
.panel-form {
|
|
display: flex;
|
|
position: relative;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
}
|
|
|
|
.panel-form-row {
|
|
display: flex;
|
|
position: relative;
|
|
align-items: center;
|
|
padding: 0.5rem 0.75rem;
|
|
line-height: 1.5;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.panel-form-column {
|
|
display: flex;
|
|
position: relative;
|
|
flex-direction: column;
|
|
flex-grow: 0;
|
|
padding: 0.5rem 0.75rem;
|
|
line-height: 1.5;
|
|
overflow-x: clip;
|
|
}
|
|
|
|
/* Make sure padding is only applied at the top level panel */
|
|
.panel-form-row > .panel-form-column,
|
|
.panel-form-column > .panel-form-column {
|
|
padding: 0!important;
|
|
flex-grow: 1;
|
|
}
|
|
.panel-form-column > .panel-form-row,
|
|
.panel-form-row > .panel-form-row {
|
|
padding: 0!important;
|
|
}
|
|
|
|
.panel-form-column > .group {
|
|
margin-top: 0.25rem;
|
|
margin-bottom: 0.25rem;
|
|
}
|
|
|
|
/* Styling of avatar upload control */
|
|
.avatar-upload {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 0;
|
|
width: 10rem;
|
|
height: 10.5rem;
|
|
font-size: 4.5rem;
|
|
padding: 0;
|
|
margin: 0.25rem;
|
|
}
|
|
|
|
.avatar-upload.read-only {
|
|
height: auto;
|
|
}
|
|
|
|
.avatar-upload .clear-avatar {
|
|
position: absolute;
|
|
font-size: 1rem;
|
|
top: 0;
|
|
right: 0;
|
|
opacity: 0;
|
|
background-image: radial-gradient(var(--clr-bright) 40%, var(--clr-transparent) 75%);
|
|
}
|
|
|
|
.avatar-upload:hover .clear-avatar {
|
|
opacity: 1;
|
|
}
|
|
|
|
.avatar-upload .avatar-box {
|
|
position: relative;
|
|
width: 10rem;
|
|
height: 10rem;
|
|
}
|
|
|
|
.avatar-upload .avatar-box > .material-icons {
|
|
position: relative;
|
|
font-size: 4rem;
|
|
line-height: 10rem;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Clearfix */
|
|
.avatar-upload:after {
|
|
content: ".";
|
|
display: block;
|
|
height: 0;
|
|
clear: both;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.avatar-upload .blank {
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
border: 1px dashed var(--clr-text-tertiary);
|
|
font-size: 1rem;
|
|
flex-shrink: 0;
|
|
width: 10rem;
|
|
height: 10rem;
|
|
overflow: hidden;
|
|
color: var(--clr-text-tertiary);
|
|
line-height: 10rem;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.avatar-upload img.preview {
|
|
width: 10rem;
|
|
height: 10rem;
|
|
overflow: hidden;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.avatar-upload img.preview::before {
|
|
position: absolute;
|
|
content: " ";
|
|
display: flex;
|
|
font-size: 0.9rem;
|
|
font-weight: lighter;
|
|
color: var(--clr-text-primary);
|
|
top: 0;
|
|
left: 0;
|
|
width: 10rem;
|
|
height: 10rem;
|
|
justify-content: center;
|
|
background: center no-repeat url("../img/broken_image.png");
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.avatar-upload .inputfile.hidden {
|
|
width: 0.1px;
|
|
height: 0.1px;
|
|
opacity: 0;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
}
|
|
|
|
.avatar-upload .inputfile + label.round {
|
|
display: flex;
|
|
position: absolute;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
width: 3rem;
|
|
height: 3rem;
|
|
line-height: 3rem;
|
|
border-radius: 50%;
|
|
box-shadow: 0 1px 4px var(--clr-shadow-dialog); /* rgba(0,0,0,0.4) similar to menu */
|
|
bottom: 0;
|
|
right: 0;
|
|
background-color: var(--clr-background-off-white);
|
|
z-index: 1;
|
|
}
|
|
|
|
.avatar-upload .inputfile:focus + label.round {
|
|
outline: none;
|
|
}
|
|
|
|
.avatar-upload .inputfile:focus + label,
|
|
.avatar-upload .inputfile + label:hover {
|
|
background-color: var(--clr-primary-wash);
|
|
color: var(--clr-primary-accent);
|
|
}
|
|
/* END of avatar upload */
|
|
/* END of new account panel */
|
|
/* END of sidepanel styles */
|
|
|
|
/* Topic/messages view */
|
|
#topic-caption-panel {
|
|
background-color: var(--clr-background-blue-gray-300);
|
|
}
|
|
#topic-caption-panel a {
|
|
color: var(--clr-text-secondary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
#topic-caption-panel :hover {
|
|
color: var(--clr-dark);
|
|
}
|
|
|
|
#topic-caption-panel .avatar-box {
|
|
position: relative;
|
|
width: 3rem;
|
|
min-width: 3rem;
|
|
height: 3rem;
|
|
font-size: 1.8rem;
|
|
margin-right: 0.35rem;
|
|
}
|
|
|
|
#topic-caption-panel .avatar-box > .material-icons {
|
|
font-size: 2.4rem;
|
|
line-height: 3rem;
|
|
}
|
|
|
|
#topic-title-group {
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
#hide-message-view {
|
|
display: block;
|
|
margin-right: 0.35rem;
|
|
}
|
|
|
|
#topic-users {
|
|
margin-left: auto;
|
|
margin-right: 1rem;
|
|
width: min-content;
|
|
}
|
|
|
|
#topic-users .avatar-box {
|
|
display: inline-block;
|
|
width: 1.8rem;
|
|
min-width: 1.8rem;
|
|
height: 1.8rem;
|
|
min-height: 1.8rem;
|
|
font-size: 1rem;
|
|
margin-right: 0.2rem;
|
|
}
|
|
|
|
#topic-users .avatar-box > .material-icons {
|
|
font-size: 1.4rem;
|
|
line-height: 1.8rem;
|
|
}
|
|
|
|
/* Overflow span "+18 more" */
|
|
#topic-users > span {
|
|
line-height: 2rem;
|
|
vertical-align: top;
|
|
}
|
|
|
|
/* Div holding QR code */
|
|
.qr-code {
|
|
align-self: center;
|
|
}
|
|
|
|
/* Scrollable panel where the messages are shown */
|
|
#messages-panel {
|
|
position: relative;
|
|
padding: 0.75rem;
|
|
overflow-y: scroll;
|
|
background-color: var(--clr-background-blue-gray-50);
|
|
height: 100%;
|
|
background-image: url("../img/bg_messages.png");
|
|
}
|
|
|
|
/* Explicitly set dark mode */
|
|
#messages-panel[color-scheme="dark"] {
|
|
background-image: url("../img/bg_messages_dk.png");
|
|
}
|
|
/* Dark mode asigned by the OS */
|
|
@media (prefers-color-scheme: dark) {
|
|
#messages-panel {
|
|
background-image: url("../img/bg_messages_dk.png");
|
|
}
|
|
}
|
|
|
|
#messages-container {
|
|
position: relative;
|
|
overflow-y: hidden;
|
|
height: 100%;
|
|
}
|
|
|
|
#write-only-background {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.5), rgba(255,255,255,.5) 0.5rem,
|
|
rgba(255,255,255,.8) 0.5rem, rgba(255,255,255,.8) 1rem); /* Specific gradient, keep as is or break down further if these opacities are common */
|
|
}
|
|
|
|
#write-only-note {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background-color: var(--clr-bright);
|
|
color: var(--clr-text-primary);
|
|
height: auto;
|
|
width: auto;
|
|
line-height: 2rem;
|
|
text-align: center;
|
|
padding: 0.75rem 1.25rem 0.75rem 1.25rem;
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 1px 0.5px var(--clr-shadow-button-inset-active); /* rgba(0, 0, 0, 0.12) */
|
|
}
|
|
|
|
#peer-messaging-disabled-note {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 4.3rem;
|
|
transform: translate(-50%);
|
|
background-color: var(--clr-bright);
|
|
color: var(--clr-text-primary);
|
|
width: fit-content;
|
|
line-height: 2rem;
|
|
text-align: center;
|
|
padding: 0.75rem 1.25rem 0.75rem 1.25rem;
|
|
border-radius: 0.5rem;
|
|
box-shadow: 0 1px 0.5px var(--clr-shadow-button-inset-active); /* rgba(0, 0, 0, 0.12) */
|
|
}
|
|
|
|
/* Footer-panel with the input for the new message */
|
|
#send-message-panel {
|
|
display: flex;
|
|
align-items: center;
|
|
flex: none;
|
|
padding: 0.4rem 0.4rem 0.4rem 0.6rem;
|
|
background-color: var(--clr-background-blue-gray-50);
|
|
z-index: 2;
|
|
min-height: 4rem;
|
|
}
|
|
|
|
#send-message-panel #writing-disabled {
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
#send-message-wrapper {
|
|
background-color: var(--clr-background-blue-gray-50);
|
|
box-shadow: 0px -2px 3px -1px var(--clr-shadow-panel-divider); /* Faint shadow above panel */
|
|
z-index: 2;
|
|
}
|
|
|
|
#sendMessage {
|
|
overflow: hidden;
|
|
overflow-wrap: break-word;
|
|
}
|
|
|
|
#send-message-panel .material-icons {
|
|
min-width: 2rem;
|
|
font-size: 1.6rem;
|
|
}
|
|
|
|
#send-message-panel .material-icons.secondary, .material-icons.disabled {
|
|
color: var(--clr-text-tertiary)!important;
|
|
}
|
|
|
|
#send-message-panel .material-icons.secondary:hover {
|
|
color: var(--clr-primary-accent)!important;
|
|
}
|
|
|
|
/* The textarea where the message is entered. */
|
|
#send-message-input {
|
|
overflow: hidden auto;
|
|
min-height: 2.5rem;
|
|
max-height: 6rem;
|
|
}
|
|
|
|
/* New chat invitation panel */
|
|
|
|
.accept-invite-panel {
|
|
background-color: var(--clr-background-blue-gray-50);
|
|
box-shadow: 0px -2px 3px -1px var(--clr-shadow-panel-divider); /* Faint shadow above panel */
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.accept-invite-panel .title {
|
|
font-size: 1.2rem;
|
|
padding: 0.75rem;
|
|
}
|
|
|
|
.accept-invite-panel .footer {
|
|
background-color: var(--clr-background-off-white);
|
|
white-space: nowrap;
|
|
padding-bottom: 0.35rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.accept-invite-panel button {
|
|
font-size: 1rem;
|
|
height: 2em;
|
|
line-height: 2em;
|
|
border: 1px solid var(--clr-transparent);
|
|
margin: 0.25rem;
|
|
box-shadow: 0 1px 2px 0 var(--clr-shadow-button);
|
|
}
|
|
|
|
/* END of chat invitation panel */
|
|
|
|
/* A static panel shown when no topic is selected */
|
|
#dummy-view {
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: var(--clr-cyan-50);
|
|
}
|
|
#dummy-view a {
|
|
text-decoration: none;
|
|
display: block;
|
|
text-align: center;
|
|
}
|
|
|
|
#image-preview {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 2;
|
|
background-color: var(--clr-overlay-white-strong);
|
|
}
|
|
|
|
|
|
#image-preview-caption-panel {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
background-color: var(--clr-background-blue-gray-50);
|
|
box-shadow: 0 1px 2px var(--clr-shadow-silver-subtle); /* Faint shadow under the panel */
|
|
line-height: 2rem;
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
height: var(--caption-panel-height);
|
|
padding: 1rem 0.75rem 0 0.75rem;
|
|
z-index: 3;
|
|
}
|
|
|
|
#image-preview-caption-panel a {
|
|
color: var(--clr-text-secondary);
|
|
text-decoration: none;
|
|
}
|
|
|
|
#image-preview-caption-panel a:hover {
|
|
color: var(--clr-dark);
|
|
}
|
|
|
|
#image-preview-container {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
background-color: var(--clr-gray-medium-bg);
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
#image-preview-footer {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
height: 3.2rem;
|
|
line-height: 1.5rem;
|
|
background-color: var(--clr-background-blue-gray-50);
|
|
box-shadow: 0px -2px 3px -1px var(--clr-shadow-panel-divider); /* Faint shadow above panel */
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
#image-preview-container .material-icons {
|
|
font-size: 6rem;
|
|
}
|
|
|
|
#image-preview-container .doc-card {
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
background-color: var(--clr-std-ltgray);
|
|
padding: 1rem;
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
/* Video-call related styles */
|
|
|
|
#video-container {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: var(--clr-overlay-white-strong);
|
|
}
|
|
|
|
#video-container.minimized {
|
|
left: auto;
|
|
top: 1rem;
|
|
right: 1rem;
|
|
width: 18rem;
|
|
height: 18rem;
|
|
background-color: unset;
|
|
user-select: none;
|
|
cursor: grab;
|
|
box-shadow: 0.15rem 0.15rem 1.5rem var(--clr-shadow-dialog);
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
#controls {
|
|
position: absolute;
|
|
display: flex;
|
|
column-gap: 1rem;
|
|
align-items: center;
|
|
align-self: center;
|
|
justify-content: center;
|
|
bottom: 2.5rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
#controls.minimized {
|
|
column-gap: 0.5rem;
|
|
bottom: 1.75rem;
|
|
}
|
|
|
|
.incoming-call #controls {
|
|
bottom: 1rem;
|
|
}
|
|
|
|
#controls button {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
min-width: initial;
|
|
box-shadow: 0 3px 6px 0 var(--clr-shadow-button);
|
|
}
|
|
|
|
#controls.minimized button {
|
|
width: 2.75rem;
|
|
height: 2.75rem;
|
|
box-shadow: 0 2px 4px 0 var(--clr-shadow-button);
|
|
}
|
|
|
|
#controls button .material-icons {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
#controls.minimized button .material-icons {
|
|
font-size: 1.4rem;
|
|
}
|
|
|
|
button.full-screen {
|
|
position: absolute;
|
|
top: 2rem;
|
|
left: 2rem;
|
|
z-index: 1;
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 0.5rem;
|
|
padding: 0;
|
|
box-shadow: none;
|
|
background-color: transparent;
|
|
min-width: unset;
|
|
}
|
|
|
|
.minimized button.full-screen {
|
|
top: 1rem;
|
|
left: 1rem;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
|
|
button.full-screen:hover:not([disabled]), button:active:not([disabled]) {
|
|
color: var(--clr-text-secondary);
|
|
}
|
|
|
|
button.full-screen .material-icons {
|
|
font-size: x-large;
|
|
}
|
|
|
|
.minimized button.full-screen .material-icons {
|
|
font-size: large;
|
|
}
|
|
|
|
#video-container-panel {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.call-party {
|
|
background-color: var(--clr-background-extra-light-gray);
|
|
border-radius: 0.5rem;
|
|
border: 2px solid var(--clr-border-light);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.call-party:hover {
|
|
border-color: var(--clr-primary-accent);
|
|
}
|
|
|
|
.minimized .call-party {
|
|
border-width: 1px;
|
|
}
|
|
|
|
.call-party.peer {
|
|
position: absolute;
|
|
top: 1rem;
|
|
left: 1rem;
|
|
right: 1rem;
|
|
bottom: 1rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
.minimized .call-party.peer {
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
}
|
|
|
|
.call-party.self {
|
|
position: absolute;
|
|
right: 0.5rem;
|
|
bottom: 0.5rem;
|
|
width: 10rem;
|
|
height: 10rem;
|
|
z-index: 2;
|
|
}
|
|
|
|
.call-party.self[disabled] {
|
|
display: none;
|
|
}
|
|
|
|
video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.call-party.self video {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
.call-party[disabled] video {
|
|
display: none;
|
|
}
|
|
|
|
.caller-card {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.caller-card .avatar-box {
|
|
width: 10rem;
|
|
height: 10rem;
|
|
font-size: 6rem;
|
|
}
|
|
|
|
.caller-card.pulse img.avatar,
|
|
.caller-card.pulse .lettertile {
|
|
animation: active-call 1.5s linear infinite;
|
|
}
|
|
|
|
.caller-card .avatar-box .material-icons {
|
|
font-size: 6rem;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.minimized .caller-card .avatar-box {
|
|
width: 6rem;
|
|
height: 6rem;
|
|
font-size: 3.6rem;
|
|
}
|
|
|
|
/* Badge with "You" for current user or peer's name. */
|
|
.call-party .caller-name {
|
|
max-width: 12rem;
|
|
padding: 0.15rem 0.5rem;
|
|
border-radius: 0.35rem;
|
|
z-index: 1;
|
|
text-shadow: 0 0 1px var(--clr-bright);
|
|
background-color: var(--clr-background-off-white);
|
|
text-overflow: ellipsis;
|
|
overflow-x: hidden;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.call-party.self .caller-name.inactive {
|
|
position: absolute;
|
|
bottom: 0.25rem;
|
|
right: 0.25rem;
|
|
}
|
|
|
|
.caller-card .caller-name {
|
|
font-size: larger;
|
|
margin-top: 0.5rem;
|
|
}
|
|
|
|
.caller-card .trusted-badge {
|
|
display: inline-block;
|
|
}
|
|
|
|
.call-party.peer .caller-name.inactive {
|
|
position: absolute;
|
|
font-size: larger;
|
|
left: 1rem;
|
|
bottom: 0.5rem;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.minimized .caller-name {
|
|
padding: 0.1rem 0.35rem;
|
|
border-radius: 0.25rem;
|
|
font-weight: lighter;
|
|
}
|
|
|
|
.incoming-call {
|
|
position: relative;
|
|
background-color: var(--clr-bright);
|
|
box-shadow: 0.15rem 0.15rem 1.5rem var(--clr-shadow-dialog);
|
|
border-radius: 0.3rem;
|
|
margin: auto 2rem auto 2rem;
|
|
width: fit-content;
|
|
min-width: 16rem;
|
|
max-width: 24rem;
|
|
}
|
|
|
|
.incoming-call .caller-card {
|
|
position: relative;
|
|
top: initial;
|
|
left: initial;
|
|
width: 100%;
|
|
height: 100%;
|
|
padding: 4rem 3.5rem 5.5rem 3.5rem;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.incoming-call .caller-name {
|
|
padding: 0.15rem 0.5rem;
|
|
border-radius: 0.35rem;
|
|
z-index: 1;
|
|
text-shadow: 0 0 1px var(--clr-bright);
|
|
background-color: rgba(255, 255, 255, 0.7); /* Specific rgba */
|
|
}
|
|
|
|
.call-message {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.call-message .duration {
|
|
font-weight: lighter;
|
|
}
|
|
|
|
#go-to-latest {
|
|
right: 1.5rem;
|
|
bottom: 1rem;
|
|
}
|
|
|
|
@keyframes active-call {
|
|
0% {
|
|
box-shadow:
|
|
0 0 0 0.1rem var(--clr-primary-accent-transparent-medium),
|
|
0 0 0 0.3rem var(--clr-primary-accent-transparent-medium),
|
|
0 0 0 0.5rem var(--clr-primary-accent-transparent-medium);
|
|
}
|
|
100% {
|
|
box-shadow:
|
|
0 0 0 0.4rem var(--clr-primary-accent-transparent-medium),
|
|
0 0 0 2rem rgba(33, 150, 243, 0), /* End with transparent */
|
|
0 0 0 3rem rgba(33, 150, 243, 0); /* End with transparent */
|
|
}
|
|
}
|
|
|
|
/* Talk bubbles */
|
|
.chat-box {
|
|
list-style: none;
|
|
padding: 0 0 3.5rem 0;
|
|
margin: 0 0.5rem;
|
|
scroll-behavior: smooth;
|
|
}
|
|
|
|
/* Group chats have avatars on the left. Make left margin smaller */
|
|
.chat-box.group {
|
|
margin-left: -0.4rem;
|
|
}
|
|
|
|
.chat-box li {
|
|
display: flex;
|
|
margin: 0;
|
|
padding: 0;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.chat-box .right {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.bubble {
|
|
position: relative;
|
|
display: flex;
|
|
max-width: 36rem;
|
|
min-width: 9rem;
|
|
height: auto;
|
|
padding: 0.75rem 0.5rem 0.75rem 0.5rem;
|
|
margin: 0;
|
|
text-align: left;
|
|
color: var(--clr-bubble-text);
|
|
border-radius: 0.5rem;
|
|
transition: ease-out background-color 0.5s;
|
|
transition-delay: 0.3s;
|
|
filter: drop-shadow(0.5px 0.5px 0.7px var(--clr-shadow-bubble-drop));
|
|
}
|
|
|
|
.chat-box li.single {
|
|
margin-top: 0.25rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.chat-box li.first {
|
|
margin-top: 0.25rem;
|
|
margin-bottom: 0.15rem;
|
|
}
|
|
|
|
.chat-box li.middle {
|
|
margin-top: 0.15rem;
|
|
margin-bottom: 0.15rem;
|
|
}
|
|
|
|
.chat-box li.last {
|
|
margin-top: 0.15rem;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.left .bubble {
|
|
background-color: var(--clr-bubble-left-bg);
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.left.flash .bubble {
|
|
background-color: var(--clr-bubble-left-bg-flash);
|
|
}
|
|
|
|
.left .bubble.tip {
|
|
border-bottom-left-radius: 0;
|
|
}
|
|
|
|
.right .bubble {
|
|
background-color: var(--clr-bubble-right-bg);
|
|
margin-left: 1.75rem;
|
|
}
|
|
|
|
.right.flash .bubble {
|
|
background-color: var(--clr-bubble-right-bg-flash);
|
|
}
|
|
|
|
.right .bubble.tip {
|
|
border-bottom-right-radius: 0;
|
|
}
|
|
|
|
.chat-box .meta {
|
|
justify-content: center;
|
|
margin-top: 0.5rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.chat-box .meta .bubble {
|
|
color: var(--clr-bubble-meta-text);
|
|
min-width: unset;
|
|
}
|
|
|
|
.meta .bubble.deleted {
|
|
background-color: var(--clr-bubble-meta-deleted-bg);
|
|
padding: 0.75rem 0.75rem 0.5rem 0.75rem;
|
|
}
|
|
|
|
.meta .bubble.date {
|
|
font-size: smaller;
|
|
padding: 0.5rem 0.5rem 0.5rem 0.5rem;
|
|
background-color: var(--clr-bubble-meta-date-bg);
|
|
text-transform: uppercase;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Left triangle placed bottom left flush. */
|
|
.left .bubble.tip::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 0.85rem;
|
|
height: 0.85rem;
|
|
left: -0.8rem;
|
|
bottom: 0;
|
|
background-color: var(--clr-bubble-left-bg);
|
|
clip-path: polygon(100% 0, 0 110%, 100% 110%);
|
|
-webkit-clip-path: polygon(100% 0, 0 110%, 100% 110%);
|
|
border-bottom-left-radius: 0.3rem;
|
|
transition: ease-out background-color 0.5s;
|
|
transition-delay: 0.3s;
|
|
}
|
|
|
|
.left.flash .bubble.tip::before {
|
|
background-color: var(--clr-bubble-left-bg-flash);
|
|
}
|
|
|
|
/* Right triangle placed bottom right flush. */
|
|
.right .bubble.tip::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 0.85rem;
|
|
height: 0.85rem;
|
|
left: 99.8%;
|
|
bottom: 0;
|
|
background-color: var(--clr-bubble-right-bg);
|
|
clip-path: polygon(0 0, 100% 110%, 0 110%);
|
|
-webkit-clip-path: polygon(0 0, 100% 110%, 0 110%);
|
|
border-bottom-right-radius: 0.3rem;
|
|
transition: ease-out background-color 0.5s;
|
|
transition-delay: 0.3s;
|
|
}
|
|
|
|
.right.flash .bubble.tip::before {
|
|
background-color: var(--clr-bubble-right-bg-flash);
|
|
}
|
|
|
|
.chat-box .avatar-box {
|
|
position: relative;
|
|
width: 1.4rem;
|
|
min-width: 1.4rem;
|
|
height: 1.4rem;
|
|
min-height: 1.4rem;
|
|
font-size: 0.8rem;
|
|
margin-bottom: 0.8rem;
|
|
margin-right: 0.8rem;
|
|
}
|
|
|
|
/* Message text + timestamp and delivery marker */
|
|
.bubble div.content-meta {
|
|
width: 100%;
|
|
}
|
|
|
|
.bubble div.message-content {
|
|
position: relative;
|
|
margin: 0;
|
|
width: 100%;
|
|
max-width: 36rem;
|
|
overflow-wrap: anywhere;
|
|
padding: 0 0.75rem 0 0.75rem;
|
|
font-size: var(--message-text-size);
|
|
}
|
|
|
|
/* Increase font size when the message contains only emojis.
|
|
Font from 3x to almost normal, from 1 to 5 emojis in a message */
|
|
.bubble div.message-content.emoji-1 {
|
|
font-size: 300%;
|
|
}
|
|
.bubble div.message-content.emoji-2 {
|
|
font-size: 241%;
|
|
}
|
|
.bubble div.message-content.emoji-3 {
|
|
font-size: 193%;
|
|
}
|
|
.bubble div.message-content.emoji-4 {
|
|
font-size: 155%;
|
|
}
|
|
.bubble div.message-content.emoji-5 {
|
|
font-size: 125%;
|
|
}
|
|
|
|
/* The timestamp is a floating element. Need to ensure div.message-content is expanded
|
|
* to accomodate it. It's usually called clearfix. */
|
|
.bubble div.message-content:after {
|
|
content: ".";
|
|
display: block;
|
|
height: 0;
|
|
clear: both;
|
|
visibility: hidden;
|
|
}
|
|
|
|
.chat-box .timestamp-padding {
|
|
display: inline-block;
|
|
width: 4rem;
|
|
height: 0;
|
|
}
|
|
|
|
.chat-box .timestamp {
|
|
position: relative;
|
|
font-size: 80%;
|
|
color: var(--clr-bubble-timestamp-text);
|
|
top: 0.35rem;
|
|
float: right;
|
|
white-space: nowrap;
|
|
user-select: none;
|
|
}
|
|
|
|
/* The name of the person who sent the message
|
|
* (group chat only)
|
|
*/
|
|
.chat-box .author {
|
|
font-size: 80%;
|
|
color:var(--clr-bubble-author-text);
|
|
max-width: 12em;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
/* Inline and preview image styles */
|
|
.inline-image, .image-preview {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: 0.1rem;
|
|
}
|
|
|
|
.inline-image {
|
|
max-width: 36rem;
|
|
max-height: 24rem;
|
|
}
|
|
|
|
/* Container with upload progress */
|
|
.inline-image > .rounded-container {
|
|
position: relative;
|
|
margin: 0.25rem auto;
|
|
bottom: 2rem;
|
|
/* Imitating minimum margins on the left and right */
|
|
border-left: 0.25rem solid var(--clr-transparent);
|
|
border-right: 0.25rem solid var(--clr-transparent);
|
|
}
|
|
|
|
/* Broken image graphics which replaces the stock graphics. */
|
|
img.inline-image::before, img.image-preview::before {
|
|
position: absolute;
|
|
display: flex;
|
|
font-size: 0.9rem;
|
|
font-weight: lighter;
|
|
color: var(--clr-text-primary);
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
justify-content: center;
|
|
background: center no-repeat var(--clr-border-light) url("../img/broken_image.png");
|
|
}
|
|
|
|
img.inline-image::before {
|
|
content: attr(alt);
|
|
background-size: 3rem 3rem;
|
|
}
|
|
|
|
img.image-preview::before {
|
|
content: " ";
|
|
background-size: 10rem 10rem;
|
|
}
|
|
|
|
.inline-image.video > img.inline-image::before, img.image-preview.video::before {
|
|
background: center no-repeat var(--clr-border-light) url("../img/broken_video.png");
|
|
}
|
|
|
|
.inline-image.video > img.inline-image::before {
|
|
background-size: 3rem 3rem;
|
|
}
|
|
|
|
.inline-video {
|
|
display: flex;
|
|
position: relative;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.inline-video > img.inline-image::before {
|
|
background: var(--clr-border-light);
|
|
}
|
|
|
|
.inline-video .duration {
|
|
padding: 0.25rem 0.5rem;
|
|
color: var(--clr-toast-bg); /* #333 */
|
|
background-color: rgba(255, 255, 255, 0.5); /* Specific rgba */
|
|
position: absolute;
|
|
bottom: 0.25rem;
|
|
left: 0.25rem;
|
|
font-size: 80%;
|
|
border-radius: 0.3rem;
|
|
}
|
|
|
|
.inline-video .play-control {
|
|
display: flex;
|
|
position: absolute;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
background-color: rgba(0, 0, 0, 0.4); /* Specific rgba */
|
|
border-radius: 50%;
|
|
pointer-events: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Attachment styles */
|
|
.attachment {
|
|
display: flex;
|
|
}
|
|
.attachment:last-of-type {
|
|
margin-bottom: -0.45rem;
|
|
}
|
|
|
|
/* END of talk bubbles */
|
|
/* END of topic/mesages view */
|
|
|
|
/* InfoView styles */
|
|
#info-caption-panel {
|
|
background-color: var(--clr-background-blue-gray-300);
|
|
}
|
|
#info-caption-panel a {
|
|
color: var(--clr-text-secondary);
|
|
line-height: 1;
|
|
text-decoration: none;
|
|
}
|
|
#info-caption-panel :hover {
|
|
color: var(--clr-dark);
|
|
}
|
|
|
|
#info-title {
|
|
margin-right: auto;
|
|
}
|
|
|
|
#group-manager {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
overflow-y: hidden;
|
|
}
|
|
|
|
#group-manager-buttons {
|
|
display: flex;
|
|
background-color: var(--clr-background-blue-gray-50);
|
|
box-shadow: 0 -1px var(--clr-shadow-panel-divider); /* Faint shadow above panel */
|
|
z-index: 2;
|
|
justify-content: space-around;
|
|
padding: 0.4rem;
|
|
height: 4rem;
|
|
border-left: 1px solid var(--clr-border-light);
|
|
}
|
|
|
|
/* END of InfoView */
|
|
|
|
/* BEGIN Tabs */
|
|
|
|
ul.tabbar {
|
|
display: flex;
|
|
flex-grow: 0;
|
|
flex-shrink: 0;
|
|
background: var(--clr-tabbar-bg);
|
|
list-style:none;
|
|
margin: 0;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
ul.tabbar > li {
|
|
position: relative;
|
|
height: 2.4rem;
|
|
box-shadow: inset 0 -2px 2.5px -1px var(--clr-shadow-button); /* rgba(0,0,0,0.25) */
|
|
}
|
|
|
|
ul.tabbar li.active {
|
|
background: var(--clr-bright);
|
|
}
|
|
|
|
ul.tabbar li:after {
|
|
height: 0.10rem;
|
|
width: 100%;
|
|
content: "";
|
|
bottom: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
background: var(--clr-tabbar-inactive-border);
|
|
}
|
|
|
|
ul.tabbar li.active:after {
|
|
height: 0.15rem;
|
|
content: "";
|
|
bottom: 0;
|
|
left: 0;
|
|
position: absolute;
|
|
background: var(--clr-tabbar-active-border);
|
|
animation: tabbar-border-expand 0.2s cubic-bezier(0.4, 0.0, 0.4, 1) 0s alternate forwards;
|
|
}
|
|
|
|
@keyframes tabbar-border-expand {
|
|
0% {
|
|
opacity: 0;
|
|
width: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
ul.tabbar > li > a {
|
|
position: relative;
|
|
padding-left: 1rem;
|
|
padding-right: 1rem;
|
|
text-align: center;
|
|
line-height: 2.4rem;
|
|
font-weight: 400;
|
|
font-size: 1.3rem;
|
|
font-variant: small-caps;
|
|
text-decoration: none;
|
|
color: var(--clr-tabbar-inactive-text);
|
|
overflow: hidden;
|
|
}
|
|
|
|
ul.tabbar li.active > a {
|
|
color: var(--clr-tabbar-active-text);
|
|
}
|
|
|
|
/* END Tabs */
|
|
|
|
/* Miscellaneous */
|
|
|
|
/* Badge with the number of unread messages */
|
|
.unread {
|
|
display: inline-block;
|
|
font-size: 0.75rem;
|
|
font-weight: bolder;
|
|
background-color: var(--clr-cyan-accent);
|
|
color: var(--clr-bright);
|
|
border-radius: 50%;
|
|
width: 1.35rem;
|
|
height: 1.35rem;
|
|
margin-left: 0.5rem;
|
|
line-height: 1.45rem;
|
|
text-align: center;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.material-icons.as-badge {
|
|
padding-left: 0.2rem;
|
|
font-size: 1.15rem;
|
|
color: var(--clr-chip-remove-icon-bg); /* #aaa */
|
|
}
|
|
|
|
/* Badge with a label, like [you], [muted], etc */
|
|
.badge {
|
|
font-family: 'Roboto Mono', Courier, monospace, sans-serif;
|
|
font-size: 0.8rem;
|
|
border: 1px solid var(--clr-badge-default-border);
|
|
background-color: var(--clr-badge-default-bg);
|
|
color: var(--clr-badge-default-text);
|
|
padding: 0.05rem 0.25rem 0.05rem 0.25rem;
|
|
margin: 0.05rem 0.1rem 0.05rem 0.1rem;
|
|
border-radius: 0.2rem;
|
|
display: inline-block;
|
|
align-self: flex-start;
|
|
}
|
|
|
|
.badge.green {
|
|
border-color: var(--clr-badge-green-border);
|
|
background-color: var(--clr-badge-green-bg);
|
|
color: var(--clr-badge-green-text);
|
|
}
|
|
|
|
.badge.yellow {
|
|
border-color: var(--clr-badge-yellow-border);
|
|
background-color: var(--clr-badge-yellow-bg);
|
|
color: var(--clr-badge-yellow-text);
|
|
}
|
|
|
|
.badge.blue {
|
|
border-color: var(--clr-badge-blue-border);
|
|
background-color: var(--clr-badge-blue-bg);
|
|
color: var(--clr-badge-blue-text);
|
|
}
|
|
|
|
.badge.red {
|
|
border-color: var(--clr-badge-red-border);
|
|
background-color: var(--clr-badge-red-bg);
|
|
color: var(--clr-badge-red-text);
|
|
}
|
|
|
|
.badge.magenta {
|
|
border-color: var(--clr-badge-magenta-border);
|
|
background-color: var(--clr-badge-magenta-bg);
|
|
color: var(--clr-badge-magenta-text);
|
|
}
|
|
|
|
/* Letter tile base style, responsive square box */
|
|
.lettertile {
|
|
width: 100%;
|
|
padding-bottom: 100%;
|
|
border-radius: 50%;
|
|
user-select: none;
|
|
}
|
|
|
|
/* Div with letter tile content */
|
|
.lettertile > div {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-shrink: 0;
|
|
flex-grow: 0;
|
|
top: 0; bottom: 0; left: 0; right: 0;
|
|
text-transform: uppercase;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
border-radius: 50%;
|
|
line-height: 1;
|
|
padding-top: 0.1em;
|
|
color: var(--clr-lettertile-default-text); /* default text color #FAFAFA, gray 50 */
|
|
}
|
|
|
|
.lettertile:hover {
|
|
color: var(--clr-lettertile-hover-text);
|
|
}
|
|
|
|
.lettertile.disabled {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* Colors of letter tiles */
|
|
.lt-bg-0 { background-color: var(--clr-lt-bg-0); }
|
|
.lt-bg-1 { background-color: var(--clr-lt-bg-1); }
|
|
.lt-bg-2 { background-color: var(--clr-lt-bg-2); }
|
|
.lt-bg-3 { background-color: var(--clr-lt-bg-3); }
|
|
.lt-bg-4 { background-color: var(--clr-lt-bg-4); }
|
|
.lt-bg-5 { background-color: var(--clr-lt-bg-5); }
|
|
.lt-bg-6 { background-color: var(--clr-lt-bg-6); }
|
|
.lt-bg-7 { background-color: var(--clr-lt-bg-7); }
|
|
.lt-bg-8 { background-color: var(--clr-lt-bg-8); }
|
|
.lt-bg-9 { background-color: var(--clr-lt-bg-9); }
|
|
.lt-bg-10 { background-color: var(--clr-lt-bg-10); }
|
|
.lt-bg-11 { background-color: var(--clr-lt-bg-11); }
|
|
.lt-bg-12 { background-color: var(--clr-lt-bg-12); }
|
|
.lt-bg-13 { background-color: var(--clr-lt-bg-13); }
|
|
.lt-bg-14 { background-color: var(--clr-lt-bg-14); }
|
|
.lt-bg-15 { background-color: var(--clr-lt-bg-15); }
|
|
|
|
/* Darker version of letter tile colors */
|
|
.dk-bg-0 { background-color: var(--clr-dk-bg-0); }
|
|
.dk-bg-1 { background-color: var(--clr-dk-bg-1); }
|
|
.dk-bg-2 { background-color: var(--clr-dk-bg-2); }
|
|
.dk-bg-3 { background-color: var(--clr-dk-bg-3); }
|
|
.dk-bg-4 { background-color: var(--clr-dk-bg-4); }
|
|
.dk-bg-5 { background-color: var(--clr-dk-bg-5); }
|
|
.dk-bg-6 { background-color: var(--clr-dk-bg-6); }
|
|
.dk-bg-7 { background-color: var(--clr-dk-bg-7); }
|
|
.dk-bg-8 { background-color: var(--clr-dk-bg-8); }
|
|
.dk-bg-9 { background-color: var(--clr-dk-bg-9); }
|
|
.dk-bg-10 { background-color: var(--clr-dk-bg-10); }
|
|
.dk-bg-11 { background-color: var(--clr-dk-bg-11); }
|
|
.dk-bg-12 { background-color: var(--clr-dk-bg-12); }
|
|
.dk-bg-13 { background-color: var(--clr-dk-bg-13); }
|
|
.dk-bg-14 { background-color: var(--clr-dk-bg-14); }
|
|
.dk-bg-15 { background-color: var(--clr-dk-bg-15); }
|
|
|
|
/* Same colors as above but for text as opposite to background */
|
|
.lt-fg-0 { color: var(--clr-lt-fg-0)!important; }
|
|
.lt-fg-1 { color: var(--clr-lt-fg-1)!important; }
|
|
.lt-fg-2 { color: var(--clr-lt-fg-2)!important; }
|
|
.lt-fg-3 { color: var(--clr-lt-fg-3)!important; }
|
|
.lt-fg-4 { color: var(--clr-lt-fg-4)!important; }
|
|
.lt-fg-5 { color: var(--clr-lt-fg-5)!important; }
|
|
.lt-fg-6 { color: var(--clr-lt-fg-6)!important; }
|
|
.lt-fg-7 { color: var(--clr-lt-fg-7)!important; }
|
|
.lt-fg-8 { color: var(--clr-lt-fg-8)!important; }
|
|
.lt-fg-9 { color: var(--clr-lt-fg-9)!important; }
|
|
.lt-fg-10 { color: var(--clr-lt-fg-10)!important; }
|
|
.lt-fg-11 { color: var(--clr-lt-fg-11)!important; }
|
|
.lt-fg-12 { color: var(--clr-lt-fg-12)!important; }
|
|
.lt-fg-13 { color: var(--clr-lt-fg-13)!important; }
|
|
.lt-fg-14 { color: var(--clr-lt-fg-14)!important; }
|
|
.lt-fg-15 { color: var(--clr-lt-fg-15)!important; }
|
|
|
|
.dk-fg-0 { color: var(--clr-dk-fg-0)!important; }
|
|
.dk-fg-1 { color: var(--clr-dk-fg-1)!important; }
|
|
.dk-fg-2 { color: var(--clr-dk-fg-2)!important; }
|
|
.dk-fg-3 { color: var(--clr-dk-fg-3)!important; }
|
|
.dk-fg-4 { color: var(--clr-dk-fg-4)!important; }
|
|
.dk-fg-5 { color: var(--clr-dk-fg-5)!important; }
|
|
.dk-fg-6 { color: var(--clr-dk-fg-6)!important; }
|
|
.dk-fg-7 { color: var(--clr-dk-fg-7)!important; }
|
|
.dk-fg-8 { color: var(--clr-dk-fg-8)!important; }
|
|
.dk-fg-9 { color: var(--clr-dk-fg-9)!important; }
|
|
.dk-fg-10 { color: var(--clr-dk-fg-10)!important; }
|
|
.dk-fg-11 { color: var(--clr-dk-fg-11)!important; }
|
|
.dk-fg-12 { color: var(--clr-dk-fg-12)!important; }
|
|
.dk-fg-13 { color: var(--clr-dk-fg-13)!important; }
|
|
.dk-fg-14 { color: var(--clr-dk-fg-14)!important; }
|
|
.dk-fg-15 { color: var(--clr-dk-fg-15)!important; }
|
|
|
|
/* Material icons resized from the default 24pt */
|
|
.material-icons {
|
|
font-size: 1.4rem;
|
|
line-height: 1;
|
|
vertical-align: middle;
|
|
text-align: center;
|
|
user-select: none;
|
|
}
|
|
.material-icons.small {
|
|
font-size: 1rem;
|
|
}
|
|
.material-icons.medium {
|
|
font-size: 1.2rem;
|
|
}
|
|
.material-icons.large {
|
|
font-size: 1.6rem;
|
|
}
|
|
.material-icons.big {
|
|
font-size: 2.2rem;
|
|
}
|
|
.material-icons.x-big {
|
|
font-size: 3rem;
|
|
}
|
|
.material-icons.huge {
|
|
font-size: 4rem;
|
|
}
|
|
.composed-material {
|
|
display: inline-block;
|
|
position: relative;
|
|
}
|
|
.composed-material .second {
|
|
position: absolute;
|
|
font-size: 85%;
|
|
top: 7%;
|
|
left: 39%;
|
|
font-weight: bold;
|
|
}
|
|
.composed-material .second-small {
|
|
position: absolute;
|
|
font-size: 62%;
|
|
top: 14%;
|
|
left: 30%;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* White outline */
|
|
.material-icons.outline {
|
|
position: relative;
|
|
text-shadow: -1px 1px var(--clr-bright), 1px 1px var(--clr-bright), 1px -1px var(--clr-bright), -1px -1px var(--clr-bright);
|
|
}
|
|
|
|
#self-avatar .material-icons {
|
|
font-size: 2.4rem;
|
|
line-height: 3rem;
|
|
}
|
|
.avatar-box .material-icons {
|
|
color: var(--clr-lettertile-default-text); /* #fafafa, gray 50 */
|
|
border-radius: 50%;
|
|
width: inherit;
|
|
height: inherit;
|
|
}
|
|
|
|
.chip-input {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
flex-grow: 1;
|
|
cursor: text;
|
|
font-size: 1.1rem;
|
|
font-weight: normal;
|
|
background: var(--clr-transparent);
|
|
border-bottom: 1px solid var(--clr-input-border);
|
|
box-shadow: 0 1px 0 var(--clr-input-shadow);
|
|
transition: all 0.1s ease-in-out;
|
|
max-height: 10rem;
|
|
min-height: 4rem;
|
|
overflow-y: scroll;
|
|
margin: 0.25rem 0 0.25rem 0;
|
|
outline: none;
|
|
color: var(--clr-input-text);
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
text-align: center;
|
|
}
|
|
|
|
.chip-input.focused {
|
|
border-bottom: 1px solid var(--clr-input-border-focus);
|
|
box-shadow: 0 1px 0 var(--clr-input-shadow-focus);
|
|
}
|
|
|
|
.chip-input > input[type="text"] {
|
|
display: inline-block;
|
|
width: auto;
|
|
border: none;
|
|
line-height: 1.8;
|
|
box-shadow: none;
|
|
min-width: 4rem;
|
|
flex: 1 0 auto;
|
|
height: 1.8rem;
|
|
margin: 0.125rem;
|
|
}
|
|
|
|
.chip {
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
height: 1.8rem;
|
|
line-height: 1.8;
|
|
border-radius: 0.9rem;
|
|
margin: 0.125rem;
|
|
background-color: var(--clr-chip-bg);
|
|
white-space: nowrap;
|
|
font-size: 90%;
|
|
max-width: 12rem;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.chip > span {
|
|
white-space: nowrap;
|
|
overflow-x: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.chip.invalid {
|
|
color: var(--clr-chip-invalid-text);
|
|
background-color: var(--clr-chip-invalid-bg);
|
|
}
|
|
|
|
.chip > a {
|
|
display: inline-block;
|
|
color: var(--clr-chip-remove-icon-text);
|
|
background-color: var(--clr-chip-remove-icon-bg);
|
|
border-radius: 50%;
|
|
margin: 0.3rem;
|
|
width: 1.175rem;
|
|
min-width: 1.175rem;
|
|
height: 1.175rem;
|
|
line-height: 1.15;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.chip > a:focus,
|
|
.chip > a:hover {
|
|
text-decoration: none;
|
|
color: var(--clr-chip-remove-icon-hover-text);
|
|
background-color: var(--clr-chip-remove-icon-hover-bg);
|
|
}
|
|
|
|
.chip .avatar-box {
|
|
position: relative;
|
|
width: 1.8rem;
|
|
min-width: 1.8rem;
|
|
height: 1.8rem;
|
|
min-height: 1.8rem;
|
|
font-size: 1rem;
|
|
margin-right: 0.2rem;
|
|
}
|
|
|
|
.chip .avatar-box .material-icons {
|
|
font-size: 1.4rem;
|
|
line-height: 1.8rem;
|
|
}
|
|
|
|
.chip .spacer {
|
|
display: inline-block;
|
|
margin: 0.3rem;
|
|
width: 0.25rem;
|
|
height: 1.175rem;
|
|
}
|
|
|
|
.load-spinner-box {
|
|
--size-small: 2.5rem;
|
|
--size-large: 4rem;
|
|
position: absolute;
|
|
box-shadow: 0.1rem 0.1rem 0.15rem 1px var(--clr-shadow-button);
|
|
border-radius: 50%;
|
|
padding: 0.25rem;
|
|
width: var(--size-small);
|
|
height: var(--size-small);
|
|
left: 0;
|
|
right: 0;
|
|
top: 5rem;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
background-color: var(--clr-bright);
|
|
z-index: 2;
|
|
}
|
|
|
|
.load-spinner-box.large {
|
|
width: var(--size-large);
|
|
height: var(--size-large);
|
|
}
|
|
|
|
.load-spinner-box.clear {
|
|
box-shadow: 0.1rem 0.1rem 0.15rem 1px var(--clr-shadow-button-inset-active); /* rgba(0,0,0,0.12) */
|
|
background-color: rgba(255,255,255,0.5); /* Specific rgba */
|
|
}
|
|
|
|
.load-spinner-box.centered {
|
|
top: calc(var(--size-small)/2 - 0.25rem);
|
|
}
|
|
|
|
.load-spinner-box.large.centered {
|
|
top: calc(var(--size-large)/2 - 0.25rem);
|
|
}
|
|
|
|
.loader-spinner {
|
|
border: 0.35rem solid var(--clr-spinner-track);
|
|
border-radius: 50%;
|
|
border-top: 0.35rem solid var(--clr-spinner-active);
|
|
width: 2rem;
|
|
height: 2rem;
|
|
animation: spin 1.5s linear infinite;
|
|
}
|
|
|
|
.load-spinner-box.large .loader-spinner {
|
|
width: 3.5rem;
|
|
height: 3.5rem;
|
|
}
|
|
|
|
@keyframes spin {
|
|
0% { transform: rotate(0deg); }
|
|
100% { transform: rotate(360deg); }
|
|
}
|
|
|
|
/* File upload styles */
|
|
.uploader {
|
|
display: flex;
|
|
}
|
|
/* Gray uploader bar of fixed length (background) */
|
|
.uploader > div {
|
|
position: relative;
|
|
height: 0.6rem;
|
|
padding: 0.15rem;
|
|
margin: 0.35rem;
|
|
width: 6rem;
|
|
line-height: 0;
|
|
border-radius: 0.1rem;
|
|
background-color: var(--clr-background-blue-gray-100);
|
|
}
|
|
/* Colored uploader progress bar of variable length */
|
|
.uploader > div > span {
|
|
display: inline-block;
|
|
height: 0.3rem;
|
|
background-color: var(--clr-primary-action);
|
|
border-radius: 0.08rem;
|
|
}
|
|
|
|
/* Highlighted text */
|
|
.highlight {
|
|
color: var(--clr-highlight-text);
|
|
font-weight: bolder;
|
|
}
|
|
|
|
.highlight .preview {
|
|
color: var(--clr-highlight-preview-text);
|
|
font-weight: inherit;
|
|
}
|
|
|
|
/* Image cropping widget */
|
|
|
|
.cropper {
|
|
position: relative;
|
|
width: 18rem;
|
|
height: 21rem;
|
|
margin: auto;
|
|
margin-top: 1rem;
|
|
align-self: center;
|
|
transform: translateZ(0);
|
|
border-radius: 0.25rem;
|
|
}
|
|
|
|
.cropper .bounding-box {
|
|
position: relative;
|
|
width: 18rem;
|
|
height: 18rem;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
border-radius: 0.25rem;
|
|
border: solid 2px var(--clr-cropper-bounding-box-border);
|
|
box-shadow: 1px 1px 3px var(--clr-shadow-cropper-gray);
|
|
background-color: var(--clr-cropper-bounding-box-bg);
|
|
}
|
|
|
|
.cropper .preview {
|
|
position: absolute;
|
|
max-height: none;
|
|
max-width: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
.cropper .cutout {
|
|
position: absolute;
|
|
width: 17.8rem;
|
|
height: 17.8rem;
|
|
border: 1px dashed var(--clr-cropper-cutout-border);
|
|
margin: auto;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
left: 0;
|
|
box-shadow: 0 0 150rem 150rem var(--clr-cropper-cutout-shadow);
|
|
z-index: 0;
|
|
}
|
|
|
|
.cropper .cutout.circle {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.cropper .overlay {
|
|
position: absolute;
|
|
cursor: move;
|
|
touch-action: none;
|
|
z-index: 1;
|
|
}
|
|
|
|
.cropper .zoom-wrapper {
|
|
height: 2rem;
|
|
width: 80%;
|
|
margin: 1rem auto;
|
|
text-align: center;
|
|
}
|
|
|
|
.cropper .zoom {
|
|
box-shadow: none;
|
|
pointer-events: none;
|
|
z-index: 2;
|
|
}
|
|
|
|
.cropper .zoom:focus {
|
|
outline: none;
|
|
}
|
|
|
|
/* Quoted (cited) content */
|
|
.reply-quote {
|
|
position: relative;
|
|
padding: 0.15rem 0.5rem 0.25rem 0.5rem;
|
|
border-left: 0.25rem solid var(--clr-reply-quote-border);
|
|
line-height: 1.5em;
|
|
font-weight: lighter;
|
|
border-radius: 0.25rem;
|
|
color: var(--clr-reply-quote-text);
|
|
cursor: pointer;
|
|
}
|
|
|
|
.chat-box .bubble .reply-quote {
|
|
margin: 0.15rem -0.75rem 0.3rem -0.75rem;
|
|
}
|
|
|
|
.chat-box .bubble .reply-quote:first-child {
|
|
margin-top: -0.25rem;
|
|
}
|
|
|
|
.chat-box .left .reply-quote {
|
|
background-color: var(--clr-reply-quote-left-bg);
|
|
}
|
|
|
|
.chat-box .right .reply-quote {
|
|
background-color: var(--clr-reply-quote-right-bg);
|
|
}
|
|
|
|
.reply-quote .inline-image {
|
|
vertical-align: middle;
|
|
margin-bottom: 0.1rem;
|
|
}
|
|
|
|
.reply-quote img.inline-image::before {
|
|
content: '';
|
|
}
|
|
|
|
#reply-quote-preview {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
#reply-quote-preview .reply-quote {
|
|
width: 100%;
|
|
background-color: var(--clr-reply-quote-preview-bg);
|
|
margin: 0.35rem 0.5rem 0 0;
|
|
cursor: initial;
|
|
}
|
|
|
|
#reply-quote-preview .cancel {
|
|
min-width: 2.4rem;
|
|
text-align: center;
|
|
}
|
|
|
|
#reply-quote-preview .inline-image {
|
|
background-color: var(--clr-border-light);
|
|
}
|
|
|
|
#reply-quote-preview img.inline-image::before {
|
|
content: '';
|
|
}
|
|
|
|
#send-message-panel #reply-quote-preview {
|
|
width: 100%;
|
|
}
|
|
#send-message-panel #reply-quote-preview .reply-quote {
|
|
margin-bottom: 0.35rem;
|
|
}
|
|
|
|
.forwarding-quote {
|
|
font-size: 200%;
|
|
line-height: 200%;
|
|
}
|
|
|
|
.mention {
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Message forwarding. */
|
|
.forward-dialog {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background-color: var(--clr-bright);
|
|
box-shadow: 0.15rem 0.15rem 1.5rem var(--clr-shadow-dialog);
|
|
padding: 0.5rem;
|
|
border-radius: 0.3rem;
|
|
margin: auto 1rem auto 1rem;
|
|
width: 24rem;
|
|
height: 80%;
|
|
}
|
|
|
|
.forward-dialog .scrollable-panel {
|
|
height: 80%;
|
|
}
|
|
|
|
.audio {
|
|
display: flex;
|
|
margin-left: auto;
|
|
align-items: center;
|
|
flex: none;
|
|
background-color: var(--clr-audio-bg);
|
|
height: 3rem;
|
|
border-radius: 1.5rem;
|
|
}
|
|
|
|
.audio canvas {
|
|
width: 14rem;
|
|
height: 2.6rem;
|
|
margin-right: 2rem;
|
|
}
|
|
|
|
.audio canvas.playback {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.audio .duration {
|
|
font-size: large;
|
|
}
|
|
|
|
.audio-player {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
.audio-player .material-icons.large {
|
|
font-size: 2.4rem;
|
|
color: var(--clr-audio-icon);
|
|
}
|
|
|
|
.audio-player .material-icons.disabled {
|
|
color: var(--clr-audio-icon-disabled);
|
|
cursor: default;
|
|
}
|
|
|
|
.audio-player .playback {
|
|
width: 14rem;
|
|
height: 2.6rem;
|
|
}
|
|
|
|
.audio-player canvas.playback {
|
|
display: block;
|
|
}
|
|
|
|
.audio-player div.playback {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--clr-audio-icon);
|
|
font-size: small;
|
|
}
|
|
|
|
.audio-player .timer {
|
|
font-size: smaller;
|
|
color: var(--clr-audio-timer-text);
|
|
}
|
|
|
|
/* Pinned messages */
|
|
#pinned-wrapper {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
margin-right: 0.5rem;
|
|
}
|
|
|
|
.pinned {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 0.15rem 0.5rem 0.25rem 0.5rem;
|
|
background-color: var(--clr-background-off-white);
|
|
background-position: center;
|
|
font-weight: lighter;
|
|
border-radius: 0 0.25rem 0.25rem 0;
|
|
color: var(--clr-text-primary);
|
|
height: 100%;
|
|
width: 24rem;
|
|
min-width: 0;
|
|
cursor: pointer;
|
|
transition: background 0.4s;
|
|
}
|
|
|
|
.pinned > p {
|
|
overflow-x: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.pinned:hover {
|
|
background-color: var(--clr-bright); /* #fafdff is very close to white */
|
|
}
|
|
|
|
.pinned:active {
|
|
background-color: var(--clr-blue-wash-medium);
|
|
transition: background 0s;
|
|
}
|
|
|
|
.pinned-scroll {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
border-radius: 0.25rem 0 0 0.25rem;
|
|
background-color: var(--clr-background-extra-light-gray);
|
|
justify-content: space-evenly;
|
|
height: 100%;
|
|
padding: 0.2rem;
|
|
margin-left: 0.35rem;
|
|
user-select: none;
|
|
}
|
|
|
|
.pinned-scroll .dot {
|
|
width: 0.3rem;
|
|
height: 0.3rem;
|
|
border-radius: 50%;
|
|
background-color: var(--clr-text-tertiary);
|
|
user-select: none;
|
|
}
|
|
|
|
.pinned-scroll .adot {
|
|
width: 0.45rem;
|
|
height: 0.45rem;
|
|
border-radius: 50%;
|
|
background-color: var(--clr-light-blue-accent);
|
|
user-select: none;
|
|
}
|
|
|
|
#pinned-wrapper:hover .menuTrigger {
|
|
opacity: 0.9;
|
|
}
|
|
#pinned-wrapper:hover .menuTrigger a {
|
|
color: var(--clr-text-secondary);
|
|
}
|
|
|
|
.pinned-menu {
|
|
position: absolute;
|
|
display: flex;
|
|
flex-direction: column;
|
|
background-color: var(--clr-pinned-menu-bg);
|
|
border-radius: 0 0.25rem 0.25rem 0;
|
|
justify-content: space-evenly;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.pinned-menu .menuTrigger {
|
|
position: relative;
|
|
right: 0;
|
|
}
|
|
|
|
/*
|
|
Drag-and-drop area.
|
|
*/
|
|
.drag-n-drop {
|
|
display: flex;
|
|
border: dashed var(--clr-drag-n-drop-border) 0.15rem;
|
|
border-radius: 1rem;
|
|
background-color: var(--clr-drag-n-drop-bg);
|
|
position: absolute;
|
|
top: 1.5rem;
|
|
bottom: 1.5rem;
|
|
left: 1.5rem;
|
|
right: 1.5rem;
|
|
z-index: 3;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-size: 2rem;
|
|
color: var(--clr-drag-n-drop-text);
|
|
outline: 0.5rem solid var(--clr-drag-n-drop-outline);
|
|
}
|
|
|
|
.country-flag {
|
|
display: inline-block;
|
|
font-size: larger;
|
|
}
|
|
|
|
.dial-code {
|
|
white-space: nowrap;
|
|
display: inline-block;
|
|
cursor: pointer;
|
|
vertical-align: middle;
|
|
margin-bottom: 0.15rem;
|
|
}
|
|
|
|
ul.phone-country-selector {
|
|
list-style: none;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
ul.phone-country-selector > li {
|
|
position: relative;
|
|
font-weight: lighter;
|
|
padding: 0.25rem 0.5rem 0.15rem 0.5rem;
|
|
cursor: pointer;
|
|
width: 100%;
|
|
}
|
|
|
|
ul.phone-country-selector > li:hover {
|
|
background-color: var(--clr-background-blue-gray-50); /* blue-gray 50 highlight */
|
|
}
|
|
ul.phone-country-selector > li.selected {
|
|
background-color: var(--clr-background-blue-gray-100); /* blue-gray 100 highlight */
|
|
}
|
|
|
|
ul.phone-country-selector .dial-code {
|
|
position: absolute;
|
|
right: 0.5rem;
|
|
color: var(--clr-primary-action);
|
|
font-weight: normal;
|
|
}
|
|
|
|
ul.phone-country-selector span {
|
|
display: inline-block;
|
|
}
|
|
|
|
ul.phone-country-selector span.country {
|
|
text-overflow: ellipsis;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
div.toast {
|
|
visibility: hidden;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: absolute;
|
|
min-width: 10rem;
|
|
padding: 0.5rem 1rem;
|
|
height: 3rem;
|
|
z-index: 3;
|
|
font-weight: lighter;
|
|
color: var(--clr-toast-text);
|
|
background-color: var(--clr-toast-bg);
|
|
border-radius: 0.5rem;
|
|
box-shadow: 1px 2px 0.3rem var(--clr-shadow-gray-strong); /* gray */
|
|
bottom: 2rem;
|
|
left: 50%;
|
|
translate: -50%;
|
|
}
|
|
|
|
div.toast.show {
|
|
visibility: visible;
|
|
animation: fadein 0.5s, fadeout 0.5s 2.5s;
|
|
}
|
|
|
|
@keyframes fadein {
|
|
from {
|
|
bottom: 0;
|
|
opacity: 0;
|
|
}
|
|
to {
|
|
bottom: 2rem;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fadeout {
|
|
from {
|
|
bottom: 2rem;
|
|
opacity: 1;
|
|
}
|
|
to {
|
|
bottom: 0;
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
/*
|
|
Very wide monitor.
|
|
*/
|
|
@media (min-width: 1440px){
|
|
#app-container {
|
|
max-width: 114rem;
|
|
}
|
|
}
|
|
|
|
/*
|
|
Mobile styles.
|
|
*/
|
|
|
|
@media (max-width: 960px) {
|
|
#mountPoint {
|
|
padding: 0;
|
|
}
|
|
|
|
.pinned {
|
|
width: 16rem;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 640px) {
|
|
#app-container {
|
|
width: 100%;
|
|
border-radius: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
#sidepanel {
|
|
width: 100%;
|
|
}
|
|
|
|
#info-view {
|
|
width: 100%;
|
|
}
|
|
|
|
/* Bottom sheet rather than a dialog */
|
|
.forward-dialog {
|
|
border-radius: 0.3rem 0.3rem 0 0;
|
|
margin: auto 0 0 0;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Must make it a bit visible on mobile because there is no :hover */
|
|
.menuTrigger {
|
|
opacity: 0.3;
|
|
}
|
|
|
|
#send-message-input {
|
|
/* Just an indicator that the screen is in mobile mode */
|
|
transition-property: -tinode-mobile;
|
|
}
|
|
|
|
#pinned-wrapper {
|
|
height: 3.5rem;
|
|
margin: 0.25rem;
|
|
}
|
|
|
|
.pinned {
|
|
width: unset;
|
|
}
|
|
|
|
#video-container.minimized {
|
|
flex-direction: row;
|
|
left: 0;
|
|
top: var(--caption-panel-height);
|
|
width: 100%;
|
|
height: 11rem;
|
|
border-radius: unset;
|
|
box-shadow: 0 0 0.5rem var(--clr-shadow-gray-strong);
|
|
}
|
|
|
|
#controls.minimized {
|
|
flex-direction: column;
|
|
row-gap: 0.5rem;
|
|
bottom: auto;
|
|
column-gap: unset;
|
|
right: 1rem;
|
|
}
|
|
|
|
.minimized .call-party {
|
|
border-radius: unset;
|
|
box-shadow: unset;
|
|
}
|
|
|
|
.call-party.self {
|
|
bottom: 8.5rem;
|
|
border-radius: unset;
|
|
}
|
|
}
|