shiori/view/css/stylesheet.css

:root{--bg:#EEE;--sidebarBg:#292929;--contentBg:#FFF;--selectedBg:#fcd2cf;--border:#E5E5E5;--color:#232323;--colorLink:#999;--colorSidebar:#FFF;--main:#F44336}.night{--bg:#1F1F1F;--contentBg:#292929;--selectedBg:#300603;--border:#191919;--color:#FFF}.night .yla-dialog{color:var(--color);background-color:var(--bg)}.night .yla-dialog>.yla-dialog__header{background-color:var(--contentBg);border-bottom:1px solid var(--border)}.night .yla-dialog>.yla-dialog__body>input,.night .yla-dialog>.yla-dialog__body>textarea{color:var(--color);border-color:var(--border);background-color:var(--contentBg)}.night .yla-dialog>.yla-dialog__footer{border-color:var(--border)}*{border-width:0;box-sizing:border-box;font-family:"Source Sans Pro",sans-serif;margin:0;padding:0;text-decoration:none;-webkit-hyphens:auto;hyphens:auto}a{cursor:pointer}.spacer{-webkit-box-flex:1;flex:1 0}.noscroll{overflow:hidden}body{overflow-x:hidden}.page{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;background-color:var(--bg);min-width:0;min-height:100vh}.page #sidebar{position:fixed;top:0;left:0;bottom:0;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;flex-shrink:0;background-color:var(--sidebarBg);min-width:0;min-height:0;z-index:10;overflow:auto}.page #sidebar #logo{width:60px;line-height:60px;text-align:center;font-size:2em;color:var(--contentBg);background-color:var(--main);flex-shrink:0}.page #sidebar>a{width:60px;line-height:60px;text-align:center;display:block;color:var(--colorSidebar);flex-shrink:0}.page #sidebar>a>span{display:block;height:0;line-height:0;overflow:hidden}.page #sidebar>a:hover,.page #sidebar>a:focus{background-color:#232323}.page #body{-webkit-box-flex:1;flex:1 0;display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;min-width:0;min-height:0;margin-left:60px}@media (max-width:600px){.page.night #sidebar{border-right-width:0;border-bottom:1px solid var(--border)}.page #sidebar{position:static;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap}.page #sidebar #logo,.page #sidebar .spacer{display:none}.page #sidebar a{margin:auto}.page #body{margin-left:0}}#login-page{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;-webkit-box-align:center;align-items:center;height:100vh;background-color:var(--bg);-webkit-box-pack:center;justify-content:center;padding:16px}#login-page>.error-message{width:100%;max-width:400px;font-size:.9em;background-color:var(--contentBg);border:1px solid var(--border);padding:16px;margin-bottom:16px;text-align:center;color:var(--main)}#login-page #login-box{width:100%;max-width:400px;background-color:var(--contentBg);display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;border:1px solid var(--border)}#login-page #login-box #logo-area{display:-webkit-box;display:flex;-webkit-box-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;padding:16px;border-bottom:1px solid var(--border);flex-shrink:0}#login-page #login-box #logo-area #logo{font-size:3em;font-weight:100;color:var(--main)}#login-page #login-box #logo-area #logo span{margin-right:8px}#login-page #login-box #logo-area #tagline{font-size:.9em;font-weight:500;color:var(--main)}#login-page #login-box #input-area{padding:8px;border-bottom:1px solid var(--border)}#login-page #login-box #input-area .input-field{display:-webkit-box;display:flex;-webkit-box-align:baseline;align-items:baseline;padding:8px}#login-page #login-box #input-area .input-field p{color:var(--color);font-size:.9em;margin-right:16px;min-width:65px}#login-page #login-box #input-area .input-field input{color:var(--color);padding:8px;background-color:var(--contentBg);border:1px solid var(--border);-webkit-box-flex:1;flex:1 0;font-size:.9em}#login-page #login-box #input-area .input-field a{display:block;cursor:pointer;color:var(--color);text-align:center;font-size:.9em;-webkit-box-flex:1;flex:1 0}#login-page #login-box #input-area .input-field a i{margin-right:8px;color:var(--color)}#login-page #login-box #input-area .input-field a:hover,#login-page #login-box #input-area .input-field a:focus{color:var(--main)}#login-page #login-box #button-area{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;padding:16px;-webkit-box-pack:center;justify-content:center}#login-page #login-box #button-area a{color:var(--colorLink);text-transform:uppercase;text-align:center;font-size:.9em;font-weight:600}#login-page #login-box #button-area a:hover,#login-page #login-box #button-area a:focus{color:var(--main)}#index-page .header{background-color:var(--contentBg);border-bottom:1px solid var(--border);display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;color:var(--color);-webkit-box-align:center;align-items:center;min-width:0;min-height:0;overflow:hidden;flex-shrink:0;position:fixed;left:60px;top:0;right:0;z-index:11}#index-page #header input{-webkit-box-flex:1;flex:1 0;line-height:60px;padding:0 16px;min-width:0;font-size:1em;color:var(--color);background-color:var(--contentBg);border-right:1px solid var(--border)}#index-page #header a{width:60px;line-height:60px;text-align:center;color:var(--colorLink);flex-shrink:0}#index-page #header a:hover,#index-page #header a:focus{color:var(--main)}#index-page #batch-edit{height:61px;flex-shrink:0;padding:16px;font-size:.9em}#index-page #batch-edit>*:not(:last-child){margin-right:32px}#index-page #batch-edit p{font-weight:600;-webkit-box-flex:1;flex:1 0}#index-page #batch-edit a{color:var(--colorLink)}#index-page #batch-edit a.disabled{opacity:.5;cursor:default}#index-page #batch-edit a:hover:not(.disabled),#index-page #batch-edit a:focus:not(.disabled){color:var(--main)}#index-page #batch-edit a i{margin-right:6px}#index-page #batch-edit #cancel-edit{color:var(--color);padding:4px;border:1px solid var(--border);border-radius:4px}#index-page #batch-edit #cancel-edit:hover,#index-page #batch-edit #cancel-edit:focus{color:var(--main)}#index-page #batch-edit #cancel-edit i{margin:0}#index-page #grid{display:grid;grid-template-rows:auto;grid-template-columns:repeat(4, 1fr);grid-gap:16px;padding:16px 16px 0;margin-top:60px;position:relative}#index-page #grid .bookmark{display:-webkit-box;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-flow:column nowrap;min-width:0;border:1px solid var(--border);background-color:var(--contentBg);height:100%;position:relative}#index-page #grid .bookmark:hover .bookmark-menu>a,#index-page #grid .bookmark:focus .bookmark-menu>a{display:block}#index-page #grid .bookmark.selected{background-color:var(--selectedBg)}#index-page #grid .bookmark .bookmark-selector{position:absolute;top:0;left:0;width:100%;height:100%;z-index:9}#index-page #grid .bookmark .bookmark-link{display:block;cursor:default}#index-page #grid .bookmark .bookmark-link[href]{cursor:pointer}#index-page #grid .bookmark .bookmark-link[href]:hover .title,#index-page #grid .bookmark .bookmark-link[href]:focus .title{color:var(--main)}#index-page #grid .bookmark .bookmark-link img{width:100%;max-height:13em;object-fit:cover;margin-bottom:8px}#index-page #grid .bookmark .bookmark-link .id{color:var(--color);border:1px solid var(--border);background-color:var(--contentBg);font-size:.7em;font-weight:bold;left:-1px;top:-1px;position:absolute;padding:0 .3em;opacity:.7}#index-page #grid .bookmark .bookmark-link .title{text-overflow:ellipsis;word-wrap:break-word;overflow:hidden;font-size:1.2em;line-height:1.3em;max-height:5.2em;font-weight:600;padding:0 16px;color:var(--color)}#index-page #grid .bookmark .bookmark-link .title:first-child{margin-top:16px}#index-page #grid .bookmark .bookmark-link .excerpt{color:var(--color);margin-top:8px;padding:0 16px;text-overflow:ellipsis;word-wrap:break-word;overflow:hidden;font-size:.9em;line-height:1.5em;max-height:10.5em}#index-page #grid .bookmark .bookmark-tags{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row wrap;margin:4px 0 -4px;padding:0 8px}#index-page #grid .bookmark .bookmark-tags a{margin:4px;padding:4px 8px;font-size:.8em;font-weight:600;border:1px solid var(--border);border-radius:4px;color:var(--colorLink)}#index-page #grid .bookmark .bookmark-tags a:hover,#index-page #grid .bookmark .bookmark-tags a:focus{color:var(--main)}#index-page #grid .bookmark .bookmark-menu{padding:8px 16px 16px;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;min-width:0;min-height:0;-webkit-box-align:center;align-items:center}#index-page #grid .bookmark .bookmark-menu a{color:var(--colorLink);flex-shrink:0;opacity:.8;display:none;font-size:.9em}#index-page #grid .bookmark .bookmark-menu a:not(:last-child){margin-right:12px}#index-page #grid .bookmark .bookmark-menu a:hover,#index-page #grid .bookmark .bookmark-menu a:focus{color:var(--main);opacity:1}@media (max-width:800px){#index-page #grid .bookmark .bookmark-menu a{display:block}#index-page #grid .bookmark .bookmark-menu a:not(:last-child){margin-right:24px}}#index-page #grid .bookmark .bookmark-menu .url{-webkit-box-flex:1;flex:1 0;opacity:1;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:21px}#index-page #grid .pagination-box{grid-column-start:1;grid-column-end:-1;display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap}#index-page #grid .pagination-box a{padding:8px;color:var(--colorLink)}#index-page #grid .pagination-box a:hover,#index-page #grid .pagination-box a:focus{color:var(--main)}#index-page #grid .pagination-box input{width:40px;padding:8px;text-align:center;font-size:.9em;color:var(--color);border:1px solid var(--border);background-color:var(--contentBg);margin:0 8px}#index-page #grid .pagination-box p{font-size:.9em;color:var(--colorLink);line-height:37px;font-weight:600}#index-page #grid .pagination-box p:last-of-type::before{content:"/";margin-right:8px}#index-page #grid #grid-padding{grid-column-start:1;grid-column-end:-1;min-height:1px}#index-page #grid.list{grid-gap:0;grid-template-columns:1fr;max-width:1280px}#index-page #grid.list .pagination-box{margin-top:16px}#index-page #grid.list .pagination-box:first-of-type{margin-top:0;margin-bottom:16px}#index-page #grid.list .bookmark{border-top-width:0;border-bottom-width:1px;padding:16px 24px 16px 100px}#index-page #grid.list .bookmark:nth-child(2){border-top-width:1px}#index-page #grid.list .bookmark .bookmark-link img{position:absolute;top:0;left:0;width:100px;height:100%;margin-bottom:0}#index-page #grid.list .bookmark .bookmark-link .title{margin:0;padding-left:24px;white-space:nowrap}#index-page #grid.list .bookmark .excerpt,#index-page #grid.list .bookmark>.spacer{display:none}#index-page #grid.list .bookmark .bookmark-tags{-webkit-box-ordinal-group:6;order:5;padding-left:16px;padding-right:0;margin-right:-4px}#index-page #grid.list .bookmark .bookmark-menu{padding:4px 0 0 24px;-webkit-box-align:end;align-items:flex-end}#index-page #grid.list #grid-padding{min-height:16px}@media (min-width:2001px){#index-page #grid{grid-template-columns:repeat(6, 1fr)}}@media (max-width:2000px) and (min-width:1601px){#index-page #grid{grid-template-columns:repeat(5, 1fr)}}@media (max-width:1600px) and (min-width:1301px){#index-page #grid{grid-template-columns:repeat(4, 1fr)}}@media (max-width:1300px) and (min-width:1001px){#index-page #grid{grid-template-columns:repeat(3, 1fr)}}@media (max-width:1000px) and (min-width:601px){#index-page #grid{grid-template-columns:repeat(2, 1fr)}}@media (max-width:600px){#index-page #grid{grid-template-columns:1fr}}@media (max-width:600px){#index-page .header{position:static}#index-page #batch-edit>*:not(:last-child){margin-right:32px}#index-page #batch-edit span{display:none}#index-page #grid{margin-top:0}}#cache-page #sidebar #toggle-font{font-weight:600;font-size:1.2em}#cache-page #sidebar #toggle-font.serif{font-family:"Source Serif Pro",serif}#cache-page #body{color:var(--color);overflow-y:auto;-webkit-box-align:center;align-items:center;padding:16px 16px 0}#cache-page #body.serif *{font-family:"Source Serif Pro",serif}#cache-page #body #header{display:grid;grid-template-rows:auto;grid-template-columns:1fr 1fr;width:100%;max-width:840px;grid-gap:12px;margin-bottom:16px;background-color:var(--contentBg);padding:20px;border:1px solid var(--border)}#cache-page #body #header #title{grid-column-start:1;grid-column-end:-1;font-size:40px;font-weight:700;word-break:break-word;-webkit-hyphens:none;hyphens:none}#cache-page #body #header #time{font-size:16px;color:var(--colorLink)}#cache-page #body #header #url{font-size:16px;color:var(--colorLink);text-align:right;justify-self:end}#cache-page #body #header #url:hover,#cache-page #body #header #url:focus{color:var(--main)}@media (max-width:800px){#cache-page #body #header{grid-template-columns:1fr}#cache-page #body #header #url{justify-self:start}}#cache-page #body #content{width:100%;max-width:840px;grid-gap:12px;background-color:var(--contentBg);padding:20px;border:1px solid var(--border)}#cache-page #body #content *{font-size:18px;line-height:180%}#cache-page #body #content *:not(:last-child){margin-bottom:20px}#cache-page #body #content a{color:var(--color);text-decoration:underline}#cache-page #body #content a:hover,#cache-page #body #content a:focus{color:var(--main)}#cache-page #body #content pre,#cache-page #body #content code{font-family:'Ubuntu Mono','Courier New',Courier,monospace}#cache-page #body #content ol,#cache-page #body #content ul{padding-left:16px}#cache-page #body #body-padding{width:100%;min-height:16px}#submit-page{background-color:transparent}#submit-page .yla-dialog__header{text-align:center}#submit-page:not(.iframe){background-color:var(--bg)}#submit-page:not(.iframe) .yla-dialog__overlay{background-color:transparent}#submit-page:not(.iframe) .yla-dialog__overlay .yla-dialog{border:1px solid var(--border)}@media (max-width:800px){.yla-tooltip{display:none}}#dialog-tags .yla-dialog__body{grid-template-columns:1fr 1fr}#dialog-tags .yla-dialog__body a{display:-webkit-box;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;flex-flow:row nowrap;-webkit-box-align:baseline;align-items:baseline}#dialog-tags .yla-dialog__body a span:last-child{font-size:.9em;color:var(--colorLink);margin-left:8px}#dialog-tags .yla-dialog__body a span:last-child::before{content:"(";margin-right:2px}#dialog-tags .yla-dialog__body a span:last-child::after{content:")";margin-left:2px}#dialog-tags .yla-dialog__body a:hover,#dialog-tags .yla-dialog__body a:focus{color:var(--main)}#dialog-options .yla-dialog__body{grid-template-columns:1fr}#dialog-options .yla-dialog__body a{display:block;cursor:pointer;color:var(--color)}#dialog-options .yla-dialog__body a i{margin-right:8px;color:var(--color)}#dialog-options .yla-dialog__body a:hover,#dialog-options .yla-dialog__body a:focus{color:var(--main)}