Commit 93dba3fa authored by Zéfling's avatar Zéfling 🎨

Fix demo for Blink Browsers

parent ce8dfa4f
...@@ -5,131 +5,136 @@ ...@@ -5,131 +5,136 @@
<form> <form>
<fieldset class="source-fieldset"> <fieldset class="source-fieldset">
<legend>Base</legend> <legend>Base</legend>
<label>Color: <input type="text" <div>
[(value)]="baseColor" <label>Color: <input type="text"
(change)="baseColor = $event.target.value" [(value)]="baseColor"
placeholder="black, #000, rgb(0,0,0), hsl(0,0%,0%)" (change)="baseColor = $event.target.value"
title="black, #000, rgb(0,0,0), hsl(0,0%,0%)"></label> placeholder="black, #000, rgb(0,0,0), hsl(0,0%,0%)"
<div class="source" title="black, #000, rgb(0,0,0), hsl(0,0%,0%)"></label>
*ngIf="baseColor"> <div class="source"
<div [style.background-color]="baseColor">&nbsp;</div> *ngIf="baseColor">
<div [style.background-color]="baseColor">&nbsp;</div>
</div>
</div> </div>
</fieldset> </fieldset>
<fieldset class="additionnal"> <fieldset class="additionnal">
<legend>Additionnal</legend> <legend>Additionnal</legend>
<div class="luminosity"> <div>
<label> <span>Luminosity [-1; 1]:</span><input type="number" <div class="luminosity">
min="-1.000" <label> <span>Luminosity [-1; 1]:</span><input type="number"
max="1.000" min="-1.000"
step="0.001" max="1.000"
[value]="luminosity" step="0.001"
(change)="luminosity = $event.target.value"></label> [value]="luminosity"
</div> (change)="luminosity = $event.target.value"></label>
<div class="red"> </div>
<label><span>Red [-256; 256]:</span><input type="number" <div class="red">
min="-256" <label><span>Red [-256; 256]:</span><input type="number"
max="256" min="-256"
step="1" max="256"
[value]="red" step="1"
(change)="red = $event.target.value"></label> [value]="red"
</div> (change)="red = $event.target.value"></label>
<div class="green"> </div>
<label><span>Green [-256; 256]:</span><input type="number" <div class="green">
min="-255" <label><span>Green [-256; 256]:</span><input type="number"
max="256" min="-255"
step="1" max="256"
[value]="green" step="1"
(change)="green = $event.target.value"></label> [value]="green"
</div> (change)="green = $event.target.value"></label>
<div class="blue"> </div>
<label><span>Blue [-256; 256]:</span><input type="number" <div class="blue">
min="-255" <label><span>Blue [-256; 256]:</span><input type="number"
max="256" min="-255"
step="1" max="256"
[value]="blue" step="1"
(change)="blue = $event.target.value"></label> [value]="blue"
</div> (change)="blue = $event.target.value"></label>
<div class="hue"> </div>
<label><span>Hue [-360; 360]°:</span><input type="number" <div class="hue">
max="-360" <label><span>Hue [-360; 360]°:</span><input type="number"
max="360" max="-360"
step="1" max="360"
[value]="hue" step="1"
(change)="hue = $event.target.value"></label> [value]="hue"
</div> (change)="hue = $event.target.value"></label>
<div class="saturation"> </div>
<label><span>Saluration [-100; 100]%:</span><input type="number" <div class="saturation">
min="-100" <label><span>Saluration [-100; 100]%:</span><input type="number"
max="100" min="-100"
step="1" max="100"
[value]="saturation" step="1"
(change)="saturation = $event.target.value"></label> [value]="saturation"
</div> (change)="saturation = $event.target.value"></label>
<div class="value"> </div>
<label><span>Value [-100; 100]%:</span><input type="number" <div class="value">
min="-100" <label><span>Value [-100; 100]%:</span><input type="number"
max="100" min="-100"
step="1" max="100"
[value]="value" step="1"
(change)="value = $event.target.value"></label> [value]="value"
</div> (change)="value = $event.target.value"></label>
<div class="maskColor"> </div>
<label><span>Mask color:</span><input type="text" <div class="maskColor">
[value]="maskColor" <label><span>Mask color:</span><input type="text"
(change)="maskColor = $event.target.value" [value]="maskColor"
placeholder="black, #000, rgb(0,0,0), hsl(0,0%,0%)" (change)="maskColor = $event.target.value"
title="black, #000, rgb(0,0,0), hsl(0,0%,0%)"></label> placeholder="black, #000, rgb(0,0,0), hsl(0,0%,0%)"
</div> title="black, #000, rgb(0,0,0), hsl(0,0%,0%)"></label>
<div class="maskOpacity"> </div>
<label><span>+ Mask opacity [0; 1]:</span><input type="number" <div class="maskOpacity">
min="0" <label><span>+ Mask opacity [0; 1]:</span><input type="number"
max="1" min="0"
step="0.001" max="1"
[value]="maskOpacity" step="0.001"
(change)="maskOpacity = $event.target.value"></label> [value]="maskOpacity"
</div> (change)="maskOpacity = $event.target.value"></label>
<div class="alpha"> </div>
<label><span>Alpha [-1; 1]:</span><input type="number" <div class="alpha">
min="-1.000" <label><span>Alpha [-1; 1]:</span><input type="number"
max="1.000" min="-1.000"
step="0.001" max="1.000"
[value]="alpha" step="0.001"
(change)="alpha = $event.target.value"></label> [value]="alpha"
</div> (change)="alpha = $event.target.value"></label>
<div class="button"> </div>
<button type="button" <div class="button">
(click)="change()">Change</button> <button type="button"
(click)="change()">Change</button>
</div>
</div> </div>
</fieldset> </fieldset>
</form> </form>
<aside> <aside>
<fieldset class="result-fieldset"> <fieldset class="result-fieldset">
<legend>Result</legend> <legend>Result</legend>
<div class="result"> <div>
<div [style.background-image]="gradient">
&nbsp;
</div>
</div>
<div class="value-result">
<span>Hexa:</span>
<textarea readonly>{{colorHex || '--'}}</textarea>
<div class="result"> <div class="result">
<div [style.background-color]="colorHex">&nbsp;</div> <div [style.background-image]="gradient">
&nbsp;
</div>
</div> </div>
</div> <div class="value-result">
<div class="value-result"> <span>Hexa:</span>
<span>RGB:</span> <textarea readonly>{{colorHex || '--'}}</textarea>
<textarea readonly>{{colorRgb || '--'}}</textarea> <div class="result">
<div class="result"> <div [style.background-color]="colorHex">&nbsp;</div>
<div [style.background-color]="colorRgb">&nbsp;</div> </div>
</div> </div>
</div> <div class="value-result">
<div class="value-result"> <span>RGB:</span>
<span>HSL:</span> <textarea readonly>{{colorRgb || '--'}}</textarea>
<textarea readonly>{{colorHsl || '--'}}</textarea> <div class="result">
<div class="result"> <div [style.background-color]="colorRgb">&nbsp;</div>
<div [style.background-color]="colorHsl">&nbsp;</div> </div>
</div>
<div class="value-result">
<span>HSL:</span>
<textarea readonly>{{colorHsl || '--'}}</textarea>
<div class="result">
<div [style.background-color]="colorHsl">&nbsp;</div>
</div>
</div> </div>
</div> </div>
</fieldset> </fieldset>
......
...@@ -30,7 +30,7 @@ aside { ...@@ -30,7 +30,7 @@ aside {
padding: 0 15px padding: 0 15px
} }
.additionnal { .additionnal > div {
display: grid; display: grid;
width: 100%; width: 100%;
grid-template: grid-template:
...@@ -106,7 +106,7 @@ button { ...@@ -106,7 +106,7 @@ button {
} }
} }
.source-fieldset { .source-fieldset > div {
display: flex; display: flex;
} }
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment