shiori/view/css/stylesheet.css

1 line
5.3 KiB
CSS
Raw Normal View History

2018-02-11 22:00:56 +08:00
.header-link{border-right:1px solid #E5E5E5;color:#000;cursor:pointer;font-size:.9em;line-height:70px;overflow:hidden;padding:0 16px}.header-link:hover{color:#3F51B5}*{border-width:0;box-sizing:border-box;font-family:"Source Sans Pro",sans-serif;margin:0;padding:0;text-decoration:none}#app{background-color:#F5F5F5;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;height:auto;min-height:100vh}#app #header{background-color:#FFF;box-shadow:0 0 3px rgba(0,0,0,0.3);left:0;position:fixed;right:0;top:0;z-index:99;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap}#app #header #logo{border-left:1px solid #E5E5E5;cursor:default;flex-shrink:0;border-right:1px solid #E5E5E5;color:#000;cursor:pointer;font-size:.9em;overflow:hidden;padding:0 16px;line-height:70px;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;font-size:1.5em;font-weight:100;color:#3F51B5}#app #header #logo:hover{color:#3F51B5}#app #header #logo span{margin-right:8px}#app #header #logo:hover{background-color:#F5F5F5}#app #header #search-box{-webkit-box-align:center;align-items:center;border-right:1px solid #E5E5E5;display:-webkit-box;display:flex;-webkit-box-flex:1;flex:1 0;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;padding:16px;width:100%}#app #header #search-box button,#app #header #search-box input{background-color:#FFF;border:1px solid #E5E5E5;color:#000;font-size:.9em;padding:8px}#app #header #search-box button{cursor:pointer;color:#535A60}#app #header #search-box button:hover{color:#F44336}#app #header #search-box input{border-right:0;-webkit-box-flex:1;flex:1 0;padding:8px 16px}#app #main{margin-top:70px;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap}#app #main #new-bookmark{align-self:center;max-width:600px;width:100%;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;margin:32px 8px 20px}#app #main #new-bookmark button,#app #main #new-bookmark input{background-color:#FFF;border:1px solid #E5E5E5;color:#000;font-size:.9em;padding:8px}#app #main #new-bookmark button{cursor:pointer;color:#535A60}#app #main #new-bookmark button:hover{color:#F44336}#app #main #new-bookmark input[type=text]{border-right:0;-webkit-box-flex:1;flex:1 0;padding:8px 16px}#app #main #grid{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row;padding:4px}#app #main #grid>.column{-webkit-box-flex:1;flex:1 0;padding:12px}#app #main #grid>.column>*:not(:last-child){margin-bottom:24px}#app #main #progress-bar{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column;-webkit-box-align:center;align-items:center;padding:32px}#app #main #progress-bar i{color:#6F757A;font-size:3em}#app #main #progress-bar a{color:#3F51B5 !important;font-size:.9em}#app #main #progress-bar a:hover{color:#F44336 !important}.bookmark{background-color:#FFF;border:1px solid #E5E5E5;position:relative}.bookmark .checkbox{z-index:9;right:0;opacity:0;position:absolute;outline:1px solid #E5E5E5;color:#6F757A;background-color:#FFF}.bookmark .checkbox::before{width:32px;line-height:32px;text-align:center;display:block;font-family:"Font Awesome 5 Free";font-weight:900;font-size:.9em;content:"\f00c"}.bookmark .checkbox:hover{color:#F44336 !important}.bookmark .bookmark-image{position:relative;display:block;height:250px;background-position:center;background-repeat:no-repeat;background-size:cover}.bookmark .bookmark-image .bookmark-metadata{position:absolute;top:0;left:0;width:100%;height:100%;padding:16px;-webkit-box-pack:end;justify-content:flex-end;background-color:rgba(0,0,0,0.5);border-bottom:0}.bookmark .bookmark-image .bookmark-metadata .bookmark-time,.bookmark .bookmark-image .bookmark-metadata .bookmark-url{color:white;text-shadow:1px 1px 1px rgba(0,0,0,0.5)}.bookmark .b