Skip to content

Black Drive by him

Screenshot of Black Drive

Details

Authorhim

LicenseNo License

Categorydrive.google.com

Created

Updated

Size52 kB

Statistics

Learn how we calculate statistics in the FAQ.

Failed to fetch stats.

Description

Gives You a black UI Drive with extended customizations........

Notes

Userstyle doesn't have notes.

Source code

Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link.
/* ==UserStyle==
@name           Google Drive Dark
@namespace      userstyles.world/user/him
@author         Him
@version        0.2.14

@preprocessor	stylus

@var	color	accentColor		"Accent Color"			#8ab4f8
@var	color	darkColor		"Dark Color"			#202124
@var	color	dark2			"Dark 2"				#28292C
@var	color	dark3			"Dark 3"				#393A3D
@var	color	dark4			"Dark 4"				#5f6368
@var	color	text1			"Primary Text Color"	#ffffff
@var	color	text2			"Secondary Text Color"	#e8eaed
@var	color	text3			"Tertiary Text Color"	#9aa0a6
@var	number	overlayOpacity	"Overlay Opacity"		[0.08, 0, 0.5, 0.01]
@var	number	overlayOpacity2	"Overlay Opacity 2"		[0.14, 0, 0.5, 0.01]
@var	number	disabledOpacity	"Disabled Opacity"		[0.38, 0, 1, 0.01]

@var	select	activationMode	"Enable Based On"		["Always", "System:System Setting*", "Never"]
@var	select	embedOn			"Enable For Embeds"		["Match:Match Setting", "Always", "System", "Never"]
@var	select	enableShare		"Enable For Share Menu" ["Match:Match Setting", "Always", "System", "Never"]
==/UserStyle== */
white = text1;
light = text2;
dark1 = darkColor;
accent = accentColor;

detransparentify(top, bottom = #fff, opacity) {
	rgb(
		(1 - opacity) * red(bottom) + opacity * red(top),
		(1 - opacity) * green(bottom) + opacity * green(top),
		(1 - opacity) * blue(bottom) + opacity * blue(top)
	);
}

