MainWindow { height: 100% display: flex flex-direction: column -darwin { div.top { padding-left: 70px } } div.top { display: flex; align-items: center; background: #fff; padding: 6px; border-bottom: 2px solid #e4edff; box-shadow: 0 0 3px #7f7f7f; position: relative; z-index: 100 span { input.search { padding: 4px 8px; border-radius: 3px; border: 0 none; background: #ffffff; color: #656565; font-size: 120%; width: 180px; box-shadow: inset 0 0 0px 1px rgba(0,0,0,0.1) :focus { outline: 0; box-shadow: inset 0 0 0px 1px #286bc3 } } } 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: 2px background: svg(backArrow) no-repeat center opacity: 0.4 -active { opacity: 1 } :hover { background-color: #E8E8E8 } } 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: #f3f3f3; color: #656565; font-size: 120%; font-weight: 200; cursor: pointer; margin-left: 8px; text-decoration: none !important :hover { color: black background: #E8E8E8 } -selected { background: #d2d2d2 color: black :hover { background: #d2d2d2 } } -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: #757575; letter-spacing: 1px; font-weight: 200; -webkit-app-region: drag; } } div.info { a.message { display: block; padding: 10px; background: #deffde; transition: color 0.2s, background-color 0.2s; color: #217720; :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 } }