Youtube Scrollbar

AdminFox

Hallo

Letztens habe ich mein Firefox komplett neu Installiert, das eine Script für den Scrollbalken zuständig ist in den entsprechenden Ordner eingefügt da es nicht mehr Funktioniert. Da habe ich ein css Code gesucht, gefunden der Funktioniert leider nicht auf Youtube neben den Abonnenten.

Hier ist der Code für den rechten Scrollbalken.

CSS

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */


:-moz-any(#content,#appcontent) browser{
 margin-right:-10px!important;
 overflow-y:scroll;
 margin-bottom:-10px!important;
 overflow-x:scroll;
}

Gibt es dafür auch ein css Code?.

[attachment=0]Youtube Balken.PNG[/attachment]

2002Andreas

Sorry, aber ich habe keine Vorstellung was genau du damit meinst :-??

Mach doch einfach mal einen Screenshot von Youtube und zeig genau welchen Scrollbalken du meinst. Und was genau soll mit diesem Scrollbalken dann passieren?

Zitat von AdminFox

in den entsprechenden Ordner eingefügt da es nicht mehr Funktioniert

Warum fügst du in welchen Ordner etwas ein, was nicht mehr funktioniert?

AdminFox

Also der Scrollbalken kommt nur wenn man mit der Maus darüber fährt und der ist mir zu Dick, zu Breit ist nur bei Firefox so.

[attachment=0]YT.png[/attachment]

Das Script gehört ja in den userchrome Ordner.

Das hat mit der vorigien Firefox Version noch Funktioniert.

2002Andreas

Zitat von AdminFox

ist nur bei Firefox so

Ist im Edge nicht anders :wink:
[attachment=0]Screenshot (52).png[/attachment]

2002Andreas

Mit diesem Script kannst du dir den Scrollbalken nach Wunsch selber anpassen:

CSS

"use strict";


/* ***********************************************************************************************


 README
 
 Aktivieren einer Einstellung > var ... auf 'true' setzen
 Deaktivieren einer Einstellung > var ... auf 'false' setzen
 Anpassungen vornehmen > Aendern von Werten
 - Farbe - Name: red, blue, transparent / Hexcode: #33CCFF, #FFF
 - Farbe - rgb(a): rgba(0,0,255,0.8) / hsl(a): hsla(240,100%,50%,0.8) // a = Sichtbarkeit
 - Zahlen: 1, 2, 3 ... 10, 11, 12 ...
 - Sichtbarkeit (in Dezimalzahlen): 0.0 bis 1.0 e.g. 1.4, 1,75
 - Farbverlaeufe: linear-gradient(Richtung, Farbe, Farbe, Farbe)
 - Beispiel: linear-gradient(to right, blue, #33CCFF, rgba(0,0,255,0.8))
 
 - Beispiel 2:
	Farbverlauf von links nach rechts - tranparent -> weiss mit 50%er Sichtbarkeit -> tranparent
	linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)
 
 Info
 - Zu kleine Breitenwerte werden sich negativ auf einige Oberflaechenelemente auswirken (z.B. auf Menuelisten)!
 
*********************************************************************************************** */


// Allgemeine Einstellungen


