Skip to content
This repository has been archived by the owner on Nov 12, 2019. It is now read-only.

Commit

Permalink
Merge pull request #70 from yjlintw/styleupdate
Browse files Browse the repository at this point in the history 
Styleupdate
  • Loading branch information
@yjlintw
yjlintw authored Apr 25, 2017
2 parents 9eef6c4 + 4a66b8b commit 9115b38
Show file tree
Hide file tree
Showing 8 changed files with 361 additions and 73 deletions.
109 changes: 72 additions & 37 deletions assets/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,19 +81,19 @@ body, html, .whole-view {
flex-direction: column; } }

.whole-view.tile.is-ancestor#whole-view {
margin: 22px 0 0; }
margin: 25px 0 0; }

@media only screen and (max-width: 768px) {
#main-view {
display: flex;
margin-top: 50px; } }
margin-top: 60px; } }

@media only screen and (min-width: 769px) {
#main-view {
min-height: 100vh;
flex-shrink: 0;
flex-basis: calc(100% - 50px);
margin-left: 50px; } }
flex-basis: calc(100% - 60px);
margin-left: 60px; } }

/**
* Title Bar
Expand All @@ -103,12 +103,34 @@ body, html, .whole-view {
position: fixed;
z-index: 10000;
width: 100%;
height: 22px;
height: 25px;
top: 0;
-webkit-app-region: drag; }

.titlebar-close,
.titlebar-minimize,
.titlebar-fullscreen {
width: 12px;
height: 12px;
text-indent: -9999px; }

.titlebar-close:hover {
border-color: #ad3934;
background-color: #bf4943; }

.titlebar-minimize:hover {
border-color: #ad7d15;
background-color: #bf9123; }

.titlebar-fullscreen:hover,
.titlebar-maximize:hover {
border-color: #128622;
background-color: #1f9a31; }

/* ---- Side Bar ---- */
.sidebar {
box-shadow: 2px 0px 5px 0px rgba(0, 0, 0, 0.3);
z-index: 99;
-webkit-app-region: drag;
background-color: #1f2b3d; }
@media only screen and (max-width: 768px) {
Expand All @@ -121,20 +143,20 @@ body, html, .whole-view {
top: 0;
transition: top 0.2s; }
.sidebar.float-menu.nav-up {
top: -50px; } }
top: -60px; } }
@media only screen and (min-width: 769px) {
.sidebar {
width: 50px;
width: 60px;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50px;
flex-basis: 60px;
height: 100vh;
flex-direction: column;
position: fixed; } }
.sidebar .entry, .sidebar .convert {
height: 50px;
height: 60px;
flex-grow: 0;
flex-basis: 50px;
flex-basis: 60px;
display: flex;
align-items: center;
justify-content: center;
Expand Down Expand Up @@ -192,7 +214,7 @@ body, html, .whole-view {
justify-content: center; }
@media only screen and (max-width: 768px) {
#search-view .loading-bg {
height: calc(100vh - 50px - 68px); } }
height: calc(100vh - 60px - 68px); } }

