g_it/theming
g_it/theming
1
0
Fork 0
Code Activity

Colour changes, removed borders... simplified

Browse source
This commit is contained in:
g 2020-09-15 16:30:30 +02:00
commit dd75d5e9fd
11 changed files with 54 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

18
stylesheets/_colors.less
View file

@ -1,12 +1,12 @@
@theme-color-brand: #1a73e8; @theme-color-brand: #CECCD2;
@theme-color-background-base: #f8f9fa; @theme-color-background-base: #faf9f6;
@theme-color-header-background: #ffffff; @theme-color-header-background: #FAF9F6;
@theme-color-header-text: #5f6368; @theme-color-header-text: #323036;
@theme-color-widget-title-background: #f8f9fa; @theme-color-widget-title-background: transparent;
@theme-color-widget-title-text: #4a4a4a; @theme-color-widget-title-text: #323036;
@theme-color-menu-contrast-text: rgba(0,0,0,0.54); @theme-color-menu-contrast-text: rgba(0, 0, 0, 0.54);
@theme-color-menu-contrast-textActive: #3c4043; @theme-color-menu-contrast-textActive: #828089;
@theme-color-menu-contrast-textSelected: #1a73e8; @theme-color-menu-contrast-textSelected: #ceccd2;
@theme-color-menu-contrast-background: transprent; @theme-color-menu-contrast-background: transprent;

2
stylesheets/_variables.less
View file

@ -1 +1 @@
@theme-fontFamily-base: Arial, Verdana, sans-serif; @theme-fontFamily-base: "Roboto", Helvetica, sans-serif;

7
stylesheets/components/_button.less
View file

@ -1,9 +1,14 @@
.btn, input[type="button"], .button { .btn, input[type="button"], .button {
box-shadow: none; box-shadow: none;
text-decoration: none; text-decoration: none;
text-transform: uppercase;
border: none;
font-weight: bold;
letter-spacing: 1.5em;
&:hover { &:hover {
opacity: 0.8; color: #CECCD2;
box-shadow: none; box-shadow: none;
border: none;
} }
} }

4
stylesheets/components/_card.less
View file