// Scrollbars ausblenden
var hide_scrollbars = false; /* Standard = false */
// Schaltflächen ausblenden
var hide_scrollbar_buttons = false; /* Standard = false */
// benutzerdefinierte Breite
var custom_scrollbar_width = true; /* Standard = false */
var custom_scrollbar_width_value = 8; /* 10-? // Standard = 17 (in px) */
// benutzerdefinierte Sichtbarkeit
var custom_scrollbar_opacity = true; /* Standard = false */
var custom_opacity_value = "0.9"; /* Standard = 1.0 */
// "schwebende" Scrollbars / Scrollbars über dem Webinhalt 
var enable_floating_scrollbars = false; /* Standard = false */
// benutzerdefinierte Scrollbars
var enable_custom_scrollbars = true;
// benutzerdefinierte Hintergrundfarbe bzw. benutzerdefinierter Hintergrundverlauf
var cs_background_color = "#CCCCCC"; /* Standard = #CCCCCC / Transparenter Hintergrund = transparent */
var cs_background_image = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* Standard = none */
// benutzerdefinierte Schiebereglerfarbe bzw. benutzerdefinierter Schiebereglerfarbverlauf
var cs_thumb_color = "#33CCFF"; /* Standard = #33CCFF */
var cs_thumb_image = "(to right,transparent,rgba(255,0,0,0.9),transparent)"; /* Standard = unset */
// benutzerdefinierte Schiebereglerfarbe (hover/ueber) bzw. benutzerdefinierter Schiebereglerfarbverlauf
var cs_thumb_hover_color = "red"; /* Standard = #66FFFF */
var cs_thumb_hover_image = "rgba(255,0,0)"; /* Standard = unset */
// benutzerdefinierte Schiebereglerrundung
var cs_thumb_roundness = 0; /* Standard = 0 (in px) */
// benutzerdefinierte Schiebereglerrandbreite
var cs_thumb_border = 1; /* Standard = 0 (in px) */
// benutzerdefinierte Schiebereglerrandfarbe
var cs_thumb_border_color = "#33CCFF"; /* default ##33CCFF */
// benutzerdefinierte Schaltflaechenfarbe bzw. benutzerdefinierter Schaltflaechenfarbverlauf
var cs_buttons_color = "lightgrey"; /* Standard = #000000 */
var cs_buttons_image = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* Standard = unset */
// benutzerdefinierte Schaltflaechenfarbe (hover/ueber) bzw. benutzerdefinierter Schaltflaechenfarbverlauf
var cs_buttons_hover_color = "#000066"; /* Standard = #000066 */
var cs_buttons_hover_image = "linear-gradient(to right,transparent,rgba(255,255,255,0.5),transparent)"; /* Standard = unset */
// benutzerdefinierte Schaltflächenrundung
var cs_buttons_roundness = 0; /* Standard = 0 (in px) */




/* ******************************************************************************************** */
/* ******************************************************************************************** */
/* ******************************************************************************************** */




Components.utils.import("resource://gre/modules/Services.jsm");
var ss =  Components.classes["@mozilla.org/content/style-sheet-service;1"].getService(Components.interfaces.nsIStyleSheetService);


var custom_scrollbars = {


  init: function() {


  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
	\
	@namespace html url("http://www.w3.org/1999/xhtml");\
	\
	scrollbar, scrollcorner {\
	  -moz-appearance: none !important;\
	  background-color: '+cs_background_color+' !important; \
	  background-image: '+cs_background_image+' !important; \
	}\
	scrollbar thumb {\
	  -moz-appearance: none !important;\
	  background-color: '+cs_thumb_color+' !important;\
	  background-image: '+cs_thumb_image+' !important;\
	  border-radius: '+cs_thumb_roundness+'px !important;\
	  border: '+cs_thumb_border+'px solid '+cs_thumb_border_color+' !important; \
	}\
	scrollbar thumb:hover, scrollbar thumb:active {\
	  -moz-appearance: none !important;\
	  background-color: '+cs_thumb_hover_color+' !important;\
	  background-image: '+cs_thumb_hover_image+' !important;\
	}\
	scrollbar scrollbarbutton {\
	  -moz-appearance: none !important;\
	  background-color: '+cs_buttons_color+' !important;\
	  background-image: '+cs_buttons_image+' !important;\
	  border-radius: '+cs_buttons_roundness+'px !important;\
	}\
	scrollbar scrollbarbutton:hover {\
	  -moz-appearance: none !important;\
	  background-color: '+cs_buttons_hover_color+' !important;\
	  background-image: '+cs_buttons_hover_image+' !important;\
	}\
	\
  '), null, null);


  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


  }
};


