Phylos UI by cloudgate1234

/* ==UserStyle==
@name           Scratch/Onyx [Cyberflixt]
@namespace      USO Archive
@author         Cyberflix F
@description    `dark animated theme for Scratch (scratch.mit.edu)`
@version        20200910.22.30
@license        CC-BY-NC-4.0
@preprocessor   uso
==/UserStyle== */
@-moz-document domain(scratch.mit.edu) {

	@keyframes grad1 {
		0% {
			background-color: #1d1d1d;
			left: 0px;
			top: 0px;
		}

		50% {
			background-color: #2c2c2c;
			left: 0px;
			top: 0px;
		}

		100% {
			background-color: #1d1d1d;
			left: 0px;
			top: 0px;
		}
	}

	#view {
		background-image: url(https://i.imgur.com/yonNvPh.png) !important;
		position: sticky!important;
	}

	.box-content,
	.activity,
	.box-header,
	.news,
	.box {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.box {
		border-radius: 10px 10px 10px 10px;
	}

	html,
	body,
	h1,
	h2,
	h3,
	h4,
	h5,
	p,
	a:link,
	a:visited,
	a:active,
	.social-message-date {
		color: rgba(255, 255, 255, 1) !important;
		font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
	}

	#navigation {
		background-color: #3c3c3c !important;
	}

	.comment-bubble,
	.comment-bubble:before,
	.inplace-textarea,
	.load-more-button,
	.compose-post,
	.compose-cancel {
		border: 2px dashed rgba(0, 0, 0, 1)!important;
		background-color: #212121 !important;
		opacity: 1;
	}

	.comment-bubble:before {
		z-index: -1;
		background-color: #1d1414 !important;
	}

	.comment-bottom-row .comment-reply {
		color: #000000 !important;
	}

	.compose-cancel {
		background-color: rgba(0, 0, 0, 0) !important;
	}

	.remix-button,
	see-inside-button,
	.button {
		background-color: #3c3c3c!important;
	}

	.extension-chip {
		background-color: rgb(45 53 64);
	}

	.extension-chip .extension-action {
		background-color: #2b2b2b;
	}

	#footer {
		color: #3c3c3c !important;
		background-color: #3c3c3c !important;
	}

	#donor {
		color: #575e75;
		background-color: #2c2c2c;
	}


	/* EDITOR */
	/* TOOLBAR */
	.gui_tab_27Unf.gui_is-selected_sHAiu,
	.gui_tab_27Unf,
	.blocklyToolboxDiv,
	.scratchCategoryMenuRow,
	.backpack_backpack-header_6ltCS,
	.menu_menu_3k7QT,
	.gui_extension-button-container_b4rCs {
		background-color: #1d1d1d;
	}


	/* BLOCKS */
	@keyframes AnimBlock {
		0% {
			fill: rgb(255, 0, 0);
		}

		7% {
			fill: rgb(200, 50, 0);
		}

		15% {
			fill: rgb(150, 100, 0);
		}

		21% {
			fill: rgb(100, 150, 0);
		}

		27% {
			fill: rgb(50, 200, 0);
		}

		33% {
			fill: rgb(0, 255, 0);
		}

		40% {
			fill: rgb(0, 200, 50);
		}

		47% {
			fill: rgb(0, 150, 100);
		}

		53% {
			fill: rgb(0, 100, 150);
		}

		59% {
			fill: rgb(0, 50, 200);
		}

		65% {
			fill: rgb(0, 0, 255);
		}

		72% {
			fill: rgb(50, 50, 200);
		}

		78% {
			fill: rgb(100, 50, 150);
		}

		86% {
			fill: rgb(150, 50, 100);
		}

		93% {
			fill: rgb(200, 50, 50);
		}

		100% {
			fill: rgb(255, 0, 0);
		}
	}


	@keyframes AnimGrey {
		0% {
			fill: #1d1d1d;
		}

		50% {
			fill: #2c2c2c;
		}

		100% {
			fill: #1d1d1d;
		}
	}

	@keyframes AnimGrey2 {
		0% {
			fill: #2b2b2b;
		}

		50% {
			fill: rgb(53 53 53);
		}

		100% {
			fill: #2b2b2b;
		}
	}

	@keyframes AnimGrey3 {
		50% {
			stroke: rgb(255, 255, 255);
		}
	}

	/* BLOCKS */
	.blocklyPath:hover,
	.blocklyBlockBackground:hover {
		animation-name: AnimGrey3;
		animation-duration: .5s;
		animation-iteration-count: infinite;
	}

	.blocklyPath,
	.blocklyBlockBackground {
		fill: #1d1d1d;
		/*
    animation-name: AnimGrey;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    */
	}

	.scratchCategoryMenu {
		background-color: #1d1d1d !important;
	}

	.scratchCategoryMenuRow {
		border-radius: 20px !important;
		background-color: #1d1d1d;

		animation-name: AnimCatergory2;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

	.scratchCategoryMenuRow:hover,
	.categorySelected:hover {
		animation-name: AnimCatergory;
		animation-duration: 0.5s;
		animation-iteration-count: infinite;
	}

	.categorySelected {
		background-color: #1d1d1d !important;
	}

	@keyframes AnimBlockyText {
		50% {
			fill: rgb(150, 150, 150);
			font-size: 12.3pt;
		}
	}

	.blocklyNonEditableText > text,
	.blocklyEditableText > text {
		fill: rgb(255, 255, 255);
		/*
    animation-name: AnimBlockyText;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    */
	}

	.blocklyNonEditableText > text:hover,
	.blocklyEditableText > text:hover {
		fill: rgb(255, 255, 255);
		animation-play-state: paused;
		animation-name: none;
	}

	@keyframes AnimGrey4 {
		50% {
			fill: rgb(45 53 64);
		}
	}

	.blocklyPath[data-argument-type='boolean'] {
		stroke: rgb(0 0 0);
		fill: #2c2c2c;
		animation-name: AnimGrey4;
	}

	@keyframes AnimBackground {
		0% {
			width: 0%;
		}

		50% {
			width: 100%;
		}

		100% {
			width: 0%;
		}
	}

	.blocklyMainBackground {
		margin-left: 200px;
		animation-name: AnimBackground;
		animation-duration: 3s;
		animation-iteration-count: infinite;
	}

	.menu-bar_menu-bar-item_oLDa-[draggable='false'] {
		/*
    background: url(https://i.imgur.com/zX1UwPX.png) no-repeat;
    background-position: center center;
    background-size: 70px;
    padding-bottom: 100px;
    width: 100px;
    
    animation-name: grad3;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    */
	}

	/* tool tab */
	@keyframes AnimCatergory3 {
		50% {
			background-color: rgb(40, 40, 45);
		}

		100% {
			background-color: #1d1d1d;
		}
	}

	.react-tabs_react-tabs__tab_3Nn-X,
	.gui_tab_27Unf,
	.react-tabs_react-tabs__tab_3Nn-X,
	.gui_tab_27Unf react-tabs_react-tabs__tab--selected_EW0CL gui_is-selected_sHAiu,
	.react-tabs_react-tabs__tab_3Nn-X,
	.gui_tab_27Unf {}
	.gui_tab_27Unf {
		background-color: #1d1d1d;
		animation-name: AnimCatergory3;
		animation-duration: 2s;
		animation-iteration-count: infinite;
	}

	.gui_tab_27Unf:hover {
		animation-name: AnimCatergory;
		animation-duration: 0.5s;
		animation-iteration-count: infinite;
	}

	/* addon btn */
	.gui_extension-button-container_b4rCs {
		border-radius: 20px !important;
	}

	/* comment */
	.scratchWorkspaceCommentBorder {
		stroke: #252525;
	}

	.scratchCommentRect {
		fill: rgb(45 53 64);
	}

	.scratchCommentBody {
		background-color: #1d1d1d;
		border-radius: 4px;
	}

	.scratchCommentTextarea {
		background-color: rgba(0, 0, 0, 0);
	}

	.scratchCommentText {
		fill: white;
	}

	.blocklyWidgetDiv,
	.goog-menu {
		background-color: rgb(45 53 64)!important;
	}

	.scratchCommentTextarea,
	scratchCommentText {
		text-align: center;
	}



	/* MYSTUFF */
	#pagewrapper {
		background-image: url(https://i.imgur.com/yonNvPh.png) !important;
		position: sticky!important;
		background-size: contain;
	}

	.loader_background_2DPrW {
		background-color: #1d1d1d;
	}

	.innerwrap {
		background-color: #1d1d1d!important;
	}

	ul.site-nav li {
		border-left: none!important;
	}

	ul.site-nav li.last {
		border-right: none!important;
	}

	/*
blocklyGridPattern4231174952912091

-- colors --
rgb(45 53 64)
#1d1d1d
rgb(0 0 0)
#2b2b2b
#2c2c2c
*/
}