added script for quickly changing the 'skin' of narrowcast - only colour scheme for now
This commit is contained in:
parent
9b889e2206
commit
f0b9d4a49e
@ -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>
|
||||
|
||||
@ -211,5 +211,3 @@ function bstoptoggle () {
|
||||
// }
|
||||
// }
|
||||
|
||||
|
||||
|
||||
|
||||
45
narrowskin.js
Normal file
45
narrowskin.js
Normal 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")
|
||||
|
||||
@ -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…
Reference in New Issue
Block a user