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); }