mirror of
https://github.com/Foundry376/Mailspring.git
synced 2026-10-26 10:15:18 +01:00
Ben GotowandClaude
24f8d55620
* Fix semi-bold text not rendering distinctly on Windows Segoe UI (system-ui on Windows) doesn't render font-weight: 600 with enough visual distinction from 400, causing unread thread subjects, participants, and other semi-bold UI text to appear the same weight as normal text. Introduce a --font-weight-semi-bold CSS custom property (default: 600) overridden to 700 on Windows via body.platform-win32. Migrate all semi-bold usages from the LESS variable @font-weight-semi-bold and hardcoded font-weight: 600 to var(--font-weight-semi-bold). Font-face declarations are left unchanged as they define font file weight mappings. https://claude.ai/code/session_01VXnNynHYVUuJ1YWe8dNNfA * Remove unused @font-weight-semi-bold and @headings-font-weight LESS vars All usages were migrated to the CSS custom property --font-weight-semi-bold in the previous commit. The LESS variables are now dead code. Added a comment explaining why the CSS custom property exists (platform-specific font weight: 600 for Nylas-Pro on macOS, 700 for Segoe UI on Windows). https://claude.ai/code/session_01VXnNynHYVUuJ1YWe8dNNfA * Update ui-variables.less * Restore @font-weight-semi-bold LESS var, backed by CSS custom property Instead of using var(--font-weight-semi-bold) directly in every file, define @font-weight-semi-bold: var(--font-weight-semi-bold) so LESS code can keep using the familiar @variable syntax. LESS compiles it to the CSS var() call, which resolves at runtime per platform. https://claude.ai/code/session_01VXnNynHYVUuJ1YWe8dNNfA --------- Co-authored-by: Claude <noreply@anthropic.com>
106 lines
2.1 KiB
Plaintext
106 lines
2.1 KiB
Plaintext
@import 'ui-variables';
|
|
@import 'ui-mixins';
|
|
|
|
.quoted-text-control {
|
|
color: @text-color-very-subtle;
|
|
display: inline-block;
|
|
border: 1px solid fade(@text-color-very-subtle, 15%);
|
|
border-radius: 3px;
|
|
line-height: 11px;
|
|
padding: 1px 5px;
|
|
font-weight: @font-weight-semi-bold;
|
|
font-size: 10.5px;
|
|
margin: 5px 0 3px 0;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
color: @text-color-subtle;
|
|
border: 1px solid fade(@text-color-subtle, 35%);
|
|
}
|
|
|
|
.dots {
|
|
display: inline-block;
|
|
font-size: @font-size-smaller * 0.8;
|
|
top: -1px;
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
body.platform-win32 {
|
|
.quoted-text-control {
|
|
.windows-btn-bg;
|
|
.windows-btn-border;
|
|
&:hover {
|
|
color: @text-color-very-subtle;
|
|
.windows-btn-border;
|
|
}
|
|
}
|
|
.mail-label {
|
|
border-radius: 0;
|
|
}
|
|
}
|
|
|
|
.mail-label {
|
|
font-size: 0.9em;
|
|
padding: 1px 8px;
|
|
margin-right: 6px;
|
|
flex-shrink: 0;
|
|
border-radius: 3px;
|
|
display: inline-block;
|
|
cursor: default;
|
|
line-height: 22px;
|
|
user-select: none;
|
|
|
|
&:last-child {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
.mail-label.removable {
|
|
padding-left: 12px;
|
|
padding-right: 4px;
|
|
.inner {
|
|
position: relative;
|
|
left: 0;
|
|
transition: left 0.05s linear;
|
|
}
|
|
.x {
|
|
opacity: 0;
|
|
left: -4px;
|
|
top: -3px;
|
|
position: relative;
|
|
display: inline-block;
|
|
transition: opacity 0.05s ease-in;
|
|
}
|
|
}
|
|
.mail-label.removable:hover {
|
|
.inner {
|
|
left: -6px;
|
|
}
|
|
.x {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.mail-important-icon {
|
|
width: 25px;
|
|
height: 25px;
|
|
display: inline-block;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-image: url(../static/images/important/Icon-Important-Hover@2x.png);
|
|
background-size: 16px;
|
|
}
|
|
.mail-important-icon.enabled.active {
|
|
background-image: url(../static/images/important/Icon-Important-Active@2x.png);
|
|
background-size: 16px;
|
|
}
|
|
.mail-important-icon.enabled:hover {
|
|
background-image: url(../static/images/important/Icon-Important-HoverActive@2x.png);
|
|
background-size: 16px;
|
|
}
|
|
.mail-important-icon.enabled.active:hover {
|
|
background-image: url(../static/images/important/Icon-Important-Active@2x.png);
|
|
background-size: 16px;
|
|
filter: brightness(90%);
|
|
}
|