diff options
| author | Cristiano Almeida <[email protected]> | 2018-10-14 10:44:38 +0100 |
|---|---|---|
| committer | GitHub <[email protected]> | 2018-10-14 10:44:38 +0100 |
| commit | 672971c9393925a62193b51dab14b8120d2488a1 (patch) | |
| tree | d6ac42ff1dc75cb376a809cf46b40d0ed8e03fac /templates/theme_template.scss | |
| parent | 2dd82ebe8abd6d61c70be0feb14ebe6fe45c858a (diff) | |
| parent | 4d432861ab4cabb44cce513df1e4a46cb23f0e9e (diff) | |
| download | protonmail-themes-3.14.19.tar.xz protonmail-themes-3.14.19.zip | |
Merge pull request #14 from csalmeida/gulpv3.14.19
Replaced Webpack with Gulp. Theme updates.
Diffstat (limited to 'templates/theme_template.scss')
| -rw-r--r-- | templates/theme_template.scss | 508 |
1 files changed, 0 insertions, 508 deletions
diff --git a/templates/theme_template.scss b/templates/theme_template.scss deleted file mode 100644 index 5be3054..0000000 --- a/templates/theme_template.scss +++ /dev/null @@ -1,508 +0,0 @@ -/* =========================================== * - * Template THEME - * Version: 3.12.0 - * Author: You name here - * Website: Your website here - * Tweets Your twitter handle - * =========================================== */ - - // Change colors here and they will change everywhere. -$base: #1C1C1C; -$search: #000; -$highlight: #2FBF71; -$navigation: #fff; - -$text_color: #0d0d0d; -$extra_color: #e6eaf0; -$danger_color: #d62646; -$warning_color: #ffaa00; - -// ================================= \\ -// ========== HORIZONTAL =========== \\ -// ========== NAVIGATION =========== \\ -// ============= BAR =============== \\ -// ================================= \\ - - -// Top Navigation BAR (horizontal) -.headerDesktop-container { - background-color: $base; -} - -.search-form-fieldset { - background: $search; -} // Search bar. - - -[class*="searchForm-action-button-"] { - color: $navigation; -} // Search bar buttons. - -.searchForm-action-button-advanced:hover, .searchForm-action-button-toggle:hover { - background: $highlight; -} // Search bar buttons hover. - -.customRadio-input:checked + .customRadio-mask { - box-shadow: inset 0 0 0 3px #fff,inset 0 0 0 10px $highlight; - border-color: $highlight; -} // Advanced search menu. - - -.pm_button.primary, .pm_button.primary:active { - color: $navigation; - background-color: $base; - border-color: $base; -} // General buttons. - -.pm_button.primary:hover, .pm_button.primary:focus { - background-color: rgba($search, 0.7); - border-color: rgba($search, 0.7); -} - -.navigation > li.active, .navigation > li:hover { - box-shadow: 0 5px 0 0 $highlight inset; -} // Navigation top color shadow - -.navigation-link { - color: $navigation; -} // Navigation links including icons. - -.navigation-title:hover { - color: $highlight; -} // Hover navigation links - -.pm_dropdown .navigationUser-logout { - background-color: $base !important; - border-color: $base !important; - color: $navigation !important; -} // logout button hover - -.pm_dropdown .navigationUser-logout:hover { - background-color: $search !important; - border-color: $search !important; - color: $navigation !important; -} // logout button hover - -.sidebar-btn-compose, .sidebar-btn-compose:active { - color: $navigation !important; - background: $highlight !important; - border: none !important; -} // compose button - -.sidebar-btn-compose:hover { - color: $navigation !important; - background: $highlight !important; - border: none !important; - // Covers button with darker hue of highlight - box-shadow: inset 0 400px 400px rgba(0,0,0,0.1); -} // compose button - -// ================================= \\ -// =========== VERTICAL ============ \\ -// ========== NAVIGATION =========== \\ -// ============= BAR =============== \\ -// ================================= \\ - -// Protonmail logo background. -.headerDesktop-logo { - background-color: $base; -} - -// Side Navigation background. (vertical) -body section.sidebar { - background: $base; -} - -// Composition button. -body section.sidebar a.compose { - background: $highlight; - color: $navigation; -} - -body section.sidebar a.compose:hover { - background: $navigation; - border-color: $navigation; - color: $base; -} - -// Navigation items. -body section.sidebar ul.menu li a { - color: $navigation; -} - -// Navigation items on hover. -body section.sidebar ul.menu li a:hover { - color: $highlight; -} - -// Navigation items on active and on active hover. -body section.sidebar ul.menu li.active a, body section.sidebar ul.menu li.active a { - color: $navigation; -} - -// Navigation icons on active and on active hover. -body section.sidebar ul.menu li.active a i.fa, body section.sidebar ul.menu li.active a i.fa:hover { - color: $highlight !important; - opacity: 1; -} - -// Refresh icon. -body section.sidebar ul.menu li a .fa-repeat { - color: $navigation; - opacity: 1; -} - -// Navigation icons. -body section.sidebar ul.menu li a i.fa { - color: $navigation; - opacity: 0.5; -} - -// Navigation icons on hover. -body section.sidebar ul.menu li a i.fa:hover, body section.sidebar ul.menu li a:hover i.fa { - color: $navigation; - opacity: 1; -} - -// Number of messages. -body section.sidebar ul.menu li a em { - color: $navigation; - opacity: 0.5; -} - -// Label links. -body section.sidebar div.labels ul li a { - color: $navigation; - opacity: 0.5; -} - -// Label links on hover. -body section.sidebar div.labels ul li a:hover { - color: $navigation; - opacity: 1; -} - -// Storage links and version. -body section.sidebar div.footer div.link a, body section.sidebar a.version { - color: $navigation; - opacity: 0.5; -} - -// Storage links and version on hover. -body section.sidebar div.footer div.link a:hover, body section.sidebar a.version:hover { - color: $highlight; - opacity: 1; -} - -// Storage text. -body section.sidebar div.footer div.storage strong { - color: $navigation; - opacity: 0.5; -} - -// Storage bar welcome text. -.conversationPlaceholder #storageStatus .wrap span strong { - color: $highlight; -} - -// Storage bar. -.storageBar { - background-color: rgba(0,0,0,.1); -} -// Storage bar fill. -.storageBar .storageBar-progress { - background-color: $highlight; -} - -// ================================= \\ -// =========== MESSAGE ============ \\ -// ========== NAVIGATION =========== \\ -// ================================= \\ - -// Toolbar icons. -.pm_buttons, .pm_buttons a { - color: $text_color; -} - -.pm_buttons a:hover, .pm_buttons .pm_buttons-child:hover { - color: $highlight; -} - -.readUnread-container-ur .readUnread-btn-read, -.pm_buttons .pm_buttons:not(:first-of-type), .pm_buttons>*, -.pm_buttons, .pm_buttons a { - border-color: $base !important; -} - -// Search icon from dropdown menu for folders and labels. -.dropdown-folder-search .fa.dropdown-folder-search-icon, -.dropdown-label-search .fa.dropdown-label-search-icon { - color: $highlight; -} - -// Create folder and label button. -.dropdown-folder-create-button, -.createLabel-button { - color: $highlight; -} - -// Checkbox next to message title. -.customCheckbox-mask { - // You can add a new border colour here. -} - -.customCheckbox-container:hover .customCheckbox-mask, -.customMaskInput-container:hover .customCheckbox-mask { - border-color: $highlight !important; -} - -.customCheckbox-input:checked+.customCheckbox-mask { - background-color: $highlight; - border-color: $highlight; - color: $base; -} - -// Left border of message title. -.conversation.marked::before { - background: $highlight; - width: 5px; -} - -// Unread message background. -body #conversation-list-rows .conversation { - -} - -// Read message background. -body #conversation-list-rows .conversation.read { - -} - -// ================================= \\ -// =========== COMPOSING =========== \\ -// ============ MESSAGE ============ \\ -// ============= WINDOW ============= \\ -// ================================= \\ - -// Header color and text. -#pm_composer .composer header { - background: $base; - color: $navigation; -} - -// Links in general. -p a { - color: $highlight; -} - -// Attachment, encryption and expiration buttons. -#pm_composer .composer footer .pm_button { - background: $navigation; - color: $base; -} - -// Attachment, encryption and expiration buttons on hover. -#pm_composer .composer footer .pm_button:hover { - background: $navigation; - color: $base; -} - -// Send button. -#pm_composer .composer footer .pm_button.primary { - background: $base; - color: $navigation; -} - -// Send button on hover. -#pm_composer .composer footer .pm_button.primary:hover { - background: $highlight; - color: $navigation; -} - -// ================================= \\ -// =========== SETTINGS =========== \\ -// ============ PANEL ============ \\ -// ================================= \\ - -// Tab menu background. -#pm_settings .pm_tabs { - background: $extra_color; -} - -// Tab menu items. -#pm_settings .pm_tabs li a.pm_button { - color: $base; - border-color: $extra_color; -} - -// Tab menu items hover. -#pm_settings .pm_tabs li a.pm_button:hover { - color: $highlight; -} - -// Tab menu active item. -#pm_settings .pm_tabs li.active a.pm_button { - color: $highlight; -} - -// Links in settings. -.pm_button.link { - color: $highlight; -} - -// Pill switch buttons. -.pm_toggle.off .off, .pm_toggle.on .on { - background: $base; - color: $navigation; -} - -.pm_toggle { - box-shadow: 0 0 0 1px $extra_color; -} - -// Neutral content box. -.alert.alert-info { - background: rgba($extra_color, 0.7); - color: $text_color; -} - -// Warning content box. -.alert.alert-warning { - background: rgba($warning_color, 0.7); - color: $text_color; -} - -// Delete account button. -.pm_button.error:focus, .pm_button.error:hover { - background-color: rgba($danger_color, 1); - border-color: rgba($danger_color, 0.7); -} - -.pm_button.error { - background-color: rgba($danger_color, 0.7); - border-color: rgba($danger_color, 1); -} - - -// Small icons in settings. -html.protonmail .text-purple, -.settingsUsers-link-signatures { - color: $highlight !important; -} - -html.protonmail .text-red { - color: $danger_color !important; -} - -// Links -.pm_button.link { - color: $text_color !important; -} - -// Topup link. -.overviewSection-container .topUp-button { - color: $highlight; -} - -// Current plan header and container. -.settingsDashboard-plans [class*="Column-container"] .isCurrent { - background: $base; - box-shadow: 0 0 8px $base,0 0 0 2px $base; - border-bottom: 1px solid $base; -} - -.settingsDashboard-plans.free-active .freeColumn-container, -.settingsDashboard-plans.plus-active .plusColumn-container, -.settingsDashboard-plans.professional-active .professionalColumn-container, -.settingsDashboard-plans.visionary-active .visionaryColumn-container { - border-color: $base; - box-shadow: 0 0 8px $base,0 0 0 2px $base; -} - -// Plans and prices arrow controls. -[class*="settingsDashboard-arrowToScroll"] .arrowsToScroll-button { - background: rgba($highlight, 0.7); -} - -[class*="settingsDashboard-arrowToScroll"] .arrowsToScroll-button:hover { - background: rgba($highlight, 1); -} - -// Plans and prices VPN buttons. -.vpnRow-add { - background-color: rgba($highlight, 0.7); -} - -.vpnRow-add:hover { - background: rgba($highlight, 1); -} - -// Plans and prices - prices. -.settingsDashboard-plans .freeColumn-free, -.totalRows-monthly-price, -.totalRows-yearly-price { - color: $text_color; -} - -// Plans and prices - Discount triangle. -.totalRows-discount { - border-color: transparent $highlight; -} - -// Modal color. -.pm_modal .modal-dialog { - border-color: $base; -} - -// Modal close button. -.pm_modal .modal-dialog .close { - color: $navigation; - background: $base; -} - -// Address badges link -.pm_badge { - color: $navigation; -} - -// Address default badge. -.pm_badge.primary { - background: $base; - color: $navigation; -} - -// Address enalbled badge. -.pm_badge.success { - background: $highlight; - color: $navigation; -} - -// ================================= \\ -// =========== CONTACTS =========== \\ -// ============ PANEL ============= \\ -// ================================= \\ - -// Contact table headings. -.pm_table table th a, .pm_table table th .fa { - color: $highlight; -} - -// ================================= \\ -// ============= OTHER ============= \\ -// ================================= \\ - -//Top pop up notifications. -body .cg-notify-message.notification-success { - background-color: $highlight; - color: $navigation; -} - -// ================================= \\ -// ============= MOBILE ============ \\ -// ============ SPECIFIC =========== \\ -// ================================= \\ - -// Mobile navigation. -.appConfigBody-is-mobile .sidebarApp-container { - background: $base; -} |
