aboutsummaryrefslogtreecommitdiff
path: root/templates/theme_template.scss
diff options
context:
space:
mode:
authorCristiano Almeida <[email protected]>2018-10-14 10:44:38 +0100
committerGitHub <[email protected]>2018-10-14 10:44:38 +0100
commit672971c9393925a62193b51dab14b8120d2488a1 (patch)
treed6ac42ff1dc75cb376a809cf46b40d0ed8e03fac /templates/theme_template.scss
parent2dd82ebe8abd6d61c70be0feb14ebe6fe45c858a (diff)
parent4d432861ab4cabb44cce513df1e4a46cb23f0e9e (diff)
downloadprotonmail-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.scss508
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;
-}