diff options
Diffstat (limited to 'templates/@theme-base')
| -rw-r--r-- | templates/@theme-base/_full.scss | 340 | ||||
| -rw-r--r-- | templates/@theme-base/_styles.scss | 74 |
2 files changed, 408 insertions, 6 deletions
diff --git a/templates/@theme-base/_full.scss b/templates/@theme-base/_full.scss new file mode 100644 index 0000000..1e6b7e1 --- /dev/null +++ b/templates/@theme-base/_full.scss @@ -0,0 +1,340 @@ +// Applies theme styles across as many areas of the layout as possible. + +// Message items +.conversation { + border-color: lighten($base, 10%); +} + +.main-area, +.main-area--noHeader, +.main-area--withToolbar, +.main-area--withToolbar--noHeader, +[class*="block-info-"] { + color: $text_color; +} + +.fill-global-grey { + fill: $highlight; +} + +.starbutton { + fill: $extra_color; +} + +// Read message +.bg-global-light, kbd { + background: $base; +} + +// Unread, not active +.conversation.item-container:not(.item-contact):not(.read):not(.active) { + background: lighten($base, 5%); +} + +// Active +.item-container.active, .item-is-selected { + background: darken($base, 2%); + .flex-item-fluid { + color: $highlight; + } +} + +// Selected message checkbox +.item-icon { + background-color: $base; + border: 1px solid darken($text_color, 5%); +} + +.selectBoxElement-container:hover .item-icon { + background-color: $base; + border: 1px solid darken($highlight, 5%); + + .item-icon-fakecheck-icon { + fill: darken($highlight, 5%); + } +} + +.selectBoxElement-container { + color: $text_color; +} + +.selectBoxElement-container:hover .item-checkbox:checked + .item-icon { + background-color: darken($highlight, 5%); + border-color: darken($highlight, 5%); +} + +// Message list background area +.items-column-list { + background-color: $base; +} + +// Current message panel +.message-header { + background-color: lighten($base, 5%); +} + +.view-column-detail { + background-color: $base; +} + +details:first-child { + border-color: lighten($base, 10%); +} + +.items-column-list, +.message-container, +.message-attachments { + border-color: lighten($base, 10%); +} + +.message-container:not(.sent):not(.draft) .message-header.message-summary::before, +.message-header.is-inbound::before { + border-top: 1px solid lighten($base, 10%); + border-left: 1px solid lighten($base, 10%); + background-color: lighten($base, 5%); +} + +// Mailing list block +.bg-white { + background-color: $base; +} + +.bordered, .bordered-container, .breadcrumb-container { + border-color: lighten($base, 10%); +} + +.email.message-body-container { + [bgcolor], [style*="background"] { + background-color: transparent !important; + div, p, + h1, h2, h3, + h4, h5, h6 { + color: $text_color !important; + } + } +} + +// Attachment button +.pm-button, .pm-button--info, .pm-button--redborder { + background: $base; + border-color: lighten($base, 10%); + color: $text_color; +} + +.message-attachmentInfo { + border-color: lighten($base, 10%); +} + +.is-hover.pm-button--info, .is-hover.pm-button--redborder, +.pm-button--info:focus, .pm-button--info:focus-within, +.pm-button--info:hover, .pm-button--redborder:focus, +.pm-button--redborder:focus-within, .pm-button--redborder:hover, +.pm-button.is-hover, .pm-button:focus, +.pm-button:focus-within, .pm-button:hover:not(.pm-button--primary) { + color: $highlight; +} + +.is-disabled.pm-button--info, +.is-disabled.pm-button--redborder, +.pm-button--info[disabled], +.pm-button--redborder[disabled], +.pm-button.is-disabled, +.pm-button[disabled] { + background: lighten($base, 10%); +} + +.is-active.pm-button--info, +.is-active.pm-button--redborder, +.pm-button--info:not(div):active, +.pm-button--redborder:not(div):active, +.pm-button.is-active, .pm-button:not(div):active { + background: lighten($base, 10%); + color: $highlight; +} + +// Dropdowns +.dropDown-content { + background: $base; + color: $text_color; + + button { + color: $text_color; + } + + .elementsSelector-btn-action, + .dropDown-item:hover { + color: $text_color; + } + + .dropDown-item:hover { + background: lighten($base, 5%) !important; + } + + .dropDown-item + .dropDown-item { + border-top: 1px solid lighten($base, 10%); + } + + .dropDown-item { + .color-global-grey { + color: $text_color; + } + } +} + +.dropDown { + .dropDown-content { + &::before, &::after { + border-bottom-color: $base; + } + } +} + +.dropDown--right-bottom { + &::before { + border-right-color: $base; + } + + .dropDown-content { + &::before, &::after { + background: $base; + } + } +} + +.dropDown--bottom-right { + .dropDown-content { + &::before, &::after { + background: $base; + } + } +} + +.dropDown--bottom-left::before, +.dropDown--bottom-right::before, +.dropDown--bottom::before { + border-bottom-color: lighten($base, 10%); +} + +.dropDown--bottom-right { + border: 1px solid lighten($base, 10%); +} + +.pm-field-icon-container[type="search"], .pm-field[type="search"] { + background-color: lighten($base, 5%); +} + +.dropDown-contentInner { + background-color: $base; + + &::before, &::after { + background-color: $base; + } + + .dropDown-item span { + color: $text_color !important; + } +} + +.searchbox-field[type="search"]:not(#global_search) { + background: $text_color; + color: $base; +} + +// Links +.link, a, .pm-button--link { + color: $highlight; +} + +.link:active, .link:focus, .link:hover, +a:active, a:focus, a:hover, +.pm-button--link:hover { + color: lighten($highlight, 5%); +} + +// Modal +.pm-modal, .pm-modalContentInner { + background-color: $base; + color: $text_color; + + &::before, &::after { + background-color: $base; + } + + .labelColorSelector-item-mask { + border: 2px solid lighten($base, 15%); + } +} + +.pm-button--primaryborder, .pm-button-blueborder { + border-color: $highlight; + color: $highlight; + background-color: lighten($base, 5%); + transition: background-color .2s ease-in-out; +} + +.is-hover.pm-button--primaryborder, .pm-button--primaryborder:focus, +.pm-button--primaryborder:focus-within, .pm-button--primaryborder:hover, +.pm-button-blueborder.is-hover, .pm-button-blueborder:focus, +.pm-button-blueborder:focus-within, .pm-button-blueborder:hover { + border-color: $highlight; + color: $highlight; + background-color: darken($base, 1%); +} + +// Input fields +.pm-field, .pm-field-icon-container, +.focus.pm-field-icon-container, .pm-field-icon-container:focus, +.pm-field-icon-container:focus-within, .pm-field.focus, +.pm-field:focus, .pm-field:focus-within { + color: $text_color; + background-color: lighten($base, 5%); + + &::placeholder { + color: darken($text_color, 5%); + } +} + +select.pm-field, select.pm-field-icon-container { + background-color: lighten($base, 5%); + color: $text_color; +} + +// Storage progress modal +.storageProgress-content.dropDown-content--rightbottom { + &::before { + border-right-color: $base; + } +} + +// Settings panel +.main-area, .main-area-content { + background-color: $base; + + .p1 { + background-color: lighten($base, 5%); + } +} + +.subnav { + .link, a { + color: $highlight; + } + + .link:active, .link:focus, .link:hover, a:active, a:focus, a:hover { + color: lighten($highlight, 5%); + } +} + +// Toggle button +.pm-toggle-label { + border-color: lighten($base, 10%); + background: lighten($base, 5%); + + &::before { + background: $base; + } + + .pm-toggle-label-img { + fill: $text_color; + } +} diff --git a/templates/@theme-base/_styles.scss b/templates/@theme-base/_styles.scss index 8292211..39aec8f 100644 --- a/templates/@theme-base/_styles.scss +++ b/templates/@theme-base/_styles.scss @@ -46,13 +46,17 @@ $boxshadow-main: none; } // Storage indicator -.storageProgress-container { - .circle-chart__circle { - stroke: $highlight; - } + +.circle-chart__circle { + stroke: $highlight; } // Top navigation +#global_search.searchbox-field[type="search"] { + background-color: $search; + color: $text_color; +} + .topnav-link, .topnav-link > .topnav-icon { color: $navigation; transition: color .2s ease-in-out; @@ -74,6 +78,10 @@ $boxshadow-main: none; background: $highlight; } + &.item-container.active, &.item-is-selected { + background: rgba($highlight, 0.1); + } + .item-checkbox:checked + .item-icon { background-color: $highlight; border-color: $highlight; @@ -86,6 +94,25 @@ $boxshadow-main: none; .item-checkbox:checked + .item-icon:hover .item-icon-fakecheck-icon { fill: $navigation; } + + .selectBoxElement-container:hover .item-icon { + // background-color: transparent; + border: 1px solid darken($highlight, 5%); + + .item-icon-fakecheck-icon { + fill: darken($highlight, 5%); + } + } +} + +// Star icon +.starbutton { + fill: $highlight !important; + opacity: 0.7; +} + +.starbutton:focus, .starbutton:hover { + fill: $highlight; } // Highlighted text (seen when multiple messages are selected) @@ -112,12 +139,14 @@ $boxshadow-main: none; } // Links across the site: -.link, a { +.link, a, .pm-button--link { color: $base; transition: color .2s ease-in-out; } -.link:active, .link:focus, .link:hover, a:active, a:focus, a:hover { +.link:active, .link:focus, .link:hover, +a:active, a:focus, a:hover, +.pm-button--link:hover { color: darken($highlight, 10%); } @@ -125,4 +154,37 @@ $boxshadow-main: none; .pm-toggle-checkbox:checked+.pm-toggle-label:before { background: $highlight; border-color: $highlight; +} + +// Message panel + +// Attachment icon +.fill-pm-blue, +.message-attachmentIcon .file-outer-icon.is-embedded { + fill: $highlight; +} + +// Subscription plans +.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2) { + border-color: $highlight; + color: $highlight; + + &::before { + background-color: $highlight; + } +} + +.pm-table--highlight[data-plan-number="1"] tr td:nth-child(2), +.pm-table--highlight[data-plan-number="1"] tr th:nth-child(2), +.pm-table--highlight[data-plan-number="1"] tr:last-child td:nth-child(2) { + border-color: $highlight; +} + +// Contacts +.progress-contact { + color: $highlight; + + &::-moz-progress-bar { + background: $highlight; + } }
\ No newline at end of file |