Skip to content

Commit

Permalink
🌈
Browse files Browse the repository at this point in the history 
add vizzyThemer
  • Loading branch information
@TheCubiq
TheCubiq committed Aug 15, 2022
1 parent a7a9d28 commit 5957389
Show file tree
Hide file tree
Showing 2 changed files with 362 additions and 0 deletions.
3 changes: 3 additions & 0 deletions src/main.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,8 @@
import vizzyThemer from "./styles/vizzyThemer.css?inline";

function run() {
// if (self != top) return
GM_addStyle(vizzyThemer);
console.log("Vizzard Has Loaded!");
}

Expand Down
359 changes: 359 additions & 0 deletions src/styles/vizzyThemer.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,359 @@
/*
----- Cubiq's Vizzy Themer v1.0 -----
Thank you so much for using my Vizzy Themer
February 2022
Love,
Cubiq
*/

:root {
/* ACCENT */
--cubiq-accent-color-raw: 315, 50%;
/*
- if no color is selected,
there will be no accent and
so it will become white
- to select the color, just uncomment it lol
select your color here:
*/
/*
grey
0, 0%;
red
0, 100%;
orange
20, 100%;
gold
45, 100%;
lime
100, 100%;
green
120, 100%;
cyan
165, 100%;
lightblue
200, 100%;
darkblue
220, 100%;
purple
270, 100%;
pink
315, 50%;
magenta
330, 100%;
/*
base accent colors are in hs(l) format
*/

--cubiq-accent: hsl(var(--cubiq-accent-color-raw), 50%);
--cubiq-accent-light: hsl(var(--cubiq-accent-color-raw), 65%);
--cubiq-accent-dark: hsl(var(--cubiq-accent-color-raw), 20%);
--cubiq-accent-light-transparent: hsla(var(--cubiq-accent-color-raw), 50%, .2);
--cubiq-accent-dark-transparent: hsla(var(--cubiq-accent-color-raw), 20%, .2);

--cubiq-primary-bgcolor: #000;
--cubiq-secondary-bgcolor: hsla(var(--cubiq-accent-color-raw), 30%, .2);
--cubiq-bordercolor: #333;

--cubiq-primary-text1color: #fff;
--cubiq-darker-color: #aaa;
}


/*
cool little trick to move the
top actions panel to the bottom
just uncomment and see :)
*/
/*
#editor-base
{
flex-direction: column-reverse;
}
*/


/* closed arrow */
path[d="M10 17l5-5-5-5v10z"] {
color: var(--cubiq-primary-text1color) !important;
}


/* little icons color */
/*
since there's no way to edit the second color,
its up to you if you want this on or off
just uncomment and see :)
*/
/*
.MuiIconButton-root
{
color: var(--cubiq-primary-text1color) !important;
}
*/



/* sidemenu button color */
.MuiSvgIcon-fontSizeLarge {
color: var(--cubiq-primary-text1color) !important;
}


/* sliders */
input[type="number"] {
background: var(--cubiq-accent-light-transparent) !important;
}


/* selectors */
.MuiSelect-select.MuiSelect-select {
background: var(--cubiq-accent-light-transparent) !important;
}


/* sidemenu text color */
.mosaic-window-body>div>nav>span>span {
color: var(--cubiq-primary-text1color) !important;
}

/* properties window opened element name */
.MuiTypography-colorTextPrimary {
color: var(--cubiq-primary-text1color) !important;
}


/* selected resolution text color */
.MuiToggleButton-root.Mui-selected {
color: var(--cubiq-primary-text1color) !important;
}


/* unselected resolution text color */
.MuiToggleButton-root {
color: var(--cubiq-darker-color) !important;
}


/* clip name color, xyz and more */
.MuiTypography-colorTextSecondary {
color: var(--cubiq-primary-text1color) !important;
}


/* a lot of the texts color */
.MuiTypography-root {
/*
if !important, even the 3D/2D icons
that are blue and green will be overridden
*/
color: var(--cubiq-primary-text1color);

/* color: var(--cubiq-primary-text1color) !important; */
}


/* 3D / 2D icons color */
/*
since there's no way to edit the second color,
its up to you if you want this on or off
just uncomment and see :)
*/
/*
.MuiTypography-colorSecondary
{
color: var(--cubiq-accent-light) !important;
}
*/


/* border color */
.mosaic.mosaic-blueprint-theme {
background: var(--cubiq-bordercolor) !important;
}


/* main bgcolor */
.mosaic.mosaic-blueprint-theme .mosaic-preview .mosaic-window-body,
.mosaic.mosaic-blueprint-theme .mosaic-window .mosaic-window-body {
background: var(--cubiq-primary-bgcolor) !important;
border: 1px solid var(--cubiq-secondary-bgcolor) !important;
}

