diff --git a/index.html b/index.html index e35d511..2c2a12b 100644 --- a/index.html +++ b/index.html @@ -14,6 +14,7 @@ + @@ -248,9 +249,7 @@ - - diff --git a/narrowscripts.js b/narrowscripts.js index 97d1508..e852737 100644 --- a/narrowscripts.js +++ b/narrowscripts.js @@ -211,5 +211,3 @@ function bstoptoggle () { // } // } - - diff --git a/narrowskin.js b/narrowskin.js new file mode 100644 index 0000000..3c461b2 --- /dev/null +++ b/narrowskin.js @@ -0,0 +1,45 @@ +// - - - - - - NARROWCA(S)T SKINS - - - - - - // + +// (original) colour codes: +// ColorPurple: mostly used in background; +// ColorLightPink: mostly as main font text; +// ColorLightBlue: mostly on links in the sidebar; +// ColorLightYellow: mostly on top links 'about'; +// ColorPink: mostly on 'Live Now' glow effect; + + +// HOW TO: +// remove '//' on the corresponding funtion, eg.: ChangeColorPurple("newColor1"); +// and replace the second value inside 'setProperty' for a hex code "#000" of your choice! +// for example if black: ('--color-purple',"#000"); + +function ChangeColorPurple(newColor1) +{ + document.documentElement.style.setProperty('--color-purple',"#000"); +} + // ChangeColorPurple("newColor1") + +function ChangeColorLightPink(newColor2) +{ + document.documentElement.style.setProperty('--color-lightpink',"#000"); +} + // ChangeColorLightPink("newColor2") + +function ChangeColorLightBlue(newColor3) +{ + document.documentElement.style.setProperty('--color-lightblue',"#000"); +} + // ChangeColorLightBlue("newColor3") + +function ChangeColorLightYellow(newColor4) +{ + document.documentElement.style.setProperty('--color-lightyellow',"#000"); +} + // ChangeColorLightYellow("newColor4") + +function ChangeColorPink(newColor5) +{ + document.documentElement.style.setProperty('--color-pink',"#000"); +} + // ChangeColorPink("newColor5") + diff --git a/narrowstyle.css b/narrowstyle.css index b780c63..2c41de6 100644 --- a/narrowstyle.css +++ b/narrowstyle.css @@ -43,11 +43,19 @@ html { box-sizing: inherit; } +:root { + --color-purple: #393c56; + --color-lightpink: #ffe4fd; + --color-pink: #ff029c; + --color-lightblue: #aec7ea; + --color-lightyellow: #ffffe5; +} + body { margin: 0rem; font-family: "Computer Modern Typewriter Light"; - background-color: #393c56; - color: #ffe4fd; + background-color: var(--color-purple); + color: var(--color-lightpink); height: 100%; } @@ -77,7 +85,7 @@ p.about { right: 25px; margin: 0.2rem; margin-left: 310px; - background-color: #393c56; + background-color: var(--color-purple); } @@ -87,7 +95,7 @@ p.about { top: 0; right: 0; margin: 1%; - color: #ffffe5; + color: var(--color-lightyellow); z-index: 99; max-width: 80px; } @@ -96,9 +104,9 @@ p.about { .linkmore a, .linkmore a:visited { font-size: 1rem; line-height: 0.6rem; - color: #ffffe5; + color: var(--color-lightyellow); text-decoration: none; - text-shadow: 0.1rem 0.01rem 0.05rem #393c56; + text-shadow: 0.1rem 0.01rem 0.05rem var(--color-purple); padding: 0rem 0rem 2rem 0rem; } @@ -109,7 +117,7 @@ p.about { } #side { - box-shadow: inset 0rem -0.4rem 1rem #ffe4fd; + box-shadow: inset 0rem -0.4rem 1rem var(--color-lightpink); } .sidebar { @@ -118,7 +126,7 @@ p.about { z-index: 1; top: 0; left: 0; - box-shadow: 1rem 0rem 6rem #ffe4fd; + box-shadow: 1rem 0rem 6rem var(--color-lightpink); overflow-x: hidden; overflow-y: hidden; } @@ -138,7 +146,7 @@ p.about { } button.minimize { - box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd; + box-shadow: 0.3rem 0.2rem 0.3rem var(--color-lightpink); border-radius: 0.5rem 5rem 5rem 5rem; line-height: 1.2rem; display: flex; @@ -147,8 +155,8 @@ button.minimize { height: 2rem; font-size: 1.8rem; width: 2rem; - background-color: #393c56; - color: #ffe4fd; + background-color: var(--color-purple); + color: var(--color-lightpink); position: fixed; top: 0; left: 0; @@ -157,8 +165,8 @@ button.minimize { } button.minimize:hover { - color: #393c56; - background-color: #ffe4fd; + color: var(--color-purple); + background-color: var(--color-lightpink); border-radius: inset 0.5rem 5rem 5rem 5rem; } @@ -183,11 +191,11 @@ button.minimize:hover { .sidetop p { margin: 0.5rem 0rem; - color: #aec7ea; + color: var(--color-lightblue); } .sidetop a { - color: #ffe4fd; + color: var(--color-lightpink); margin-top: auto; } @@ -197,7 +205,6 @@ button.minimize:hover { display: flex; flex-direction: column; justify-content: space-between; - /* box-shadow: -0.2rem -0.2rem 1rem #ffe4fd;*/ width: 100%; padding: 0.5rem 1rem; } @@ -223,23 +230,23 @@ button.minimize:hover { @-webkit-keyframes glow { to { - text-shadow: 0 0 8px #ff029c; + text-shadow: 0 0 8px var(--color-pink); } } @-webkit-keyframes glowbutton { to { - box-shadow: 0 0 8px #ff029c; + box-shadow: 0 0 8px var(--color-pink); } } .windowlinks { - color: #ffe4fd; + color: var(--color-lightpink); } .sidebottom { height: 45vh; - box-shadow: 10rem -6rem 4rem #ffe4fd; + box-shadow: 10rem -6rem 4rem var(--color-lightpink); } .sidebottom p { @@ -247,7 +254,7 @@ button.minimize:hover { } .sidebottom a { - color: #aec7ea; + color: var(--color-lightblue); } .sidebottom p:last-child { @@ -278,39 +285,39 @@ button.minimize:hover { .b_allmedia button { font-family: "Computer Modern Typewriter Light"; - color: #ffe4fd; - box-shadow: inset 0.3rem 0.2rem 0.3rem #ffe4fd; + color: var(--color-lightpink); + box-shadow: inset 0.3rem 0.2rem 0.3rem var(--color-lightpink); border-radius: 1.2rem; font-size: 0.8rem; line-height: 1.2rem; align-items: center; - background-color: #393c56; + background-color: var(--color-purple); margin: 0.5rem; border: none; } .b_allmedia button:hover { - box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd; + box-shadow: 0.3rem 0.2rem 0.3rem var(--color-lightpink); } .bhide_chat_off { - color: #393c56 !important; - background-color: #ffe4fd !important; + color: var(--color-purple) !important; + background-color: var(--color-lightpink) !important; box-shadow: none !important; - border: 0.03rem solid #393c56 !important; + border: 0.03rem solid var(--color-purple) !important; } .bhide_chat_off{ -background: -moz-linear-gradient(0deg, rgba(242,217,242,1) 20%, rgba(57,60,86,1) 40%, rgba(57,60,86,1) 60%, rgba(255,228,253,1) 80%, rgba(255,228,253,1) 100%); -background: -webkit-linear-gradient(0deg, rgba(242,217,242,1) 20%, rgba(57,60,86,1) 40%, rgba(57,60,86,1) 60%, rgba(255,228,253,1) 80%, rgba(255,228,253,1) 100%); -background: linear-gradient(0deg, rgba(242,217,242,1) 20%, rgba(57,60,86,1) 40%, rgba(57,60,86,1) 60%, rgba(255,228,253,1) 80%, rgba(255,228,253,1) 100%); +background: -moz-linear-gradient(0deg, var(--color-lightpink) 20%, var(--color-purple) 40%, var(--color-purple) 60%, var(--color-lightpink) 80%, var(--color-lightpink) 100%); +background: -webkit-linear-gradient(0deg, var(--color-lightpink) 20%, var(--color-purple) 40%, var(--color-purple) 60%, var(--color-lightpink) 80%, var(--color-lightpink) 100%); +background: linear-gradient(0deg, var(--color-lightpink) 20%, var(--color-purple) 40%, var(--color-purple) 60%, var(--color-lightpink) 80%, var(--color-lightpink) 100%); /*content: " OFF";*/ } .bhide_chat_off:hover { -background: -moz-linear-gradient(0deg, rgba(242,217,242,1) 40%, rgba(57,60,86,1) 50%, rgba(255,228,253,1) 60%, rgba(255,228,253,1) 100%); -background: -webkit-linear-gradient(0deg, rgba(242,217,242,1) 40%, rgba(57,60,86,1) 50%, rgba(255,228,253,1) 60%, rgba(255,228,253,1) 100%); -background: linear-gradient(0deg, rgba(242,217,242,1) 40%, rgba(57,60,86,1) 50%, rgba(255,228,253,1) 60%, rgba(255,228,253,1) 100%); +background: -moz-linear-gradient(0deg, var(--color-lightpink) 40%, var(--color-purple) 50%, var(--color-lightpink) 60%, var(--color-lightpink) 100%); +background: -webkit-linear-gradient(0deg, var(--color-lightpink) 40%, var(--color-purple) 50%, var(--color-lightpink) 60%, var(--color-lightpink) 100%); +background: linear-gradient(0deg, var(--color-lightpink) 40%, var(--color-purple) 50%, var(--color-lightpink) 60%, var(--color-lightpink) 100%); } .live { @@ -322,7 +329,7 @@ background: linear-gradient(0deg, rgba(242,217,242,1) 40%, rgba(57,60,86,1) 50%, .live-flex { display: flex; box-sizing: border-box; - box-shadow: inset -0.6rem 0rem 0.8rem #ffe4fd; + box-shadow: inset -0.6rem 0rem 0.8rem var(--color-lightpink); border-radius: 0.1rem 0.1rem 0.2rem 0.1rem; flex-wrap: wrap; flex-direction: row; @@ -440,7 +447,7 @@ background: linear-gradient(0deg, rgba(242,217,242,1) 40%, rgba(57,60,86,1) 50%, } button.b-narrow { - box-shadow: 0.3rem 0.2rem 0.3rem #ffe4fd; + box-shadow: 0.3rem 0.2rem 0.3rem var(--color-lightpink); border: 0.03rem solid #393c56; border-radius: 0.5rem 5rem 5rem 5rem; line-height: 1rem; @@ -450,19 +457,19 @@ button.b-narrow { padding: 0.6rem; font-size: 1.6rem; width: auto; - color: #393c56; - background-color: #ffe4fd; + color: var(--color-purple); + background-color: var(--color-lightpink); } button.b-narrow:hover { - background-color: #393c56; - text-shadow: -1px -1px 1px #ffe4fd !important; + background-color: var(--color-purple); + text-shadow: -1px -1px 1px var(--color-lightpink) !important; } .bClicked { - background-color: #393c56 !important; - color: #ffe4fd !important; + background-color: var(--color-purple) !important; + color: var(--color-lightpink) !important; /* -webkit-text-stroke-width: 1px; -webkit-text-stroke-color: #ffe4fd !important; */