var scrollbar_buttons = {


  init: function() {


  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
	\
	@namespace html url("http://www.w3.org/1999/xhtml");\
	\
	scrollbar scrollbarbutton {\
	  opacity: 0 !important;\
	}\
	scrollbar[orient="vertical"] scrollbarbutton {\
	  min-height: 1px !important;\
	  height: 1px !important;\
	  max-height: 1px !important;\
	}\
	scrollbar[orient="horizontal"] scrollbarbutton {\
	  min-width: 1px !important;\
	  width: 1px !important;\
	  max-width: 1px !important;\
	}\
	\
  '), null, null);


  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


  }
};


var scrollbar_width = {


  init: function() {


  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
	\
	@namespace html url("http://www.w3.org/1999/xhtml");\
	\
	scrollbar[orient="vertical"] scrollbarbutton {\
	  min-width: 0 !important;\
	  width: '+custom_scrollbar_width_value+'px !important;\
	  max-width: '+custom_scrollbar_width_value+'px !important;\
	}\
	scrollbar[orient="horizontal"] scrollbarbutton {\
	  min-height: 0 !important;\
	  height: '+custom_scrollbar_width_value+'px !important;\
	  max-height: '+custom_scrollbar_width_value+'px !important;\
	}\
	\
  '), null, null);


  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


  }
};


var floating_scrollbars = {


  init: function() {


  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
	\
	@namespace html url("http://www.w3.org/1999/xhtml");\
	\
	scrollbar {\
	  position: relative !important;\
	  z-index: 1000000000 !important;\
	}\
	scrollbar, scrollcorner {\
	  background-color: transparent !important; \
	  background-image: unset !important; \
	}\
	scrollbar[orient="vertical"] {\
	  -moz-margin-start: -'+custom_scrollbar_width_value+'px !important;\
	  width: '+custom_scrollbar_width_value+'px !important;\
	}\
	scrollbar[orient="horizontal"] {\
	  margin-top: -'+custom_scrollbar_width_value+'px !important;\
	  height: '+custom_scrollbar_width_value+'px !important;\
	}\
	\
  '), null, null);


  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


  }
};


var scrollbar_opacity = {


  init: function() {


  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
	\
	@namespace html url("http://www.w3.org/1999/xhtml");\
	\
	scrollbar {\
	  opacity: '+custom_opacity_value+' !important;\
	}\
	\
  '), null, null);


  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


  }
};


var remove_scrollbars = {


  init: function() {


  var uri = Services.io.newURI("data:text/css;charset=utf-8," + encodeURIComponent('\
	\
	@namespace html url("http://www.w3.org/1999/xhtml");\
	\
	scrollbar, scrollcorner {\
	  display: none !important;\
	  visibility: collapse !important;\
	}\
	\
  '), null, null);


  ss.loadAndRegisterSheet(uri, ss.AGENT_SHEET);


  }
};


// oben aktivierte Einstellungen werden hier ausgefuehrt
if(enable_custom_scrollbars==true) custom_scrollbars.init();
if(hide_scrollbar_buttons==true) scrollbar_buttons.init();
if(custom_scrollbar_width==true) scrollbar_width.init();
if(enable_floating_scrollbars==true) floating_scrollbars.init();
if(custom_scrollbar_opacity==true) scrollbar_opacity.init();
if(hide_scrollbars==true) remove_scrollbars.init();

Alles anzeigen

[attachment=0]Screenshot (53).png[/attachment]

AdminFox

Ich werde es Testen, Berichten.

Danke Dir

AdminFox

Ich habe eine frage ich nutze Notepad++ dort habe ich das Script Code eingefügt, jetzt weiß ich nicht in welches Fomart ich es Abspeichern soll.

2002Andreas

Kodierung:

UTF-8

Dateiendung:
xxx.uc.js

AdminFox

Irgendwie Funktioniert das bei mir nicht ich habe den ganzen Code im Notepad++ eingefügt, in UTF-8, endung uc.js Abgespeichert dann den aktiviert auf true geszetzt.

Code

// Scrollbars ausblenden
var hide_scrollbars = true; /* Standard = true */

2002Andreas

Nur mal so, benutzt du denn schon andere Scripte?

AdminFox

Ich Nutze keine anderer Scripte nur den css Codes mehr nicht.

macko

