From 0db65a3046aef5c36976bbe3a05bf1fc5c21a4e9 Mon Sep 17 00:00:00 2001 From: Ruben Daniels Date: Mon, 28 Sep 2015 12:02:50 -0700 Subject: [PATCH] Preference Page Styling --- .../themes/default-dark-gray.less | 2 +- .../themes/default-dark.less | 2 +- .../themes/default-flat-dark.less | 46 +++++++++---------- .../themes/default-flat-light.less | 2 +- .../themes/default-light-gray.less | 2 +- .../themes/default-light.less | 2 +- .../themes/flat-dark.less | 46 +++++++++++++++++++ plugins/c9.ide.preferences/preferences.css | 2 +- 8 files changed, 75 insertions(+), 29 deletions(-) diff --git a/plugins/c9.ide.layout.classic/themes/default-dark-gray.less b/plugins/c9.ide.layout.classic/themes/default-dark-gray.less index c889ee4b..18a8bf62 100644 --- a/plugins/c9.ide.layout.classic/themes/default-dark-gray.less +++ b/plugins/c9.ide.layout.classic/themes/default-dark-gray.less @@ -1127,7 +1127,7 @@ @preference-menu-button-icon-top: 0; @preference-menu-button-icon-height: auto; -@preferences-nav-border-color: lighten(#232323, @lighten-chrome); +@preferences-nav-border: 1px solid lighten(#232323, @lighten-chrome); @preferences-nav-background: lighten(#303030, @lighten-chrome) url("@{image-path}/c9-noise.png"); @preferences-nav-shadow-color: lighten(rgba(255, 255, 255, 0.03), @lighten-chrome); @preferences-nav-main-color: lighten(#AAAAAA, @lighten-chrome); diff --git a/plugins/c9.ide.layout.classic/themes/default-dark.less b/plugins/c9.ide.layout.classic/themes/default-dark.less index c2476d25..4242b761 100644 --- a/plugins/c9.ide.layout.classic/themes/default-dark.less +++ b/plugins/c9.ide.layout.classic/themes/default-dark.less @@ -1127,7 +1127,7 @@ @preference-menu-button-icon-top: 0; @preference-menu-button-icon-height: auto; -@preferences-nav-border-color: lighten(#232323, @lighten-chrome); +@preferences-nav-border: 1px solid lighten(#232323, @lighten-chrome); @preferences-nav-background: lighten(#303030, @lighten-chrome) url("@{image-path}/c9-noise.png"); @preferences-nav-shadow-color: lighten(rgba(255, 255, 255, 0.03), @lighten-chrome); @preferences-nav-main-color: lighten(#AAAAAA, @lighten-chrome); diff --git a/plugins/c9.ide.layout.classic/themes/default-flat-dark.less b/plugins/c9.ide.layout.classic/themes/default-flat-dark.less index 421a1878..5a492f48 100644 --- a/plugins/c9.ide.layout.classic/themes/default-flat-dark.less +++ b/plugins/c9.ide.layout.classic/themes/default-flat-dark.less @@ -812,8 +812,8 @@ @spinner-color: darken(#e0e3e8, @darken-chrome); @spinner-plus: "spinner_plus_dark.png"; @spinner-min: "spinner_min_dark.png"; -@spinner-background: darken(#FFF, @darken-chrome); -@spinner-border-color: darken(#1c1c1c, @darken-chrome); +@spinner-background: darken(#323232, @darken-chrome); +@spinner-border-color: darken(#323232, @darken-chrome); @spinner-focus-border-color: darken(#1c1c1c, @darken-chrome); @spinner-focus-box-shadow: none; @spinner-button-hover-background: darken(rgba(0,0,0,0.1), @darken-chrome); @@ -822,7 +822,7 @@ @textarea-line-height: 18px; @textarea-padding: 10px; @textarea-border-radius: 4px; -@textarea-gradient: linear-gradient(center, white 50%, white 100%); +@textarea-gradient: linear-gradient(center, #323232 50%, #323232 100%); @textarea-box-shadow: none; @textarea-font-family: @general-font-family; @textarea-font-size: 12px; @@ -1127,7 +1127,7 @@ @preference-menu-button-icon-top: 7px; @preference-menu-button-icon-height: 25px; -@preferences-nav-border-color: darken(#1c1c1c, @darken-chrome); +@preferences-nav-border: 0px solid darken(#3f3f3f, @darken-chrome); @preferences-nav-background: darken(#303130, @darken-chrome); @preferences-nav-shadow-color: transparent; @preferences-nav-main-color: darken(#e0e3e8, @darken-chrome); @@ -1144,20 +1144,20 @@ @preferences-nav-sub-color: darken(#e0e3e8, @darken-chrome); @preferences-sub-border-bottom: 0; @preferences-nav-font-weight: bold; -@preferences-nav-link-color: darken(#555, @darken-chrome); -@preferences-nav-link-hover-background: darken(rgba(0, 0, 0, 0.07), @darken-chrome); -@preferences-nav-link-active-color: darken(#197AD1, @darken-chrome); +@preferences-nav-link-color: darken(#8E8E8E, @darken-chrome); +@preferences-nav-link-hover-background: @selected-background; +@preferences-nav-link-active-color: @highlight-color; @preferences-text-shadow: none; -@preferences-background: darken(#303130, @darken-chrome); -@preferences-border-top-color: darken(#1c1c1c, @darken-chrome); +@preferences-background: darken(#3f3f3f, @darken-chrome); +@preferences-border-top-color: transparent; @preferences-border-top-color-light: transparent; @preferences-border-bottom-color: transparent; @preferences-header-color: darken(#e0e3e8, @darken-chrome); @preferences-header-padding: 20px; @preferences-header-font-size: 16px; -@preferences-header-background: @preferences-background; -@preferences-header-border-top-color: darken(#1c1c1c, @darken-chrome); +@preferences-header-background: darken(#303130, @darken-chrome);; +@preferences-header-border-top-color: transparent; @preferences-header-border-bottom-color: @preferences-header-border-top-color; @preferences-form-border-bottom-color: @preferences-header-border-bottom-color; @preferences-form-label-color: darken(#e0e3e8, @darken-chrome); @@ -1201,7 +1201,7 @@ @preferences-intro-icon-width: 26px; @preferences-intro-icon-height: 26px; @preferences-intro-text-margin: 0 0 8px 47px; -@preferences-intro-link-color: darken(#739b59, @darken-chrome); +@preferences-intro-link-color: @highlight-color; @preferences-intro-hint-color: darken(#7b7b7b, @darken-chrome); @preferences-intro-hint-text-shadow: none; @preferences-intro-border-bottom-color: @preferences-form-border-bottom-color; @@ -1230,20 +1230,20 @@ @dropdown-black-font-family: @general-font-family; @dropdown-black-font-size: 13px; @dropdown-black-button-width: 24px; -@dropdown-black-color: darken(#e0e3e8, @darken-chrome); -@dropdown-black-selected-color: @selected-focus-background; -@dropdown-black-border-color: darken(#1c1c1c, @darken-chrome); -@dropdown-black-background: darken(#FFF, @darken-chrome); -@dropdown-black-divider-left: darken(#DDD, @darken-chrome); +@dropdown-black-color: darken(#c0dabe, @darken-chrome); +@dropdown-black-selected-color: darken(#D8FC68, @darken-chrome); +@dropdown-black-border-color: transparent; +@dropdown-black-background: darken(#323232, @darken-chrome); +@dropdown-black-divider-left: darken(#3f3f3f, @darken-chrome); @dropdown-black-divider-right: transparent; @dropdown-black-box-shadow: none; @dropdown-black-container-shadow: none; -@dropdown-black-gradient-start: darken(#FFF, @darken-chrome); -@dropdown-black-gradient-stop: darken(#FFF, @darken-chrome); -@dropdown-black-hover-gradient-start: darken(#F6F6F6, @darken-chrome); -@dropdown-black-hover-gradient-stop: darken(#F6F6F6, @darken-chrome); -@dropdown-black-active-gradient-start: darken(#FFF, @darken-chrome); -@dropdown-black-active-gradient-stop: darken(#FFF, @darken-chrome); +@dropdown-black-gradient-start: darken(#323232, @darken-chrome); +@dropdown-black-gradient-stop: darken(#323232, @darken-chrome); +@dropdown-black-hover-gradient-start: darken(#2F2F2F, @darken-chrome); +@dropdown-black-hover-gradient-stop: darken(#2F2F2F, @darken-chrome); +@dropdown-black-active-gradient-start: darken(#2d2d2d, @darken-chrome); +@dropdown-black-active-gradient-stop: darken(#2d2d2d, @darken-chrome); @dropdown-glossy-list-font-family: @general-font-family; @dropdown-glossy-list-font-size: 12px; diff --git a/plugins/c9.ide.layout.classic/themes/default-flat-light.less b/plugins/c9.ide.layout.classic/themes/default-flat-light.less index 18b8e002..95c5dd70 100644 --- a/plugins/c9.ide.layout.classic/themes/default-flat-light.less +++ b/plugins/c9.ide.layout.classic/themes/default-flat-light.less @@ -1127,7 +1127,7 @@ @preference-menu-button-icon-top: 7px; @preference-menu-button-icon-height: 25px; -@preferences-nav-border-color: darken(#DEDEDE, @darken-chrome); +@preferences-nav-border: 1px solid darken(#DEDEDE, @darken-chrome); @preferences-nav-background: darken(#FBFBFB, @darken-chrome); @preferences-nav-shadow-color: transparent; @preferences-nav-main-color: darken(#333, @darken-chrome); diff --git a/plugins/c9.ide.layout.classic/themes/default-light-gray.less b/plugins/c9.ide.layout.classic/themes/default-light-gray.less index c5572bef..c82f930e 100644 --- a/plugins/c9.ide.layout.classic/themes/default-light-gray.less +++ b/plugins/c9.ide.layout.classic/themes/default-light-gray.less @@ -1127,7 +1127,7 @@ @preference-menu-button-icon-top: 0; @preference-menu-button-icon-height: auto; -@preferences-nav-border-color: darken(#C0C0C0, @darken-chrome); +@preferences-nav-border: 1px solid darken(#C0C0C0, @darken-chrome); @preferences-nav-background: darken(#E0E0E0, @darken-chrome); @preferences-nav-shadow-color: darken(rgba(255, 255, 255, 0.03), @darken-chrome); @preferences-nav-main-color: darken(#666, @darken-chrome); diff --git a/plugins/c9.ide.layout.classic/themes/default-light.less b/plugins/c9.ide.layout.classic/themes/default-light.less index cf27da42..cb7b168c 100644 --- a/plugins/c9.ide.layout.classic/themes/default-light.less +++ b/plugins/c9.ide.layout.classic/themes/default-light.less @@ -1127,7 +1127,7 @@ @preference-menu-button-icon-top: 0; @preference-menu-button-icon-height: auto; -@preferences-nav-border-color: darken(#C0C0C0, @darken-chrome); +@preferences-nav-border: 1px solid darken(#C0C0C0, @darken-chrome); @preferences-nav-background: darken(#E0E0E0, @darken-chrome); @preferences-nav-shadow-color: darken(rgba(255, 255, 255, 0.03), @darken-chrome); @preferences-nav-main-color: darken(#666, @darken-chrome); diff --git a/plugins/c9.ide.layout.classic/themes/flat-dark.less b/plugins/c9.ide.layout.classic/themes/flat-dark.less index 5b675b2a..522ef628 100644 --- a/plugins/c9.ide.layout.classic/themes/flat-dark.less +++ b/plugins/c9.ide.layout.classic/themes/flat-dark.less @@ -130,6 +130,52 @@ box-shadow: none; } +.cboffline{ + background: #323232; + border: 1px solid #323232; +} +.cboffline:after{ + background: #dadada; + border: 1px solid #dadada; +} +.cbofflineChecked{ + background: #323232; + border-color: #323232; +} +.cbofflineChecked:after{ + border-color: #97c974; + background-color: #97c974; +} +.cboffline:hover{ + background: #2F2F2F; +} + +.spinner{ + border: 1px solid #323232; + background: #323232; +} + +.spinner .buttons .minus{ + font-size: 16px; + padding: 4px 9px; + color: #767676; + border-right: 1px solid #3f3f3f; +} +.spinner .buttons .plus{ + font-size: 15px; + padding: 4px 7px; + color: #767676; + border-left: 1px solid #3f3f3f; +} +.spinner .buttons .minus:hover{ + background: #2F2F2F; + color: #f07272; +} +.spinner .buttons .plus:hover{ + background: #2F2F2F; + color: #98c878; +} + @media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 1.25dppx) { } \ No newline at end of file diff --git a/plugins/c9.ide.preferences/preferences.css b/plugins/c9.ide.preferences/preferences.css index 74ccdc48..abfc9992 100644 --- a/plugins/c9.ide.preferences/preferences.css +++ b/plugins/c9.ide.preferences/preferences.css @@ -7,7 +7,7 @@ .bar-preferences .navigation{ padding : 15px 0 0 0; - border-right : 1px solid @preferences-nav-border-color; + border-right : @preferences-nav-border; background: @preferences-nav-background; .box-shadow(~"0 1px 0 0 @{preferences-nav-shadow-color} inset");