管理画面でCSSを書かなくても背景を設定できるように修正

- .entry-inner:afterの不透明グラデーションの実装を変更 - #globalheader-containerが見づらくなるので背景を不透明の白に設定
fukamachi · Apr 23, 2013 · f730c90 · f730c90
1 parent 5f627d3
commit f730c90
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 34 deletions.
diff --git a/lib/variables.less b/lib/variables.less
@@ -3,4 +3,5 @@
 @horizontal-width: 620px;
 
 // @font-family: 'Trebuchet MS', Arial, Helvetica, 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', '@メイリオ', 'IPA Pゴシック', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
-@font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
+@font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
+@font-color: #000;
diff --git a/writer-compressed.css b/writer-compressed.css
diff --git a/writer.css b/writer.css
@@ -16,6 +16,10 @@ nav,
 section {
   display: block;
 }
+/* ===== GLOBAL HEADER ===== */
+#globalheader-container {
+  background: rgba(255, 255, 255, 0.3);
+}
 /* ===== PAGE CONTAINER ===== */
 #container {
   width: auto;
@@ -98,24 +102,8 @@ section {
   -webkit-writing-mode: vertical-rl;
   -o-writing-mode: vertical-rl;
   font-family: 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho Pro', 'ＭＳ Ｐ明朝', 'MS PMincho', serif;
-}
-:root * > .entry-inner:after {
-  background: #ffffff;
-  background: -webkit-gradient(linear, left top, right top, color-stop(0, #ffffff), color-stop(1, rgba(255, 255, 255, 0)));
-  background: -ms-linear-gradient(left, #ffffff, rgba(255, 255, 255, 0));
-  background: -moz-linear-gradient(left, #ffffff 0%, rgba(255, 255, 255, 0) 100%);
-  background: -o-linear-gradient(rgba(255, 255, 255, 0), #ffffff);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='rgba(255, 255, 255, 0)', endColorstr='#ffffff', GradientType=1);
-  content: '';
-  position: absolute;
-  top: 0;
-  left: -5px;
-  width: 30px;
-  height: 100%;
-}
-:root * > .entry-inner:after,
-:root * > .entry-inner:after x:-moz-any-link {
-  background: none !important;
+  -webkit-background-clip: text;
+  background-image: -webkit-linear-gradient(right, #000000 0, #000000 690px, rgba(0, 0, 0, 0.30000000000000004));
 }
 .entry-inner,
 .entry-inner x:-moz-any-link {
@@ -168,6 +156,7 @@ section {
 .entry-content {
   margin-right: 10px;
   line-height: 1.7;
+  -webkit-text-fill-color: transparent;
 }
 .entry-content .footnote {
   margin-top: 3em;

diff --git a/writer.less b/writer.less
@@ -13,6 +13,11 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
   display: block;
 }
 
+/* ===== GLOBAL HEADER ===== */
+#globalheader-container {
+  background: rgba(255, 255, 255, 0.3);
+}
+
 /* ===== PAGE CONTAINER ===== */
 #container {
   width: auto;
@@ -104,20 +109,8 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
     overflow-x: auto;
     .writing-mode(vertical-rl);
     font-family: @font-family;
-
-    &:after {
-      .gradient-h(#fff, rgba(255, 255, 255, 80), rgba(255, 255, 255, 0));
-      content: '';
-      position: absolute;
-      top: 0;
-      left: -5px;
-      width: 30px;
-      height: 100%;
-
-      &, x:-moz-any-link { // for Firefox
-        background: none !important;
-      }
-    }
+    -webkit-background-clip: text;
+    background-image: -webkit-linear-gradient(right, @font-color 0, @font-color @vertical-width - 30px, fadeout(@font-color, 70%));
   }
 
   &, x:-moz-any-link { // for Firefox
@@ -180,6 +173,7 @@ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav,
 .entry-content {
   margin-right: 10px;
   line-height: 1.7;
+  -webkit-text-fill-color: transparent;
 
   .footnote {
     margin-top: 3em;