$primary: #2e2d2b; $accent: #feb453; $divider: #ffffff0d; $text: #e5dfd5; $text2: #ada9a1; $mutedtext: #78756f; $search-height: 56px; $sidebar-width: 286px; $bottom-bar-height: 39px; $info-panel-height: 160px; $content-view-height: calc( 100% - $search-height - $info-panel-height - $bottom-bar-height ); main { width: 100vw; height: 100vh; background-color: $primary; border: 1px solid $divider; display: flex; flex-direction: column; border-radius: 12px; justify-content: space-between; } .container { height: 376px; width: 100%; display: flex; } .results { display: flex; flex-direction: column; padding: 14px 8px; gap: 8px; min-width: 286px; border-right: 1px solid var(--border); .time-separator { font-size: 12px; color: $text2; font-family: SFRoundedSemiBold; padding-left: 8px; } .group { & + .group { margin-top: 16px; } .time-separator { margin-bottom: 8px; } .results-group { display: flex; flex-direction: column; } } .favicon, .image, .icon { width: 18px; height: 18px; } } .right { display: flex; flex-direction: column; width: 100%; } .content { height: 100%; font-family: CommitMono !important; font-size: 12px; letter-spacing: 1; border-radius: 10px; width: 100%; white-space: pre-wrap; word-wrap: break-word; display: flex; flex-direction: column; align-items: center; overflow: hidden; z-index: 2; color: $text; &:not(:has(.image)) { padding: 8px; } span { font-family: CommitMono !important; } .image { width: 100%; height: 100%; object-fit: contain; object-position: center; } } .information { min-height: 160px; width: 100%; border-top: 1px solid $divider; padding: 14px; z-index: 1; display: flex; flex-direction: column; gap: 14px; .title { font-family: SFRoundedSemiBold; font-size: 12px; letter-spacing: 0.6px; color: $text; } .info-content { display: flex; gap: 0; flex-direction: column; .info-row { display: flex; width: 100%; font-size: 12px; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid $divider; line-height: 1; &:last-child { border-bottom: none; padding-bottom: 0; } &:first-child { padding-top: 22px; } p { font-family: SFRoundedMedium; color: $text2; font-weight: 500; flex-shrink: 0; } span { font-family: CommitMono; color: $text; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; margin-left: 32px; } } } }