/* === MAIN === */
@-moz-document regexp("https?:\/\/drive\.google\.com\/drive.*") {
	activate() {
		// ROOT VARIABLES
		.XV0XSd.KkxPLb {
			--dt-background: darkColor;
			--dt-on-background: text1;
			--dt-outline: dark2;
			--dt-on-disabled: #25282a;
			--dt-disabled: #35383b;
			--dt-inverse-on-surface: dark4;
			--dt-inverse-surface: dark2;
			--dt-on-surface-variant: text3;
			--dt-on-surface: text3;
			--dt-surface-variant: dark1;
			--dt-surface1: dark2;
			--dt-surface1-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
			--dt-surface2: #fff;
			--dt-surface2-shadow: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
			--dt-surface3: #fff;
			--dt-surface3-shadow: 0 1px 3px 0 rgba(60, 64, 67, 0.3), 0 4px 8px 3px rgba(60, 64, 67, 0.15);
			--dt-surface4: #fff;
			--dt-surface4-shadow: 0 2px 3px 0 rgba(60, 64, 67, 0.3), 0 6px 10px 4px rgba(60, 64, 67, 0.15);
			--dt-surface5: #fff;
			--dt-surface5-shadow: 0 4px 4px 0 rgba(60, 64, 67, 0.3), 0 8px 12px 6px rgba(60, 64, 67, 0.15);
			--dt-surface: #fff;
			--dt-scrim: rgba(32, 33, 36, 0.6);
			--dt-on-primary-container: #3c4043;
			--dt-on-primary: #fff;
			--dt-primary-action-state-layer: accentColor;
			--dt-primary-action-stateful: accentColor;
			--dt-primary-action: accentColor;
			--dt-primary-container-icon: accentColor;
			--dt-primary-container-link: accentColor;
			--dt-primary-container: #e8f0fe;
			--dt-primary-icon: #fff;
			--dt-primary-link: #fff;
			--dt-primary-outline: #185abc;
			--dt-primary: #1a73e8;
			--dt-on-secondary-container: text3;
			--dt-on-secondary: #fff;
			--dt-secondary-action-state-layer: #3c4043;
			--dt-secondary-action-stateful: #202124;
			--dt-secondary-action: text2;
			--dt-secondary-container-icon: #3c4043;
			--dt-secondary-container-link: accentColor;
			--dt-secondary-container: #f1f3f4;
			--dt-secondary-icon: #fff;
			--dt-secondary-link: #fff;
			--dt-secondary-outline: #3c4043;
			--dt-secondary: #3c4043;
			--dt-on-tertiary-container: #3c4043;
			--dt-on-tertiary: #fff;
			--dt-tertiary-action-state-layer: #137333;
			--dt-tertiary-action-stateful: #0d652d;
			--dt-tertiary-action: #137333;
			--dt-tertiary-container-icon: #137333;
			--dt-tertiary-container-link: #137333;
			--dt-tertiary-container: #e6f4ea;
			--dt-tertiary-icon: #fff;
			--dt-tertiary-link: #fff;
			--dt-tertiary-outline: #137333;
			--dt-tertiary: #188038;
			--dt-error-action-state-layer: #c5221f;
			--dt-error-action-stateful: #b31412;
			--dt-error-action: #c5221f;
			--dt-error-container-icon: #c5221f;
			--dt-error-container-link: #c5221f;
			--dt-error-container: #fce8e6;
			--dt-error-icon: #fff;
			--dt-error-link: #fff;
			--dt-error-outline: #b31412;
			--dt-error: #d93025;
			--dt-on-error-container: #3c4043;
			--dt-on-error: #fff;
			--dt-on-warning-container: #3c4043;
			--dt-on-warning: #202124;
			--dt-warning-action-state-layer: #ea8600;
			--dt-warning-action-stateful: #202124;
			--dt-warning-action: #3c4043;
			--dt-warning-container-icon: #3c4043;
			--dt-warning-container-link: #3c4043;
			--dt-warning-container: #fef7e0;
			--dt-warning-icon: #3c4043;
			--dt-warning-link: #3c4043;
			--dt-warning-outline: #ea8600;
			--dt-warning: #f9ab00;
		}

		body {
			color: light;
			background-color: darkColor;
		}

		body[jsaction='UjQMac:.CLIENT;wINJic:.CLIENT'] {
			background: none;
			backdrop-filter: blur(10px);
		}

		.g3Fmkb {
			background: var(--dt-background);
		}

		:focus {
			outline-color: accentColor;
		}

		input {
			font-family: Roboto, RobotoDraft, Helvetica, Arial, sans-serif;
		}

		::placeholder {
			/* Chrome, Firefox, Opera, Safari 10.1+ */
			color: light !important;
			opacity: 1 !important;
			/* Firefox */
		}

		a {
			color: accentColor;
		}

		.a-Va-Zb-vb:focus, .a-Va-Zb-vb:hover {
			border: 1px solid transparent;
			box-shadow: inset 0 -2px 0 0 accentColor;
		}

		/* drive text next to logo */
		.gb_Vc .gb_Xd {
			color: text2;
		}

		.gb_0c .gb_2d {
			color: text2;
		}

		/* various top menu bar/navbar things */
		.ak25Me {
			border-bottom: none;
		}

		.gb_qa svg, .gb_Cc svg, .gb_Zc .gb_fe, .gb_Oc .gb_fe {
			color: light;
			fill: light;
		}

		.gb_pa svg, .gb_Ac svg, .gb_Wc .gb_5d, .gb_Mc .gb_5d {
			color: light;
		}

		.a-qc-La {
			background: transparent;
		}

		.a-U-J-x {
			color: light;
		}

		.a-U-ye-ha > .a-U-J .a-U-Ze svg, .a-U-xc-J .a-Ng-c-wk svg, .a-U-J .a-U-Ze svg {
			fill: light;
		}

		.Hb-ja-Na .a-U-xc:focus .a-U-ye.a-U-Vd-jh>.a-U-J {
			background-color: dark3;
			border-color: accentColor;
		}

		.a-U-ye-ha > .a-U-J > .a-U-J-x {
			color: accentColor;
		}

		.a-Ng-c-ha svg {
			fill: accentColor;
		}

		.a-D-B {
			background-color: dark2;
		}

		/* app switcher icon active state */
		.gb_C[aria-expanded=true] .gb_Ve, .gb_C[aria-expanded=true] .gb_We {
			fill: accentColor;
		}

		/* some icons */
		.gb_qa svg, .gb_Bc svg, .gb_Xc .gb_6d, .gb_Nc .gb_6d {
			color: light;
		}

		/* svg icons */
		.a-s-fa-Ha-pa {
			fill: light;
		}

		header#gb {
			background-color: dark2 !important;
		}

		.gb_sa svg, .gb_Fc svg, .gb_8c .gb_he, .gb_Rc .gb_he {
			color: light;
		}

		/* == SCROLL BAR == */
		::-webkit-scrollbar-track {
			background: transparent;
		}

		.a-t-j .a-s-oe:focus::-webkit-scrollbar-track, .a-t-j .a-s-oe:hover::-webkit-scrollbar-track {
			background-color: transparent;
		}

		body::-webkit-scrollbar-track-piece {
			background-color: transparent;
			border-color: transparent;
		}

		::-webkit-scrollbar-track:hover {
			background-color: unset;
		}

		/* == LEFT SIDEBAR == */
		/* left sidebar background */
		.ZHllM, .ALpC8b {
			background: dark1;
		}

		/* left sidebar item hover */
		:not(.a-U-ye-ha)>.a-U-J:hover, :not(.a-U-ye-ha)>.a-U-J-W {
			background-color: dark2;
		}

		/* active left sidebar item */
		.a-U-ye-ha > .a-U-J {
			background-color: rgba(accentColor, 0.2);
		}

		/* drag and drop over left sidebar item */
		.a-U-ye:not(.a-U-ye-ha) .a-U-J.a-l-Sa-Wa-ka {
			background-color: rgba(accentColor, 0.2);
		}

		/* new button */
		.a-ec-Gd .Kzazxf.x6jRSb {
			background-color: dark3;
			color: white;
			box-shadow: 0 1px 2px 0 rgba(black, overlayOpacity), 0 1px 3px 1px rgba(black, overlayOpacity);
		}

		.a-ec-Gd .Kzazxf.x6jRSb:hover, .a-ec-Gd .Kzazxf.x6jRSb:focus {
			background-color: dark2;
		}

		.a-U-J-x {
			color: light;
		}

		/* FILE CREATION MENU */
		/* dividers between file type and arrow */
		.a-S8Cb5b-aa:before {
			border-left-color: rgba(text1, overlayOpacity);
		}

		/* TOP BAR */
		.gb_oa svg, .gb_Ec svg, .gb_1c .gb_3d, .gb_Qc .gb_3d {
			color: light;
		}

		/* search bar */
		.gb_Se {
			background: dark1;

			&.gb_Te {
				background: dark3;
			}
		}

		// .gb_4e, .gb_Ue, .gb_Te, .gb_Ne {
		// background: darkColor !important;
		// }
		// .gb_Me {
		// background: dark3;
		// }
		// .gb_Qe {
		// background: dark1;
		// }
		// .gb_Le {
		// background: darkColor;
		// }
		.gb_rf, .gb_of, .gb_gf, .gb_ff, .gb_cf {
			color: white !important;

			&::placeholder {
				color: light !important;
			}
		}

		/* search bar active */
		.gb_7e.gb_8e, .gb_Ve.gb_We, .gb_Ue.gb_Ve, .gb_Te.gb_Ue {
			background: dark3 !important;
			transition: 0.2s ease-in-out;
		}

		.gb_Le.gb_Me {
			background: dark3;
		}

		.gb_Qe.gb_Re {
			background: dark3;
		}

		/* search bar active icons */
		.gb_Ne.gb_Oe button svg {
			color: light;
		}

		/* search bar bg */
		.a-D-B-WErN3d-j {
			border-bottom-color: dark3;
		}

		/* search bar input (old) */
		.gb_ef, .gb_Te.gb_Ue .gb_ef, .gb_8e, .gb_Ne.gb_Oe .gb_8e, .gb_6e, .gb_Le.gb_Me .gb_6e {
			color: white;
			caret-color: white;
		}

		/* search bar input */
		.gb_df {
			color: text2;
		}

		/* search bar input active */
		.gb_Se.gb_Te .gb_df {
			color: text1;
		}

		/* search bar buttons while search is active */
		.gb_Te.gb_Ue button svg {
			color: white;
		}

		/* current folder */
		.h-R-w-d.a-l-S-Pc-w-d, .Q62IOe {
			color: white;
		}

		.a-l-S-Pc-w-d.h-R-w-d-W {
			background-color: dark3;
		}

		.a-l-S-Pc-w-d.h-R-w-d-pb {
			background-color: rgba(accentColor, 0.1);
			color: accentColor;
		}

		.a-D-B .a-l-S-Pc-w-d.h-R-w-d-pb .a-w-d-aa-zd svg {
			fill: accentColor;
		}

		/* top toolbar icons */
		.a-c-d.h-R-d-pb, .Hb-ja-Na .a-c-d.h-R-d-Pb.h-R-...

Reviews

No reviews yet.