From 9ea943e0a271e8a81e8d84e697e2a836d6832287 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Mauricio=20S=C3=A1nchez?= Date: Thu, 24 Dec 2015 13:13:12 -0500 Subject: [PATCH] Added new color variables to the theme editor --- .../stylesheets/utils/_colors.import.less | 41 +++++++++---------- packages/rocketchat-theme/i18n/en.i18n.json | 9 +++- .../rocketchat-theme/server/variables.coffee | 8 ++++ 3 files changed, 36 insertions(+), 22 deletions(-) mode change 100644 => 100755 packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less mode change 100644 => 100755 packages/rocketchat-theme/i18n/en.i18n.json mode change 100644 => 100755 packages/rocketchat-theme/server/variables.coffee diff --git a/packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less b/packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less old mode 100644 new mode 100755 index 7bdb7b45f75..13141a7836e --- a/packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less +++ b/packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less @@ -123,7 +123,7 @@ blockquote { } html { - .custom-scroll(transparent, rgba(255, 255, 255, 0.05), 3px); + .custom-scroll(transparent, @custom-scrollbar-color, 3px); } body { @@ -212,9 +212,8 @@ label.required:after { // new layout buttons .button { - background-color: #FFF; color: rgba(255, 255, 255, 0.85); - background-color: lighten(desaturate(@primary-background-color, 15%), 12.5%); + background-color: @action-buttons-color; &:before { background-color: rgba(0, 0, 0, 0.1); } @@ -237,7 +236,7 @@ label.required:after { background-color: #02acec; } &.clean { - background-color: rgba(0, 0, 0, 0.025); + background-color: @clean-buttons-color; } &.facebook { background-color: #325c99; @@ -328,7 +327,7 @@ a.github-fork { .info { background-color:@primary-background-color; h4 { - color: rgba(255, 255, 255, 0.65); + color: fade( @quaternary-font-color, 65% ); } &.status-offline { .thumb:after { @@ -384,29 +383,29 @@ a.github-fork { border-color: #9f0030; background-color: #D30230; } - } + } } span.soon { color: #aaa; } a { - color: rgba(255, 255, 255, 0.5); + color: fade( @quaternary-font-color, 50% ); border-bottom-color: darken(@primary-background-color, 2%); &:hover { background-color: darken(@primary-background-color, 2%); - color: rgba(255, 255, 255, 0.75); + color: fade( @quaternary-font-color, 75% ); } } } &.active .info, .info:hover { h4 { - color: rgba(255, 255, 255, 0.85); + color: fade(@quaternary-font-color, 85% ); } } .hover & { .info h4 { - color: rgba(255, 255, 255, 0.85); + color: fade(@quaternary-font-color, 85% ); } } } @@ -416,7 +415,7 @@ a.github-fork { //background-color: @primary-background-color; background-color: transparent; color: @tertiary-font-color; - .custom-scroll(transparent, rgba(255, 255, 255, 0.05)); + .custom-scroll(transparent, @custom-scrollbar-color); header { background-color: @primary-background-color; } @@ -424,7 +423,7 @@ a.github-fork { background-color: @primary-background-color; } .content { - .custom-scroll(transparent, rgba(255, 255, 255, 0.05)); + .custom-scroll(transparent, @custom-scrollbar-color); background-color: @primary-background-color; } .input-line { @@ -455,7 +454,7 @@ a.github-fork { } .rooms-list { background-color: lighten(@primary-background-color, 2%); - .custom-scroll(transparent, rgba(255, 255, 255, 0.05)); + .custom-scroll(transparent, @custom-scrollbar-color); } .more { color: @tertiary-font-color; @@ -478,7 +477,7 @@ a.github-fork { &:hover { &:before, &:after { - background-color: rgba(255, 255, 255, 0.85); + background-color: fade( @quaternary-font-color, 85% ); } } } @@ -499,7 +498,7 @@ a.github-fork { } } .unread { - background-color: #1dce73; + background-color: @unread-notification-color; color: #FFF; } ul { @@ -515,8 +514,8 @@ a.github-fork { } &.active { a { - background-color: rgba(255, 255, 255, 0.075); - color: rgba(255, 255, 255, 0.75); + background-color: @active-channel-background-color; + color: @active-channel-font-color; } .opt { background-color: transparent; @@ -524,7 +523,7 @@ a.github-fork { } &.has-alert { .name { - color: #ffffff; + color: @quaternary-font-color; } } &.away { @@ -542,14 +541,14 @@ a.github-fork { .opt { background-color: transparent; i { - color: rgba(255, 255, 255, 0.5); + color: fade(@quaternary-font-color, 50% ); &:hover { - color: rgba(255, 255, 255, 0.75); + color: fade(@quaternary-font-color, 75% ); } } } i { - color: rgba(255, 255, 255, 0.35); + color: fade(@quaternary-font-color, 35% ); } input[type=text] { color: #000; diff --git a/packages/rocketchat-theme/i18n/en.i18n.json b/packages/rocketchat-theme/i18n/en.i18n.json old mode 100644 new mode 100755 index ec3bfc800cc..464bbbb1ea3 --- a/packages/rocketchat-theme/i18n/en.i18n.json +++ b/packages/rocketchat-theme/i18n/en.i18n.json @@ -20,5 +20,12 @@ "theme-color-status-offline" : "Offline Status Color", "theme-color-status-online" : "Online Status Color", "theme-color-tertiary-background-color" : "Tertiary Background Color", - "theme-color-tertiary-font-color" : "Tertiary Font Color" + "theme-color-tertiary-font-color" : "Tertiary Font Color", + "theme-color-quaternary-font-color": "Quaternary Font Color", + "theme-color-active-channel-background-color": "Active Channel Background Color", + "theme-color-active-channel-font-color": "Active Channel Font Color", + "theme-color-custom-scrollbar-color": "Custom Scrollbar Color", + "theme-color-action-buttons-color": "Actions Buttons Color", + "theme-color-clean-buttons-color": "Clean Buttons Color", + "theme-color-unread-notification-color": "Unread Notifications Color" } \ No newline at end of file diff --git a/packages/rocketchat-theme/server/variables.coffee b/packages/rocketchat-theme/server/variables.coffee old mode 100644 new mode 100755 index 2ffe15d83d9..e194e55da62 --- a/packages/rocketchat-theme/server/variables.coffee +++ b/packages/rocketchat-theme/server/variables.coffee @@ -5,6 +5,7 @@ RocketChat.theme.addPublicColor "tertiary-background-color", "#EAEAEA" RocketChat.theme.addPublicColor "primary-font-color", "#444444" RocketChat.theme.addPublicColor "secondary-font-color", "#7F7F7F" RocketChat.theme.addPublicColor "tertiary-font-color", "rgba(255, 255, 255, 0.6)" +RocketChat.theme.addPublicColor "quaternary-font-color", "#FFF" RocketChat.theme.addPublicColor "input-font-color", "rgba(255, 255, 255, 0.85)" RocketChat.theme.addPublicColor "link-font-color", "#008CE3" RocketChat.theme.addPublicColor "info-font-color", "#AAAAAA" @@ -20,3 +21,10 @@ RocketChat.theme.addPublicColor "code-border", "#CCC" RocketChat.theme.addPublicColor "code-color", "#333" RocketChat.theme.addPublicColor "blockquote-background", "#CCC" RocketChat.theme.addPublicColor "message-hover-background-color", "#f9f9f9" +RocketChat.theme.addPublicColor "active-channel-background-color", "rgba(255, 255, 255, 0.075)" +RocketChat.theme.addPublicColor "active-channel-font-color", "rgba(255, 255, 255, 0.75)" +RocketChat.theme.addPublicColor "custom-scrollbar-color", "rgba(255, 255, 255, 0.05)" +RocketChat.theme.addPublicColor "action-buttons-color", "#FFF" +RocketChat.theme.addPublicColor "clean-buttons-color", "rgba(0, 0, 0, 0.025)" +RocketChat.theme.addPublicColor "unread-notification-color", "#1dce73" +