Zitat von AdminFox

Also der Scrollbalken kommt nur wenn man mit der Maus darüber fährt und der ist mir zu Dick, zu Breit ist nur bei Firefox so.

Wenn es nur darum geht die Dicke der Scrollbalken auf YouTube zu verkleinern, dann liesse sich dies anstelle des Skripts auch einfach mittels einer userContent.css realisieren. Beispielsweise mit folgendem CSS-Code könnte man die Scrollbalkenbreite auf YouTube anpassen:

Code

@-moz-document domain("www.youtube.com"){
  :root{
    scrollbar-width: thin;
  }

  #guide-inner-content {
	scrollbar-width: thin;
  }

  .playlist-items.ytd-playlist-panel-renderer {
	scrollbar-width: thin;
  }
}

Alles anzeigen

YouTube sähe dann mit diesem CSS-Code in etwa so aus:
[attachment=0]firefox_2019-03-14_12-38-53.png[/attachment]

2002Andreas

Achso, dann kann das auch nicht funktionieren.

Um Scripte zu nutzen bedarf es erst einiger Anpassungen vorher:

https://github.com/Endor8/userChr…ster/userChrome

AdminFox

2002Andreas so jetzt habe ich die Anpassungen gemacht jetzt Funktioniert es.

So Gefällt mir es sieht besser aus.

Danke.

2002Andreas

Zitat von AdminFox

So Gefällt mir es sieht besser aus.

Freut mich wenn du zufrieden bist

Speravir

Zitat von 2002Andreas

Mit diesem Script kannst du dir den Scrollbalken nach Wunsch selber anpassen:

Was Du leider nicht dazu geschrieben hast, ist, dass es sich dabei um eine übersetzte Version von custom_scrollbars.uc.js von Aris handelt. Ob die von dir gepostete Version auch auf demselben Stand ist, habe ich dabei nicht kontrolliert.

Mir gefällt das ernsthaft nicht, dass fast nie auf die Vorlage verwiesen wird.

2002Andreas

Zitat von Speravir

dass fast nie auf die Vorlage verwiesen wird.

Die habe ich hier auch nicht. Das Script nutze ich schon lange...es funktioniert hier...und darum habe ich es gepostet. Ich weiß/wusste nicht mal vom wem das ist, sondern hatte es mal hier aus dem Forum selber kopiert.

Viele Scripte stammen auch z.B. von Alice aus Asien. Und da postet hier auch niemand einen Link dann dazu.
Du kannst das aber immer gerne machen, wenn du genau weißt vom wem welches Script mal war. :wink:

milupo

Speravir: Es ist ja sicher empfehlenswert, dass man auf den Urheber bzw. die Quelle der Skripte verweist, aber die lassen sich nicht immer einfach ermitteln. Bei manchen Skripten steht es am Skriptanfang. Bei vielen aber nicht. Wenn es dich so stört, dass da nicht verwiesen wird, suche es heraus, mache eine Referenzliste, auf die man sich beziehen kann und pflege sie am besten, damit sie immer auf dem aktuellen Stand ist.

Boersenfeger

An der Pflege würde ich mich u. U. beteiligen... die Liste an sich sollte aber vorliegen...

Endor

Nur mal als Hinweis, bei vielen Scripten die wir bei Github haben,
kennen wir selber den Autor nicht. Die wurden in irgend einem Forum
mal gefunden und übernommen. Die Hauptautoren Alice, Griever usw.
sind ja bekannt. Griever macht schon seit 3 Jahren nichts mehr.
Alice immer mal wieder. Viele Scripte hat freundlicher Weiße aborix
hier aus dem Forum, immer wieder aktualisiert, sonst würden vieles nicht
mehr funktionieren. Die meisten updates kommen von uns unbekannten Leuten
die sie irgendwo hochladen.
Zur Zeit bin ich der Hauptsammler und gebe dann weiter, aber eben immer alles
nur wenn ich Zeit dazu habe. Und daran hapert es bei mir hauptsächlich.
Beruf und Familie geht hier immer vor.

Mfg.
Endor