Skip to content

Commit

Permalink
UI fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@ImprovedTube
ImprovedTube committed Dec 28, 2023
1 parent 30955c9 commit 247b52a
Show file tree
Hide file tree
Showing 13 changed files with 191 additions and 228 deletions.
2 changes: 1 addition & 1 deletion _locales/en/messages.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1128,7 +1128,7 @@
"message": "YouTube limits video quality to 1080p for h.264 codec"
},
"openNewTab": {
"message": "Open in new tab"
"message": "Open in a new tab"
},
"hideVideoTitleFullScreen": {
"message": "Hide video title in fullscreen"
Expand Down
8 changes: 3 additions & 5 deletions js&css/extension/www.youtube.com/styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,16 +49,14 @@ html[it-ads=subscribed_channels] *[target-id*='engagement-panel-ads'],
html[it-ads=subscribed_channels] .ytd-ad-slot-renderer,
html[it-ads=subscribed_channels] yt-mealbar-promo-renderer,
html[it-ads=subscribed_channels] #player .ytp-ad-image-overlay,
html[it-ads=subscribed_channels] #player .video-ads .ytp-ad-player-overlay-flyout-cta,
html[it-ads=subscribed_channels] #player .ytp-ad-module .ytp-ad-player-overlay-flyout-cta,
html[it-ads=block_all] #related #player-ads,
html[it-ads=block_all] #masthead-ad,
html[it-ads=block_all] *[target-id*='engagement-panel-ads'],
html[it-ads=block_all] .ytd-ad-slot-renderer,
html[it-ads=block_all] yt-mealbar-promo-renderer,
html[it-ads=block_all] #player .ytp-ad-image-overlay {
display: none !important;}

