apitech
/
Rocket.Chat
mirror of https://github.com/RocketChat/Rocket.Chat
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #1752 from maxsdw/theme-editor

Browse Source 
Added new color variables to the theme editor
pull/1758/head
Gabriel Engel 10 years ago
parent 9699e552ca 9ea943e0a2
commit 47423d9e55
3 changed files with 36 additions and 22 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 39
      packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less
  2. 9
      packages/rocketchat-theme/i18n/en.i18n.json
  3. 8
      packages/rocketchat-theme/server/variables.coffee

39
packages/rocketchat-theme/assets/stylesheets/utils/_colors.import.less vendored
Unescape View File

@ -123,7 +123,7 @@ blockquote {
} }
html { html {
.custom-scroll(transparent, rgba(255, 255, 255, 0.05), 3px); .custom-scroll(transparent, @custom-scrollbar-color, 3px);
} }
body { body {
@ -212,9 +212,8 @@ label.required:after {
// new layout buttons // new layout buttons
.button { .button {
background-color: #FFF;
color: rgba(255, 255, 255, 0.85); color: rgba(255, 255, 255, 0.85);
background-color: lighten(desaturate(@primary-background-color, 15%), 12.5%); background-color: @action-buttons-color;
&:before { &:before {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
} }
@ -237,7 +236,7 @@ label.required:after {
background-color: #02acec; background-color: #02acec;
} }
&.clean { &.clean {
background-color: rgba(0, 0, 0, 0.025); background-color: @clean-buttons-color;
} }
&.facebook { &.facebook {
background-color: #325c99; background-color: #325c99;
@ -328,7 +327,7 @@ a.github-fork {
.info { .info {
background-color:@primary-background-color; background-color:@primary-background-color;
h4 { h4 {
color: rgba(255, 255, 255, 0.65); color: fade( @quaternary-font-color, 65% );
} }
&.status-offline { &.status-offline {
.thumb:after { .thumb:after {
@ -390,23 +389,23 @@ a.github-fork {
color: #aaa; color: #aaa;
} }
a { a {
color: rgba(255, 255, 255, 0.5); color: fade( @quaternary-font-color, 50% );
border-bottom-color: darken(@primary-background-color, 2%); border-bottom-color: darken(@primary-background-color, 2%);
&:hover { &:hover {
background-color: darken(@primary-background-color, 2%); background-color: darken(@primary-background-color, 2%);
color: rgba(255, 255, 255, 0.75); color: fade( @quaternary-font-color, 75% );
} }
} }
} }
&.active .info, &.active .info,
.info:hover { .info:hover {
h4 { h4 {
color: rgba(255, 255, 255, 0.85); color: fade(@quaternary-font-color, 85% );
} }
} }
.hover & { .hover & {
.info h4 { .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: @primary-background-color;
background-color: transparent; background-color: transparent;
color: @tertiary-font-color; color: @tertiary-font-color;
.custom-scroll(transparent, rgba(255, 255, 255, 0.05)); .custom-scroll(transparent, @custom-scrollbar-color);
header { header {
background-color: @primary-background-color; background-color: @primary-background-color;
} }
@ -424,7 +423,7 @@ a.github-fork {
background-color: @primary-background-color; background-color: @primary-background-color;
} }
.content { .content {
.custom-scroll(transparent, rgba(255, 255, 255, 0.05)); .custom-scroll(transparent, @custom-scrollbar-color);
background-color: @primary-background-color; background-color: @primary-background-color;
} }
.input-line { .input-line {
@ -455,7 +454,7 @@ a.github-fork {
} }
.rooms-list { .rooms-list {
background-color: lighten(@primary-background-color, 2%); background-color: lighten(@primary-background-color, 2%);
.custom-scroll(transparent, rgba(255, 255, 255, 0.05)); .custom-scroll(transparent, @custom-scrollbar-color);
} }
.more { .more {
color: @tertiary-font-color; color: @tertiary-font-color;
@ -478,7 +477,7 @@ a.github-fork {
&:hover { &:hover {
&:before, &:before,
&:after { &:after {
background-color: rgba(255, 255, 255, 0.85); background-color: fade( @quaternary-font-color, 85% );
} }
} }
} }
@ -499,7 +498,7 @@ a.github-fork {
} }
} }
.unread { .unread {
background-color: #1dce73; background-color: @unread-notification-color;
color: #FFF; color: #FFF;
} }
ul { ul {
@ -515,8 +514,8 @@ a.github-fork {
} }
&.active { &.active {
a { a {
background-color: rgba(255, 255, 255, 0.075); background-color: @active-channel-background-color;
color: rgba(255, 255, 255, 0.75); color: @active-channel-font-color;
} }
.opt { .opt {
background-color: transparent; background-color: transparent;
@ -524,7 +523,7 @@ a.github-fork {
} }
&.has-alert { &.has-alert {
.name { .name {
color: #ffffff; color: @quaternary-font-color;
} }
} }
&.away { &.away {
@ -542,14 +541,14 @@ a.github-fork {
.opt { .opt {
background-color: transparent; background-color: transparent;
i { i {
color: rgba(255, 255, 255, 0.5); color: fade(@quaternary-font-color, 50% );
&:hover { &:hover {
color: rgba(255, 255, 255, 0.75); color: fade(@quaternary-font-color, 75% );
} }
} }
} }
i { i {
color: rgba(255, 255, 255, 0.35); color: fade(@quaternary-font-color, 35% );
} }
input[type=text] { input[type=text] {
color: #000; color: #000;

9
packages/rocketchat-theme/i18n/en.i18n.json
Unescape View File

@ -20,5 +20,12 @@
"theme-color-status-offline" : "Offline Status Color", "theme-color-status-offline" : "Offline Status Color",
"theme-color-status-online" : "Online Status Color", "theme-color-status-online" : "Online Status Color",
"theme-color-tertiary-background-color" : "Tertiary Background 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"
} }

8
packages/rocketchat-theme/server/variables.coffee
Unescape View File

@ -5,6 +5,7 @@ RocketChat.theme.addPublicColor "tertiary-background-color", "#EAEAEA"
RocketChat.theme.addPublicColor "primary-font-color", "#444444" RocketChat.theme.addPublicColor "primary-font-color", "#444444"
RocketChat.theme.addPublicColor "secondary-font-color", "#7F7F7F" RocketChat.theme.addPublicColor "secondary-font-color", "#7F7F7F"
RocketChat.theme.addPublicColor "tertiary-font-color", "rgba(255, 255, 255, 0.6)" 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 "input-font-color", "rgba(255, 255, 255, 0.85)"
RocketChat.theme.addPublicColor "link-font-color", "#008CE3" RocketChat.theme.addPublicColor "link-font-color", "#008CE3"
RocketChat.theme.addPublicColor "info-font-color", "#AAAAAA" 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 "code-color", "#333"
RocketChat.theme.addPublicColor "blockquote-background", "#CCC" RocketChat.theme.addPublicColor "blockquote-background", "#CCC"
RocketChat.theme.addPublicColor "message-hover-background-color", "#f9f9f9" 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"

Write Preview
Loading…
Cancel
Save