/* kind of buggy thing that shouldn't be there lol */
.mosaic-preview {
opacity: 0%;
}

/* properties window background */
.scrollbar-container>ul>div>div {
background: var(--cubiq-secondary-bgcolor) !important;
}

/* text underline */
.MuiInput-underline:before {
border-bottom: 2px solid var(--cubiq-primary-text1color) !important;
}

/* font color for selectors and text fields */
.MuiInputBase-input {
color: var(--cubiq-primary-text1color) !important;
}



/* ------- accent color -------- */

/* titles font color */
.MuiTypography-colorPrimary {
color: var(--cubiq-accent-light) !important;
}

/* text primary.. */
.MuiButton-textPrimary {
color: var(--cubiq-accent-light) !important;
}

/* little selected icon buttons */
.MuiIconButton-colorPrimary {
color: var(--cubiq-accent-light) !important;
}

/* little accent icon button in notifications */
.MuiSvgIcon-colorPrimary {
color: var(--cubiq-accent-light) !important;
}


/* checked checkbox */
.MuiCheckbox-colorPrimary.Mui-checked {
color: var(--cubiq-accent-light) !important;
}

/* choose audio */
.MuiButton-outlinedPrimary {
border: 1px solid var(--cubiq-accent-light) !important;
color: var(--cubiq-accent-light) !important;
}

/* volume slider color */
.MuiSlider-root {
color: var(--cubiq-accent-light) !important;
}

/* text underline on edit */
.MuiInput-underline:after {
border-bottom: 2px solid var(--cubiq-accent-light) !important;
}

/* selected item bgcolor */

.MuiTreeItem-root[tabindex="0"]>.MuiTreeItem-content {
background-color: var(--cubiq-accent-light-transparent) !important;
}


/* song bar pointer thing.. lol */
.mosaic-window-body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2) {
background-color: var(--cubiq-accent) !important;
}

/* song already played bg thing */
.mosaic-window-body>div:nth-child(1)>div:nth-child(1)>div:nth-child(2)>div:nth-child(1)>div:nth-child(1)>div:nth-child(1)>div:nth-child(2) {
background-color: var(--cubiq-accent-light-transparent) !important;
}


/* explore creations in top bar */
.MuiChip-clickable {
background: var(--cubiq-primary-bgcolor) !important;
border: 1px solid var(--cubiq-accent-light) !important;
color: var(--cubiq-accent-light) !important;
}

/* explore creations in projects in sidemenu */
.MuiButton-containedPrimary {
background: var(--cubiq-primary-bgcolor) !important;
border: 1px solid var(--cubiq-accent-light) !important;
color: var(--cubiq-accent-light) !important;
}

/* feedback guy background */
/*
i "removed" it as imo it looks better without it
and since it had !important on its color,
i couldn't change it's accent and it would remain
purple which doensn't fit with some colors..
*/
._hj-3obO5__EmotionIconDefault__commentIcon:before {
opacity: 0%;
}

/* feedback guy */
._hj_feedback_container ._hj-qoDG___EmotionIconDefault__iconEmotionDefault._hj-1BEBR__EmotionIconDefault__like ._hj-2RA7u__EmotionIconDefault__expressionIcon:before {
content: '\e909' !important;
}

/* little credit :) */
header>div:nth-child(3)>p:after {
padding-left: 5px;
content: '+ 🤍 by Cubiq ';
color: var(--cubiq-accent-light) !important;
opacity: 50%;
}


/* add effect page buttons on hover */
div[role="presentation"]>div:nth-child(3)>div:nth-child(1)>div:nth-child(3)>div:nth-child(1)>div:nth-child(1)>button:hover,
div[role="presentation"]>div:nth-child(3)>div:nth-child(1)>div:nth-child(3)>button:hover {
background: var(--cubiq-accent-light) !important;
}


/* add effect button */
div[role="presentation"]>div:nth-child(3)>div:nth-child(1)>div:nth-child(3)>button {
transition: all 0.2s ease-out !important;
background: var(--cubiq-accent) !important;
}


/* notification bell menu bottom stripe accent */
div[role="tooltip"]:not(.MuiTooltip-popper) {
border-bottom: 4px solid var(--cubiq-accent-light) !important;
}

/* open arrow */
path[d="M7 10l5 5 5-5z"] {
color: var(--cubiq-accent-light) !important;
}

/* custom color when you select text */
::selection {
background: var(--cubiq-accent);
}

canvas {
border-radius: 1em;
}



/* border of the selected clip */
.react-contextmenu-wrapper>#clip[style*="z-index: 2"] {
border: 1px solid var(--cubiq-accent) !important;
}

0 comments on commit 5957389

Please sign in to comment.