varia/web-narrowcast
14
0
Fork 1
Code Issues 11 Pull Requests Projects Releases Wiki Activity

added script for quickly changing the 'skin' of narrowcast - only colour scheme for now

Browse Source
This commit is contained in:
JoanaChicau 2021-05-18 14:04:34 +02:00
parent 9b889e2206
commit f0b9d4a49e
4 changed files with 95 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
index.html
View File

@ -14,6 +14,7 @@
<!-- OUR SCRIPTS --> <!-- OUR SCRIPTS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="narrowscripts.js"></script> <script type="text/javascript" src="narrowscripts.js"></script>
<script type="text/javascript" src="narrowskin.js"></script>
</head> </head>
<body> <body>
@ -248,9 +249,7 @@
<!-- <p class="note"> <u>Note</u>: this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always smoothly. There is the option to open the direct url of each element in a new window.</p> --> <!-- <p class="note"> <u>Note</u>: this interface is in experimental phase ☆ﾟ.*･｡ﾟ and some things may not work always smoothly. There is the option to open the direct url of each element in a new window.</p> -->
</div> </div>
</body> </body>
</html> </html>

2
narrowscripts.js
View File

@ -211,5 +211,3 @@ function bstoptoggle () {
// } // }
// } // }

45
narrowskin.js Normal file
View File

@ -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")

91
narrowstyle.css
View File

@ -43,11 +43,19 @@ html {
box-sizing: inherit; box-sizing: inherit;
} }
:root {
--color-purple: #393c56;
--color-lightpink: #ffe4fd;
--color-pink: #ff029c;
--color-lightblue: #aec7ea;
--color-lightyellow: #ffffe5;
}
body { body {
margin: 0rem; margin: 0rem;
font-family: "Computer Modern Typewriter Light"; font-family: "Computer Modern Typewriter Light";
background-color: #393c56; background-color: var(--color-purple);
color: #ffe4fd; color: var(--color-lightpink);
height: 100%; height: 100%;
} }
@ -77,7 +85,7 @@ p.about {
right: 25px; right: 25px;
margin: 0.2rem; margin: 0.2rem;
margin-left: 310px; margin-left: 310px;
background-color: #393c56; background-color: var(--color-purple);
} }
@ -87,7 +95,7 @@ p.about {
top: 0; top: 0;
right: 0; right: 0;
margin: 1%; margin: 1%;
color: #ffffe5; color: var(--color-lightyellow);
z-index: 99; z-index: 99;
max-width: 80px; max-width: 80px;
} }
@ -96,9 +104,9 @@ p.about {
.linkmore a, .linkmore a:visited { .linkmore a, .linkmore a:visited {
font-size: 1rem; font-size: 1rem;
line-height: 0.6rem; line-height: 0.6rem;
color: #ffffe5; color: var(--color-lightyellow);
text-decoration: none; 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; padding: 0rem 0rem 2rem 0rem;
} }
@ -109,7 +117,7 @@ p.about {
} }
#side { #side {
box-shadow: inset 0rem -0.4rem 1rem #ffe4fd; box-shadow: inset 0rem -0.4rem 1rem var(--color-lightpink);
} }
.sidebar { .sidebar {
@ -118,7 +126,7 @@ p.about {
z-index: 1; z-index: 1;
top: 0; top: 0;
left: 0; left: 0;
box-shadow: 1rem 0rem 6rem #ffe4fd; box-shadow: 1rem 0rem 6rem var(--color-lightpink);
overflow-x: hidden; overflow-x: hidden;
overflow-y: hidden; overflow-y: hidden;
} }
@ -138,7 +146,7 @@ p.about {
} }
button.minimize { 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; border-radius: 0.5rem 5rem 5rem 5rem;
line-height: 1.2rem; line-height: 1.2rem;
display: flex; display: flex;
@ -147,8 +155,8 @@ button.minimize {
height: 2rem; height: 2rem;
font-size: 1.8rem; font-size: 1.8rem;
width: 2rem; width: 2rem;
background-color: #393c56; background-color: var(--color-purple);
color: #ffe4fd; color: var(--color-lightpink);
position: fixed; position: fixed;
top: 0; top: 0;
left: 0; left: 0;
@ -157,8 +165,8 @@ button.minimize {
} }
button.minimize:hover { button.minimize:hover {
color: #393c56; color: var(--color-purple);
background-color: #ffe4fd; background-color: var(--color-lightpink);
border-radius: inset 0.5rem 5rem 5rem 5rem; border-radius: inset 0.5rem 5rem 5rem 5rem;
} }
@ -183,11 +191,11 @@ button.minimize:hover {
.sidetop p { .sidetop p {
margin: 0.5rem 0rem; margin: 0.5rem 0rem;
color: #aec7ea; color: var(--color-lightblue);
} }
.sidetop a { .sidetop a {
color: #ffe4fd; color: var(--color-lightpink);
margin-top: auto; margin-top: auto;
} }
@ -197,7 +205,6 @@ button.minimize:hover {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
/* box-shadow: -0.2rem -0.2rem 1rem #ffe4fd;*/
width: 100%; width: 100%;
padding: 0.5rem 1rem; padding: 0.5rem 1rem;
} }
@ -223,23 +230,23 @@ button.minimize:hover {
@-webkit-keyframes glow { @-webkit-keyframes glow {
to { to {
text-shadow: 0 0 8px #ff029c; text-shadow: 0 0 8px var(--color-pink);
} }
} }
@-webkit-keyframes glowbutton { @-webkit-keyframes glowbutton {
to { to {
box-shadow: 0 0 8px #ff029c; box-shadow: 0 0 8px var(--color-pink);
} }
} }
.windowlinks { .windowlinks {
color: #ffe4fd; color: var(--color-lightpink);
} }
.sidebottom { .sidebottom {
height: 45vh; height: 45vh;
box-shadow: 10rem -6rem 4rem #ffe4fd; box-shadow: 10rem -6rem 4rem var(--color-lightpink);
} }
.sidebottom p { .sidebottom p {
@ -247,7 +254,7 @@ button.minimize:hover {
} }
.sidebottom a { .sidebottom a {
color: #aec7ea; color: var(--color-lightblue);
} }
.sidebottom p:last-child { .sidebottom p:last-child {
@ -278,39 +285,39 @@ button.minimize:hover {
.b_allmedia button { .b_allmedia button {
font-family: "Computer Modern Typewriter Light"; font-family: "Computer Modern Typewriter Light";
color: #ffe4fd; color: var(--color-lightpink);
box-shadow: inset 0.3rem 0.2rem 0.3rem #ffe4fd; box-shadow: inset 0.3rem 0.2rem 0.3rem var(--color-lightpink);
border-radius: 1.2rem; border-radius: 1.2rem;
font-size: 0.8rem; font-size: 0.8rem;
line-height: 1.2rem; line-height: 1.2rem;
align-items: center; align-items: center;
background-color: #393c56; background-color: var(--color-purple);
margin: 0.5rem; margin: 0.5rem;
border: none; border: none;
} }
.b_allmedia button:hover { .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 { .bhide_chat_off {
color: #393c56 !important; color: var(--color-purple) !important;
background-color: #ffe4fd !important; background-color: var(--color-lightpink) !important;
box-shadow: none !important; box-shadow: none !important;
border: 0.03rem solid #393c56 !important; border: 0.03rem solid var(--color-purple) !important;
} }
.bhide_chat_off{ .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: -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, 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, var(--color-lightpink) 20%, var(--color-purple) 40%, var(--color-purple) 60%, var(--color-lightpink) 80%, var(--color-lightpink) 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: 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";*/ /*content: " OFF";*/
} }
.bhide_chat_off:hover { .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: -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, 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, var(--color-lightpink) 40%, var(--color-purple) 50%, var(--color-lightpink) 60%, var(--color-lightpink) 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: linear-gradient(0deg, var(--color-lightpink) 40%, var(--color-purple) 50%, var(--color-lightpink) 60%, var(--color-lightpink) 100%);
} }
.live { .live {
@ -322,7 +329,7 @@ background: linear-gradient(0deg, rgba(242,217,242,1) 40%, rgba(57,60,86,1) 50%,
.live-flex { .live-flex {
display: flex; display: flex;
box-sizing: border-box; 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; border-radius: 0.1rem 0.1rem 0.2rem 0.1rem;
flex-wrap: wrap; flex-wrap: wrap;
flex-direction: row; 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 { 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: 0.03rem solid #393c56;
border-radius: 0.5rem 5rem 5rem 5rem; border-radius: 0.5rem 5rem 5rem 5rem;
line-height: 1rem; line-height: 1rem;
@ -450,19 +457,19 @@ button.b-narrow {
padding: 0.6rem; padding: 0.6rem;
font-size: 1.6rem; font-size: 1.6rem;
width: auto; width: auto;
color: #393c56; color: var(--color-purple);
background-color: #ffe4fd; background-color: var(--color-lightpink);
} }
button.b-narrow:hover { button.b-narrow:hover {
background-color: #393c56; background-color: var(--color-purple);
text-shadow: -1px -1px 1px #ffe4fd !important; text-shadow: -1px -1px 1px var(--color-lightpink) !important;
} }
.bClicked { .bClicked {
background-color: #393c56 !important; background-color: var(--color-purple) !important;
color: #ffe4fd !important; color: var(--color-lightpink) !important;
/* -webkit-text-stroke-width: 1px; /* -webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #ffe4fd !important; */ -webkit-text-stroke-color: #ffe4fd !important; */