横版StoryView

HorizontalStoryView.tid

tags: $:/tags/Stylesheet
title: 横版StoryView.tid
type: text/css

/* StoryRiver & Sidebar */
:root {
    --story-river-top: 42px;
    --story-river-bottom: 28px;
    --max-tiddler-width: 800px;
}

@media (min-width: 500px) {
    .tc-story-river {
        left: 0px;
        top: var(--story-river-top);
        padding: 0px;
    }
    .tc-sidebar-scrollable {
        top: var(--story-river-top);
        bottom: 0;
        right: 0;
        padding: 0 0 var(--story-river-bottom) 10px;
    }
    .tc-sidebar-scrollable .tc-site-title, .tc-sidebar-scrollable .tc-site-subtitle, .tc-sidebar-scrollable .tc-page-controls, .tc-sidebar-scrollable .tc-search {
        display: none;
    }
    .tc-tiddler-frame {
        width: 100%;
    }
}

@media (min-width: 800px) {
    .tc-story-river {
        overflow-y: hidden;
        overflow-x: auto;
        white-space: nowrap;
        padding-bottom: 0 !important;
    }
    .tc-tiddler-frame {
        width: var(--max-tiddler-width);
        padding: 0 42px 26px 42px;
        margin-bottom: 0 !important;
        display: inline-block;
        box-sizing: border-box;
        overflow-y: scroll;
        white-space: normal;
        height: calc(100vh - var(--story-river-top));
        vertical-align: top;
    }
    .tc-tiddler-title {
        top: 0 !important;
        padding-top: 28px;
    }
}