MainWindow { height: 100% display: flex flex-direction: column -darwin { div.top { padding-left: 70px span.appTitle { span.title { visibility: visible } } } } -linux, -win32 { (div) { ::-webkit-scrollbar { width: 12px } ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3) border-radius: 10px } ::-webkit-scrollbar-thumb { border-radius: 10px background-color: #2d2c2c /* -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5) */ } } } div.top { display: flex; align-items: center; background: #2d2c2c; padding: 6px; border-bottom: 2px solid #6f74e5; position: relative; z-index: 100 span { input.search { padding: 4px 8px; border-radius: 3px; border: 0 none; background: rgba(0, 0, 0, 0.2); color: #ccc; font-size: 120%; width: 180px; box-shadow: inset 0 0 0px 1px rgba(0,0,0,0.1) :focus { outline: 0; background: #383736; } ::-webkit-input-placeholder { color: #757474 } } } span.history { padding-left: 6px height: 26px; display: inline-block a { cursor: pointer; text-decoration: none !important display: inline-block width: 28px height: 100% border-radius: 3px background: svg(backArrow) no-repeat center opacity: 0.4 -active { opacity: 1 } :hover { background-color: #383736 } } a + a { transform: rotate(180deg) } @svg backArrow { width: 14px height: 14px content: '' path { stroke: #979797 } -active { path { fill: #DDD } } } } span.nav { display: inline-block a { padding: 4px 10px; border-radius: 3px; background: #434141; color: #aaa; font-size: 120%; font-weight: 200; cursor: pointer; margin-left: 8px; text-decoration: none !important :hover { color: black background: #aeaeae } -selected { background: #aeaeae color: black :hover { background: #aeaeae } } -drop { :after { background-image: svg(dropArrow) background-repeat: no-repeat; background-position: center right; width: 10px; height: 14px; display: inline-block; content: ' '; margin-left: 6px; margin-right: -6px; border-left: 1px solid #6e6d6d; padding-left: 5px; margin-bottom: -2px; } } -add { border-color: #498849 background-color: #255D24 text-shadow: 1px 1px 1px #000 color: white :active { background-color: #1F331F !important } :hover { background-color: #356D34 border-color: #4CB54C } } } } span.appTitle { flex: 1; text-align: center; font-size: 20px; color: #ccc; letter-spacing: 1px; font-weight: 200; -webkit-app-region: drag; position: relative span.title { visibility: hidden } div.info { display: block position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: #2d2c2c; margin-top: -3px; opacity: 1; transition: opacity 0.1s; max-height: 25px; padding: 0 10px; font-size: 13px; letter-spacing: 0; [hidden] { opacity: 0 } } } } div.info { a.message { display: block; padding: 10px; background: #deffde; transition: color 0.2s, background-color 0.2s; color: #217720; a.ignore { float: right border-radius: 10px padding: 2px 5px margin-top: -2px :hover { text-decoration: none background: #c0c0c0 color: white } } :hover { text-decoration: none background: #c0ffae } } div.status { padding: 5px background: #7c7c7c color: white (svg) { width: 20px height: 20px } } [hidden] { display: block max-height: 0 animation: none } max-height: 100px box-shadow: 0 0 3px #616161 overflow: hidden transition: 0.5s max-height animation: 0.5s slide-in position: relative z-index: 1 } div.main { flex: 1 position: relative div.view { position: absolute top: 0 bottom: 0 left: 0 right: 0 [hidden] { visibility: hidden } display: flex flex-direction: column div { -webkit-user-select: text } } } div.bottom { position: relative box-shadow: 0 0 3px #222 background: #222 align-items: center display: flex padding: 5px audio { color: #EEE ::-webkit-media-controls-panel { background: transparent } ::-webkit-media-controls-current-time-display { color: inherit } width: 100% } } } @keyframes slide-in { 0% { max-height: 0 } 100% { max-height: 100px } } @svg dropArrow { width: 12px height: 6px content: "" path { fill: #888 } -active { path { fill: #DDD } } }