From 1faebeed0a03cb65e890b2dfd5037213e124d500 Mon Sep 17 00:00:00 2001 From: Sasaki <0000140046@jp.sony.com> Date: Fri, 27 May 2016 16:21:15 +0900 Subject: [PATCH 1/4] change background bolor in home and edit page. - add new scss file for variables - scss files import variable scss files. - change background bolor and main text color in scss files --- Garage.csproj | 1 + app/stylesheets/_base.scss | 7 +++++-- app/stylesheets/_dialog.scss | 4 +++- app/stylesheets/_face-items.scss | 4 +++- app/stylesheets/_face-render-experiment.scss | 4 +++- app/stylesheets/_full-custom.scss | 4 +++- app/stylesheets/_home.scss | 16 ++++++++-------- app/stylesheets/_splash.scss | 6 ++++-- app/stylesheets/_variable.scss | 18 ++++++++++++++++++ 9 files changed, 48 insertions(+), 16 deletions(-) create mode 100644 app/stylesheets/_variable.scss diff --git a/Garage.csproj b/Garage.csproj index 5c211dc6..f0e00e9c 100644 --- a/Garage.csproj +++ b/Garage.csproj @@ -191,6 +191,7 @@ + web.config diff --git a/app/stylesheets/_base.scss b/app/stylesheets/_base.scss index 1ff9de4f..ab02bd39 100644 --- a/app/stylesheets/_base.scss +++ b/app/stylesheets/_base.scss @@ -1,3 +1,5 @@ +@import "variable"; + @font-face { font-family: 'SST W55'; src: url(../res/fonts/regular/8804b8af-432e-44cc-8a34-eda854e2da36.eot); // For IE @@ -47,7 +49,8 @@ body { -moz-user-select: none; -ms-user-select: none; user-select: none; - + + article { .ui-btn, .ui-slider { z-index: 2; @@ -76,7 +79,7 @@ body { } .ui-content { padding: 0; - background-color: rgb(151,152,157); + background-color: $COLOR_BACKGROUND; } section, div { diff --git a/app/stylesheets/_dialog.scss b/app/stylesheets/_dialog.scss index 7fc0b8f2..5eb73d7a 100644 --- a/app/stylesheets/_dialog.scss +++ b/app/stylesheets/_dialog.scss @@ -1,4 +1,6 @@ -.common-dialog { +@import "variable"; + +.common-dialog { text-shadow: none; } diff --git a/app/stylesheets/_face-items.scss b/app/stylesheets/_face-items.scss index 2f6b226a..8b0bb232 100644 --- a/app/stylesheets/_face-items.scss +++ b/app/stylesheets/_face-items.scss @@ -1,4 +1,6 @@ -#face-canvas { +@import "variable"; + +#face-canvas { position: relative; width: 640px; height: 1120px; diff --git a/app/stylesheets/_face-render-experiment.scss b/app/stylesheets/_face-render-experiment.scss index df2cc609..ec7d2c2b 100644 --- a/app/stylesheets/_face-render-experiment.scss +++ b/app/stylesheets/_face-render-experiment.scss @@ -1,3 +1,5 @@ -#page-face-render-experiment { +@import "variable"; + +#page-face-render-experiment { padding: 0 20px; } \ No newline at end of file diff --git a/app/stylesheets/_full-custom.scss b/app/stylesheets/_full-custom.scss index 3f2df244..a7f86763 100644 --- a/app/stylesheets/_full-custom.scss +++ b/app/stylesheets/_full-custom.scss @@ -1,4 +1,6 @@ -#page-full-custom { +@import "variable"; + +#page-full-custom { #main { position: relative; overflow: overlay; diff --git a/app/stylesheets/_home.scss b/app/stylesheets/_home.scss index 9c112b40..960d159e 100644 --- a/app/stylesheets/_home.scss +++ b/app/stylesheets/_home.scss @@ -1,4 +1,6 @@ -#page-home { +@import "variable"; + +#page-home { text-shadow: none; font-family: "Noto Sans CJK JP",'SST W55'; @@ -11,7 +13,7 @@ position:relative; //height: 400px; // tentative overflow-y: hidden; - background-color: rgb(151,152,157); + background-color: $COLOR_BACKGROUND; //box-shadow: 0 0 20px #222; z-index: 1; padding: 0; @@ -28,9 +30,8 @@ .title { text-align: center; - color: white; - font-weight: bold; - text-shadow: 0 0 4px rgba(0,0,0,0.3); + color: $COLOR_MAIN_TEXT; + font-weight: lighter; } #face-pages-area { @@ -110,9 +111,8 @@ .title { text-align: center; - color: white; - font-weight: bold; - text-shadow: 0 0 4px rgba(0,0,0,0.3); + color: $COLOR_MAIN_TEXT; + font-weight: lighter; } #face-pages-area { diff --git a/app/stylesheets/_splash.scss b/app/stylesheets/_splash.scss index e308e958..fe2ab308 100644 --- a/app/stylesheets/_splash.scss +++ b/app/stylesheets/_splash.scss @@ -1,8 +1,10 @@ -#splash { +@import "variable"; + +#splash { position: absolute; left: 0; top: 0; right: 0; bottom: 0; - background-color: black; + background-color: $COLOR_BACKGROUND; } diff --git a/app/stylesheets/_variable.scss b/app/stylesheets/_variable.scss new file mode 100644 index 00000000..2829647e --- /dev/null +++ b/app/stylesheets/_variable.scss @@ -0,0 +1,18 @@ +//SCSS全体で使われる変数 + +//text +$FONT_SIZE_SSS : 12px; +$FONT_SIZE_SS : 14px; +$FONT_SIZE_S : 16px; +$FONT_SIZE_M : 18px; +$FONT_SIZE_L : 20px; +$FONT_SIZE_LL : 24px; +$FONT_SIZE_LLL : 36px; +$TEXT_HEIGHT_DEFAULT : 1.5em; + +//color +$COLOR_MAIN_TEXT : #000000; +$COLOR_ACCENT : #00C588; +$COLOR_BACKGROUND : #DBDEEF; +$COLOR_WHITE : #FFFFFF; +$COLOR_LOW_CONTRAST : #DDDDDD; From 9c0a06eafd2e81d53eb832cb817462c3e1fe4e76 Mon Sep 17 00:00:00 2001 From: Sasaki <0000140046@jp.sony.com> Date: Fri, 27 May 2016 16:35:43 +0900 Subject: [PATCH 2/4] make git ignore file --- .gitignore | 9 +++++++++ 1 file changed, 9 insertions(+) create mode 100644 .gitignore diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000..4b2c3cfd --- /dev/null +++ b/.gitignore @@ -0,0 +1,9 @@ +www/node_modules/ +.sass-cache/ +.tscache/ +bin/ +node_modules/ +obj/ +tests/ +www/app/ +www/ From 62d7b19d2d693af9b3e6ab06fb72390d0b15be93 Mon Sep 17 00:00:00 2001 From: Sasaki <0000140046@jp.sony.com> Date: Fri, 27 May 2016 16:44:55 +0900 Subject: [PATCH 3/4] Revert "add ignore file" This reverts commit 735b7554be0f61dc097836177d3be9a11ae1bac0. --- .gitignore | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 .gitignore diff --git a/.gitignore b/.gitignore deleted file mode 100644 index 4b2c3cfd..00000000 --- a/.gitignore +++ /dev/null @@ -1,9 +0,0 @@ -www/node_modules/ -.sass-cache/ -.tscache/ -bin/ -node_modules/ -obj/ -tests/ -www/app/ -www/ From 6f2ae04ecee78dc8aee85b63a946bffc433b879f Mon Sep 17 00:00:00 2001 From: Sasaki <0000140046@jp.sony.com> Date: Mon, 30 May 2016 13:34:59 +0900 Subject: [PATCH 4/4] rename variables of color in scss. make 2 type naming rules. - one type of naming rule is based on color name (ex. white black - anothoer type of naming rule is based on color role (ex background, text_main --- app/stylesheets/_base.scss | 2 +- app/stylesheets/_home.scss | 6 +++--- app/stylesheets/_splash.scss | 2 +- app/stylesheets/_variable.scss | 14 ++++++++++---- 4 files changed, 15 insertions(+), 9 deletions(-) diff --git a/app/stylesheets/_base.scss b/app/stylesheets/_base.scss index ab02bd39..c2fe193d 100644 --- a/app/stylesheets/_base.scss +++ b/app/stylesheets/_base.scss @@ -79,7 +79,7 @@ body { } .ui-content { padding: 0; - background-color: $COLOR_BACKGROUND; + background-color: $COLOR_BACKGROUND_FULL_CUSTOM; } section, div { diff --git a/app/stylesheets/_home.scss b/app/stylesheets/_home.scss index 960d159e..c3828b4c 100644 --- a/app/stylesheets/_home.scss +++ b/app/stylesheets/_home.scss @@ -13,7 +13,7 @@ position:relative; //height: 400px; // tentative overflow-y: hidden; - background-color: $COLOR_BACKGROUND; + background-color: $COLOR_BACKGROUND_HOME; //box-shadow: 0 0 20px #222; z-index: 1; padding: 0; @@ -30,7 +30,7 @@ .title { text-align: center; - color: $COLOR_MAIN_TEXT; + color: $COLOR_TEXT_MAIN; font-weight: lighter; } @@ -111,7 +111,7 @@ .title { text-align: center; - color: $COLOR_MAIN_TEXT; + color: $COLOR_TEXT_MAIN; font-weight: lighter; } diff --git a/app/stylesheets/_splash.scss b/app/stylesheets/_splash.scss index fe2ab308..837f81e4 100644 --- a/app/stylesheets/_splash.scss +++ b/app/stylesheets/_splash.scss @@ -6,5 +6,5 @@ top: 0; right: 0; bottom: 0; - background-color: $COLOR_BACKGROUND; + background-color: $COLOR_BACKGROUND_SPLASH; } diff --git a/app/stylesheets/_variable.scss b/app/stylesheets/_variable.scss index 2829647e..c746aa8b 100644 --- a/app/stylesheets/_variable.scss +++ b/app/stylesheets/_variable.scss @@ -11,8 +11,14 @@ $FONT_SIZE_LLL : 36px; $TEXT_HEIGHT_DEFAULT : 1.5em; //color -$COLOR_MAIN_TEXT : #000000; -$COLOR_ACCENT : #00C588; -$COLOR_BACKGROUND : #DBDEEF; +$COLOR_BLUE_LIGHT_GRAY : #DBDEEF; +$COLOR_BLACK : #000000; $COLOR_WHITE : #FFFFFF; -$COLOR_LOW_CONTRAST : #DDDDDD; +$COLOR_LIGHT_GREEN : #00C588; +$COLOR_LIGHT_GRADY : #DDDDDD; + +$COLOR_BACKGROUND_SPLASH : $COLOR_BLUE_LIGHT_GRAY; +$COLOR_BACKGROUND_HOME : $COLOR_BLUE_LIGHT_GRAY; +$COLOR_BACKGROUND_FULL_CUSTOM : $COLOR_BLUE_LIGHT_GRAY; + +$COLOR_TEXT_MAIN : $COLOR_BLACK;