Browse Source

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

master
JoanaChicau 3 years ago
parent
commit
f0b9d4a49e
  1. 3
      index.html
  2. 2
      narrowscripts.js
  3. 45
      narrowskin.js
  4. 91
      narrowstyle.css

3
index.html

@ -14,6 +14,7 @@
<!-- 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="narrowscripts.js"></script>
<script type="text/javascript" src="narrowskin.js"></script>
</head>
<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> -->
</div>
</body>
</html>

2
narrowscripts.js

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

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

91
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; */

Loading…
Cancel
Save