diff --git a/internal_packages/account-sidebar/stylesheets/account-sidebar.less b/internal_packages/account-sidebar/stylesheets/account-sidebar.less index ce8ffc2e8..5f558d997 100644 --- a/internal_packages/account-sidebar/stylesheets/account-sidebar.less +++ b/internal_packages/account-sidebar/stylesheets/account-sidebar.less @@ -166,6 +166,21 @@ } } } +body.platform-win32 { + #account-switcher { + .dropdown { + border-radius: 0; + } + .item { + border-radius: 0; + } + .secondary-item { + &:first-child, &:last-child { + border-radius: 0; + } + } + } +} #account-switcher.open { diff --git a/internal_packages/attachments/stylesheets/attachments.less b/internal_packages/attachments/stylesheets/attachments.less index 74d4ce394..9bd7f9725 100644 --- a/internal_packages/attachments/stylesheets/attachments.less +++ b/internal_packages/attachments/stylesheets/attachments.less @@ -174,3 +174,11 @@ } } + +body.platform-win32 { + .file-wrap { + .inner { + border-radius: 0; + } + } +} diff --git a/internal_packages/composer/stylesheets/composer.less b/internal_packages/composer/stylesheets/composer.less index f14265aa3..1304ada02 100644 --- a/internal_packages/composer/stylesheets/composer.less +++ b/internal_packages/composer/stylesheets/composer.less @@ -9,6 +9,17 @@ @compose-width: 800px; @compose-min-height: 150px; +body.platform-win32 { + .composer-inner-wrap { + .composer-action-bar-wrap { + .btn { + height: 30px; + padding-top: 1px; + } + } + } +} + .composer-inner-wrap { position: relative; height: 100%; @@ -431,7 +442,7 @@ padding: 0 @padding; } - .toolbar-btn { + button.btn.toolbar-btn { @padding-top: 4px; @padding-left: 8px; @@ -462,3 +473,13 @@ } } } +body.platform-win32 { + .composer-inner-wrap { + .composer-drop-cover { + border-radius: 0; + } + } + .floating-toolbar { + border-radius: 0; + } +} diff --git a/internal_packages/events/stylesheets/events.less b/internal_packages/events/stylesheets/events.less index aadbe5e3c..4f898b8a4 100644 --- a/internal_packages/events/stylesheets/events.less +++ b/internal_packages/events/stylesheets/events.less @@ -86,4 +86,16 @@ } } } -} \ No newline at end of file +} +body.platform-win32 { + .event-wrapper { + border-radius: 0; + .event-body { + .event-actions { + .btn-rsvp { + border-radius: 0; + } + } + } + } +} diff --git a/internal_packages/message-list/stylesheets/message-list.less b/internal_packages/message-list/stylesheets/message-list.less index 7a6200ac9..03c08cc7a 100644 --- a/internal_packages/message-list/stylesheets/message-list.less +++ b/internal_packages/message-list/stylesheets/message-list.less @@ -18,7 +18,7 @@ body.platform-win32 { .message-toolbar-arrow.down { margin: 0 0 0 1px; padding: 6px 5px 0 5px; - .windows-btn-hover; + .windows-btn-bg; &:hover { background: #e5e5e5; } @@ -30,7 +30,7 @@ body.platform-win32 { .message-toolbar-arrow.up { margin: 0 0 0 1px; padding: 6px 5px 0 5px; - .windows-btn-hover; + .windows-btn-bg; &.btn-icon:hover { color: @text-color; img.content-mask { background: rgba(35, 31, 32, 0.8); } @@ -42,6 +42,25 @@ body.platform-win32 { } } } + + #message-list { + .message-item-wrap { + .message-item-white-wrap { + border-radius: 0; + } + } + .minified-bundle { + .num-messages { + border-radius: 0; + } + .msg-line { + border-radius: 0; + } + } + .footer-reply-area-wrap { + border-radius: 0; + } + } } .sheet-toolbar { @@ -148,7 +167,7 @@ body.platform-win32 { } .minified-bundle + .message-item-wrap { - margin-top: 0; + margin-top: -5px; } .message-item-wrap { @@ -255,7 +274,7 @@ body.platform-win32 { top: 50%; left: 50%; margin-left: -80px; - margin-top: -12px; + margin-top: -14px; border-radius: 15px; border: 1px solid @border-color-divider; width: 160px; @@ -272,15 +291,14 @@ body.platform-win32 { max-width: @message-max-width; margin: 0 auto; width: 100%; + margin-top: -13px; } .msg-line { border-radius: 4px 4px 0 0; position: relative; border-top: 1px solid @border-color-divider; - border-right: 1px solid @border-color-divider; - border-left: 1px solid @border-color-divider; background-color: darken(@background-primary, 2%); - box-shadow: 0 1px 1px rgba(0,0,0,0.1); + box-shadow: 0 0.5px 0 rgba(0,0,0,0.1), 0 -0.5px 0 rgba(0,0,0,0.1), 0.5px 0 0 rgba(0,0,0,0.1), -0.5px 0 0 rgba(0,0,0,0.1); } } @@ -326,14 +344,14 @@ body.platform-win32 { transition: opacity 100ms, width 150ms; transition-delay: 50ms, 0ms; transition-timing-function: ease-in-out; - width: 98px; + width: 99px; height: 32px; opacity: 1; text-align: right; + } - .button-dropdown { - width: 76px; - } + .button-dropdown { + width: 77px; } .message-actions-ellipsis { diff --git a/internal_packages/notifications/stylesheets/notifications.less b/internal_packages/notifications/stylesheets/notifications.less index 1f2a13258..74cc1a8d9 100644 --- a/internal_packages/notifications/stylesheets/notifications.less +++ b/internal_packages/notifications/stylesheets/notifications.less @@ -178,3 +178,12 @@ } } } +body.platform-win32 { + .notifications-sticky { + .notifications-sticky-item { + a { + border-radius: 0; + } + } + } +} diff --git a/internal_packages/preferences/stylesheets/preferences.less b/internal_packages/preferences/stylesheets/preferences.less index d938ad668..cda50186c 100644 --- a/internal_packages/preferences/stylesheets/preferences.less +++ b/internal_packages/preferences/stylesheets/preferences.less @@ -161,6 +161,10 @@ body.platform-darwin { width:70%; margin: auto; + .section-appearance { + padding-left: 0; + } + .appearance-mode { background-color: @background-off-primary;; border-radius: 10px; @@ -169,7 +173,7 @@ body.platform-darwin { flex: 1; padding:25px; padding-bottom:9px; - margin:10px; + margin-right:10px; margin-top:0; img { background-color: @background-tertiary; @@ -275,6 +279,12 @@ body.platform-darwin { } } +body.platform-win32.is-blurred { + .preference-header { + background: lighten(@toolbar-background-color, 14%); + } +} + body.platform-win32 { .preference-header { background: #f2f2f2; @@ -284,7 +294,7 @@ body.platform-win32 { margin-right: 1px; width: 80px; padding-top: 3px; - .windows-btn-hover; + .windows-btn-bg; height: 63px; color: @text-color; @@ -302,4 +312,15 @@ body.platform-win32 { } } } + + .preferences-wrap { + .well { + border-radius: 0; + } + .container-appearance { + .appearance-mode { + border-radius: 0; + } + } + } } diff --git a/internal_packages/thread-list/stylesheets/thread-list.less b/internal_packages/thread-list/stylesheets/thread-list.less index 6d9f12a83..2e07c5e00 100644 --- a/internal_packages/thread-list/stylesheets/thread-list.less +++ b/internal_packages/thread-list/stylesheets/thread-list.less @@ -216,6 +216,10 @@ // quick actions +@reply-img: "../static/images/thread-list-quick-actions/ic-quick-button-reply@2x.png"; +@archive-img: "../static/images/thread-list-quick-actions/ic-quick-button-archive@2x.png"; +@forward-img: "../static/images/thread-list-quick-actions/ic-quick-button-forward@2x.png"; +@trash-img: "../static/images/thread-list-quick-actions/ic-quick-button-trash@2x.png"; .thread-list .list-item .list-column-HoverActions { display:none; @@ -231,16 +235,39 @@ margin-right:40px; } .action.action-reply { - background: url(../static/images/thread-list-quick-actions/ic-quick-button-reply@2x.png) top left no-repeat, @background-gradient; + background: url(@reply-img) top left no-repeat, @background-gradient; } .action.action-forward { - background: url(../static/images/thread-list-quick-actions/ic-quick-button-forward@2x.png) top left no-repeat, @background-gradient; + background: url(@forward-img) top left no-repeat, @background-gradient; } .action.action-archive { - background: url(../static/images/thread-list-quick-actions/ic-quick-button-archive@2x.png) center no-repeat, @background-gradient; + background: url(@archive-img) center no-repeat, @background-gradient; } .action.action-trash { - background: url(../static/images/thread-list-quick-actions/ic-quick-button-trash@2x.png) center no-repeat, @background-gradient; + background: url(@trash-img) center no-repeat, @background-gradient; + } +} +body.platform-win32 { + .thread-list .list-item .list-column-HoverActions { + .action { + border: 0; + margin: 9px 0 0 0; + &:last-child { + margin-right: 30px; + } + } + .action.action-reply { + background: url(@reply-img) top left no-repeat; + } + .action.action-forward { + background: url(@forward-img) top left no-repeat; + } + .action.action-archive { + background: url(@archive-img) center no-repeat; + } + .action.action-trash { + background: url(@trash-img) center no-repeat; + } } } .thread-list .list-item:hover .list-column-HoverActions { diff --git a/internal_packages/undo-redo/stylesheets/undo-redo.less b/internal_packages/undo-redo/stylesheets/undo-redo.less index 4149ec6cf..c4b90c795 100644 --- a/internal_packages/undo-redo/stylesheets/undo-redo.less +++ b/internal_packages/undo-redo/stylesheets/undo-redo.less @@ -44,6 +44,11 @@ } } } +body.platform-win32 { + .undo-redo { + border-radius: 0; + } +} .undo-redo-item-enter { opacity: 0.01; diff --git a/src/components/mail-label.cjsx b/src/components/mail-label.cjsx index b570e9c4c..d58a3fe08 100644 --- a/src/components/mail-label.cjsx +++ b/src/components/mail-label.cjsx @@ -10,10 +10,13 @@ LabelColorizer = backgroundColorDark: (label) -> "hsl(#{label.hue()}, 62%, 57%)" styles: (label) -> - color: LabelColorizer.color(label) - backgroundColor: LabelColorizer.backgroundColor(label) - boxShadow: "inset 0 0 1px hsl(#{label.hue()}, 62%, 47%), inset 0 1px 1px rgba(255,255,255,0.5), 0 0.5px 0 rgba(255,255,255,0.5)" - backgroundImage: 'linear-gradient(rgba(255,255,255, 0.4), rgba(255,255,255,0))' + styles = + color: LabelColorizer.color(label) + backgroundColor: LabelColorizer.backgroundColor(label) + boxShadow: "inset 0 0 1px hsl(#{label.hue()}, 62%, 47%), inset 0 1px 1px rgba(255,255,255,0.5), 0 0.5px 0 rgba(255,255,255,0.5)" + if process.platform isnt "win32" + styles["backgroundImage"] = 'linear-gradient(rgba(255,255,255, 0.4), rgba(255,255,255,0))' + return styles class MailLabel extends React.Component @propTypes: diff --git a/static/buttons.less b/static/buttons.less index 9b2a3431c..dab9f23c3 100644 --- a/static/buttons.less +++ b/static/buttons.less @@ -8,6 +8,44 @@ button, html input[type="button"] { } } +body.platform-win32 { + .btn { + .windows-btn-bg; + .windows-btn-border; + + &.btn-action { + border: 2px solid darken(@btn-action-bg-color, 10%); + &:hover { + background: @btn-action-bg-color; + } + } + + &.btn-emphasis { + background: @btn-emphasis-bg-color; + border: 0; + + &:hover { + border-radius: 0; + background: darken(@btn-emphasis-bg-color, 10%); + } + } + + &.btn-emphasis:active { + background: @btn-emphasis-bg-color; + box-shadow: 0 0 0; + } + + &.btn-danger, .btn-destructive { + background: @btn-danger-bg-color; + border: 0; + &:hover { + border-radius: 0; + background: darken(@btn-danger-bg-color, 10%); + } + } + } +} + .btn { padding: 0.33em 1em; border-radius: @border-radius-base; diff --git a/static/components/button-dropdown.less b/static/components/button-dropdown.less index 26e2e8aad..0815dff1a 100644 --- a/static/components/button-dropdown.less +++ b/static/components/button-dropdown.less @@ -112,7 +112,19 @@ body.platform-win32 { .button-dropdown { .primary-item { + .windows-btn-bg; + .windows-btn-border; border-radius: 0; + height: 34px; + padding-top: 5px; + } + .secondary-picker { + .windows-btn-bg; + .windows-btn-border; + border-left: 0; + height: 34px; + padding-top: 5px; + box-shadow: 0 0 0; } .secondary-picker, .secondary-items { diff --git a/static/components/extra.less b/static/components/extra.less index 38c2c131f..b30f542c3 100644 --- a/static/components/extra.less +++ b/static/components/extra.less @@ -1,4 +1,5 @@ @import "ui-variables"; +@import "ui-mixins"; .quoted-text-control { color: @text-color-very-subtle; @@ -26,6 +27,20 @@ } } +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: 2px 8px; diff --git a/static/components/menu.less b/static/components/menu.less index ceff4a59a..8a6b12f5e 100644 --- a/static/components/menu.less +++ b/static/components/menu.less @@ -97,3 +97,12 @@ } } } +body.platform-win32 { + .menu { + .header-container { + input.search { + border-radius: 0; + } + } + } +} diff --git a/static/components/scroll-region.less b/static/components/scroll-region.less index abb05cc9a..75ef4e55d 100644 --- a/static/components/scroll-region.less +++ b/static/components/scroll-region.less @@ -115,3 +115,13 @@ } } } +body.platform-win32 { + .scroll-tooltip { + border-radius: 0; + } + .scrollbar-track { + .scrollbar-handle { + border-radius: 0; + } + } +} diff --git a/static/components/tokenizing-text-field.less b/static/components/tokenizing-text-field.less index 08831eac1..3ddcb27db 100644 --- a/static/components/tokenizing-text-field.less +++ b/static/components/tokenizing-text-field.less @@ -181,3 +181,26 @@ body.is-blurred .tokenizing-field .token:not(.invalid) { background: @background-secondary; } + +body.platform-win32 { + .tokenizing-field { + .content-container { + border-radius: 0; + } + } + .token { + border-radius: 0; + background: @token-bottom; + &.selected, + &.dragging { + border-radius: 0; + background: @token-selected-top; + } + &:hover { + background: @token-hover-bottom; + } + &.invalid.selected, &.invalid.dragging { + background: @token-invalid-selected-top; + } + } +} diff --git a/static/inputs.less b/static/inputs.less index faa4916f6..e3953c2ef 100644 --- a/static/inputs.less +++ b/static/inputs.less @@ -37,3 +37,22 @@ input[type="email"]:focus, { box-shadow: 0 0 3px @accent-primary; } } +body.platform-win32 { + input[type="text"], + input[type="email"], + input[type="date"], + input[type="datetime"], + input[type="datetime-local"], + input[type="month"], + input[type="number"], + input[type="password"], + input[type="range"], + input[type="search"], + input[type="tel"], + input[type="time"], + input[type="url"] { + &.input-bordered { + border-radius: 0; + } + } +} diff --git a/static/mixins/common-ui-elements.less b/static/mixins/common-ui-elements.less index 5c89ecd45..9dd151c08 100644 --- a/static/mixins/common-ui-elements.less +++ b/static/mixins/common-ui-elements.less @@ -15,3 +15,8 @@ line-height: @line-height-small; border-radius: @border-radius-small; } +body.platform-win32 { + .item-count-box { + border-radius: 0; + } +} diff --git a/static/mixins/windows.less b/static/mixins/windows.less index 4b35246ed..fa7a06a95 100644 --- a/static/mixins/windows.less +++ b/static/mixins/windows.less @@ -1,6 +1,12 @@ -.windows-btn-hover { +.windows-btn-bg { transition: background 300ms; + background: transparent; + border-radius: 0; &:hover { background: #e5e5e5; } } +.windows-btn-border { + border: 2px solid #e5e5e5; + box-shadow: 0 0 0; +} diff --git a/static/workspace.less b/static/workspace.less index c2ddeb538..619a1361e 100644 --- a/static/workspace.less +++ b/static/workspace.less @@ -400,6 +400,11 @@ body.platform-win32 { } } } + .btn-feedback { + background: @blue; + &:hover { background: lighten(@blue, 5%); } + &:active { background: lighten(@blue, 20%); } + } } body.platform-win32.is-blurred {