.screen { position: absolute; top: 0px; bottom: 0px; left: 0px; right: 0px; } .column { display: flex; flex-direction: column; // background: yellow; margin: 10px; } .row { display: flex; flex-direction: row; } .stretch { flex-basis: 0; // flex-grow: 1; // flex-shrink: 1; } .fixed { flex-grow: 1; flex-shrink: 1; } .scroll-y { overflow-y: auto; } .scroll-x { overflow-x: auto; } .button { border: 2px; margin: 3px; max-width: 50px; overflow-x: hidden; } img { max-width: 600px; display: block; // overflow-x: auto; } pre { max-width: 650px; // overflow-x: auto; // overflox-y: none; } /* scrolling feeds, threads */\ .scroller { width: 100% } .scroller > * { margin-left: auto; margin-right: auto; } /* --- hypertabs ------- */ .hypertabs__tabs { // width: 1200px overflow-y: hide; } .hypertabs > .row { flex-grow: 0; flex-shrink: 0; margin: 10px; } .hypertabs__tabs > * { max-width: 50px; overflow-x: hidden; margin-right: 5px; } .hypertabs__tab, .hypertabs--selected { background: yellow; max-width: 200px; } /* message id */ input { width: 100px; } /* compose */ .compose { width: 100%; } /* messages */ .message { border: 1px solid black; padding: 5px; background: white; display: block; flex-basis: 0; max-width: 600px; min-width: 300px; } .message > .title > .message_meta { margin-right: 5px; } .message > .title > .avatar { margin-right: 5px; } /* -- suggest box */ .suggest-box > * { background: white; margin: 3px; } .suggest-box{ // display: flex; // flex-direction: row; width: 200px; } .suggest-box .selected { background: yellow; } .suggest-box img { width: 50px; } .suggest-box,.selected img { width: 200px; } /* avatar */ .avatar { display: flex; flex-direction: row; } .avatar img { width: 40px; height: 40px; //display: inline-block; } /* lightbox - used in message-confirm */ .lightbox { overflow: auto; } /* searchprompt */ .searchprompt { position: absolute; } .searchprompt:not(:focus) { opacity: 0; }