@ -1,8 +1,8 @@
.card { .card {
//box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12); //box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 1px 0 rgba(0, 0, 0, .14), 0 2px 1px -1px rgba(0, 0, 0, .12);
box-shadow: none; box-shadow: none;
border: 1px solid #e6e6e6; border: none;
border-radius: 8px; border-radius: 0px;
.card-content { .card-content {
padding: 5px 20px 20px 20px !important; padding: 5px 20px 20px 20px !important;

2
stylesheets/components/_control.less
View file

@ -1,6 +1,6 @@
#root .borderedControl { #root .borderedControl {
background-color: transparent; background-color: transparent;
border: 1px solid #e6e6e6; //#dadce1; border: none;
box-shadow: none; box-shadow: none;
transition: .2s ease all; transition: .2s ease all;
border-radius: 3px; border-radius: 3px;

2
stylesheets/components/_header.less
View file

@ -2,6 +2,6 @@ nav {
box-shadow: none !important; box-shadow: none !important;
.nav-wrapper { .nav-wrapper {
border-bottom: 1px solid #dadce0; border-bottom: none;
} }
} }

8
stylesheets/components/_menu.less
View file

@ -2,17 +2,17 @@
ul { ul {
& > li > ul > li.active > .item { & > li > ul > li.active > .item {
background-color: #e8f0fe !important; background-color: #E6E6E6 !important;
} }
li { li {
&.active > a { &.active > a {
background-color: #e8eaed !important; background-color: #CECCD2 !important;
} }
a { a {
border-radius: 0 50em 50em 0; border-radius: 0;
font-weight: 500; font-weight: 500;
font-size: 14px; font-size: 14px;
//letter-spacing: .25px; //letter-spacing: .25px;
@ -24,7 +24,7 @@
} }
&:hover { &:hover {
background-color: #dadce1 !important; background-color: #CECCD2 !important;
transition: .2s ease all; transition: .2s ease all;
} }
} }

24
stylesheets/components/_sparkline.less
View file

@ -1,24 +1,24 @@
// sparkline colors // sparkline colors
.sparkline-colors[data-name=backgroundColor] { .sparkline-colors[data-name="backgroundColor"] {
color: white; color: white;
} }
.sparkline-colors[data-name=lineColor] { .sparkline-colors[data-name="lineColor"] {
color: #058DC7; color: #323036;
} }
.sparkline-colors[data-name=minPointColor] { .sparkline-colors[data-name="minPointColor"] {
color: #058DC7 //darken(#058DC7, 10); color: #323036 //darken(#058DC7, 10);
} }
.sparkline-colors[data-name=maxPointColor] { .sparkline-colors[data-name="maxPointColor"] {
color: #058DC7 //darken(#058DC7, 10); color: #323036 //darken(#058DC7, 10);
} }
.sparkline-colors[data-name=lastPointColor] { .sparkline-colors[data-name="lastPointColor"] {
color: white; //hidden color: white; //hidden
} }
.sparkline-colors[data-name=fillColor] { .sparkline-colors[data-name="fillColor"] {
color: lighten(#058DC7, 55); color: lighten(#323036, 55);
} }

4
stylesheets/components/_visitor_log.less
View file

@ -4,6 +4,6 @@
.dataTableVizVisitorLog .card { .dataTableVizVisitorLog .card {
box-shadow: none; box-shadow: none;
border: 1px solid #e6e6e6; border: none;
border-radius: 8px; border-radius: 0px;
} }

10
stylesheets/components/_widget.less
View file

@ -1,5 +1,5 @@
.widget { .widget {
background-color: transparent; background-color: white;
box-shadow: none; box-shadow: none;
border: none !important; border: none !important;
@ -30,12 +30,12 @@
.widgetName { .widgetName {
padding: 0 0 15px 0 !important; padding: 0 0 15px 0 !important;
font-weight: 300; font-weight: 300;
color: #4a4a4a; color: @theme-color-header-text;
} }
} }
.widgetContent { .widgetContent {
background-color: #ffffff; background-color: @theme-color-background-base;
/*border-radius: 2px; /*border-radius: 2px;
border: none; border: none;
padding: 14px; padding: 14px;
@ -43,8 +43,8 @@
padding-top: 15px; padding-top: 15px;
box-shadow: none; box-shadow: none;
border: 1px solid #e6e6e6; border: none;
border-radius: 8px; border-radius: 0px;
overflow: hidden; overflow: hidden;
.dataTable, .card { .dataTable, .card {

18
stylesheets/theme.less
View file

@ -12,15 +12,15 @@
@import "components/_visitor_log"; @import "components/_visitor_log";
@import "components/_widget"; @import "components/_widget";
@theme-color-brand: #1a73e8; @theme-color-brand: #CECCD2;
@theme-color-background-base: #f8f9fa; @theme-color-background-base: #FAF9F6;
@theme-color-header-background: #ffffff; @theme-color-header-background: #FAF9F6;
@theme-color-header-text: #5f6368; @theme-color-header-text: #323036;
@theme-color-widget-title-background: #f8f9fa; @theme-color-widget-title-background: transparent;
@theme-color-widget-title-text: #4a4a4a; @theme-color-widget-title-text: #323036;
@theme-color-menu-contrast-text: rgba(0,0,0,0.54); @theme-color-menu-contrast-text: rgba(0,0,0,0.54);
@theme-color-menu-contrast-textActive: #3c4043; @theme-color-menu-contrast-textActive: #828089;
@theme-color-menu-contrast-textSelected: #1a73e8; @theme-color-menu-contrast-textSelected: #CECCd2;
@theme-color-menu-contrast-background: transprent; @theme-color-menu-contrast-background: transparent;