codekingpro/portable-devtools

1.tokenized-text {
2    width:100%;
3    padding:2rem;
4    max-height: 400px;
5    overflow-y: auto;
6    box-sizing:border-box;
7    line-height:4rem; /* Lots of space between lines */
8    font-family: "Roboto Light", "Ubuntu Light", "Ubuntu", monospace;
9    box-shadow: 2px 2px 2px rgba(0,0,0,0.2);
10    background-color: rgba(0,0,0,0.01);
11    letter-spacing:2px; /* Give some extra separation between chars */
12}
13.non-token{
14    /* White space and other things the tokenizer ignores*/
15    white-space: pre;
16    letter-spacing:4px;
17    border-top:1px solid #A0A0A0; /* A gentle border on top and bottom makes tabs more ovious*/
18    border-bottom:1px solid #A0A0A0;
19    line-height: 1rem;
20    height: calc(100% - 2px);
21}
22
23.token {
24    white-space: pre;
25    position:relative;
26    color:black;
27    letter-spacing:2px;
28}
29
30.annotation{
31    white-space:nowrap; /* Important - ensures that annotations appears even if the annotated text wraps a line */
32    border-radius:4px;
33    position:relative;
34    width:fit-content;
35}
36.annotation:before {
37    /*The before holds the text and the after holds the background*/
38    z-index:1000; /* Make sure this is above the background */
39    content:attr(data-label); /* The annotations label is on a data attribute */
40    color:white;
41    position:absolute;
42    font-size:1rem;
43    text-align:center;
44    font-weight:bold;
45
46    top:1.75rem;
47    line-height:0;
48    left:0;
49    width:100%;
50    padding:0.5rem 0;
51    /* These make it so an annotation doesn't stretch beyond the annotated text if the label is longer*/
52    overflow: hidden;
53    white-space: nowrap;
54    text-overflow:ellipsis;
55}
56
57.annotation:after {
58    content:attr(data-label); /* The content defines the width of the annotation*/
59    position:absolute;
60    font-size:0.75rem;
61    text-align:center;
62    font-weight:bold;
63    text-overflow:ellipsis;
64    top:1.75rem;
65    line-height:0;
66    overflow: hidden;
67    white-space: nowrap;
68
69    left:0;
70    width:100%; /* 100% of the parent, which is the annotation whose width is the tokens inside it*/
71
72    padding:0.5rem 0;
73    /* Nast hack below:
74    We set the annotations color in code because we don't know the colors at css time.
75    But you can't pass a color as a data attribute to get it into the pseudo element (this thing)
76    So to get around that, annotations have the color set on them with a style attribute and then we
77    can get the color with currentColor.
78    Annotations wrap tokens and tokens set the color back to black
79     */
80    background-color: currentColor;
81}
82.annotation:hover::after, .annotation:hover::before{
83    /* When the user hovers over an annotation expand the label to display in full
84     */
85    min-width: fit-content;
86}
87
88.annotation:hover{
89    /* Emphasize the annotation start end with a border on hover*/
90    border-color: currentColor;
91    border: 2px solid;
92}
93.special-token:not(:empty){
94    /*
95    A none empty special token is like UNK (as opposed to CLS which has no representation in the text )
96     */
97    position:relative;
98}
99.special-token:empty::before{
100    /* Special tokens that don't have text are displayed as pseudo elements so we dont select them with the mouse*/
101    content:attr(data-stok);
102    background:#202020;
103    font-size:0.75rem;
104    color:white;
105    margin: 0 0.25rem;
106    padding: 0.25rem;
107    border-radius:4px
108}
109
110.special-token:not(:empty):before {
111    /* Special tokens that have text (UNK) are displayed above the actual text*/
112    content:attr(data-stok);
113    position:absolute;
114    bottom:1.75rem;
115    min-width:100%;
116    width:100%;
117    height:1rem;
118    line-height:1rem;
119    font-size:1rem;
120    text-align:center;
121    color:white;
122    font-weight:bold;
123    background:#202020;
124    border-radius:10%;
125}
126/*
127We want to alternate the color of tokens, but we can't use nth child because tokens might be broken up by annotations
128instead we apply even and odd class at generation time and color them that way
129 */
130.even-token{
131    background:#DCDCDC	;
132    border: 1px solid #DCDCDC;
133}
134.odd-token{
135    background:#A0A0A0;
136    border: 1px solid #A0A0A0;
137}
138.even-token.multi-token,.odd-token.multi-token{
139    background:  repeating-linear-gradient(
140    45deg,
141    transparent,
142    transparent 1px,
143    #ccc 1px,
144    #ccc 1px
145    ),
146    /* on "bottom" */
147    linear-gradient(
148    to bottom,
149    #FFB6C1,
150    #999
151    );
152}
153
154.multi-token:hover::after {
155    content:"This char has more than 1 token"; /* The content defines the width of the annotation*/
156    color:white;
157    background-color: black;
158    position:absolute;
159    font-size:0.75rem;
160    text-align:center;
161    font-weight:bold;
162    text-overflow:ellipsis;
163    top:1.75rem;
164    line-height:0;
165    overflow: hidden;
166    white-space: nowrap;
167    left:0;
168    width:fit-content; /* 100% of the parent, which is the annotation whose width is the tokens inside it*/
169    padding:0.5rem 0;
170}
171