1
0
Fork 0
forked from lthn/blockchain

changed color scheme for buttons and tabs

This commit is contained in:
wildkif 2019-04-18 16:55:55 +03:00
parent 60c2d96c73
commit d26fefb74a
8 changed files with 140 additions and 40 deletions

View file

@ -33,6 +33,13 @@ button {
background-color: themed(disabledButtonHoverColor);
}
}
&:focus {
@include themify($themes) {
background-color: themed(disabledButtonFocusColor);
}
}
}
&.blue-button:not(:disabled) {
@ -54,6 +61,13 @@ button {
background-color: themed(blueButtonHoverColor);
}
}
&:focus {
@include themify($themes) {
background-color: themed(blueButtonFocusColor);
}
}
}
&.green-button:not(:disabled) {
@ -69,6 +83,13 @@ button {
background-color: themed(greenButtonHoverColor);
}
}
&:focus {
@include themify($themes) {
background-color: themed(greenButtonFocusColor);
}
}
}
&.turquoise-button:not(:disabled) {
@ -84,6 +105,13 @@ button {
background-color: themed(turquoiseButtonHoverColor);
}
}
&:focus {
@include themify($themes) {
background-color: themed(turquoiseButtonFocusColor);
}
}
}
&.transparent-button {

View file

@ -13,26 +13,31 @@ $themes: (
greenTextColor: #5cda9d,
redTextColor: #fe5252,
blueButtonBackgroundColor: #4db1ff,
blueButtonHoverColor: #60b9ff,
disabledButtonBackgroundColor: #90a4ae,
disabledButtonHoverColor: #9bb0ba,
blueButtonHoverColor: #82d7ff,
blueButtonFocusColor: #59b5fd,
disabledButtonBackgroundColor: #9cadb7,
disabledButtonHoverColor: #b7d1e0,
disabledButtonFocusColor: #a7b9c2,
greenButtonBackgroundColor: #5cda9d,
greenButtonHoverColor: #5ce2a1,
greenButtonHoverColor: #8dfcc6,
greenButtonFocusColor: #62e0b2,
turquoiseButtonBackgroundColor: #4dd0e1,
turquoiseButtonHoverColor: #52d9ea,
turquoiseButtonHoverColor: #87f4f5,
turquoiseButtonFocusColor: #42d5e8,
transparentButtonBorderColor: #2b3644,
inputBackgroundColor: #171e27,
selectHoverColor: rgba(58, 72, 90, 0.5),
selectHoverColor: rgba(58, 69, 85, 0.5),
selectSelectedColor: rgba(43, 54, 68, 0.5),
switchBackgroundColor: #000000,
accountBackgroundColor: rgba(43, 54, 68, 0.5),
accountHoverBackgroundColor: rgba(58, 72, 90, 0.5),
accountHoverBackgroundColor: rgba(58, 69, 85, 0.5),
accountMainTextColor: #e0e0e0,
accountOptionalTextColor: #556576,
accountIndicatorTextColor: #111921,
accountSwitchBackgroundColor: #000000,
accountIndicatorBackgroundColor: #4db1ff,
tabInactiveBackgroundColor: rgba(23, 31, 39, 0.5),
tabHoverBackgroundColor: rgba(58, 69, 85, 0.5),
tableBackgroundColor: #18202a,
messageMyBackgroundColor: #2a3544,
messageBuddyBackgroundColor: #18202a,
@ -47,7 +52,7 @@ $themes: (
),
gray: (
bodyBackgroundColor: #101417,
sidebarBackgroundColor: rgba(23, 25, 27, 0.5),
sidebarBackgroundColor: rgba(28, 30, 33, 0.5),
sidebarBorderColor: #2e3337,
onlineColor: #47cf8d,
offlineColor: #ff5252,
@ -59,26 +64,31 @@ $themes: (
greenTextColor: #47cf8d,
redTextColor: #fe5252,
blueButtonBackgroundColor: #42a5f5,
blueButtonHoverColor: #4dafff,
blueButtonHoverColor: #86d6ff,
blueButtonFocusColor: #5fb6fc,
disabledButtonBackgroundColor: #79848f,
disabledButtonHoverColor: #85909b,
disabledButtonHoverColor: #a1aebb,
disabledButtonFocusColor: #8a959f,
greenButtonBackgroundColor: #47cf8d,
greenButtonHoverColor: #49d993,
greenButtonHoverColor: #7bf6c6,
greenButtonFocusColor: #5cdc9e,
turquoiseButtonBackgroundColor: #3ec5d7,
turquoiseButtonHoverColor: #43cee0,
turquoiseButtonHoverColor: #72edfe,
turquoiseButtonFocusColor: #50d0e1,
transparentButtonBorderColor: #2f3438,
inputBackgroundColor: #292d31,
selectHoverColor: rgba(70, 76, 81, 0.5),
selectHoverColor: rgba(58, 62, 66, 0.5),
selectSelectedColor: rgba(37, 40, 43, 0.5),
switchBackgroundColor: #000000,
accountBackgroundColor: rgba(37, 40, 43, 0.5),
accountHoverBackgroundColor: rgba(70, 76, 81, 0.5),
accountHoverBackgroundColor: rgba(58, 62, 66, 0.5),
accountMainTextColor: #e0e0e0,
accountOptionalTextColor: #565c62,
accountIndicatorTextColor: #1a1a1a,
accountSwitchBackgroundColor: #000000,
accountIndicatorBackgroundColor: #42a5f5,
tabInactiveBackgroundColor: rgba(23, 25, 27, 0.5),
tabInactiveBackgroundColor: rgba(28, 30, 33, 0.5),
tabHoverBackgroundColor: rgba(58, 62, 66, 0.5),
tableBackgroundColor: #25292d,
messageMyBackgroundColor: #30363c,
messageBuddyBackgroundColor: #25292d,
@ -105,13 +115,17 @@ $themes: (
greenTextColor: #46c172,
redTextColor: #ff5252,
blueButtonBackgroundColor: #2c95f1,
blueButtonHoverColor: #379ffa,
blueButtonHoverColor: #5cb3ff,
blueButtonFocusColor: #379ffa,
disabledButtonBackgroundColor: #90a4ae,
disabledButtonHoverColor: #9baeb7,
disabledButtonHoverColor: #aebec6,
disabledButtonFocusColor: #a7b9c2,
greenButtonBackgroundColor: #46c172,
greenButtonHoverColor: #46ca75,
greenButtonHoverColor: #5ad586,
greenButtonFocusColor: #53c77c,
turquoiseButtonBackgroundColor: #26b6c7,
turquoiseButtonHoverColor: #2bbdcf,
turquoiseButtonHoverColor: #52cbd9,
turquoiseButtonFocusColor: #31becf,
transparentButtonBorderColor: #ebebeb,
inputBackgroundColor: #e6e6e6,
selectHoverColor: rgba(240, 240, 240, 0.5),
@ -125,6 +139,7 @@ $themes: (
accountSwitchBackgroundColor: #ffffff,
accountIndicatorBackgroundColor: #ffffff,
tabInactiveBackgroundColor: rgba(224, 224, 224, 0.5),
tabHoverBackgroundColor: #ffffff,
tableBackgroundColor: #ffffff,
messageMyBackgroundColor: #fff,
messageBuddyBackgroundColor: #ededed,

View file

@ -76,6 +76,13 @@ app-wallet {
background-color: themed(contentBackgroundColor);
}
}
&:hover:not(.active) {
@include themify($themes) {
background-color: themed(tabHoverBackgroundColor);
}
}
}
}

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -33,6 +33,13 @@ button {
background-color: themed(disabledButtonHoverColor);
}
}
&:focus {
@include themify($themes) {
background-color: themed(disabledButtonFocusColor);
}
}
}
&.blue-button:not(:disabled) {
@ -54,6 +61,13 @@ button {
background-color: themed(blueButtonHoverColor);
}
}
&:focus {
@include themify($themes) {
background-color: themed(blueButtonFocusColor);
}
}
}
&.green-button:not(:disabled) {
@ -69,6 +83,13 @@ button {
background-color: themed(greenButtonHoverColor);
}
}
&:focus {
@include themify($themes) {
background-color: themed(greenButtonFocusColor);
}
}
}
&.turquoise-button:not(:disabled) {
@ -84,6 +105,13 @@ button {
background-color: themed(turquoiseButtonHoverColor);
}
}
&:focus {
@include themify($themes) {
background-color: themed(turquoiseButtonFocusColor);
}
}
}
&.transparent-button {

View file

@ -13,26 +13,31 @@ $themes: (
greenTextColor: #5cda9d,
redTextColor: #fe5252,
blueButtonBackgroundColor: #4db1ff,
blueButtonHoverColor: #60b9ff,
disabledButtonBackgroundColor: #90a4ae,
disabledButtonHoverColor: #9bb0ba,
blueButtonHoverColor: #82d7ff,
blueButtonFocusColor: #59b5fd,
disabledButtonBackgroundColor: #9cadb7,
disabledButtonHoverColor: #b7d1e0,
disabledButtonFocusColor: #a7b9c2,
greenButtonBackgroundColor: #5cda9d,
greenButtonHoverColor: #5ce2a1,
greenButtonHoverColor: #8dfcc6,
greenButtonFocusColor: #62e0b2,
turquoiseButtonBackgroundColor: #4dd0e1,
turquoiseButtonHoverColor: #52d9ea,
turquoiseButtonHoverColor: #87f4f5,
turquoiseButtonFocusColor: #42d5e8,
transparentButtonBorderColor: #2b3644,
inputBackgroundColor: #171e27,
selectHoverColor: rgba(58, 72, 90, 0.5),
selectHoverColor: rgba(58, 69, 85, 0.5),
selectSelectedColor: rgba(43, 54, 68, 0.5),
switchBackgroundColor: #000000,
accountBackgroundColor: rgba(43, 54, 68, 0.5),
accountHoverBackgroundColor: rgba(58, 72, 90, 0.5),
accountHoverBackgroundColor: rgba(58, 69, 85, 0.5),
accountMainTextColor: #e0e0e0,
accountOptionalTextColor: #556576,
accountIndicatorTextColor: #111921,
accountSwitchBackgroundColor: #000000,
accountIndicatorBackgroundColor: #4db1ff,
tabInactiveBackgroundColor: rgba(23, 31, 39, 0.5),
tabHoverBackgroundColor: rgba(58, 69, 85, 0.5),
tableBackgroundColor: #18202a,
messageMyBackgroundColor: #2a3544,
messageBuddyBackgroundColor: #18202a,
@ -47,7 +52,7 @@ $themes: (
),
gray: (
bodyBackgroundColor: #101417,
sidebarBackgroundColor: rgba(23, 25, 27, 0.5),
sidebarBackgroundColor: rgba(28, 30, 33, 0.5),
sidebarBorderColor: #2e3337,
onlineColor: #47cf8d,
offlineColor: #ff5252,
@ -59,26 +64,31 @@ $themes: (
greenTextColor: #47cf8d,
redTextColor: #fe5252,
blueButtonBackgroundColor: #42a5f5,
blueButtonHoverColor: #4dafff,
blueButtonHoverColor: #86d6ff,
blueButtonFocusColor: #5fb6fc,
disabledButtonBackgroundColor: #79848f,
disabledButtonHoverColor: #85909b,
disabledButtonHoverColor: #a1aebb,
disabledButtonFocusColor: #8a959f,
greenButtonBackgroundColor: #47cf8d,
greenButtonHoverColor: #49d993,
greenButtonHoverColor: #7bf6c6,
greenButtonFocusColor: #5cdc9e,
turquoiseButtonBackgroundColor: #3ec5d7,
turquoiseButtonHoverColor: #43cee0,
turquoiseButtonHoverColor: #72edfe,
turquoiseButtonFocusColor: #50d0e1,
transparentButtonBorderColor: #2f3438,
inputBackgroundColor: #292d31,
selectHoverColor: rgba(70, 76, 81, 0.5),
selectHoverColor: rgba(58, 62, 66, 0.5),
selectSelectedColor: rgba(37, 40, 43, 0.5),
switchBackgroundColor: #000000,
accountBackgroundColor: rgba(37, 40, 43, 0.5),
accountHoverBackgroundColor: rgba(70, 76, 81, 0.5),
accountHoverBackgroundColor: rgba(58, 62, 66, 0.5),
accountMainTextColor: #e0e0e0,
accountOptionalTextColor: #565c62,
accountIndicatorTextColor: #1a1a1a,
accountSwitchBackgroundColor: #000000,
accountIndicatorBackgroundColor: #42a5f5,
tabInactiveBackgroundColor: rgba(23, 25, 27, 0.5),
tabInactiveBackgroundColor: rgba(28, 30, 33, 0.5),
tabHoverBackgroundColor: rgba(58, 62, 66, 0.5),
tableBackgroundColor: #25292d,
messageMyBackgroundColor: #30363c,
messageBuddyBackgroundColor: #25292d,
@ -105,13 +115,17 @@ $themes: (
greenTextColor: #46c172,
redTextColor: #ff5252,
blueButtonBackgroundColor: #2c95f1,
blueButtonHoverColor: #379ffa,
blueButtonHoverColor: #5cb3ff,
blueButtonFocusColor: #379ffa,
disabledButtonBackgroundColor: #90a4ae,
disabledButtonHoverColor: #9baeb7,
disabledButtonHoverColor: #aebec6,
disabledButtonFocusColor: #a7b9c2,
greenButtonBackgroundColor: #46c172,
greenButtonHoverColor: #46ca75,
greenButtonHoverColor: #5ad586,
greenButtonFocusColor: #53c77c,
turquoiseButtonBackgroundColor: #26b6c7,
turquoiseButtonHoverColor: #2bbdcf,
turquoiseButtonHoverColor: #52cbd9,
turquoiseButtonFocusColor: #31becf,
transparentButtonBorderColor: #ebebeb,
inputBackgroundColor: #e6e6e6,
selectHoverColor: rgba(240, 240, 240, 0.5),
@ -125,6 +139,7 @@ $themes: (
accountSwitchBackgroundColor: #ffffff,
accountIndicatorBackgroundColor: #ffffff,
tabInactiveBackgroundColor: rgba(224, 224, 224, 0.5),
tabHoverBackgroundColor: #ffffff,
tableBackgroundColor: #ffffff,
messageMyBackgroundColor: #fff,
messageBuddyBackgroundColor: #ededed,

View file

@ -76,6 +76,13 @@ app-wallet {
background-color: themed(contentBackgroundColor);
}
}
&:hover:not(.active) {
@include themify($themes) {
background-color: themed(tabHoverBackgroundColor);
}
}
}
}