diff --git a/public/content.css b/public/content.css index 6e98a1c5..c53e05c7 100644 --- a/public/content.css +++ b/public/content.css @@ -294,6 +294,10 @@ float: right; } +.sponsorSkipNoticeCloseButton.biggerCloseButton { + padding: 20px; +} + .sponsorSkipMessage { font-size: 14px; font-weight: bold; @@ -302,6 +306,7 @@ margin-top: auto; display: inline-block; margin-right: 10px; + margin-bottom: auto; } .sponsorSkipInfo { diff --git a/src/components/NoticeComponent.tsx b/src/components/NoticeComponent.tsx index c317c0c1..d7307bca 100644 --- a/src/components/NoticeComponent.tsx +++ b/src/components/NoticeComponent.tsx @@ -33,6 +33,7 @@ export interface NoticeProps { zIndex?: number, style?: React.CSSProperties + biggerCloseButton?: boolean; } export interface NoticeState { @@ -151,7 +152,8 @@ class NoticeComponent extends React.Component { {/* Close button */} this.close()}> diff --git a/src/components/SkipNoticeComponent.tsx b/src/components/SkipNoticeComponent.tsx index 6d3c378b..6e8876ff 100644 --- a/src/components/SkipNoticeComponent.tsx +++ b/src/components/SkipNoticeComponent.tsx @@ -188,6 +188,7 @@ class SkipNoticeComponent extends React.Component this.contentContainer().v?.playbackRate} style={noticeStyle} + biggerCloseButton={this.contentContainer().onMobileYouTube} ref={this.noticeRef} closeListener={() => this.closeListener()} smaller={this.state.smaller} @@ -350,13 +351,21 @@ class SkipNoticeComponent extends React.Component 1 || getCategoryActionType(this.segments[0].category) !== CategoryActionType.POI || this.props.unskipTime)) { + + const style: React.CSSProperties = { + marginLeft: "4px", + color: (this.state.actionState === SkipNoticeAction.Unskip) ? this.selectedColor : this.unselectedColor + }; + if (this.contentContainer().onMobileYouTube) { + style.padding = "20px"; + style.minWidth = "100px"; + } + return (