diff --git a/src/Config.css b/src/Config.css index 03c1601..733945a 100644 --- a/src/Config.css +++ b/src/Config.css @@ -1,6 +1,6 @@ .config-ui-header { text-align: center; - top: 0; + top: 3em; position: sticky; } diff --git a/src/Flows.js b/src/Flows.js index 6aa5667..4d4973e 100644 --- a/src/Flows.js +++ b/src/Flows.js @@ -344,7 +344,6 @@ class FlowSidebar extends PureComponent { area_ref={this.reply_ref} on_complete={this.load_replies.bind(this)} /> :
登录后可以回复树洞
} -
) } diff --git a/src/Sidebar.css b/src/Sidebar.css index 6367653..3b1fc15 100644 --- a/src/Sidebar.css +++ b/src/Sidebar.css @@ -23,7 +23,6 @@ top: 0; height: 100%; width: calc(100% - 700px); - padding: 1em; background-color: rgba(255,255,255,.7); z-index: 21; overflow-y: auto; @@ -35,12 +34,30 @@ .sidebar-title { text-shadow: 0 0 3px white; font-weight: bold; + position: fixed; + width: 100%; + top: 0; + line-height: 3em; + padding-left: .5em; + padding-bottom: 1em; + margin-bottom: -1em; + background-image: linear-gradient(top,rgba(255,255,255,.7) 40%,rgba(255,255,255,0) 100%); + pointer-events: none; +} +.sidebar-title a { + pointer-events: initial; +} + +.sidebar-content { + padding: 2em 1em 1em 1em; } @media screen and (max-width: 1300px) { .sidebar { width: 550px; - padding: 1em .5em; + } + .sidebar-content { + padding: 2em .5em 1em .5em; } .sidebar-on .sidebar { left: calc(100% - 550px); diff --git a/src/Sidebar.js b/src/Sidebar.js index 9bbf3aa..7732c94 100644 --- a/src/Sidebar.js +++ b/src/Sidebar.js @@ -6,11 +6,13 @@ export function Sidebar(props) {
-

+

   {props.title} -

- {props.content} +
+
+ {props.content} +
); diff --git a/src/UserAction.css b/src/UserAction.css index 620c41b..aca6ff6 100644 --- a/src/UserAction.css +++ b/src/UserAction.css @@ -10,7 +10,7 @@ } .reply-sticky { position: sticky; - bottom: 0; + bottom: 1em; } .reply-form textarea {