1 | @import "../global/variables.css";
|
2 |
|
3 | @value unit from "../global/global.css";
|
4 | @value gradientStart: rgba(255, 255, 255, 0);
|
5 | @value gradientStop: var(--ring-content-background-color);
|
6 |
|
7 | .island {
|
8 | display: flex;
|
9 | flex-direction: column;
|
10 |
|
11 | border: 1px solid var(--ring-line-color);
|
12 | border-radius: var(--ring-border-radius);
|
13 |
|
14 | background-color: var(--ring-content-background-color);
|
15 | box-shadow: 0 1px 4px var(--ring-popup-shadow-color);
|
16 | }
|
17 |
|
18 | .withTransparentBottomBorder {
|
19 | transition: border-bottom-color 0.1s;
|
20 |
|
21 | border-bottom: 1px solid transparent;
|
22 | }
|
23 |
|
24 | .header {
|
25 | composes: withTransparentBottomBorder;
|
26 |
|
27 | box-sizing: border-box;
|
28 | width: 100%;
|
29 | padding: 0 calc(unit * 4);
|
30 |
|
31 | line-height: 28px;
|
32 | }
|
33 |
|
34 | .withBottomBorder.withBottomBorder {
|
35 | border-bottom-color: var(--ring-popup-border-color);
|
36 | border-top-left-radius: var(--ring-border-radius);
|
37 | border-top-right-radius: var(--ring-border-radius);
|
38 | }
|
39 |
|
40 | .title {
|
41 | display: block;
|
42 | float: left;
|
43 |
|
44 | transform-origin: 0 50%;
|
45 | word-break: break-word;
|
46 |
|
47 | color: var(--ring-heading-color);
|
48 |
|
49 | font-weight: bold;
|
50 | }
|
51 |
|
52 | .narrowIsland .header {
|
53 | padding: 0 calc(unit * 2);
|
54 | }
|
55 |
|
56 | .content {
|
57 | position: relative;
|
58 |
|
59 | display: flex;
|
60 | overflow: auto;
|
61 |
|
62 | width: 100%;
|
63 | -webkit-overflow-scrolling: touch;
|
64 | }
|
65 |
|
66 | .scrollableWrapper {
|
67 | overflow: auto;
|
68 |
|
69 | width: 100%;
|
70 | padding: calc(unit * 2) calc(unit * 4);
|
71 | }
|
72 |
|
73 | .narrowIsland .scrollableWrapper {
|
74 | padding: calc(unit * 2) calc(unit * 2);
|
75 | }
|
76 |
|
77 | .withoutPaddings .scrollableWrapper {
|
78 | padding: 0;
|
79 | }
|
80 |
|
81 | .contentWithTopFade::before {
|
82 | position: absolute;
|
83 | z-index: var(--ring-fixed-z-index);
|
84 | left: 0;
|
85 |
|
86 | display: block;
|
87 |
|
88 | width: 100%;
|
89 | height: calc(unit * 3);
|
90 |
|
91 | content: '';
|
92 |
|
93 | pointer-events: none;
|
94 |
|
95 | opacity: 0.8;
|
96 | background: linear-gradient(to top, gradientStart, gradientStop);
|
97 | }
|
98 |
|
99 | .contentWithTopFade:first-child::before {
|
100 | border-top-left-radius: var(--ring-border-radius);
|
101 | border-top-right-radius: var(--ring-border-radius);
|
102 | }
|
103 |
|
104 | .contentWithBottomFade::after {
|
105 | position: absolute;
|
106 | bottom: 0;
|
107 | left: 0;
|
108 |
|
109 | display: block;
|
110 |
|
111 | width: 100%;
|
112 | height: calc(unit * 3);
|
113 |
|
114 | content: '';
|
115 | pointer-events: none;
|
116 |
|
117 | opacity: 0.8;
|
118 | border-bottom-right-radius: var(--ring-border-radius);
|
119 | border-bottom-left-radius: var(--ring-border-radius);
|
120 | background: linear-gradient(to bottom, gradientStart, gradientStop);
|
121 | }
|