Background picker. Doesnt work with older svelte-color-picker
parent
f4a1e92358
commit
9eb2465db9
|
@ -3,36 +3,49 @@ import Ticker from 'svelte-ticker';
|
||||||
import {HsvPicker} from 'svelte-color-picker';
|
import {HsvPicker} from 'svelte-color-picker';
|
||||||
import { enhance } from '$app/forms';
|
import { enhance } from '$app/forms';
|
||||||
|
|
||||||
function colorCallback(chryon_font_color) {
|
|
||||||
let r = chryon_font_color.detail.r;
|
function chyron_font_color_Callback(chyron_font_color) {
|
||||||
let g = chryon_font_color.detail.g;
|
let r = chyron_font_color.detail.r;
|
||||||
let b = chryon_font_color.detail.b;
|
let g = chyron_font_color.detail.g;
|
||||||
let a = chryon_font_color.detail.a;
|
let b = chyron_font_color.detail.b;
|
||||||
|
let a = chyron_font_color.detail.a;
|
||||||
let horizontal = document.querySelector(".horizontal");
|
let horizontal = document.querySelector(".horizontal");
|
||||||
horizontal.style.color = `rgb(${r},${g},${b},${a})`;
|
horizontal.style.color = `rgba(${r},${g},${b},${a})`;
|
||||||
|
}
|
||||||
|
|
||||||
|
function chyron_background_color_Callback(chyron_background_color) {
|
||||||
|
let rb = chyron_background_color.detail.r;
|
||||||
|
let gb = chyron_background_color.detail.g;
|
||||||
|
let bb = chyron_background_color.detail.b;
|
||||||
|
let ab = chyron_background_color.detail.a;
|
||||||
|
let hz_background = document.querySelector(".horizontal");
|
||||||
|
hz_background.style.background = `rgba(${rb},${gb},${bb},${ab})`;
|
||||||
}
|
}
|
||||||
|
|
||||||
/** @type {import('./$types').ActionData} */
|
/** @type {import('./$types').ActionData} */
|
||||||
export let form;
|
export let form;
|
||||||
let chyron_text_01 = 'chyron text here. Mooooo.';
|
let chyron_text_01 = 'chyron text here. Mooooo.';
|
||||||
let chyron_text_02 = '1234567890. qwertyuyiop. asdfghjkl. zxcvbnm. chyron text here. Mooooo. 555.';
|
let chyron_text_02 = '1234567890. qwertyuyiop. asdfghjkl. zxcvbnm. chyron text here. Mooooo. 555.';
|
||||||
let chyron_text_03 = '1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.'
|
let chyron_text_03 = '1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.';
|
||||||
let chyron_text_04 = ' 1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.'
|
let chyron_text_04 = ' 1234567890. qwertyuyiop. asdfghjkl. zxcvbnm.';
|
||||||
|
|
||||||
let chyron_font_size = 2.75;
|
let chyron_font_size = 2.75;
|
||||||
let chyron_font_weight = 600;
|
let chyron_font_weight = 600;
|
||||||
let chyron_speed = 30;
|
let chyron_speed = 30;
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<h1>Scrolltron</h1>
|
<!-- <center><h3>Scrolltron</h3></center> -->
|
||||||
|
</div>
|
||||||
|
<br>
|
||||||
|
<div class="font_color_picker">
|
||||||
|
Font Color: <HsvPicker on:colorChange={chyron_font_color_Callback} startColor={"#00FF00"}/>
|
||||||
</div>
|
</div>
|
||||||
<p></p>
|
<p></p>
|
||||||
<div class="picker">
|
<div class="background_color_picker">
|
||||||
<HsvPicker on:colorChange={colorCallback} startColor={"#00FF00"}/>
|
Background Color: <HsvPicker on:colorChange={chyron_background_color_Callback} startColor={"#5500FF"}/>
|
||||||
</div>
|
</div>
|
||||||
<div class="form">
|
<div class="form">
|
||||||
<p>
|
<p>
|
||||||
|
@ -76,7 +89,7 @@ let chyron_speed = 30;
|
||||||
.horizontal{
|
.horizontal{
|
||||||
/* padding:426px;*/
|
/* padding:426px;*/
|
||||||
font-family: Verdana, sans-serif;
|
font-family: Verdana, sans-serif;
|
||||||
background: rgba(30, 24, 150, 0.4);
|
/*background: rgba(30, 24, 150, 0.4);*/
|
||||||
@keyframes horizontal {
|
@keyframes horizontal {
|
||||||
100% { transform: translateX(-50%); }
|
100% { transform: translateX(-50%); }
|
||||||
}
|
}
|
||||||
|
@ -97,11 +110,18 @@ let chyron_speed = 30;
|
||||||
font-size: 2.75em;
|
font-size: 2.75em;
|
||||||
background: rgba(128, 128, 128, 0);
|
background: rgba(128, 128, 128, 0);
|
||||||
}
|
}
|
||||||
.picker{
|
.font_color_picker{
|
||||||
color: rgb(61, 177, 206);
|
color: rgb(61, 177, 206);
|
||||||
font-family: Verdana, sans-serif;
|
font-family: Verdana, sans-serif;
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 2.75em;
|
font-size: 2.75em;
|
||||||
background: rgba(128, 128, 128, 0);
|
background: rgba(128, 128, 128, 0);
|
||||||
}
|
}
|
||||||
|
.background_color_picker{
|
||||||
|
color: rgb(197, 123, 27);
|
||||||
|
font-family: Verdana, sans-serif;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 2.75em;
|
||||||
|
background: rgba(128, 128, 128, 0);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue