stefan.tollkuehn
da2f6b5c25
The privacy instructions no longer bloat the launcher card. A "Help" button in the navbar opens them in a native dialog (Esc, backdrop and button close it). The button only shows for Windows users, reusing the existing OS detection. Translations may contain <kbd>, <b> and <i> markup now. The renderer builds nodes from a tag whitelist instead of using innerHTML, so smuggled tags from i18n.json cannot execute. All help texts live under meetingPrivacySettings.windows; sibling keys for other operating systems can follow.
546 lines
9.0 KiB
CSS
546 lines
9.0 KiB
CSS
:root {
|
||
color-scheme: light;
|
||
}
|
||
|
||
:root.dark {
|
||
color-scheme: dark;
|
||
}
|
||
|
||
body {
|
||
margin: 0;
|
||
min-height: 100vh;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
background: #f5f5f5;
|
||
color: #222;
|
||
}
|
||
|
||
/*
|
||
* The fixed navbar overlaps the top of the card – keep
|
||
* 80px of clearance (all modes, including portrait).
|
||
*/
|
||
.container {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
width: min(700px, calc(100% - 32px));
|
||
padding-top: 80px;
|
||
}
|
||
|
||
.navbar {
|
||
position: fixed;
|
||
top: 16px;
|
||
left: 2%;
|
||
width: 96%;
|
||
box-sizing: border-box;
|
||
z-index: 100;
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
padding: 15px;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
-webkit-backdrop-filter: blur(7px);
|
||
backdrop-filter: blur(7px);
|
||
border-radius: 14px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30), 0 12px 40px rgba(0, 0, 0, 0.45);
|
||
}
|
||
|
||
.logo-bar {
|
||
display: flex;
|
||
align-items: center;
|
||
flex: 0 1 auto;
|
||
min-width: 0;
|
||
}
|
||
|
||
.logo-bar img {
|
||
display: block;
|
||
height: 60px;
|
||
max-width: 100%;
|
||
width: auto;
|
||
}
|
||
|
||
.nav-actions {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-end;
|
||
gap: 8px;
|
||
margin-left: auto;
|
||
}
|
||
|
||
/* Hamburger: only visible on phone portrait.
|
||
* "button.nav-toggle" is more specific than ".button",
|
||
* otherwise display: inline-block overrides this rule. */
|
||
button.nav-toggle {
|
||
display: none;
|
||
}
|
||
|
||
/* Tighter than the global 6px button margin */
|
||
.navbar .button {
|
||
margin: 0;
|
||
}
|
||
|
||
.lang-menu {
|
||
position: relative;
|
||
}
|
||
|
||
.lang-dropdown {
|
||
display: none;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 100%;
|
||
min-width: 150px;
|
||
margin-top: 6px;
|
||
padding: 6px;
|
||
background: white;
|
||
border-radius: 10px;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.lang-dropdown.open {
|
||
display: block;
|
||
}
|
||
|
||
.lang-dropdown button {
|
||
display: block;
|
||
width: 100%;
|
||
margin: 0;
|
||
padding: 10px 14px;
|
||
border: 0;
|
||
border-radius: 6px;
|
||
background: none;
|
||
text-align: left;
|
||
font-size: 14px;
|
||
font-family: inherit;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.lang-dropdown button:hover {
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
.lang-dropdown button.active {
|
||
font-weight: 600;
|
||
background: #f0f8ff;
|
||
}
|
||
|
||
.lang-flag {
|
||
width: 20px;
|
||
height: 13px;
|
||
margin-right: 6px;
|
||
border-radius: 2px;
|
||
vertical-align: -2px;
|
||
}
|
||
|
||
.card {
|
||
box-sizing: border-box;
|
||
width: min(600px, 100%);
|
||
padding: 32px;
|
||
background: rgba(255, 255, 255, 0.2);
|
||
-webkit-backdrop-filter: blur(7px);
|
||
backdrop-filter: blur(7px);
|
||
border-radius: 14px;
|
||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.30), 0 12px 40px rgba(0, 0, 0, 0.45);
|
||
text-align: center;
|
||
}
|
||
|
||
h1 {
|
||
margin-top: 0;
|
||
}
|
||
|
||
p {
|
||
color: #555;
|
||
}
|
||
|
||
button, .button {
|
||
display: inline-block;
|
||
border: 0;
|
||
border-radius: 8px;
|
||
padding: 12px 20px;
|
||
margin: 6px;
|
||
font-size: 16px;
|
||
font-family: inherit;
|
||
cursor: pointer;
|
||
text-decoration: none;
|
||
}
|
||
|
||
.primary {
|
||
background: #1f73e8;
|
||
color: white;
|
||
}
|
||
|
||
.secondary {
|
||
background: #e9e9e9;
|
||
color: #222;
|
||
}
|
||
|
||
.hidden {
|
||
display: none !important;
|
||
}
|
||
|
||
.status {
|
||
margin-top: 24px;
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
background: #f0f0f0;
|
||
}
|
||
|
||
.spinner {
|
||
display: inline-block;
|
||
width: 16px;
|
||
height: 16px;
|
||
margin-right: 8px;
|
||
border: 2px solid #ccc;
|
||
border-top-color: #333;
|
||
border-radius: 50%;
|
||
animation: spin 0.7s linear infinite;
|
||
vertical-align: -3px;
|
||
}
|
||
|
||
.download {
|
||
margin-top: 24px;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
background: #f5f5f5;
|
||
}
|
||
|
||
/* Windows help overlay – long text needs left
|
||
* alignment, the page is centered */
|
||
dialog.privacy {
|
||
width: min(1000px, calc(100% - 32px));
|
||
max-height: calc(100vh - 48px);
|
||
border: 0;
|
||
border-radius: 14px;
|
||
background: #f5f5f5;
|
||
padding: 20px;
|
||
text-align: left;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
dialog.privacy::backdrop {
|
||
background: rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.help-actions {
|
||
margin-top: 24px;
|
||
text-align: center;
|
||
}
|
||
|
||
.room {
|
||
display: block;
|
||
margin-top: 20px;
|
||
font-family: monospace;
|
||
word-break: break-all;
|
||
}
|
||
|
||
/* Keyboard keys, marked with <kbd> in i18n.json */
|
||
kbd {
|
||
padding: 1px 6px;
|
||
border: 1px solid #ccc;
|
||
border-bottom-width: 3px;
|
||
border-radius: 4px;
|
||
background: #f0f0f0;
|
||
font-family: monospace;
|
||
font-size: 0.9em;
|
||
}
|
||
|
||
.error {
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
background: #fff0f0;
|
||
color: #900;
|
||
}
|
||
|
||
.form-group {
|
||
margin-bottom: 16px;
|
||
text-align: left;
|
||
}
|
||
|
||
.form-group label {
|
||
display: block;
|
||
margin-bottom: 4px;
|
||
font-weight: 500;
|
||
color: #333;
|
||
}
|
||
|
||
.form-group input,
|
||
.form-group textarea {
|
||
width: 100%;
|
||
padding: 8px 12px;
|
||
border: 1px solid #ddd;
|
||
border-radius: 6px;
|
||
font-size: 14px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.form-group textarea {
|
||
min-height: 80px;
|
||
resize: vertical;
|
||
}
|
||
|
||
.form-actions {
|
||
margin-top: 24px;
|
||
display: flex;
|
||
gap: 12px;
|
||
justify-content: center;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.success-message {
|
||
margin-top: 24px;
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
background: #f0f8ff;
|
||
color: #0066cc;
|
||
}
|
||
|
||
.adhoc-result {
|
||
margin-top: 24px;
|
||
padding: 16px;
|
||
border-radius: 8px;
|
||
background: #f0fff4;
|
||
color: #1a7f37;
|
||
}
|
||
|
||
/*
|
||
* scrollIntoView() aligns the target with the viewport
|
||
* edge, where the fixed navbar sits. scroll-margin-top
|
||
* keeps the target clear below the navbar.
|
||
*/
|
||
.adhoc-result,
|
||
.success-message {
|
||
scroll-margin-top: 110px;
|
||
}
|
||
|
||
.adhoc-link {
|
||
margin-top: 12px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.adhoc-link a {
|
||
font-family: monospace;
|
||
word-break: break-all;
|
||
color: #0066cc;
|
||
}
|
||
|
||
/*
|
||
* Prevents clipped content when the card is taller
|
||
* than the viewport ("center" clips at the top).
|
||
*/
|
||
@supports (align-items: safe center) {
|
||
body {
|
||
align-items: safe center;
|
||
}
|
||
}
|
||
|
||
/* Very narrow phones: even more compact */
|
||
@media (max-width: 400px) {
|
||
.navbar {
|
||
left: 2%;
|
||
width: 96%;
|
||
padding: 8px;
|
||
gap: 6px;
|
||
}
|
||
|
||
.logo-bar img {
|
||
height: 32px;
|
||
}
|
||
|
||
.nav-actions {
|
||
gap: 6px;
|
||
}
|
||
|
||
.nav-actions .button {
|
||
padding: 8px 12px;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
|
||
/*
|
||
* Phone: show the navbar actions in both orientations
|
||
* as a dropdown behind the hamburger button.
|
||
*
|
||
* Landscape phone: viewport wider than 600px – short
|
||
* side (height) and touch input decide.
|
||
*/
|
||
@media (max-width: 600px),
|
||
(orientation: landscape) and (max-height: 500px) and (pointer: coarse) {
|
||
body {
|
||
/*
|
||
* Padding instead of margin-bottom on the card:
|
||
* margins at the scroll end are not covered by the
|
||
* scroll area, padding is.
|
||
*/
|
||
padding-bottom: 10px;
|
||
/* Subtract the 10px bottom padding */
|
||
min-height: calc(100vh - 10px);
|
||
}
|
||
|
||
.navbar {
|
||
top: 8px;
|
||
left: 4%;
|
||
width: 92%;
|
||
padding: 10px;
|
||
}
|
||
|
||
.logo-bar img {
|
||
height: 40px;
|
||
}
|
||
|
||
button, .button {
|
||
padding: 10px 14px;
|
||
font-size: 15px;
|
||
}
|
||
|
||
.card {
|
||
padding: 20px;
|
||
}
|
||
|
||
/* Navbar is flatter here than on the desktop */
|
||
.adhoc-result,
|
||
.success-message {
|
||
scroll-margin-top: 80px;
|
||
}
|
||
|
||
button.nav-toggle {
|
||
display: inline-flex;
|
||
}
|
||
|
||
/* ".navbar .button" sets margin: 0 – hence target
|
||
* more specifically: push the button to the right */
|
||
.navbar .nav-toggle {
|
||
margin-left: auto;
|
||
}
|
||
|
||
.nav-actions {
|
||
display: none;
|
||
position: absolute;
|
||
top: 100%;
|
||
right: 0;
|
||
margin: 8px 0 0;
|
||
padding: 8px;
|
||
min-width: 200px;
|
||
background: white;
|
||
border-radius: 10px;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||
flex-direction: column;
|
||
align-items: stretch;
|
||
}
|
||
|
||
.nav-actions.open {
|
||
display: flex;
|
||
}
|
||
|
||
/* All panel buttons equally wide, text centered */
|
||
.nav-actions .button {
|
||
text-align: center;
|
||
}
|
||
|
||
/* Language button sits inside the .lang-menu wrapper */
|
||
.nav-actions .lang-menu .button {
|
||
display: block;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
:root.dark .nav-actions {
|
||
background: #242424;
|
||
}
|
||
}
|
||
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
/*
|
||
* Dark theme via the "dark" class on the html element.
|
||
* JS sets it based on the saved choice or the system
|
||
* setting (see detectTheme).
|
||
*/
|
||
:root.dark body {
|
||
background: #181818;
|
||
color: #eee;
|
||
}
|
||
|
||
:root.dark .navbar {
|
||
background: rgba(36, 36, 36, 0.72);
|
||
}
|
||
|
||
:root.dark .card {
|
||
background: rgba(36, 36, 36, 0.72);
|
||
}
|
||
|
||
:root.dark .lang-dropdown {
|
||
background: #242424;
|
||
}
|
||
|
||
:root.dark .lang-dropdown button:hover {
|
||
background: #303030;
|
||
}
|
||
|
||
:root.dark .lang-dropdown button.active {
|
||
background: #1a3a5a;
|
||
}
|
||
|
||
:root.dark p {
|
||
color: #bbb;
|
||
}
|
||
|
||
:root.dark kbd {
|
||
border-color: #555;
|
||
background: #404040;
|
||
}
|
||
|
||
:root.dark .secondary {
|
||
background: #444;
|
||
color: #eee;
|
||
}
|
||
|
||
:root.dark .status,
|
||
:root.dark .download,
|
||
:root.dark .privacy {
|
||
background: #303030;
|
||
}
|
||
|
||
:root.dark .spinner {
|
||
border-color: #555;
|
||
border-top-color: #ddd;
|
||
}
|
||
|
||
:root.dark .form-group label {
|
||
color: #ddd;
|
||
}
|
||
|
||
:root.dark .form-group input,
|
||
:root.dark .form-group textarea {
|
||
background: #303030;
|
||
border-color: #555;
|
||
color: #eee;
|
||
}
|
||
|
||
:root.dark .success-message {
|
||
background: #1a3a5a;
|
||
color: #99ccff;
|
||
}
|
||
|
||
:root.dark .adhoc-result {
|
||
background: #1c3527;
|
||
color: #7ee2a8;
|
||
}
|
||
|
||
:root.dark .logo-bar img {
|
||
filter: url(#logo-dark-tint);
|
||
}
|
||
|
||
:root.dark .adhoc-link a {
|
||
color: #99ccff;
|
||
}
|