├── LICENSE.md ├── README.md ├── index.less ├── package.json ├── preview.png └── styles ├── accounts.less ├── buttons.less ├── message.less ├── threads.less ├── toolbar.less └── ui-variables.less /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 GitHub Inc. 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining 4 | a copy of this software and associated documentation files (the 5 | "Software"), to deal in the Software without restriction, including 6 | without limitation the rights to use, copy, modify, merge, publish, 7 | distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to 9 | the following conditions: 10 | 11 | The above copyright notice and this permission notice shall be 12 | included in all copies or substantial portions of the Software. 13 | 14 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, 15 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 16 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND 17 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE 18 | LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION 19 | OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION 20 | WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. 21 | 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # N1 Stripe 2 | 3 | Stripe modifies the layout of the Nylas N1 email client by moving the account sidebar to the bottom of the interface. 4 | 5 | ![](preview.png) 6 | 7 | By moving folders to the bottom, the interface reserves the primary canvas space for messages themselves. That's the idea, anyway. This might not be for you if you regularly use many folders or if you need to toggle between separate accounts a lot. Still, try it out and let me know what you think. 8 | 9 | 10 | ## Prototype 11 | 12 | N1 is designed with an account sidebar in mind. Moving it to the bottom is a CSS hack, which works for the most part, but is nonetheless forcing a square peg into a round hole. Also, there are a lot of nuanced layout use cases. I addressed a bunch of them, but there were far more than I (naively) expected, so beware the thing is a "work-in-progress." 13 | 14 | 15 | ## Installation 16 | 1. Download [Nylas N1](https://nylas.com/n1). 17 | 2. Download the Stripe theme. 18 | 3. From N1, select `Nylas N1 > Install Theme...`. 19 | 4. Find the directory for this plugin to install it. 20 | -------------------------------------------------------------------------------- /index.less: -------------------------------------------------------------------------------- 1 | @import "styles/ui-variables"; 2 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "n1-stripe", 3 | "displayName": "Stripe", 4 | "theme": "ui", 5 | "version": "0.1.0", 6 | "description": "A Nylas N1 theme that displays accounts below your messages.", 7 | "license": "GPL-3.0", 8 | "engines": { 9 | "nylas": "*" 10 | }, 11 | "private": true 12 | } 13 | -------------------------------------------------------------------------------- /preview.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/oeaeee/n1-stripe/7182934d8759ed2a769bdf251b3d7807561dc2a4/preview.png -------------------------------------------------------------------------------- /styles/accounts.less: -------------------------------------------------------------------------------- 1 | // Account Tab Bar (formerly Sidebar) 2 | 3 | .account-sidebar { 4 | width:100%; 5 | &:before { 6 | content: ""; 7 | width:200%; 8 | height:200%; 9 | position: absolute; 10 | box-shadow: inset 0 0px 6px @grayMed; 11 | margin-left:-8px; 12 | z-index: 2; 13 | pointer-events: none; 14 | } 15 | 16 | .scroll-region-content-inner { 17 | display: flex; 18 | flex-direction: row; 19 | overflow-x:scroll; 20 | align-items: center; 21 | 22 | .account-switcher { 23 | position:initial; 24 | top:initial; 25 | left:initial; 26 | display: flex; 27 | padding-left:25px; 28 | height: @source-bar-height; 29 | align-items: center; 30 | background-color: @source-header-bg; 31 | 32 | img { 33 | -webkit-mask-image: url('/Applications/Nylas N1.app/Contents/Resources/app.asar/static/images/sidebar/account-switcher-dropdown@2x.png'); 34 | background-color: @source-header-color;; 35 | -webkit-mask-repeat: no-repeat; 36 | -webkit-mask-size: 40px; 37 | object-position: 10000px; 38 | 39 | &[style] { 40 | width:40px !important; 41 | height:auto !important; 42 | } 43 | &:hover { 44 | background-color:@white; 45 | } 46 | } 47 | } 48 | 49 | .account-sidebar-sections { 50 | display: flex; 51 | flex-direction: row; 52 | 53 | .nylas-outline-view { 54 | display: flex; 55 | flex-direction: row; 56 | align-items: center; 57 | color:@source-list-default-color; 58 | 59 | > div { 60 | display: flex; 61 | flex-direction: row; 62 | align-items: center; 63 | } 64 | 65 | .heading { 66 | height: @source-bar-height; 67 | align-items:center; 68 | padding:0; 69 | padding-left:8.5px; 70 | color: @text-color-heading; 71 | font-size:10px; 72 | text-transform: uppercase; 73 | font-weight:bold; 74 | letter-spacing: 0.1em; 75 | background-color: @source-header-bg; 76 | } 77 | .item-container { 78 | .disclosure-triangle { 79 | display: none; 80 | } 81 | 82 | .item { 83 | height: @source-bar-height; 84 | color: @source-list-default-color; 85 | align-items:center; 86 | padding:0 20px; 87 | font-size:13px; 88 | font-weight:bold; 89 | overflow: hidden; 90 | align-items: center; 91 | 92 | &:before { 93 | width: 1px; 94 | content: ""; 95 | height: 4px; 96 | display: block; 97 | background-color: @blueDark; 98 | position: relative; 99 | top: calc(~"50%" - 2px); 100 | left: 50%; 101 | transform: scale(0,1); 102 | } 103 | 104 | .icon img.content-mask { 105 | background-color: @source-list-default-color; 106 | } 107 | 108 | .name { 109 | white-space: nowrap; 110 | } 111 | 112 | &.selected { 113 | background-color: @source-list-active-bg; 114 | color:@source-list-active-color; 115 | 116 | &:before { 117 | transition: all 0.2s linear; 118 | transform: scale(200,1); 119 | background-color: @greenLight; 120 | } 121 | 122 | img.content-mask { 123 | background-color: @source-list-active-color; 124 | } 125 | } 126 | 127 | &:hover:not(.selected) { 128 | background-color: @source-list-bg-hover; 129 | } 130 | 131 | } 132 | 133 | &.dropping { 134 | background-color: @source-list-bg-dropping; 135 | } 136 | } 137 | .item-children { 138 | display: none; 139 | } 140 | 141 | &:not(:first-of-type) { /* Folders */ 142 | border-left:0px solid darken(@source-list-secondary-bg,5%); 143 | transform: all 1.0s; 144 | background: @source-list-secondary-bg; 145 | 146 | &:nth-of-type(odd) { 147 | background: darken(@source-list-secondary-bg,4%); 148 | 149 | } 150 | .heading { 151 | padding:0 20px; 152 | text-align:center; 153 | flex-direction: column; 154 | justify-content: center; 155 | position:relative; 156 | 157 | &:hover { 158 | } 159 | .add-item-button { 160 | display: inline-block; 161 | margin: 0; 162 | position:absolute; 163 | right:0; 164 | top: 0; 165 | background-color: @source-list-add-item-bg; 166 | color: @blueBase; 167 | 168 | img { 169 | display: none; 170 | } 171 | &:before { 172 | content: "+"; 173 | font-size:20px; 174 | font-weight:bold; 175 | height:20px; 176 | width:20px; 177 | line-height:18px; 178 | display: block; 179 | } 180 | &:hover { 181 | background-color: @source-list-default-color; 182 | color: @white; 183 | } 184 | } 185 | .collapse-button { 186 | margin:0; 187 | animation: slideExpandHeight 1.0s, fadeIn 0.5s; 188 | text-decoration: underline; 189 | color:white; 190 | 191 | &:hover { 192 | color: @blueDark; 193 | } 194 | } 195 | } 196 | 197 | .item-container { 198 | animation: slideExpandWidth 0.5s ease-out; 199 | overflow: hidden; 200 | border-left:1px solid @source-list-border; 201 | 202 | .item { 203 | font-size:13px; 204 | font-weight:normal; 205 | padding:0 15px; 206 | text-align: center; 207 | 208 | .icon { 209 | display: none; 210 | } 211 | .name { 212 | line-height: 16px; 213 | padding:0; 214 | } 215 | 216 | &.editing { 217 | background-color: @source-list-add-item-bg; 218 | margin:0; 219 | border:none; 220 | min-width:220px; 221 | 222 | input { 223 | border-radius: 0; 224 | border:none; 225 | border-bottom: 2px solid @blueMed; 226 | background: lighten(@panel-background-color, 10%); 227 | padding:6px; 228 | width:100%; 229 | font-size: 14px; 230 | box-shadow: none; 231 | color:@blueDark; 232 | height:auto; 233 | 234 | &::-webkit-input-placeholder { 235 | color: fadeout(@blueDark,60%); 236 | font-weight:normal; 237 | } 238 | } 239 | } 240 | } 241 | } 242 | } 243 | } 244 | } 245 | } 246 | } 247 | 248 | .sidebar-activity { 249 | display:none; 250 | } 251 | -------------------------------------------------------------------------------- /styles/buttons.less: -------------------------------------------------------------------------------- 1 | // Buttons 2 | 3 | .button-dropdown { 4 | border-radius: 3px; 5 | 6 | .primary-item, 7 | &.btn-emphasis .primary-item, 8 | .secondary-picker, 9 | &.btn-emphasis .secondary-picker { 10 | height:100%; 11 | padding: 0 15px; 12 | border:none; 13 | background: transparent; 14 | box-shadow:none !important; 15 | min-height:32px; 16 | line-height:32px; 17 | 18 | } 19 | 20 | .secondary-picker, 21 | &.btn-emphasis .secondary-picker { 22 | padding: 0 10px; 23 | border-left:1px solid #dfdfdf; 24 | } 25 | 26 | .secondary-items .menu .item, 27 | &.btn-emphasis .secondary-items .menu .item { 28 | padding: 12px 16px; 29 | } 30 | &.bordered { 31 | border: 1px solid #dfdfdf; 32 | } 33 | 34 | } 35 | 36 | .btn-emphasis, 37 | .btn-emphasis .primary-item, 38 | .btn-emphasis .secondary-picker { 39 | height:32px; // Sets height of button 40 | line-height:32px; // Vertical centers button content 41 | } 42 | -------------------------------------------------------------------------------- /styles/message.less: -------------------------------------------------------------------------------- 1 | // Message 2 | 3 | .column-MessageList { 4 | #message-list { 5 | background-color: @white; 6 | 7 | .scroll-region-content-inner { 8 | padding: 24px; 9 | 10 | .message-subject-wrap { 11 | margin: 0 auto; 12 | padding: 0 0 40px; 13 | line-height: 28px; 14 | align-items: flex-start; 15 | max-width: none; 16 | 17 | .message-subject { 18 | font-size:20px; 19 | vertical-align: top; 20 | color: @blueDark; 21 | } 22 | .thread-injected-mail-labels { 23 | vertical-align: top; 24 | } 25 | .message-icons-wrap { 26 | padding-left:12px; 27 | 28 | img.content-mask { 29 | background-color: @blueDark; 30 | } 31 | } 32 | } 33 | 34 | .message-item-wrap { 35 | margin: 0 auto 20px; 36 | padding:0; 37 | max-width: @msg-max-width; 38 | 39 | .message-item-white-wrap { 40 | box-shadow: @msg-shadow; 41 | border: @msg-border; 42 | background: @white; 43 | 44 | .message-item-area { 45 | padding:0; 46 | max-width: @msg-max-width; 47 | 48 | header { 49 | font-size:13px; 50 | line-height: 20px; 51 | padding:0; 52 | display: flex; 53 | flex-direction: column; 54 | min-height: @msg-header-fields-height; 55 | 56 | .participants { 57 | padding: @msg-padding; 58 | margin-bottom:0px; 59 | min-height: @msg-header-fields-height; 60 | display: flex; 61 | align-items: center; 62 | border-bottom: 1px dotted #dfdfdf; 63 | 64 | &.collapsed { 65 | padding: 0 @msg-padding-h; 66 | min-height: @msg-header-fields-height/2; 67 | border:none; 68 | 69 | &.from-participants { 70 | align-items: flex-end; 71 | } 72 | &.to-participants { 73 | align-items: flex-start; 74 | border-bottom: 1px dotted #dfdfdf; 75 | } 76 | } 77 | } 78 | .header-row { 79 | padding: 8px @msg-padding-h; 80 | margin:0; 81 | } 82 | 83 | .message-header-right, 84 | .pending-spinner { 85 | position: absolute; 86 | top:0; 87 | right:0; 88 | padding: 0 @msg-padding-h; 89 | height: @msg-header-fields-height; 90 | display: flex; 91 | align-items: center; 92 | border:none; 93 | 94 | & > * { 95 | align-items: center; 96 | } 97 | .message-time { 98 | padding:0; 99 | } 100 | } 101 | .pending-spinner { 102 | left:0; 103 | right:auto; 104 | } 105 | .collapsed-participants { 106 | margin:0; 107 | } 108 | .header-toggle-control { 109 | border:none; 110 | display: flex; 111 | height: @msg-header-fields-height; 112 | align-items: center; 113 | padding-left:4px; 114 | 115 | img { 116 | background-color: @blueDark; 117 | } 118 | 119 | &.inactive { 120 | display: none; 121 | } 122 | &[style] { 123 | top: 0 !important; 124 | left: 0 !important; 125 | } 126 | } 127 | } 128 | 129 | .event-wrapper { 130 | border:0; 131 | border-radius:0; 132 | margin:0; 133 | max-height: 0; 134 | background-color: @blueBase; 135 | animation: slideExpandHeight 0.5s ease-in; 136 | animation-delay: 0.5s; 137 | animation-fill-mode: forwards; 138 | 139 | .event-header { 140 | border:none; 141 | padding: @msg-padding; 142 | border-bottom: 1px solid @white; 143 | } 144 | .event-body { 145 | padding: @msg-padding-h @msg-padding-h; 146 | color: @grayMed; 147 | } 148 | } 149 | .iframe-container { 150 | padding: @msg-padding-h @msg-padding-h; 151 | box-sizing: content-box; 152 | width: calc(~"100%" - 2*@msg-padding-h); 153 | margin:0; 154 | } 155 | 156 | .download-all { 157 | margin:0; 158 | padding: @msg-padding; 159 | padding-top:0; 160 | padding-bottom:10px; 161 | font-size: 14px; 162 | } 163 | .attachments-area { 164 | margin:0; 165 | padding: @msg-padding; 166 | padding-top:0; 167 | 168 | .file-wrap { 169 | margin: 0 16px 16px 0; 170 | .inner { 171 | height:56px; 172 | .file-info-wrap { 173 | padding:0; 174 | 175 | .file-icon { 176 | margin: 0 20px; 177 | } 178 | } 179 | } 180 | } 181 | } 182 | 183 | } 184 | } 185 | &.collapsed { 186 | margin:0 auto; 187 | line-height: 24px; 188 | max-width: @msg-collapsed-max-width; 189 | 190 | .message-item-white-wrap { 191 | padding: @msg-collapsed-padding; 192 | background:@msg-collapsed-bg; 193 | box-shadow: @msg-collapsed-shadow; 194 | 195 | .message-item-area { 196 | display: block; 197 | 198 | & > div { 199 | padding: 0; 200 | } 201 | 202 | .collapsed-from, 203 | .collapsed-snippet, 204 | .collapsed-timestamp { 205 | font-size:13.5px; 206 | } 207 | .collapsed-from { 208 | color:@grayMed; 209 | 210 | } 211 | .collapsed-snippet { 212 | padding-right:30px; 213 | } 214 | .collapsed-timestamp { 215 | position:absolute; 216 | top:10px; 217 | right:15px; 218 | } 219 | .collapsed-attachment { 220 | position: absolute; 221 | right: 15px; 222 | top: 38px; 223 | } 224 | } 225 | } 226 | } 227 | &.before-reply-area { 228 | margin-bottom:0; 229 | } 230 | &.draft { 231 | border-radius: @msg-corner-radius; 232 | 233 | .message-item-white-wrap { 234 | background: @white; 235 | box-shadow: 0 0 8px @grayLight; 236 | } 237 | } 238 | 239 | 240 | 241 | } 242 | .msg-lines { 243 | max-width: @msg-collapsed-max-width; 244 | margin-top:0; 245 | 246 | .msg-line { 247 | box-shadow: @msg-collapsed-shadow; 248 | border-radius: @msg-corner-radius; 249 | border: @msg-border; 250 | background:@msg-collapsed-bg; 251 | } 252 | } 253 | } 254 | .footer-reply-area-wrap { 255 | max-width: @msg-max-width; 256 | box-shadow: @msg-shadow; 257 | border:none; 258 | margin-top:0; 259 | 260 | .footer-reply-area { 261 | max-width: @msg-max-width; 262 | padding: @msg-padding-h @msg-padding-h; 263 | } 264 | 265 | } 266 | } 267 | } 268 | 269 | 270 | .window-type-composer { 271 | min-width: 600px; 272 | } 273 | 274 | .draft, 275 | .composer-full-window { 276 | border-top:6px solid @blueDark; 277 | 278 | .message-item-white-wrap { 279 | 280 | .composer-inner-wrap { 281 | .composer-content-wrap { 282 | background-color: @white; 283 | 284 | .composer-centered { 285 | padding:0; 286 | max-width: @msg-max-width; 287 | 288 | .composer-header { 289 | 290 | .composer-header-actions { 291 | padding: @msg-header-fields-height/2 @msg-padding-h calc(@msg-header-fields-height/2 - 1px); 292 | height:0; 293 | display: flex; 294 | align-items: center; 295 | 296 | .action { 297 | display: inline-block; 298 | padding: 6px 8px; 299 | } 300 | } 301 | .compose-subject-wrap { 302 | border-bottom: 1px solid #dfdfdf; 303 | padding: @msg-padding-v @msg-padding-h; 304 | margin:0; 305 | display: flex; 306 | align-items: center; 307 | height:@msg-header-fields-height; 308 | 309 | input { 310 | font-weight: bold; 311 | 312 | &::-webkit-input-placeholder { 313 | font-weight:normal; 314 | } 315 | 316 | } 317 | } 318 | .collapsed-composer-participants { 319 | line-height: 36px; 320 | padding: 12px @msg-padding-h; 321 | margin:0; 322 | height:@msg-header-fields-height; 323 | border-bottom: 1px solid #dfdfdf; 324 | white-space: nowrap; 325 | 326 | .collapsed-contact { 327 | display: inline-block; 328 | padding-right:6px; 329 | } 330 | .num-remaining-wrap { 331 | top: auto; 332 | 333 | .show-more-fade { 334 | background: linear-gradient(to right, 335 | rgba(255,255,255,0) 0%, 336 | rgba(255,255,255,1) 40%) !important; 337 | } 338 | .num-remaining { 339 | border: none; 340 | box-shadow: none; 341 | padding: 4px 12px; 342 | background: #dfdfdf; 343 | border-radius: 3px; 344 | } 345 | } 346 | } 347 | 348 | .expanded-participants { 349 | 350 | .composer-participant-field { 351 | line-height: 36px; 352 | padding: 12px @msg-padding-h; 353 | margin:0; 354 | min-height: @msg-header-fields-height; 355 | border-bottom: 1px solid #dfdfdf; 356 | 357 | .tokenizing-field-label { 358 | width:48px; 359 | padding: 0; 360 | position: absolute; 361 | } 362 | 363 | .tokenizing-field-input { 364 | padding:0; 365 | padding-left:48px; 366 | 367 | .token { 368 | display: inline-flex; 369 | padding:0; 370 | margin:0 8px 0 0; 371 | 372 | button { 373 | order:2; 374 | position: static; 375 | padding: 1px 8px; 376 | } 377 | .participant { 378 | padding: 1px 0 1px 8px; 379 | } 380 | } 381 | input { 382 | vertical-align: middle; 383 | } 384 | } 385 | .button-dropdown, 386 | .from-picker[style] { 387 | top: auto !important; 388 | left: auto !important; 389 | padding-left:48px; 390 | margin:0; 391 | display: inline; 392 | vertical-align: top; 393 | } 394 | &:not(.to-field) { 395 | 396 | .composer-field-label { 397 | display: inline-block; 398 | width: 48px; 399 | padding: 0; 400 | } 401 | span { 402 | top: auto !important; 403 | left: auto !important; 404 | } 405 | } 406 | 407 | } 408 | } 409 | } 410 | .compose-body { 411 | margin:0; 412 | 413 | .contenteditable { 414 | padding:0; 415 | padding: @msg-padding-h @msg-padding-h; 416 | min-height: 100px; 417 | } 418 | a.quoted-text-control { 419 | margin: @msg-padding-h @msg-padding-h; 420 | margin-top:0; 421 | } 422 | } 423 | 424 | } 425 | } 426 | .composer-action-bar-wrap { 427 | border-radius: 0; 428 | 429 | .composer-action-bar-content { 430 | padding: @msg-padding-h @msg-padding-h; 431 | max-width: @msg-max-width; 432 | align-items:center; 433 | background-color: @grayBase; 434 | 435 | .btn-send { 436 | color: #ffffff; 437 | background: @blueDark; 438 | border:none; 439 | } 440 | .button-dropdown .secondary-picker { 441 | border-color: @blueLight; 442 | } 443 | } 444 | } 445 | } 446 | } 447 | } 448 | 449 | a.quoted-text-control { 450 | margin: @msg-padding-h @msg-padding-h; 451 | margin-top:0; 452 | } 453 | 454 | 455 | 456 | // Message List Sidebar 457 | 458 | .column-MessageListSidebar { 459 | background-color: transparent; 460 | } 461 | -------------------------------------------------------------------------------- /styles/threads.less: -------------------------------------------------------------------------------- 1 | // Thread List 2 | 3 | .thread-list, 4 | .draft-list { 5 | .list-container { 6 | background-color: @list-bg; 7 | 8 | .list-item { 9 | background-color: @list-bg; 10 | border-bottom:1px solid @list-border; 11 | border-left-width:0px; 12 | transition: all 0s; 13 | color:@list-color; 14 | 15 | .participants, 16 | .subject, 17 | .snippet, 18 | .timestamp { 19 | font-size:13.5px; 20 | } 21 | .participants { 22 | font-weight:bold; 23 | 24 | &.no-recipients { 25 | color:inherit; 26 | } 27 | } 28 | .subject { 29 | font-weight:normal; 30 | } 31 | .timestamp { 32 | padding-left:4px; 33 | } 34 | 35 | .snippet { 36 | opacity: 0.5; 37 | } 38 | 39 | .draft-icon { 40 | } 41 | .thread-icon-star { 42 | background-image: none; 43 | -webkit-mask-image: url(../static/images/thread-list/icon-star-@2x.png); 44 | -webkit-mask-size: 65%; 45 | -webkit-mask-position: center; 46 | -webkit-mask-repeat: no-repeat; 47 | background-color: @gold; 48 | } 49 | .thread-icon-attachment { 50 | opacity: 0.5; 51 | } 52 | .thread-icon-unread, 53 | .thread-icon-replied { 54 | visibility:hidden; 55 | } 56 | 57 | &:not(.unread) .list-column { 58 | } 59 | 60 | &.unread, 61 | .unread:not(.focused), 62 | .unread:not(.focused):not(.selected), 63 | .draft-list .unread:not(.focused):not(.selected) { 64 | color: @list-unread-color; 65 | background: @list-unread-bg; 66 | } 67 | &.focused, 68 | &.focused.unread, 69 | &.selected, 70 | &.selected.unread { 71 | height: 84px; 72 | color: @list-focused-color; 73 | background: @component-active-color; 74 | 75 | .participants .unread-true { 76 | font-weight:bold; 77 | } 78 | 79 | .list-column { 80 | opacity: 1.0; 81 | } 82 | 83 | .mail-label { 84 | -webkit-filter:none; 85 | } 86 | } 87 | 88 | .focused .mail-label { 89 | background: @white !important; 90 | } 91 | .mail-label { 92 | position: fixed; 93 | right: 6px; 94 | bottom: 8px; 95 | font-size: 10px; 96 | } 97 | } 98 | } 99 | } 100 | 101 | 102 | 103 | 104 | .thread-injected-mail-labels { 105 | margin:0; 106 | 107 | .mail-label { 108 | padding: 5px 12px; 109 | border-radius: 0; 110 | font-weight: bold; 111 | font-size: 10px; 112 | text-transform: uppercase; 113 | letter-spacing: 1px; 114 | 115 | &[style] { 116 | background: white !important; 117 | box-shadow: none !important; 118 | box-shadow: 0 1px 3px #bdbdbd !important; 119 | } 120 | 121 | &.removable { 122 | &:hover .inner { 123 | left: inherit; 124 | } 125 | 126 | .x { 127 | position: absolute; 128 | padding: 4px; 129 | top: -7px; 130 | left: -9px; 131 | height: 18px; 132 | border-radius: 50%; 133 | 134 | &[style] { 135 | background-color: #dfdfdf !important; 136 | -webkit-mask-image: none !important; 137 | object-position: initial !important; 138 | zoom: 1 !important; 139 | } 140 | 141 | } 142 | } 143 | 144 | .snooze-mail-label { 145 | color: @red; 146 | 147 | img { 148 | background-color: @red; 149 | 150 | &[style] { 151 | color: @red !important; 152 | } 153 | } 154 | 155 | } 156 | 157 | } 158 | } 159 | 160 | .scrollbar-track { 161 | background: transparent; 162 | border-left: none; 163 | width:12px; 164 | padding:2px; 165 | 166 | &:hover, 167 | &.dragging { 168 | width:16px; 169 | } 170 | 171 | .scrollbar-handle { 172 | background-color: @grayMed; 173 | opacity:0.3; 174 | border: none; 175 | } 176 | &.dragging .scrollbar-handle { 177 | background-color: @grayMed; 178 | border:none; 179 | opacity:0.8; 180 | } 181 | 182 | } 183 | -------------------------------------------------------------------------------- /styles/toolbar.less: -------------------------------------------------------------------------------- 1 | // Toolbar 2 | 3 | .sheet-toolbar, 4 | .layout-mode-popout .sheet-toolbar { 5 | height: @toolbar-height; 6 | min-height: @toolbar-height; 7 | max-height: @toolbar-height; 8 | border-color: @border-color-primary; 9 | padding: @toolbar-padding-v 0 @toolbar-padding-v; 10 | border-bottom: 1px solid #dfdfdf; 11 | 12 | .sheet-toolbar-container { 13 | border-width:0; 14 | background-image:none; 15 | height:auto !important; 16 | background-color: @white; 17 | z-index: 1; 18 | color: @blueDark; 19 | 20 | .toolbar-Preferences { 21 | background-color: white; 22 | } 23 | .item-container { 24 | width:100%; 25 | 26 | .window-title { 27 | top:0; 28 | } 29 | } 30 | } 31 | 32 | } 33 | 34 | .toolbar-window-controls { 35 | margin:5px 9px; 36 | } 37 | 38 | .search-bar { 39 | margin:0; 40 | .menu { 41 | .header-container { 42 | height: @toolbar-item-height; 43 | margin: 0 10.5px 0 0; 44 | 45 | input { 46 | transition: border-width 0.1s ease-in; 47 | border:1px solid @toolbar-btn-border; 48 | border-radius: 3px; 49 | box-shadow: none; 50 | height:@toolbar-item-height; 51 | min-height:@toolbar-item-height; 52 | line-height: @toolbar-item-height; 53 | padding: 0 @toolbar-item-height; 54 | width: 100%; 55 | color:@blueDark; 56 | background-color: @toolbar-btn-bg; 57 | 58 | &:not(.empty) { 59 | background-color: @toolbar-btn-active-bg; 60 | border-color:@blueDark; 61 | } 62 | } 63 | .search-accessory.search { 64 | top:16px; 65 | left:16px; 66 | 67 | } 68 | .search-accessory.clear { 69 | top:10px; 70 | right:10px; 71 | } 72 | } 73 | .content-container { 74 | } 75 | } 76 | &.focused { 77 | input[type="text"] { 78 | &:focus { 79 | box-shadow: none; 80 | border-color:@blueDark; 81 | } 82 | } 83 | } 84 | } 85 | 86 | .sheet-toolbar { 87 | .btn-toolbar, 88 | .message-toolbar-items > div { 89 | border-radius: 3px; 90 | border: @toolbar-item-border-width solid #dfdfdf; 91 | overflow: hidden; 92 | background: @toolbar-btn-bg; 93 | height:@toolbar-item-height; 94 | min-width:@toolbar-item-width; 95 | margin-top: 0; 96 | box-shadow:none; 97 | 98 | .btn-toolbar { 99 | margin:0; 100 | border-radius:0; 101 | border:none; 102 | border-right: @toolbar-item-border-width solid @toolbar-btn-border; 103 | height:@toolbar-item-height - 2*@toolbar-item-border-width; 104 | 105 | &[title=Star] { 106 | border:none; 107 | } 108 | 109 | } 110 | 111 | img.content-mask { 112 | background-color: @blueDark; 113 | } 114 | &:active img.content-mask { 115 | background-color: @blueDark; 116 | } 117 | &:hover { 118 | background: @toolbar-btn-hover-bg; 119 | color: @white; 120 | 121 | & > img.content-mask { 122 | background-color: @white; 123 | } 124 | } 125 | } 126 | 127 | .message-toolbar-items { 128 | display: inline-block; 129 | } 130 | .btn-toolbar.mode-toggle { 131 | float:right; 132 | } 133 | .btn-icon, 134 | .item-back { 135 | .item-back-title { 136 | color:@blueDark; 137 | } 138 | img.content-mask { 139 | background-color:@blueDark; 140 | } 141 | } 142 | } 143 | -------------------------------------------------------------------------------- /styles/ui-variables.less: -------------------------------------------------------------------------------- 1 | @import "toolbar.less"; 2 | @import "accounts.less"; 3 | @import "threads.less"; 4 | @import "message.less"; 5 | @import "buttons.less"; 6 | 7 | @grayBase: #efefef; 8 | @grayLight: #999999; 9 | @grayMed: #666666; 10 | @blackBase: #333333; 11 | 12 | @red: #A04534; 13 | @gold: #E4AE31; 14 | 15 | @blueBase: #EDF4F5; 16 | @blueLight: #B4CCCD; 17 | @blueMed: #3E7880; 18 | @blueDark: #153547; 19 | 20 | @greenLight: #52A58E; 21 | 22 | 23 | //=============================== Components ===========================// 24 | 25 | //== Toolbar 26 | @toolbar-btn-bg: @white; 27 | @toolbar-btn-border: #dfdfdf; 28 | @toolbar-btn-active-bg: @blueBase; 29 | @toolbar-btn-active-border: @blueDark; 30 | @toolbar-btn-hover-bg: @blueDark; 31 | @toolbar-btn-hover-color: @white; 32 | 33 | @toolbar-item-height: 32px; 34 | @toolbar-padding-v: 8px; 35 | @toolbar-item-border-width: 1px; 36 | @toolbar-height: @toolbar-item-height + 2*@toolbar-item-border-width + 2*@toolbar-padding-v; 37 | @search-active-border-bot-width: 6*@toolbar-item-border-width; 38 | @toolbar-item-width: @toolbar-item-height*1.5; 39 | 40 | 41 | 42 | //== Account Sidebar 43 | @panel-background-color: @blueLight; 44 | @source-list-bg: @panel-background-color; 45 | @source-list-primary-bg: @panel-background-color; 46 | @source-list-secondary-bg: darken(@panel-background-color,7%); 47 | @source-list-border: fadeOut(@source-list-default-color,85%); 48 | @source-list-active-bg: @blueBase; 49 | @source-list-active-color: @blueDark; 50 | @source-list-default-color: @blueMed; 51 | @source-list-bg-hover: darken(@panel-background-color,10%); 52 | @source-list-bg-dropping: darken(@panel-background-color,15%); 53 | @source-list-add-item-bg: fadeOut(@source-list-default-color,60%); 54 | 55 | @source-bar-height: 60px; 56 | @source-item-header-height: 60px; 57 | @source-item-height: 60px; 58 | @source-item-height-child: @source-item-height; 59 | @source-item-padding-h: 0; 60 | 61 | @source-header-bg: transparent; 62 | @source-header-color: @source-list-default-color; 63 | @source-header-fsize: 10px; 64 | @source-item-fsize: 13px; 65 | 66 | 67 | 68 | //== Thread List (e.g, `.list-group-item`, `.list-item`) 69 | @list-bg: @grayBase; 70 | @list-color: fadeOut(@blueDark,30%); 71 | @list-border: #dfdfdf; 72 | @list-hover-bg: darken(@list-bg, 4%); 73 | @list-focused-color: @white; 74 | @list-focused-bg: @component-active-color; 75 | @list-focused-border: @list-focused-bg; 76 | @list-selected-color: @white; 77 | @list-selected-bg: @component-active-color; 78 | @list-selected-border: mix(@component-active-color, @list-bg, 50%); 79 | 80 | @list-unread-color: lighten(@blueDark,10%); 81 | @list-unread-bg: @white; 82 | 83 | 84 | //== Message 85 | @msg-shadow: 0 0 8px #bdbdbd; 86 | @msg-corner-radius: 0px; 87 | @msg-border: 0px solid #dfdfdf; 88 | 89 | @msg-collapsed-bg: #FBFBFB; 90 | @msg-collapsed-shadow: 0 0 8px #dfdfdf; 91 | 92 | @msg-max-width: 800px; 93 | @msg-padding-v: 10px; 94 | @msg-padding-h: 20px; 95 | @msg-padding: @msg-padding-v @msg-padding-h; 96 | 97 | @msg-collapsed-width-delta: 20px; 98 | @msg-collapsed-max-width: @msg-max-width - @msg-collapsed-width-delta; 99 | @msg-collapsed-padding: @msg-padding-v @msg-padding-h; 100 | 101 | @msg-header-fields-height: 60px; 102 | 103 | 104 | 105 | //== Notifications 106 | @background-color-info: @blue-light; 107 | @background-color-success: #009ec4; 108 | @background-color-warning: #ff4800; 109 | @background-color-error: #f15f4b; 110 | @background-color-pending: #b4babd; 111 | 112 | //== Menus 113 | @menu-item-color-hover: fade(@blue-light, 10%); 114 | @menu-item-color-selected: @blue-light; 115 | @menu-text-color-selected: @text-color-inverse; 116 | 117 | //== Sizes 118 | @input-font-size: 14px; 119 | @component-padding: 10px; 120 | @component-icon-padding: 5px; 121 | @component-icon-size: 16px; 122 | @component-line-height: 25px; 123 | @component-border-radius: 2px; 124 | 125 | 126 | //=============================== Colors ===============================// 127 | 128 | @accent-primary: @blue; 129 | @accent-primary-dark: @blue-dark; 130 | 131 | @background-primary: @white; 132 | @background-off-primary: #fdfdfd; 133 | @background-secondary: #f6f6f6; 134 | @background-tertiary: #6d7987; 135 | 136 | @color-info: @blue-dark; 137 | @color-success: #5CB346; 138 | @color-warning: #f0ad4e; 139 | @color-error: #d9534f; 140 | @color-danger: #d9534f; 141 | 142 | @component-active-color: @blueDark; 143 | @component-active-bg: @background-primary; 144 | 145 | @background-gradient: linear-gradient(to top, rgba(241,241,241,0.75) 0%, 146 | rgba(253,253,253,0.75) 100%); 147 | 148 | @border-color-primary: darken(@background-primary, 10%); 149 | @border-color-secondary: darken(@background-secondary, 10%); 150 | @border-color-tertiary: darken(@background-tertiary, 10%); 151 | @border-color-divider: @border-color-secondary; 152 | 153 | @shadow: rgba(50,50,50,0.6); 154 | 155 | 156 | //============================= Typography =============================// 157 | 158 | // ----- Colors ----- 159 | @text-color: @black; 160 | @text-color-inverse: @white; 161 | @text-color-heading: @source-header-color; 162 | 163 | @text-color-link: @blue; 164 | @text-color-link-hover: @blue-dark; 165 | @text-color-link-active: @blue-dark; 166 | 167 | 168 | 169 | //============================= Animations =============================// 170 | 171 | @keyframes slideExpandHeight { 172 | 0% { max-height: 0; } 173 | 100% { max-height: 300px; } 174 | } 175 | 176 | @keyframes slideExpandWidth { 177 | 0% { max-width: 0; } 178 | 100% { max-width: 400px; } 179 | } 180 | @keyframes scaleIn { 181 | 0% { transform: scale(0,0); } 182 | 100% { transform: scale(1,1); } 183 | } 184 | @keyframes scaleInHeight { 185 | 0% { transform: scale(1,0); } 186 | 100% { transform: scale(1,1); } 187 | } 188 | @keyframes scaleInWidth { 189 | 0% { transform: scale(0,1); } 190 | 100% { transform: scale(1,1); } 191 | } 192 | @keyframes fadeIn { 193 | 0% { opacity:0; } 194 | 100% { opacity:1.0; } 195 | } 196 | @keyframes flashIn { 197 | 0% { background-color: @white; } 198 | 100% { background-color: transparent; } 199 | } 200 | 201 | 202 | 203 | 204 | 205 | //============================= Layout Hack =============================// 206 | 207 | div.column-RootSidebar[style] { 208 | position: fixed !important; 209 | height: @source-bar-height !important; 210 | width: 100% !important; 211 | min-width: 100% !important; 212 | max-width: 100% !important; 213 | bottom:0; 214 | z-index: 2; 215 | } 216 | .column-ThreadList, 217 | .column-MessageList { 218 | height: calc(~"100%" - @source-bar-height) !important; 219 | } 220 | .column-MessageList { 221 | min-width:600px !important; 222 | } 223 | .sheet-toolbar-container { 224 | display: flex; 225 | 226 | .toolbar-RootSidebar, 227 | .toolbar-ThreadList { 228 | z-index: 1; 229 | position: static !important; 230 | width: auto !important; 231 | left: auto !important; 232 | } 233 | .toolbar-MessageList { 234 | width: auto !important; 235 | left: auto !important; 236 | right:0; 237 | } 238 | } 239 | --------------------------------------------------------------------------------