An input box similar to those in rule and computed views (without the search symbol) is added to the font-inspector panel which can be used to control the preview text. The updates are throttled to avoid unnecessary updates while the text is being edited. Since the PageStyleActor has allowed clients to define the preview text for a while now, this feature is also enabled for older targets too.
81 lines
1.0 KiB
CSS
81 lines
1.0 KiB
CSS
* {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
margin: 0;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
#all-fonts {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
#showall {
|
|
border-radius: 0;
|
|
border: 1px solid black;
|
|
margin: 3px;
|
|
cursor: pointer;
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.font {
|
|
padding: 10px 10px;
|
|
}
|
|
|
|
.theme-dark .font {
|
|
border-bottom: 1px solid #444;
|
|
}
|
|
|
|
.theme-light .font {
|
|
border-bottom: 1px solid #DDD;
|
|
}
|
|
|
|
.font:last-of-type {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
.theme-light .font:nth-child(even) {
|
|
background: #F4F4F4;
|
|
}
|
|
|
|
.font-preview {
|
|
margin-left: -4px;
|
|
height: 60px;
|
|
display: block;
|
|
}
|
|
|
|
.font-info {
|
|
display: block;
|
|
}
|
|
|
|
.font-name {
|
|
display: inline;
|
|
}
|
|
|
|
.font-css-code {
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
padding: 5px;
|
|
}
|
|
|
|
.theme-light .font-css-code,
|
|
.theme-light .font-url {
|
|
border: 1px solid #CCC;
|
|
background: white;
|
|
}
|
|
|
|
.theme-dark .font-css-code,
|
|
.theme-dark .font-url {
|
|
border: 1px solid #333;
|
|
background: black;
|
|
color: white;
|
|
}
|