#search-view .loading {
width: 2em;
Expand Down Expand Up @@ -232,9 +254,9 @@ body, html, .whole-view {
margin: 5px 0;
padding: 1em;
border-top: none;
border-radius: 3px;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
background-color: #373f4e;
box-shadow: none;
background: transparent;
border-bottom: 1px solid #313e56;
cursor: pointer;
color: #fff; }
.search-result.media .thumb, .favorite-entry.media .thumb {
Expand All @@ -250,6 +272,11 @@ body, html, .whole-view {
color: #fff; }
.search-result.media:hover, .favorite-entry.media:hover {
background-color: #303744; }
.search-result.media.subscribed, .subscribed.favorite-entry.media {
background-color: #373f4e;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
border-bottom: 0px;
border-radius: 3px; }
.search-result.media .content p, .favorite-entry.media .content p {
margin: 10px 0;
font-size: 15px;
Expand Down Expand Up @@ -374,17 +401,18 @@ body, html, .whole-view {
-webkit-user-select: none; }
@media only screen and (max-width: 768px) {
#read-view .middle-panel {
height: calc(100vh - 50px);
height: calc(100vh - 60px);
width: 100vw;
top: 50px; } }
top: 60px; } }
@media only screen and (min-width: 769px) {
#read-view .middle-panel {
height: calc(100vh - 22px);
height: calc(100vh - 25px);
width: 250px;
position: fixed;
overflow-y: auto;
border-left: 1px solid #24272c;
border-right: 1px solid #2d2f33; } }
left: 60px;
z-index: 2;
overflow-x: hidden; } }
#read-view .middle-panel #comic-header {
background-color: #4d5769;
border-bottom: 1px solid #313743;
Expand All @@ -393,37 +421,41 @@ body, html, .whole-view {
@media only screen and (max-width: 768px) {
#read-view .middle-panel #comic-header.float-menu {
position: fixed;
height: 50px;
height: 60px;
width: 100%;
transition: top 0.2s;
top: 50px; }
top: 60px; }
#read-view .middle-panel #comic-header.float-menu.nav-up {
top: -50px; } }
top: -60px; } }
@media only screen and (min-width: 769px) {
#read-view .middle-panel #comic-header {
width: 250px;
position: fixed;
left: 50px;
height: 50px; } }
left: calc($sidebar-widt + 1);
height: 60px;
box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.3);
font-size: 18px; } }
#read-view .middle-panel #comic-header .level-item {
margin: 0; }
#read-view .middle-panel #comic-header .subscribe-btn {
line-height: 1em;
cursor: pointer; }
cursor: pointer;
position: absolute;
right: 15px;
top: 19px; }
#read-view .middle-panel #comic-header .subscribe-btn.subscribed {
color: #ff558d; }
#read-view .middle-panel .loading-bg {
z-index: 10000; }
@media only screen and (max-width: 768px) {
#read-view .middle-panel .loading-bg {
height: calc(100vh - 50px - 68px); } }
height: calc(100vh - 60px - 68px); } }
@media only screen and (min-width: 769px) {
#read-view .middle-panel .loading-bg {
width: 250px;
position: fixed;
height: calc(100vh - 50px);
height: calc(100vh - 60px);
background-color: rgba(0, 0, 0, 0.8);
margin-top: 50px; } }
margin-top: 60px; } }
#read-view .middle-panel .loading-bg .loading {
width: 4em;
height: 4em;
Expand All @@ -433,12 +465,12 @@ body, html, .whole-view {
top: 50%;
left: calc(50% - 2em); }
#read-view .middle-panel #chapter-selector {
margin-top: 50px;
margin-top: 60px;
padding: 0;
color: #cecece; }
@media only screen and (max-width: 768px) {
#read-view .middle-panel #chapter-selector {
height: calc(100vh - 50px*2);
height: calc(100vh - 60px*2);
overflow-y: auto; } }
@media only screen and (min-width: 769px) {
#read-view .middle-panel #chapter-selector {
Expand All @@ -457,10 +489,13 @@ body, html, .whole-view {

#read-view .controlTips {
position: absolute;
left: 310px;
top: calc(22px + 10px);
left: 320px;
top: calc(25px + 10px);
z-index: 99;
width: 160px; }
@media only screen and (max-width: 768px) {
#read-view .controlTips {
display: none; } }
#read-view .controlTips li {
display: block;
width: 50px;
Expand Down Expand Up @@ -499,15 +534,15 @@ body, html, .whole-view {
padding: 0; }
@media only screen and (max-width: 768px) {
#read-view #read-area {
margin-top: 50px;
min-height: calc(100vh - 50px * 2); } }
margin-top: 60px;
min-height: calc(100vh - 60px * 2); } }
@media only screen and (min-width: 769px) {
#read-view #read-area {
margin-left: 250px;
min-height: calc(100vh - 22px); } }
min-height: calc(100vh - 25px); } }
#read-view #read-area .comic-page-container {
margin-bottom: 1em; }
#read-view #read-area .comic-page-container img {
height: calc(100vh - 22px);
height: calc(100vh - 25px);
display: block;
margin: 0 auto; }
Loading

0 comments on commit 9115b38

Please sign in to comment.