Skip to content

Instantly share code, notes, and snippets.

@jim60105
Last active July 12, 2024 16:47
Show Gist options
  • Select an option

  • Save jim60105/486343171d23616770a6a28da4bf9997 to your computer and use it in GitHub Desktop.

Select an option

Save jim60105/486343171d23616770a6a28da4bf9997 to your computer and use it in GitHub Desktop.
改善Twitcasting的垃圾UI介面
/* This program is free software: you can redistribute it and/or modify it under the terms of the GNU General Public License as published by the Free Software Foundation, either version 3 of the License, or (at your option) any later version.
*
* This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details.
*
* You should have received a copy of the GNU General Public License along with this program. If not, see <https://www.gnu.org/licenses/>.
**/
header {
display: flex;
justify-content: center;
background-color: var(--color-header-background);
}
.tw-global-header {
max-width: 98vw;
}
.tw-global-alert {
display: none;
}
.tw-basic-page,
.tw-raw-page {
max-width: 85vw;
}
.tw-movie-show-filter {
font-size: 1rem;
right: 0;
}
.tw-header-toggle-button,
.tw-global-header-secondary {
padding: 0;
}
.tw-user-header {
display: flex;
justify-content: center;
padding-left: var(--tw-page-padding);
padding-right: var(--tw-page-padding);
}
.tw-user-banner {
display: none;
}
.tw-user-nav,
.tw-user-nav2 {
padding: 5px 0 !important;
max-width: 98vw !important;
margin: 0;
display: flex;
flex-direction: row-reverse;
width: 100%;
align-items: center;
height: unset;
}
.tw-user-nav2-primary {
min-width: 295px;
}
.tw-user-nav2-secondary {
margin-right: auto;
margin-left: unset;
justify-content: space-around;
width: 100%;
}
.tw-user-nav2-secondary-item,
.tw-user-nav2-secondary-item>a {
width: 60%;
justify-content: center;
}
.tw-user-nav2-primary>a {
width: 100%;
justify-content: center;
}
.tw-user-nav-info {
float: right;
flex: 0 1 auto;
align-self: unset;
}
.tw-user-nav-icon>img,
.tw-user-nav2-icon>img {
height: 40px;
width: 40px;
}
.tw-user-nav-list {
margin: 1px 0 0;
display: flex;
flex: 2 1 auto;
}
.tw-user-nav-list-count {
margin: 4px 0 0;
padding: 0.125rem 0.5rem;
}
.tw-user-nav2-secondary-item .tw-user-nav-list-count {
margin: 0;
}
.tw-user-nav-list-item>a,
.tw-user-nav-list-item>span {
padding: 0 0.125rem;
flex-direction: column;
}
.tw-user-nav-user-inner {
align-items: center;
}
.tw-player-page-grid-title {
display: none;
}
.tw-comment-list-view {
height: calc(100vh - 10px);
}
.tw-comment-list-view__scroller {
overflow-x: hidden;
width: calc(100% + 17px);
}
.tw-comment-list-view.tw-player-page__comment__list {
height: 100%;
}
#comment-list-app {
height: 86vh;
}
@media only screen and (min-width: 767px) {
.tw-player-page-grid {
grid-template-columns: minmax(375px, 1280px) min(295px);
}
}
@media only screen and (max-width: 767px) {
.tw-user-nav .tw-support-button,
.tw-user-nav .tw-membership-button {
display: none;
}
.tw-user-nav-name {
-webkit-line-clamp: 1;
}
.tw-user-nav-stat>li:not(:last-child),
.tw-user-nav-operations,
.tw-user-nav .tw-support-widget-follow {
margin: 0;
padding: 0;
}
}
@jim60105
Copy link
Copy Markdown
Author

jim60105 commented Jul 22, 2022

OLD

Live

image

一頁看不到影片,還得下拉一點

image

Live History

為什麼兩邊留空?

image

NEW

Live

  • 隱藏上方banner
  • 把頻道資訊放到頁籤的右邊
  • 放大影片尺寸、縮窄聊天室寬度

image

Live History

  • 加寬歷史影片頁籤的版面寬度

image

@jim60105
Copy link
Copy Markdown
Author

jim60105 commented Jul 22, 2022

How to use

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment