anglk
/
web-narrowcast
forked from varia/web-narrowcast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

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

master
JoanaChicau 4 years ago
parent
9b889e2206
commit
f0b9d4a49e
4 changed files with 95 additions and 46 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      index.html
  2. 2
      narrowscripts.js
  3. 45
      narrowskin.js
  4. 91
      narrowstyle.css

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

Write Preview
Loading…
Cancel
Save