121 lines
1.3 KiB
Text
121 lines
1.3 KiB
Text
/* scene42: the filters. */
|
|
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 16dp 20dp;
|
|
background-color: #10182880;
|
|
}
|
|
|
|
h1 {
|
|
margin-bottom: 4dp;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
margin-top: 4dp;
|
|
}
|
|
|
|
.cell {
|
|
width: 300dp;
|
|
margin-right: 40dp;
|
|
}
|
|
|
|
.wide {
|
|
width: 640dp;
|
|
}
|
|
|
|
.label {
|
|
font-size: 15dp;
|
|
color: #a0b0c8;
|
|
margin: 0 0 2dp 0;
|
|
}
|
|
|
|
.panel {
|
|
width: 240dp;
|
|
padding: 8dp 12dp;
|
|
background-color: #24344e;
|
|
border: 2dp #ffd35a;
|
|
font-size: 16dp;
|
|
}
|
|
|
|
.panel p {
|
|
margin: 4dp 0 0 0;
|
|
}
|
|
|
|
.chip {
|
|
display: inline-block;
|
|
width: 40dp;
|
|
height: 18dp;
|
|
margin-right: 6dp;
|
|
}
|
|
|
|
.yellow {
|
|
background-color: #ffd35a;
|
|
}
|
|
|
|
.red {
|
|
background-color: #d83a3a;
|
|
}
|
|
|
|
.blue {
|
|
background-color: #4a7ad8;
|
|
}
|
|
|
|
.blurred {
|
|
filter: blur(6dp);
|
|
}
|
|
|
|
.wideBlur {
|
|
filter: blur(40dp);
|
|
}
|
|
|
|
.shadowText {
|
|
font-size: 26dp;
|
|
color: #ffd35a;
|
|
filter: drop-shadow(#000000cc 6dp 6dp 4dp);
|
|
}
|
|
|
|
.squares {
|
|
display: flex;
|
|
flex-direction: row;
|
|
}
|
|
|
|
.square {
|
|
width: 56dp;
|
|
height: 44dp;
|
|
margin-right: 10dp;
|
|
background-color: #e0603a;
|
|
border: 4dp #4a7ad8;
|
|
}
|
|
|
|
.grayscale {
|
|
filter: grayscale(1);
|
|
}
|
|
|
|
.sepia {
|
|
filter: sepia(1);
|
|
}
|
|
|
|
.invert {
|
|
filter: invert(1);
|
|
}
|
|
|
|
.hue {
|
|
filter: hue-rotate(90deg);
|
|
}
|
|
|
|
.saturate {
|
|
filter: saturate(3);
|
|
}
|
|
|
|
.soft {
|
|
box-shadow: 0 12dp 24dp #000000aa;
|
|
}
|
|
|
|
.muted {
|
|
color: #a0b0c8;
|
|
}
|