Page MenuHomePhabricator
Files F3525456

No OneTemporary
Actions

View Options

diff --git a/landing/info-block.css b/landing/info-block.css
index f3f64d3e0..520fc1e84 100644
--- a/landing/info-block.css
+++ b/landing/info-block.css
@@ -1,32 +1,32 @@
@supports ((-webkit-backdrop-filter: none) or (backdrop-filter: none)) {
.info_block {
background: rgba(235, 235, 235, 0.05);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
}
.info_block {
--border-radius: 8px;
background: rgba(235, 235, 235, 0.05);
border-radius: var(--border-radius);
/* 36 / 28 = 1.28571429 */
/* 36px is the max padding size, 28px is the max font-size */
/* Padding scales down with text */
padding: 1.28571429rem;
}
.title {
font-family: 'iA Writer Duo S', monospace;
font-style: normal;
text-align: left;
line-height: 1.35;
padding-bottom: clamp(1rem, 0.5817rem + 2.0915vw, 3rem);
font-size: clamp(1.875rem, 1.6136rem + 1.3072vw, 3.125rem);
}
.description {
line-height: 1.5;
font-weight: 400;
- font-family: 'IBM Plex Sans';
+ font-family: 'IBM Plex Sans', sans-serif;
}
diff --git a/landing/subscription-form.css b/landing/subscription-form.css
index 3722ba313..b783d5d0b 100644
--- a/landing/subscription-form.css
+++ b/landing/subscription-form.css
@@ -1,110 +1,105 @@
form {
display: flex;
}
.button {
position: relative;
width: auto;
border: 1px solid white;
- border-radius: 8px;
border-left: none;
- border-top-left-radius: 0;
- border-bottom-left-radius: 0;
-
+ border-radius: 0 8px 8px 0;
padding-left: 20px;
padding-right: 20px;
cursor: pointer;
font-family: 'IBM Plex Sans', sans-serif;
font-size: 16px;
color: white;
background: #7e57c2;
box-shadow: -12px 20px 50px rgba(126, 87, 194, 0.5);
transition: 0.2s;
margin-inline: 0;
}
.button_success {
border: 1px solid #28a747;
background: #28a747;
box-shadow: -12px 20px 50px #28a747;
}
.button_failure {
border: 1px solid #dc3545;
background: #dc3545;
box-shadow: -12px 20px 50px #dc3545;
}
.button:hover {
background: #8c69c9;
box-shadow: -12px 20px 50px rgba(139, 107, 194, 0.5);
}
.button_success:hover {
background: #34b855;
box-shadow: -12px 20px 50px #28a747;
}
.button_failure:hover {
background: #df3f4f;
box-shadow: -12px 20px 50px #dc3545;
}
input.email_input {
flex: 1;
- border-radius: 8px;
padding: 20px;
background: rgba(11, 18, 27, 0.25);
font-family: 'IBM Plex Mono', monospace;
font-size: 16px;
color: white;
border: 1px solid white;
border-right: none;
- border-top-right-radius: 0;
- border-bottom-right-radius: 0;
+ border-radius: 8px 0 0 8px;
outline: none;
margin-inline: 0;
transition: 300ms;
}
input.email_input:focus {
box-shadow: -12px 20px 50px rgba(126, 87, 194, 0.5);
transition: 300ms;
}
input.email_input_success {
border: 1px solid #28a747;
box-shadow: -12px 20px 50px #28a747;
}
input.email_input_failure {
border: 1px solid #dc3545;
box-shadow: -12px 20px 50px #dc3545;
}
@media (max-width: 1099px) {
form {
display: block;
}
.button {
width: 100%;
height: 50px;
border: none;
border-radius: 8px;
}
input.email_input {
width: 100%;
height: 50px;
border-radius: 8px;
margin-bottom: 0.5em;
box-sizing: border-box;
border: 1px solid white;
}
}
diff --git a/web/components/menu.css b/web/components/menu.css
index e07674e0e..24429c33f 100644
--- a/web/components/menu.css
+++ b/web/components/menu.css
@@ -1,80 +1,78 @@
button.menuButton {
background-color: transparent;
border: none;
cursor: pointer;
color: inherit;
}
div.menuActionList {
position: absolute;
z-index: 4;
display: flex;
flex-direction: column;
background-color: var(--menu-bg);
color: var(--menu-color);
border-radius: 4px;
padding: 4px 0;
line-height: var(--line-height-text);
min-width: max-content;
}
div.menuActionListThreadActions {
font-size: var(--m-font-16);
top: 40px;
right: -20px;
}
div.menuActionListMemberActions {
font-size: var(--xs-font-12);
background-color: var(--menu-bg-light);
color: var(--menu-color-light);
top: 0;
right: 5px;
}
button.menuAction {
color: inherit;
z-index: 1;
background-color: transparent;
padding: 12px 16px;
line-height: 1.5;
- background-color: transparent;
border: none;
cursor: pointer;
display: flex;
align-items: center;
- color: inherit;
font-size: inherit;
}
button.menuAction:hover {
color: var(--menu-color-hover);
}
div.menuActionIcon {
display: flex;
justify-content: center;
margin-right: 8px;
height: 24px;
width: 24px;
}
div.menuActionListMemberActions div.menuActionIcon {
height: 18px;
width: 18px;
}
button.menuActionDangerous {
color: var(--menu-color-dangerous);
}
button.menuActionDangerous:hover {
color: var(--menu-color-dangerous-hover);
}
hr.separator {
height: 1px;
background: var(--menu-separator-color);
margin: 10px 16px;
max-width: 130px;
border: none;
}
diff --git a/web/theme.css b/web/theme.css
index e4d984400..be41376f5 100644
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,172 +1,172 @@
:root {
/* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below
The reason we never use color values defined here directly in CSS is
1. It makes changing themes from light / dark / user generated impossible.
2. Gives the programmer context into the color being used.
3. If our color system changes it's much easier to change color values in one place.
Add a color value to the theme below, and then use it in your CSS.
naming convention:
- bg: background.
- fg: foreground.
- color: text-color
*/
--shades-white-100: #ffffff;
--shades-white-90: #f5f5f5;
--shades-white-80: #ebebeb;
--shades-white-70: #e0e0e0;
--shades-white-60: #cccccc;
--shades-black-100: #0a0a0a;
--shades-black-90: #1f1f1f;
--shades-black-80: #404040;
--shades-black-70: #666666;
--shades-black-60: #808080;
--violet-dark-100: #7e57c2;
--violet-dark-80: #6d49ab;
--violet-dark-60: #563894;
--violet-dark-40: #44297a;
--violet-dark-20: #331f5c;
--violet-light-100: #ae94db;
--violet-light-80: #b9a4df;
--violet-light-60: #d3c6ec;
--violet-light-40: #e8e0f5;
--violet-light-20: #f3f0fa;
--success-light-10: #d5f6e3;
--success-light-50: #6cdf9c;
--success-primary: #00c853;
--success-dark-50: #029841;
--success-dark-90: #034920;
--error-light-10: #feebe6;
--error-light-50: #f9947b;
--error-primary: #f53100;
--error-dark-50: #b62602;
--error-dark-90: #4f1203;
--bg: var(--shades-black-100);
--fg: var(--shades-white-100);
--color-disabled: var(--shades-black-60);
--text-input-bg: var(--shades-black-80);
--text-input-color: var(--shades-white-60);
--text-input-placeholder: var(--shades-white-60);
--border: var(--shades-black-80);
--error: var(--error-primary);
--success: var(--success-dark-50);
/* Color Theme */
--btn-bg-primary: var(--violet-dark-100);
--btn-bg-primary-hover: var(--violet-dark-80);
--btn-bg-primary-disabled: var(--shades-black-80);
--btn-bg-secondary: var(--shades-black-90);
--btn-bg-secondary-hover: var(--shades-black-80);
--btn-bg-secondary-disabled: var(--shades-black-90);
--btn-bg-danger: var(--error-primary);
--btn-bg-danger-hover: var(--error-dark-50);
--btn-bg-danger-disabled: var(--shades-black-80);
--btn-disabled-color: var(--shades-black-60);
--chat-bg: var(--violet-dark-80);
--chat-confirmation-icon: var(--violet-dark-100);
--keyserver-selection: var(--violet-dark-60);
--thread-selection: var(--violet-light-80);
--thread-hover-bg: var(--shades-black-90);
--thread-active-bg: var(--shades-black-80);
--chat-timestamp-color: var(--shades-black-60);
--tool-tip-bg: var(--shades-black-80);
--tool-tip-color: var(--shades-white-60);
--border-color: var(--shades-black-80);
--calendar-chevron: var(--shades-black-60);
--calendar-day-bg: var(--shades-black-60);
--calendar-day-selected-color: var(--violet-dark-80);
--community-bg: var(--shades-black-90);
--community-settings-selected: var(--violet-dark-60);
--unread-bg: var(--error-primary);
--settings-btn-bg: var(--violet-dark-100);
--modal-bg: var(--shades-black-90);
--modal-fg: var(--shades-white-60);
--join-bg: var(--shades-black-90);
--help-color: var(--shades-black-60);
--breadcrumb-color: var(--shades-white-60);
--breadcrumb-color-unread: var(--shades-white-60);
--btn-secondary-border: var(--shades-black-60);
--thread-color-read: var(--shades-black-60);
--thread-from-color-read: var(--shades-black-80);
--thread-last-message-color-read: var(--shades-black-60);
--relationship-button-green: var(--success-dark-50);
--relationship-button-red: var(--error-primary);
--relationship-button-text: var(--fg);
--disconnected-bar-alert-bg: var(--error-dark-50);
--disconnected-bar-alert-color: var(--shades-white-100);
--disconnected-bar-connecting-bg: var(--shades-white-70);
--disconnected-bar-connecting-color: var(--shades-black-100);
--permission-color: var(--shades-white-60);
--thread-top-bar-color: var(--shades-white-100);
--thread-top-bar-menu-color: var(--shades-white-70);
--thread-ancestor-keyserver-border: var(--shades-black-70);
--thread-ancestor-color-light: var(--shades-white-70);
--thread-ancestor-color-dark: var(--shades-black-100);
--thread-ancestor-separator-color: var(--shades-white-60);
--text-message-default-background: var(--shades-black-80);
--message-action-tooltip-bg: var(--shades-black-90);
--menu-bg: var(--shades-black-90);
--menu-bg-light: var(--shades-black-80);
--menu-separator-color: var(--shades-black-80);
--menu-color: var(--shades-black-60);
--menu-color-light: var(--shades-white-60);
--menu-color-hover: var(--shades-white-100);
--menu-color-dangerous: var(--error-primary);
--menu-color-dangerous-hover: var(--error-light-50);
--app-list-icon-read-only-color: var(--shades-black-60);
--app-list-icon-enabled-color: var(--success-primary);
--app-list-icon-disabled-color: var(--shades-white-80);
--account-settings-label: var(--shades-black-60);
--account-button-color: var(--violet-dark-100);
- --chat-thread-list-color-active: var(--shades-of-white-60);
+ --chat-thread-list-color-active: var(--shades-white-60);
--chat-thread-list-menu-color: var(--shades-white-60);
--chat-thread-list-menu-bg: var(--shades-black-80);
--chat-thread-list-menu-active-color: var(--shades-white-60);
--chat-thread-list-menu-active-bg: var(--shades-black-90);
--search-clear-color: var(--shades-white-100);
--search-clear-bg: var(--shades-black-70);
--search-input-color: var(--shades-white-100);
--search-input-placeholder: var(--shades-black-60);
--search-icon-color: var(--shades-black-60);
--tabs-header-active-color: var(--shades-white-100);
--tabs-header-active-border: var(--violet-light-100);
--tabs-header-background-color: var(--shades-black-60);
--tabs-header-background-border: var(--shades-black-80);
--tabs-header-background-color-hover: var(--shades-white-80);
--tabs-header-background-border-hover: var(--shades-black-70);
--members-modal-member-text: var(--shades-black-60);
--members-modal-member-text-hover: var(--shades-white-100);
--label-default-bg: var(--violet-dark-80);
--label-default-color: var(--shades-white-80);
--subchannels-modal-color: var(--shades-black-60);
--subchannels-modal-color-hover: var(--shades-white-100);
--color-selector-active-bg: var(--shades-black-80);
--relationship-modal-color: var(--shades-black-60);
--arrow-extension-color: var(--shades-black-60);
--modal-close-color: var(--shades-black-60);
--modal-close-color-hover: var(--shades-white-100);
--add-members-group-header-color: var(--shades-black-60);
--add-members-item-color: var(--shades-black-60);
--add-members-item-color-hover: var(--shades-white-100);
--add-members-item-disabled-color: var(--shades-black-80);
--add-members-item-disabled-color-hover: var(--shades-black-60);
--add-members-remove-pending-color: var(--error-primary);
--add-members-remove-pending-color-hover: var(--error-light-50);
--radio-border: var(--shades-black-70);
--radio-color: var(--shades-white-60);
--notification-settings-option-selected-bg: var(--shades-black-80);
--notification-settings-option-title-color: var(--shades-white-90);
--notification-settings-option-color: var(--shades-white-60);
--notification-settings-option-invalid-color: var(--shades-black-80);
--notification-settings-option-invalid-selected-color: var(--shades-black-60);
--danger-zone-subheading-color: var(--shades-white-60);
--danger-zone-explanation-color: var(--shades-black-60);
}

File Metadata

Mime Type
text/x-diff
Expires
Wed, Dec 25, 5:14 PM (5 h, 48 m)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
2700555
Default Alt Text
(12 KB)

Event Timeline