overleaf/services/web/frontend/stylesheets/modules/symbol-palette.less
Alf Eaton dfaed70297 Replace symbol palette tabs with a custom tablist (#19034)
GitOrigin-RevId: 69d8a8dd8980e287b484b915b1f92e57af5324cb
2024-06-26 11:11:35 +00:00

168 lines
3.5 KiB
Text

.symbol-palette-container {
height: 100%;
width: 100%;
position: relative;
.symbol-palette {
display: flex;
flex-direction: column;
background: @symbol-palette-bg;
color: @symbol-palette-color;
width: 100%;
height: 100%;
min-height: 220px; // allow space for the overlay contents
}
.symbol-palette-header-outer {
flex-shrink: 0;
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
align-items: flex-start;
font-family: @font-family-sans-serif;
font-size: 16px;
background: @symbol-palette-header-background;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
.symbol-palette-header {
flex: 1;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
}
.symbol-palette-tab-list[role='tablist'] {
background: none;
border-bottom: none;
flex-wrap: wrap;
}
.symbol-palette-tab[role='tab'] {
-webkit-appearance: none;
-moz-appearance: none;
background: none;
border: none;
border-bottom: 1px solid transparent;
color: inherit;
cursor: pointer;
display: inline-block;
font: inherit;
margin: 0;
padding: 0.25em 0.5em;
&[aria-selected='true'] {
background: @symbol-palette-selected-tab-bg;
color: @symbol-palette-selected-tab-color;
}
}
.symbol-palette-body {
flex: 1;
overflow-y: auto;
}
.symbol-palette-items {
display: flex;
flex-wrap: wrap;
padding: @padding-xs;
}
.symbol-palette-item {
font-family: 'Stix Two Math', serif;
font-size: 24px;
line-height: 42px;
height: 42px;
width: 42px;
margin: @margin-xs;
color: @symbol-palette-item-color;
background: @symbol-palette-item-bg;
border: 1px solid transparent;
border-radius: @border-radius-base;
display: inline-flex;
align-items: center;
justify-content: center;
}
.symbol-palette-item-command {
font-family: monospace;
font-weight: bold;
}
.symbol-palette-item-notes {
margin-top: @margin-xs;
}
.symbol-palette-empty {
display: flex;
align-items: center;
justify-content: center;
padding: @padding-sm;
}
.symbol-palette-search {
padding: 2px @padding-sm;
margin: @margin-xs;
line-height: 1;
height: auto;
width: auto;
}
.symbol-palette-header-group {
display: flex;
align-items: center;
white-space: nowrap;
margin-left: @margin-xs;
}
.symbol-palette-info-link,
.symbol-palette-info-link:focus,
.symbol-palette-info-link:hover {
color: inherit;
}
.symbol-palette-close-button {
background: transparent;
color: @symbol-palette-color;
padding-left: @padding-sm;
padding-right: @padding-sm;
margin-left: @margin-xs;
font-size: 24px;
font-weight: bold;
line-height: 1;
}
.symbol-palette-overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: fade(@symbol-palette-bg, 75%);
color: @symbol-palette-color;
display: flex;
flex-direction: column;
padding: 0 @padding-lg @padding-sm;
align-items: center;
text-shadow: 0 0 8px @symbol-palette-text-shadow-color;
min-height: 200px;
overflow: auto;
h4 {
font-weight: bold;
color: @symbol-palette-color;
text-align: center;
}
.symbol-palette-close-button {
position: absolute;
top: 0;
right: 0;
}
.upgrade-benefits {
column-count: 2;
}
}
}