90 lines
1.5 KiB
Text
90 lines
1.5 KiB
Text
/* scene40: shapes that clip through the stencil clip mask. */
|
|
|
|
body {
|
|
width: 100%;
|
|
height: 100%;
|
|
box-sizing: border-box;
|
|
padding: 24dp;
|
|
background-color: #10182880;
|
|
}
|
|
|
|
.row {
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: flex-start;
|
|
margin-top: 12dp;
|
|
}
|
|
|
|
/* A rounded list: the rows fill it edge to edge, so square corners would show as coloured
|
|
bands past the curve. */
|
|
.rounded {
|
|
width: 200dp;
|
|
height: 220dp;
|
|
overflow-y: auto;
|
|
border-radius: 16dp;
|
|
background-color: #24344e;
|
|
font-size: 20dp;
|
|
}
|
|
|
|
.rounded div {
|
|
padding: 6dp 14dp;
|
|
}
|
|
|
|
.odd {
|
|
background-color: #ffd35a;
|
|
color: #101828;
|
|
}
|
|
|
|
.even {
|
|
background-color: #33507a;
|
|
}
|
|
|
|
/* A panel rotated 8 degrees with overflow hidden and a block larger than it inside. */
|
|
.tilted {
|
|
width: 200dp;
|
|
height: 160dp;
|
|
margin: 30dp 40dp 0 40dp;
|
|
overflow: hidden;
|
|
transform: rotate(8deg);
|
|
border: 3dp #ffd35a;
|
|
background-color: #101828;
|
|
}
|
|
|
|
.big {
|
|
width: 300dp;
|
|
margin: -24dp 0 0 -40dp;
|
|
padding: 20dp;
|
|
background-color: #7a2d33;
|
|
font-size: 20dp;
|
|
}
|
|
|
|
.muted {
|
|
color: #a0b0c8;
|
|
}
|
|
|
|
/* Nested masks: a rounded child inside a rounded parent. */
|
|
.outer {
|
|
width: 180dp;
|
|
height: 220dp;
|
|
overflow: hidden;
|
|
border-radius: 40dp;
|
|
background-color: #ffd35a;
|
|
padding: 20dp;
|
|
}
|
|
|
|
.inner {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
border-radius: 30dp;
|
|
background-color: #24344e;
|
|
}
|
|
|
|
.fill {
|
|
width: 240dp;
|
|
height: 300dp;
|
|
margin: -30dp 0 0 -30dp;
|
|
padding: 50dp 20dp 30dp 44dp;
|
|
background-color: #33507a;
|
|
font-size: 17dp;
|
|
}
|