update stylesheets

3lang3 · Jul 7, 2017 · 49730d3 · 49730d3
1 parent 618419a
commit 49730d3
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 48 deletions.
diff --git a/src/components/Nav/Nav.css b/src/components/Nav/Nav.css
@@ -9,6 +9,13 @@
     position: relative;
 }
 
+@media screen and (max-width: 1200px) {
+    .nav {
+        margin: 2rem 3rem 3rem;
+        box-shadow: none;
+    }
+}
+
 .navItem {
     padding: .5rem 0;
     font-size: 1.4rem;

diff --git a/src/components/ScreenItem/ScreenItem.css b/src/components/ScreenItem/ScreenItem.css
@@ -8,7 +8,6 @@
     width: 50%;
     float: left;
     box-sizing: border-box;
-    transition: none;
     background: none;
     position: relative;
     margin: 0;
@@ -23,10 +22,10 @@
 
         & li {
             display: block; 
-            float: left;
             color:#999;
             font-size: 1.4rem;
-            padding: 1rem;
+            padding: 0 1rem;
+            text-align: right;
 
             & svg {
                 width: 22px !important;
@@ -67,14 +66,6 @@
             display: flex;
             flex-direction: column;
             justify-content: space-around;
-
-            & span {
-                margin: 0 .75rem;
-                display: inline-block;
-                text-overflow: ellipsis;
-                overflow: hidden;
-                white-space: nowrap;
-            }
         }
 
         & .view {
@@ -106,6 +97,16 @@
 
             & a {
                 text-decoration: none;
+                display: block;
+                line-height: 1em;
+            }
+
+            & span {
+                margin: 0 1rem 0 0;
+                display: inline-block;
+                text-overflow: ellipsis;
+                overflow: hidden;
+                white-space: nowrap;
             }
         }
     }
@@ -128,42 +129,37 @@
             bottom: 0;
         }
     }
+}
 
-    & .itemInfo {
-        position: absolute;
-        top: 0;
-        right: .5%;
-        width: auto;
-        z-index: 1;
+.itemInfo {
+    width: auto;
+    z-index: 1;
+    display: flex;
+    align-items: center;
 
-        & .like {
-            color: #8bc34a !important;
+    & .like {
+        color: #8bc34a !important;
 
-            & svg {
-                color: #8bc34a !important;
-            }
+        & svg {
+            fill: #8bc34a !important;
         }
+    }
 
-        & span {
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            cursor: pointer;
+    & span {
 
-            &:hover {
-                color:#333 !important;
+        &:hover {
+            color:#333 !important;
 
-                & svg {
-                    color:#333 !important;
-                }
+            & svg {
+                color:#333 !important;
             }
         }
+    }
 
-        & svg {
-            color:#999 !important;
-        }
-
+    & svg {
+        color:#999 !important;
     }
+
 }
 
 
diff --git a/src/components/ScreenItem/ScreenItem.jsx b/src/components/ScreenItem/ScreenItem.jsx
@@ -117,20 +117,20 @@ class screenItem extends React.Component {
                         <h3>{item.title}</h3>
                         <h5><Link to={`/categorys/${item.type}`}><span><IconGame /> {smallTitleText} </span><span><IconUser />{item.anchor}</span> <span><ActionEye /> {item.view}</span> </Link></h5>
                     </div>
+                    <section className={styles.itemInfo}>
+                        <ul>
+                            <li onClick={() => this.props.removeItem(item) } >
+                                <span><IconClear/>关闭</span>
+                            </li>
+                            <li data-tip="取消关注" onClick={this.toggleFavorite}>
+                                {favoriteHtml}
+                            </li>
+                        </ul>
+                    </section>
                 </section>
                 <section style={{paddingBottom: `${secHeight/paddBottom}%`}} className={styles.itemIframe} 
                      dangerouslySetInnerHTML={{__html: `<embed allowscriptaccess="always" src="${_url}${id}" allowfullscreen="true"></embed>`}}>
                 </section>
-                <section className={styles.itemInfo}>
-                    <ul>
-                        <li data-tip="取消关注" onClick={this.toggleFavorite}>
-                            {favoriteHtml}
-                        </li>
-                        <li onClick={() => this.props.removeItem(item) } >
-                            <span><IconClear/>关闭</span>
-                        </li>
-                    </ul>
-                </section>
             </section>
         )
     }

diff --git a/src/components/Search/Search.css b/src/components/Search/Search.css
@@ -1,5 +1,4 @@
 .searchBar {
-    position: relative;
     height: 36px;
     width: 20rem;
     bottom: 0;
@@ -39,6 +38,14 @@
     }
 }
 
+@media screen and (max-width: 1200px) {
+    .searchBar {
+        width: 100%;
+        right: 0;
+        bottom: -3rem;
+    }
+}
+
 .scrollBox {
     height: 200px !important;
     max-height: 200px !important;

diff --git a/src/components/Side/Side.css b/src/components/Side/Side.css
@@ -59,7 +59,7 @@
     & p {
         color:#cdcdcd;
         opacity: .5;
-        font-size: .8rem;
+        font-size: 1.3rem;
         margin-bottom: 4rem;
     }