html[it-ads=subscribed_channels] #player .video-ads .ytp-ad-player-overlay-flyout-cta,
html[it-ads=subscribed_channels] #player .ytp-ad-module .ytp-ad-player-overlay-flyout-cta,
html[it-ads=block_all] #player .ytp-ad-image-overlay,
html[it-ads=block_all] #player .video-ads .ytp-ad-player-overlay-flyout-cta,
html[it-ads=block_all] #player .ytp-ad-module .ytp-ad-player-overlay-flyout-cta{
display: none !important;}
Expand Down
23 changes: 10 additions & 13 deletions js&css/web-accessible/www.youtube.com/player.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -577,21 +577,19 @@ ImprovedTube.screenshot = function () {

setTimeout(function () {
ctx.drawImage(video, 0, 0, cvs.width, cvs.height);
if(ImprovedTube.storage.embed_subtitle === true){ImprovedTube.currentSubtitle(ctx);}
var subText = '';
var captionElements = document.querySelectorAll('.captions-text .ytp-caption-segment');
captionElements.forEach(function (caption) {subText += caption.textContent.trim() + ' ';});

if(ImprovedTube.storage.embed_subtitle === true){ImprovedTube.renderSubtitle(ctx,captionElements);}

cvs.toBlob(function (blob) {
if (ImprovedTube.storage.player_screenshot_save_as !== 'clipboard') {
var a = document.createElement('a');
a.href = URL.createObjectURL(blob); console.log("screeeeeeenshot tada!");
var subText = '';
if (ImprovedTube.storage.embed_subtitle === true) {
var captionElement = document.querySelectorAll('.captions-text .ytp-caption-segment');
captionElement.forEach(function (caption) {
subText += caption.textContent.trim() + ' ';
});
}

a.download = (ImprovedTube.videoId() || location.href.match) + '-' + new Date(ImprovedTube.elements.player.getCurrentTime() * 1000).toISOString().substr(11, 8).replace(/:/g, '-') + '-' + ImprovedTube.videoTitle() + (subText ? '-' + subText.trim() : '') + '.png';

a.download = (ImprovedTube.videoId() || location.href.match) + ' ' + new Date(ImprovedTube.elements.player.getCurrentTime() * 1000).toISOString().substr(11, 8).replace(/:/g, '-') + ' ' + ImprovedTube.videoTitle() + (subText ? ' - ' + subText.trim() : '') + '.png';

a.click();
} else {
Expand All @@ -607,10 +605,8 @@ ImprovedTube.screenshot = function () {
});
};


ImprovedTube.currentSubtitle = function (ctx) {
var captionElements = document.querySelectorAll('.captions-text .ytp-caption-segment');

ImprovedTube.renderSubtitle = function (ctx,captionElements) {
if (ctx && captionElements) {
captionElements.forEach(function (captionElement, index) {
var captionText = captionElement.textContent.trim();
var captionStyles = window.getComputedStyle(captionElement);
Expand All @@ -632,6 +628,7 @@ ImprovedTube.currentSubtitle = function (ctx) {
ctx.fillStyle = captionStyles.color;
ctx.fillText(captionText, xOfset + txtWidth / 2, yofset);
});
}
};

ImprovedTube.playerScreenshotButton = function () {
Expand Down
24 changes: 12 additions & 12 deletions menu/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>ImprovedTube</title>
<style>body{width:320px;height:500px;margin:0}</style>
<script src="../js&css/satus.js"></script>
<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">
<title>ImprovedTube</title><style>body{width:320px;margin:0;height: max(600px, 100vh) }</style>
<script src="satus.js"></script>
<script src="index.js"></script>
<script src="skeleton.js"></script>
<script src="functions.js"></script>
Expand All @@ -10,15 +10,15 @@
<script src="skeleton-parts/night-mode.js"></script>
<script src="skeleton-parts/mixer.js"></script>
<script src="skeleton-parts/general.js"></script>
<script src="skeleton-parts/appearance.js"></script>
<script src="skeleton-parts/themes.js"></script>
<script src="skeleton-parts/player.js"></script>
<script src="skeleton-parts/playlist.js"></script>
<script src="skeleton-parts/channel.js"></script>
<script src="skeleton-parts/appearance.js"></script>
<script src="skeleton-parts/shortcuts.js"></script>
<script src="skeleton-parts/channel.js"></script>
<script src="skeleton-parts/playlist.js"></script>
<script src="skeleton-parts/themes.js"></script>
<script src="skeleton-parts/blocklist.js"></script>
<script src="skeleton-parts/analyzer.js"></script>
<link rel="stylesheet" href="../js&css/satus.css">
<link rel="stylesheet" href="satus.css">
<link rel="stylesheet" href="styles/home.css">
<link rel="stylesheet" href="styles/appearance.css">
<link rel="stylesheet" href="styles/search.css">
Expand All @@ -29,7 +29,7 @@
<link rel="stylesheet" href="styles/fonts.css">
<link rel="stylesheet" href="styles/mixer.css">
<link rel="stylesheet" href="styles/settings.css">
<link rel="stylesheet" href="styles/themes.css">
</head>
<body></body>
</html>
<link rel="stylesheet" href="styles/themes.css"></head><body></body></html>



132 changes: 28 additions & 104 deletions js&css/satus.css → menu/satus.css
View file
Original file line number Diff line number Diff line change
@@ -1,123 +1,41 @@
*[data-value][data-value="false"] { margin-bottom: 0; margin-top: 0; transition: margin 0.14s linear !important; }
*[data-value][data-value="true"] {margin-bottom: -3px; margin-top: -1px; transition: margin 0.18s linear !important; }

.satus-button--general, .satus-button--appearance, .satus-button--player { margin-left: 9px !important; margin-right: -18px !important;}
.satus-button--themes, .satus-button--playlist, .satus-button--channel, .satus-button--shortcuts { transform: scale(0.84); margin-top: -9px !important; margin-left: -5px !important; margin-right: -27px !important;}
.satus-button--blocklist, .satus-button--analyzer { transform: scale(0.70); margin-top: -20px !important; margin-left: 75px !important; margin-right: -115px !important; }
/*--------------------------------------------------------------
# SCROLLBAR
--------------------------------------------------------------*/

:where([class^='satus'])::-webkit-scrollbar {
width: 4px;
}

:where([class^='satus'])::-webkit-scrollbar:hover {
width: 8px;
}

:where([class^='satus'])::-webkit-scrollbar-thumb {
background: rgba(var(--satus-light), .2);
}

:where([class^='satus'])::-webkit-scrollbar-thumb:hover {
background: rgba(var(--satus-light), .3);
}
:where([class^='satus'])::-webkit-scrollbar { width: 4px; }
:where([class^='satus'])::-webkit-scrollbar:hover { width: 8px; }
:where([class^='satus'])::-webkit-scrollbar-thumb { background: rgba(var(--satus-light), .2); }
:where([class^='satus'])::-webkit-scrollbar-thumb:hover { background: rgba(var(--satus-light), .3); }
/*--------------------------------------------------------------
# ANIMATIONS
--------------------------------------------------------------*/

@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

@keyframes fadeInLeft {
from {
opacity: 0;
transform: translateX(-100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes fadeInRight {
from {
opacity: 0;
transform: translateX(100%);
}
to {
opacity: 1;
transform: translateX(0);
}
}

@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}

@keyframes fadeOutLeft {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(-50%);
}
}

@keyframes fadeOutRight {
from {
opacity: 1;
transform: translateX(0);
}
to {
opacity: 0;
transform: translateX(50%);
}
}

@keyframes zoomIn {
from {
transform: scale(.8);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}

@keyframes zoomOut {
from {
transform: scale(1);
opacity: 1;
}
to {
transform: scale(.8);
opacity: 0;
}
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
@keyframes fadeInLeft{from{opacity:0.4;transform:translateX(-2%)}to{opacity:1;transform:translateX(0)}}
@keyframes fadeInRight{from{opacity:0.3;transform:translateX(2%)}to{opacity:1;transform:translateX(0)}}

@keyframes fadeOutLeft{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(-4%)}}
@keyframes fadeOutRight{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(4%)}}
@keyframes zoomIn{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes zoomOut{from{transform:scale(1);opacity:1}to{transform:scale(.8);opacity:0}}
/*--------------------------------------------------------------
>>> THEMES
--------------------------------------------------------------*/

.satus-base {
--satus-light: 0, 20, 82;
--satus-primary: #ff4158;
--satus-primary: #EE5438;
--satus-alert-background--error: #501616;
--satus-alert-border--error: 1px solid #6f1f1f;
--satus-alert-foreground--error: #d77070;
--satus-alert-background--success: rgb(246, 180, 101, .32);
--satus-alert-border--success: 1px solid rgb(246, 180, 101, .6);
--satus-alert-foreground--success: rgb(184, 115, 30);
--satus-base-background: #f3f4f6;
--satus-base-background: #EFEEED;
--satus-base-foreground: #565e76;
--satus-checkbox-background: #f3f4f6;
--satus-checkbox-border: #dcdfe5;
Expand All @@ -144,7 +62,7 @@
--satus-text-field-color: #7d8ba1;
--satus-text-field-selection: rgb(149, 166, 178, .35);
--satus-text-field-cursor: #fa0;
--satus-switch-track: #e1e4ea;
--satus-switch-track: #d0d3d9;
--satus-switch-track--checked: var(--satus-primary);
--satus-switch-thumb: #fff;
--satus-input-text-background: #e8e8e3;
Expand Down Expand Up @@ -1947,6 +1865,10 @@ As our Syntax markup isnt read for <textarea>, is it?
opacity: .64;
}

.satus-switch, .satus-select, .satus-button, .satus-Buttons, .satus-label{
/*no blinking cursor when focused:*/
caret-color: transparent;
}

/*--------------------------------------------------------------
# TRACK
Expand Down Expand Up @@ -2079,3 +2001,5 @@ As our Syntax markup isnt read for <textarea>, is it?

will-change: transform !important;
}


Loading

0 comments on commit 247b52a

Please sign in to comment.