Merge pull request sony#3 from LambdaScrum/feature/layoutFix

change background bolor in home and edit page.

Garage.csproj

@@ -191,6 +191,7 @@
     </Content>
     <Content Include="app\stylesheets\_face-items.scss" />
     <Content Include="app\stylesheets\_dialog.scss" />
+    <Content Include="app\stylesheets\_variable.scss" />
     <None Include="web.Debug.config">
       <DependentUpon>web.config</DependentUpon>
     </None>

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_FULL_CUSTOM;
         }
 
         section, div {

app/stylesheets/_dialog.scss

@@ -1,4 +1,6 @@
-.common-dialog {
+@import "variable";
+
+.common-dialog {
     text-shadow: none;
 }
 

app/stylesheets/_face-items.scss

@@ -1,4 +1,6 @@
-#face-canvas {
+@import "variable";
+
+#face-canvas {
     position: relative;
     width: 640px;
     height: 1120px;

app/stylesheets/_face-render-experiment.scss

@@ -1,3 +1,5 @@
-#page-face-render-experiment {
+@import "variable";
+
+#page-face-render-experiment {
     padding: 0 20px;
 }

app/stylesheets/_full-custom.scss

@@ -1,4 +1,6 @@
-#page-full-custom {
+@import "variable";
+
+#page-full-custom {
     #main {
         position: relative;
         overflow: overlay;

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_HOME;
         //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_TEXT_MAIN;
+                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_TEXT_MAIN;
+                font-weight: lighter;
             }
 
             #face-pages-area {

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_SPLASH;
 }

app/stylesheets/_variable.scss

@@ -0,0 +1,24 @@
+//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_BLUE_LIGHT_GRAY : #DBDEEF;
+$COLOR_BLACK : #000000;
+$COLOR_WHITE : #FFFFFF;
+$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;