this repo has no description
1.status-translation-block {
2 margin: 8px 0 0;
3 padding: 0;
4 font-size: 90%;
5 border-radius: 8px;
6}
7.status-translation-block summary {
8 list-style: none;
9 display: inline-block;
10}
11.status-translation-block summary::-webkit-details-marker {
12 display: none;
13}
14.status-translation-block summary button {
15 border-radius: 8px;
16 border: 1px solid var(--outline-color);
17 padding: 8px;
18 background-color: var(--bg-color);
19 font-size: 12px;
20 color: var(--text-insignificant-color);
21}
22.status-translation-block summary button:is(:hover, :focus) {
23 color: var(--text-color);
24 filter: none !important;
25}
26.status-translation-block details:not([open]) .detected {
27 display: none;
28}
29/* .status-translation-block details summary button:active, */
30.status-translation-block details[open] summary button {
31 /* color: var(--text-color); */
32 /* background-color: var(--bg-faded-color); */
33 border-bottom-left-radius: 0;
34 border-bottom-right-radius: 0;
35 border-bottom: 0;
36 margin-bottom: -1px;
37 background-image: linear-gradient(
38 to top var(--backward),
39 var(--bg-color) 50%,
40 var(--bg-faded-blur-color)
41 );
42 box-shadow: inset 0 0 0 1px var(--bg-color);
43}
44.status-translation-block .translated-block {
45 border: 1px solid var(--outline-color);
46 line-height: 1.3;
47 border-radius: 8px;
48 border-start-start-radius: 0;
49 margin: 0;
50 padding: 8px;
51 background-color: var(--bg-color);
52 background-image: linear-gradient(
53 to bottom var(--forward),
54 var(--bg-color),
55 var(--bg-faded-blur-color)
56 );
57 white-space: pre-wrap;
58 box-shadow:
59 inset 0 0 0 1px var(--bg-color),
60 0 1px 5px -2px var(--drop-shadow-color);
61 text-shadow: 0 1px var(--bg-color);
62}
63.status-translation-block .translated-block .translation-info {
64 display: flex;
65 align-items: center;
66 gap: 8px;
67}
68.status-translation-block .translated-block .translation-info * {
69 vertical-align: middle;
70 flex-shrink: 0;
71}
72.status-translation-block .translated-source-select {
73 appearance: none;
74 display: inline-block;
75 margin: 0;
76 padding: 4px 8px;
77 border: 0;
78 border-radius: 8px;
79 background-color: var(--bg-faded-color);
80 color: inherit;
81 width: min-content;
82 min-width: 2em;
83 flex-shrink: 1 !important;
84}
85.status-translation-block .translated-block output {
86 display: block;
87 margin-top: 0.75em;
88 text-wrap: pretty;
89}
90.status-translation-block
91 .translated-block
92 output.translated-pronunciation-content {
93 opacity: 0.75;
94 padding-top: 0.75em;
95 border-top: var(--hairline-width) solid var(--outline-color);
96 display: -webkit-box;
97 -webkit-line-clamp: 3;
98 -webkit-box-orient: vertical;
99 overflow: hidden;
100 mask-image: linear-gradient(to bottom, black 3em, transparent);
101}
102.status-translation-block
103 .translated-block
104 output.translated-pronunciation-content.expand {
105 display: block;
106 -webkit-line-clamp: unset;
107 -webkit-box-orient: unset;
108 overflow: visible;
109 mask-image: none;
110}
111
112/* MINI */
113
114.status-translation-block-mini {
115 display: flex;
116 margin: 8px 0 0;
117 font-size: 90%;
118 gap: 8px;
119 --top-padding: 2px;
120 --top-border: 1px;
121
122 .icon {
123 color: var(--text-insignificant-color);
124 margin-top: calc(var(--top-padding) + var(--top-border) + 2px);
125 }
126
127 output {
128 padding: var(--top-padding) 0 0;
129 border-top: var(--top-border) dashed var(--outline-stronger-color);
130 text-wrap: pretty;
131 }
132}