cyp/app/cyp.css

1 line
14 KiB
CSS
Raw Normal View History

2020-03-11 21:21:04 +08:00
*,*::before,*::after{box-sizing:inherit}html{background-color:var(--fg)}body{margin:0}main{flex:auto;overflow:auto}header,footer{flex:none;z-index:1;box-shadow:var(--box-shadow)}footer{position:relative;overflow:hidden;height:56px}@media (max-width:480px){footer{height:40px}}input,select,button{color:inherit;font:inherit}button{-webkit-appearance:none;-moz-appearance:none;appearance:none;flex-direction:row;align-items:center;flex:none;background-color:transparent;padding:0;border:none;line-height:1;cursor:pointer}button:not([hidden]){display:flex}@media (hover:hover){button:not(:disabled):not(:hover):not(.-thumb){opacity:.9}}select{background-color:transparent;border:1px solid var(--fg);border-radius:4px;padding:2px 4px}@font-face{font-family:"Lato";src:url("font/LatoLatin-Regular.woff2") format("woff2");font-style:normal;font-weight:normal}@font-face{font-family:"Lato";src:url("font/LatoLatin-Bold.woff2") format("woff2");font-style:bold;font-weight:normal}.icon{width:24px}.icon path:not([fill]),.icon polygon:not([fill]),.icon circle:not([fill]){fill:currentColor}.flex-row{flex-direction:row;align-items:center}.flex-row:not([hidden]){display:flex}.flex-column{flex-direction:column}.flex-column:not([hidden]){display:flex}.ellipsis{overflow:hidden;text-overflow:ellipsis}.selectable{border-left:var(--border-width) solid transparent;cursor:pointer}.selectable.selected{border-left-color:var(--primary);background-color:var(--primary-tint)}.item{flex-direction:row;align-items:center;border-left:var(--border-width) solid transparent;cursor:pointer;padding:8px;padding-left:calc(8px - var(--border-width))}.item:not([hidden]){display:flex}.item.selected{border-left-color:var(--primary);background-color:var(--primary-tint)}.item:nth-child(odd){background-color:var(--bg-alt)}.item>.icon{flex:none;margin-right:var(--icon-spacing);filter:drop-shadow(var(--text-shadow))}.item .title{font-size:var(--font-size-large);min-width:0;overflow:hidden;text-overflow:ellipsis}.item button:first-of-type{margin-left:auto}.item button .icon{width:32px}.component header{flex-direction:row;align-items:center;padding:var(--spacing)}.component header:not([hidden]){display:flex}.component header button{font-size:var(--font-size-large);font-weight:bold;overflow:hidden}.component header button .icon{margin-right:var(--icon-spacing)}.component ul{flex-grow:1;overflow:auto;list-style:none;margin:0;padding:0}.component li{flex-direction:row;align-items:center}.component li:not([hidden]){display:flex}.component li .info{flex-grow:1;overflow:hidden}.component li .info .icon{color:var(--primary);margin-right:var(--icon-spacing);filter:drop-shadow(var(--text-shadow))}.component li .info h2{font-size:var(--font-size-large);margin:0}.component li:not(.has-art){padding:8px}.component li button .icon{width:32px}.component li:nth-child(odd){background-color:var(--bg-alt)}#library header{flex-direction:row;align-items:center;padding:var(--spacing)}#library header:not([hidden]){display:flex}#library header button{font-size:var(--font-size-large);font-weight:bold;overflow:hidden}#library header button .icon{margin-right:var(--icon-spacing)}#library ul{flex-grow:1;overflow:auto;list-style:none;margin:0;padding:0}#library li{flex-direction:row;align-items:center}#library li:not([hidden]){display:flex}#library li .info{flex-grow:1;overflow:hidden}#library li .info .icon{color:var(--primary);margin-right:var(--icon-spacing);filter:drop-shadow(var(--text-shadow))}#library li .info h2{font-size:var(--font-size-large);margin:0}#library li:not(.has-art){padding:8px}#library li button .icon{width:32px}#library li:nth-child(odd){background-color:var(--bg-alt)}#library header{white-space:pre}#library .search{order:1}#library .search.open~*{display:none}#library .art img,#library .art .icon{width:64px}#library .art .icon{filter:drop-shadow(var(--text-shadow))}#library .group{cursor:pointer}#library .group h2{font-weight:normal}#library .tiles{display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));grid-gap:2px}#library .tiles li{text-align:center;cursor:pointer;back