136 lines
9.4 KiB
CSS
136 lines
9.4 KiB
CSS
/* clips site: 2003 Steam / gamedate.org skin on a Streamable layout */
|
|
:root{--body-bg:#3e4637;--light:#4c5844;--lighter:#5a6a50;--bl:#899281;--bd:#292d23;--text:#d8ded3;--dim:#b8c4ad;
|
|
--yel:#c4b550;--link:#b8a040;--sel:#96892d;--well:#2f3529}
|
|
*{box-sizing:border-box;margin:0;padding:0}
|
|
html,body,#app{height:100%}
|
|
body{background:var(--body-bg);color:var(--text);font:13px "Trebuchet MS",Verdana,sans-serif}
|
|
::selection{background:var(--sel);color:#fff}
|
|
a{color:var(--link)}
|
|
button,input{font:inherit;color:inherit}
|
|
.raised{border:1px solid;border-color:var(--bl) var(--bd) var(--bd) var(--bl)}
|
|
.sunken{border:1px solid;border-color:var(--bd) var(--bl) var(--bl) var(--bd)}
|
|
.btn{background:var(--light);color:var(--text);padding:3px 12px;cursor:pointer;border:1px solid;border-color:var(--bl) var(--bd) var(--bd) var(--bl);text-decoration:none;display:inline-block}
|
|
.btn:hover{background:var(--lighter)}
|
|
.btn:active{border-color:var(--bd) var(--bl) var(--bl) var(--bd)}
|
|
.btn.y{background:var(--yel);color:#2b2a10;font-weight:bold;border-color:#e6da8a #6f6620 #6f6620 #e6da8a}
|
|
.btn.y:hover{background:#d2c35c}
|
|
.btn:disabled{opacity:.5;cursor:default}
|
|
input.field{background:var(--well);border:1px solid;border-color:var(--bd) var(--bl) var(--bl) var(--bd);padding:4px 6px;width:100%}
|
|
input.field:focus{outline:1px solid var(--yel)}
|
|
|
|
.shell{display:flex;flex-direction:column;height:100%}
|
|
.topbar{display:flex;align-items:center;gap:8px;padding:4px 8px;background:var(--light);border-bottom:1px solid var(--bd)}
|
|
.logo{display:flex;align-items:center;gap:7px;color:#fff;font-weight:bold;font-size:15px;text-decoration:none}
|
|
.logo i{width:16px;height:16px;background:var(--yel);border:1px solid;border-color:#e6da8a #6f6620 #6f6620 #e6da8a}
|
|
.user{margin-left:auto;position:relative}
|
|
.menu{position:absolute;right:0;top:100%;margin-top:2px;background:var(--light);min-width:140px;z-index:20}
|
|
.menu div{padding:4px 10px;cursor:pointer}
|
|
.menu div:hover{background:var(--sel);color:#fff}
|
|
.burger{display:none}
|
|
.main{display:flex;flex:1;min-height:0}
|
|
.side{width:200px;flex:none;background:var(--light);border-right:1px solid var(--bd);padding:8px}
|
|
.side .item{padding:4px 8px;cursor:pointer}
|
|
.side .item.on{background:var(--lighter);color:var(--yel)}
|
|
.side .lbl{margin-top:16px;font-size:10px;letter-spacing:1px;color:var(--dim)}
|
|
.side .small{font-size:11px;color:var(--dim);margin-top:2px}
|
|
.content{flex:1;overflow:auto;padding:12px 16px}
|
|
.wrap{max-width:1100px;margin:0 auto}
|
|
.wrap:has(.grid){max-width:1500px} /* the library gets more width than the watch page */
|
|
.uploadbar{display:flex;gap:8px;align-items:center;background:var(--light);padding:8px}
|
|
.uploadbar .hint{flex:1;background:var(--well);color:var(--dim);padding:4px 8px}
|
|
h2.count{color:var(--yel);font-size:15px;margin:14px 0 8px;font-weight:normal}
|
|
h2.count span{color:var(--dim)}
|
|
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px} /* 4 across on a laptop, 5 on 1080p */
|
|
.card{background:var(--light);padding:5px;cursor:pointer}
|
|
.card:hover{background:var(--lighter)}
|
|
.thumb{aspect-ratio:16/9;background:var(--well) center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:var(--dim);font-size:22px}
|
|
.card .t{margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
.card .m{font-size:11px;color:var(--dim)}
|
|
.more{text-align:center;margin:14px 0}
|
|
.empty{background:var(--light);min-height:320px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;cursor:pointer}
|
|
.empty .icon{width:72px;height:72px;background:var(--well);display:flex;align-items:center;justify-content:center;font-size:32px;color:var(--yel)}
|
|
.empty .big{font-size:16px}
|
|
.empty .dim{color:var(--dim)}
|
|
.dropping .content{outline:2px dashed var(--yel);outline-offset:-6px}
|
|
.back{margin-bottom:10px}
|
|
.watch video,.watch img{width:100%;max-height:70vh;background:#000;display:block;object-fit:contain}
|
|
.watch h1{color:var(--yel);font-size:18px;font-weight:normal;margin-top:10px;word-break:break-all}
|
|
.watch .info{color:var(--dim);font-size:12px;margin-top:2px}
|
|
.watch .actions{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
|
|
.watch .actions .right{margin-left:auto}
|
|
.watch .link{margin-top:8px;background:var(--well);color:var(--dim);padding:4px 8px;font-size:12px;word-break:break-all}
|
|
.statusbar{display:flex;justify-content:space-between;background:var(--light);border-top:1px solid var(--bd);font-size:10px;color:var(--dim);padding:2px 8px}
|
|
|
|
.overlay{position:fixed;inset:0;background:#0006;display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
|
|
.overlay.clear{background:var(--body-bg)}
|
|
.dlg{background:var(--light);width:360px;max-width:100%}
|
|
.dlg .title{background:var(--lighter);color:#fff;font-size:11px;font-weight:bold;letter-spacing:1px;padding:5px 8px;border-bottom:1px solid var(--bd);text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
.dlg .body{padding:12px}
|
|
.dlg .row{display:flex;gap:6px;justify-content:flex-end;margin-top:12px}
|
|
.dlg label{display:block;font-size:11px;color:var(--dim);margin:8px 0 3px}
|
|
.dlg .msg{font-size:12px;line-height:1.5;word-break:break-word}
|
|
.dlg .err{color:#e8b7a0;font-size:12px;margin-top:8px;min-height:1em}
|
|
.dlg .small{font-size:10px;color:var(--dim)}
|
|
/* Steam 2004 progress bar (VGUI ProgressBar): 8px maize blocks, 4px gaps, 4px inset, lit-from-below well */
|
|
.sbar{height:24px;padding:4px 0;margin:6px 0;overflow:hidden;background:var(--body-bg);
|
|
border:1px solid;border-color:#282e22 #808080 #808080 #282e22}
|
|
.sbar .fill{height:100%;width:0;background:repeating-linear-gradient(90deg,transparent 0 4px,var(--yel) 4px 12px)}
|
|
/* upload dialog as a 3-step install: done steps ticked, the current one lit yellow */
|
|
.dlg.install{width:420px}
|
|
.steps{margin:0 0 10px;font-size:12px}
|
|
.steps div{display:flex;gap:8px;align-items:baseline;padding:3px 0;color:#8a947f}
|
|
.steps div i{font-style:normal;width:14px;text-align:center}
|
|
.steps div .r{margin-left:auto;font-size:11px}
|
|
.steps div.done{color:var(--text)}
|
|
.steps div.done i{color:var(--yel)}
|
|
.steps div.now{color:var(--yel);font-weight:bold}
|
|
.steps div.now .r{font-weight:normal}
|
|
.install .clips{background:var(--well);margin-top:8px;padding:4px 8px;font-size:11px;max-height:120px;overflow:auto}
|
|
.install .clip{display:flex;gap:8px;color:var(--dim);padding:1px 0}
|
|
.install .clip span:first-child{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
|
.install .linkrow{margin-top:8px}
|
|
.install.ready .steps{border-bottom:1px solid var(--bd);box-shadow:0 1px 0 var(--bl);padding-bottom:8px}
|
|
.install .row{margin-top:10px}
|
|
@keyframes shake{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
|
|
.shake{animation:shake .35s}
|
|
/* login screen */
|
|
.login{--bg:#4c5844;--panel:#3e4637;--hi:#889180;--lo:#2b3125;--dim:#a4ad9b;--mark:#445040;
|
|
position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;overflow:hidden;
|
|
background:var(--bg) radial-gradient(rgba(0,0,0,.12) 1px,transparent 1px) 0 0/3px 3px;font:12px/1.4 Tahoma,Verdana,sans-serif}
|
|
@media (prefers-color-scheme:dark){.login{--bg:#434e3c;--mark:#3b4636}}
|
|
.login header{background:var(--panel);display:flex;align-items:center;gap:6px;padding:4px 10px;border-bottom:1px solid var(--lo);box-shadow:0 1px 0 var(--hi);position:relative;z-index:2}
|
|
.login header b{font-size:13px;letter-spacing:.5px}
|
|
.login header span{color:var(--dim);padding:1px 8px}
|
|
.login .sp{flex:1}
|
|
.login .mark{position:absolute;right:-90px;bottom:-60px;width:620px;max-width:90vw;fill:var(--mark);pointer-events:none}
|
|
.login .mark path{fill:var(--bg)}
|
|
.login .mark-word{position:absolute;left:36px;top:70px;font:bold clamp(48px,9vw,120px)/1 Tahoma,Verdana,sans-serif;color:var(--mark);letter-spacing:-2px;pointer-events:none;user-select:none}
|
|
.login main{flex:1;display:flex;align-items:center;justify-content:center;padding:20px;position:relative}
|
|
.login .win{width:340px;max-width:100%;background:var(--panel);position:relative;z-index:2;border:1px solid;border-color:var(--hi) var(--lo) var(--lo) var(--hi)}
|
|
.login .title{background:var(--lo);display:flex;align-items:center;padding:3px 4px 3px 8px;font-weight:bold}
|
|
.login .title i{flex:1;font-style:normal}
|
|
.login .title u{width:16px;height:14px;margin-left:2px;background:var(--panel);text-decoration:none;text-align:center;font:bold 10px/12px Tahoma}
|
|
.login .body{padding:14px 16px 16px}
|
|
.login .brand{display:flex;align-items:center;gap:10px;margin-bottom:14px}
|
|
.login .brand svg{width:34px;height:34px;flex:none}
|
|
.login .brand strong{font-size:22px;letter-spacing:-.5px}
|
|
.login label{display:block;margin:10px 0 3px;color:var(--dim)}
|
|
.login input.field{background:var(--lo);font:13px Tahoma,Verdana,sans-serif;padding:5px 6px;border-color:var(--lo) var(--hi) var(--hi) var(--lo)}
|
|
.login input.field:focus{outline:1px dotted var(--yel);outline-offset:1px}
|
|
.login .err{color:var(--yel);margin-top:10px;min-height:16px}
|
|
.login .row{display:flex;justify-content:flex-end;margin-top:14px}
|
|
.login .btn.y{font:bold 12px Tahoma,Verdana,sans-serif;padding:5px 22px}
|
|
.login .sbar{margin-top:10px}
|
|
@media (max-width:560px){.login .hide{display:none}.login .mark-word{top:50px}}
|
|
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--light);padding:6px 14px;z-index:60}
|
|
|
|
@media (max-width:760px){
|
|
.burger{display:inline-block}
|
|
.side{position:fixed;top:33px;bottom:0;left:0;z-index:30;display:none}
|
|
.side.open{display:block}
|
|
.grid{grid-template-columns:repeat(2,1fr)}
|
|
.content{padding:8px}
|
|
.uploadbar .hint{display:none}
|
|
}
|
|
@media (max-width:440px){.grid{grid-template-columns:1fr}}
|