mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-07 20:31:06 -05:00
17452b51d7
* [cm6] toolbar for source mode * top:0 for new toolbar * empty div for extensions * fix legacy css top pos * show source toolbar split test * prettier * show beta icon in source editor * dropdown toolbar wip * fix wrong conflict resolve * math dropdown, chrome extension fixes * math dropdown cleanup * sort en.json * fix sort en.json * using isVisual * getMeta in component, pug update * using flex grow * toolbar beta badge * remove extra whitespace * has-legacy-toolbar class * Increase container size * fix tests * prettier * styling fixes, using SplitTestBadge * only show source toolbar if flag is set * fix typo --------- Co-authored-by: Alf Eaton <alf.eaton@overleaf.com> GitOrigin-RevId: 34b01a9421f4a0d6defc40925c5092901575946e
455 lines
8.4 KiB
Text
455 lines
8.4 KiB
Text
@toolbar-height: 40px;
|
|
|
|
.toolbar {
|
|
display: flex;
|
|
align-items: center;
|
|
height: @toolbar-height;
|
|
border-bottom: @toolbar-border-bottom;
|
|
|
|
> a,
|
|
.toolbar-right > a,
|
|
button {
|
|
position: relative;
|
|
.label {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
padding: 0.15em 0.6em 0.2em;
|
|
font-size: 60%;
|
|
pointer-events: none; // Labels were capturing button/anchor clicks.
|
|
}
|
|
}
|
|
|
|
.toolbar-right,
|
|
.toolbar-left {
|
|
button {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
> a:focus,
|
|
button:focus {
|
|
outline: none;
|
|
}
|
|
|
|
> a:not(.btn),
|
|
> button,
|
|
.toolbar-left > a:not(.btn),
|
|
.toolbar-left > button,
|
|
.toolbar-right > a:not(.btn),
|
|
.toolbar-right > button {
|
|
display: inline-block;
|
|
color: @toolbar-icon-btn-color;
|
|
background-color: transparent;
|
|
padding: 4px 2px;
|
|
line-height: 1;
|
|
height: 24px;
|
|
border-radius: @border-radius-small;
|
|
&.toolbar-header-back-projects {
|
|
padding: 5px 10px 4px;
|
|
margin-bottom: 1px;
|
|
}
|
|
|
|
&:hover {
|
|
text-shadow: @toolbar-icon-btn-hover-shadow;
|
|
color: @toolbar-icon-btn-hover-color;
|
|
background-color: transparent;
|
|
text-decoration: none;
|
|
}
|
|
&.active,
|
|
&:active {
|
|
.label {
|
|
display: none;
|
|
}
|
|
color: white;
|
|
background-color: @link-color;
|
|
box-shadow: @toolbar-icon-btn-hover-boxshadow;
|
|
&:hover {
|
|
color: white;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.toolbar-pdf > a:not(.btn) {
|
|
margin-right: 3px;
|
|
}
|
|
|
|
.btn-full-height {
|
|
border: none;
|
|
border-radius: 0;
|
|
border-right: 1px solid @toolbar-header-btn-border-color;
|
|
color: @toolbar-btn-color;
|
|
padding: 3px 10px 5px;
|
|
font-size: 20px;
|
|
max-height: 39px;
|
|
&:hover {
|
|
text-shadow: @toolbar-btn-hover-text-shadow;
|
|
background-color: @toolbar-btn-hover-bg-color;
|
|
color: @toolbar-btn-hover-color;
|
|
}
|
|
&.active,
|
|
&:active {
|
|
color: @toolbar-btn-active-color;
|
|
background-color: @toolbar-btn-active-bg-color;
|
|
box-shadow: @toolbar-btn-active-shadow;
|
|
.editor-menu-icon {
|
|
background: @editor-header-logo-background-active;
|
|
}
|
|
}
|
|
.label {
|
|
top: 4px;
|
|
right: 4px;
|
|
}
|
|
|
|
&.header-cobranding-logo-container {
|
|
height: @toolbar-height - 1;
|
|
padding: 8px 10px;
|
|
}
|
|
}
|
|
.btn-full-height-no-border {
|
|
border-right: 0;
|
|
border-left: 0;
|
|
}
|
|
|
|
.toolbar-left {
|
|
display: flex;
|
|
float: left;
|
|
text-align: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.toolbar-right {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-grow: 1;
|
|
justify-content: flex-end;
|
|
.btn-full-height {
|
|
border-right: 0;
|
|
border-left: 1px solid @toolbar-header-btn-border-color;
|
|
}
|
|
}
|
|
|
|
.toolbar-center {
|
|
text-align: center;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
// At small screen sizes, center relative to the left menu and right buttons
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
|
|
&.toolbar-header {
|
|
background-color: @toolbar-header-bg-color;
|
|
box-shadow: @toolbar-header-shadow;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
&.toolbar-alt {
|
|
.toolbar-alt-mixin;
|
|
}
|
|
}
|
|
|
|
.header-cobranding-logo {
|
|
display: block;
|
|
width: auto;
|
|
max-height: 100%;
|
|
}
|
|
|
|
.toolbar-small-mixin() {
|
|
height: @toolbar-small-height;
|
|
}
|
|
|
|
.toolbar-tall-mixin() {
|
|
height: @toolbar-tall-height;
|
|
padding-top: 10px;
|
|
}
|
|
.toolbar-alt-mixin() {
|
|
background-color: @toolbar-alt-bg-color;
|
|
}
|
|
|
|
.toolbar-label {
|
|
display: none;
|
|
margin: 0 4px;
|
|
font-size: @toolbar-font-size;
|
|
font-weight: 600;
|
|
margin-bottom: 2px;
|
|
vertical-align: middle;
|
|
text-align: left;
|
|
|
|
@media (min-width: @screen-md-min) {
|
|
display: inline-block;
|
|
}
|
|
|
|
&.toolbar-label-multiline {
|
|
line-height: 1.1;
|
|
}
|
|
}
|
|
|
|
.toolbar-header-upgrade-prompt {
|
|
margin-left: 10px;
|
|
@media (max-width: @screen-md-min) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.editor-dark {
|
|
.toolbar-alt {
|
|
background-color: darken(@editor-dark-background-color, 0%);
|
|
}
|
|
.toolbar {
|
|
border-color: @editor-dark-toolbar-border-color;
|
|
.btn-full-height {
|
|
border-color: @editor-dark-toolbar-border-color;
|
|
&:hover {
|
|
background-color: black;
|
|
color: lighten(@link-color, 10%);
|
|
}
|
|
}
|
|
&.toolbar-header {
|
|
box-shadow: none;
|
|
}
|
|
> a:not(.btn) {
|
|
color: @gray;
|
|
&:hover {
|
|
color: @gray-light;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
/**************************************
|
|
Toggle Switch
|
|
***************************************/
|
|
|
|
.toggle-wrapper {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.toggle-switch {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: @toolbar-btn-height;
|
|
margin-right: 5px;
|
|
border-radius: @btn-border-radius-base;
|
|
background-color: @toggle-switch-bg;
|
|
padding: 2px;
|
|
}
|
|
|
|
.toggle-switch-label {
|
|
display: inline-block;
|
|
float: left;
|
|
font-weight: normal;
|
|
height: 100%;
|
|
text-align: center;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
color: @text-color;
|
|
border-radius: @btn-border-radius-base;
|
|
transition: color 0.12s ease-out, background-color 0.12s ease-out,
|
|
box-shadow 0.12s ease-out;
|
|
overflow: hidden;
|
|
|
|
span {
|
|
display: flex;
|
|
align-items: center;
|
|
height: 100%;
|
|
width: 100%;
|
|
padding: 0 8px;
|
|
background-size: 200% 100%;
|
|
background-position: 0 0;
|
|
transition: background-position 0.12s ease-out;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.toggle-switch-input {
|
|
position: absolute;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.toggle-switch-input:disabled + .toggle-switch-label {
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.toggle-switch-input:checked + .toggle-switch-label {
|
|
span {
|
|
background-position: -100% 0;
|
|
}
|
|
color: @white;
|
|
background-color: @toggle-switch-highlight-color;
|
|
border-radius: @btn-border-radius-base;
|
|
box-shadow: 0px 2px 4px rgba(30, 37, 48, 0.16);
|
|
}
|
|
|
|
.toggle-switch-input:checked:nth-child(2) + .toggle-switch-label {
|
|
span {
|
|
background-position: 100% 0;
|
|
}
|
|
}
|
|
|
|
.editor-toggle-switch {
|
|
display: flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
|
|
.toggle-switch {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
.toggle-switch-label span {
|
|
background: none;
|
|
transition: background 0.12s ease-out;
|
|
}
|
|
|
|
.toggle-switch-label:first-of-type span {
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.toggle-switch-label:last-of-type span {
|
|
padding-right: 8px;
|
|
border-right: none;
|
|
}
|
|
|
|
.badge {
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
/**************************************
|
|
Formatting buttons
|
|
***************************************/
|
|
.formatting-buttons {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.formatting-buttons-wrapper {
|
|
display: flex;
|
|
}
|
|
|
|
.formatting-btn {
|
|
color: @formatting-btn-color;
|
|
background-color: @formatting-btn-bg;
|
|
padding: 0;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-shadow: none;
|
|
border: none;
|
|
border-left: 1px solid @formatting-btn-border;
|
|
border-radius: 0;
|
|
|
|
&:hover {
|
|
color: @formatting-btn-color;
|
|
}
|
|
|
|
&.active {
|
|
color: @toolbar-btn-active-color;
|
|
background-color: @toolbar-btn-active-bg-color;
|
|
box-shadow: @toolbar-btn-active-shadow;
|
|
|
|
&:focus {
|
|
color: @toolbar-btn-active-color;
|
|
|
|
&:not(:focus-visible) {
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:focus {
|
|
color: @formatting-btn-color;
|
|
}
|
|
}
|
|
|
|
.formatting-btn--icon {
|
|
min-width: 32px;
|
|
width: 32px;
|
|
}
|
|
|
|
.formatting-btn--icon:last-of-type {
|
|
border-right: 1px solid @formatting-btn-border;
|
|
}
|
|
|
|
.formatting-btn--more {
|
|
padding-left: 9px;
|
|
padding-right: 9px;
|
|
|
|
.caret {
|
|
margin-top: 1px;
|
|
}
|
|
}
|
|
|
|
.formatting-icon {
|
|
font-style: normal;
|
|
line-height: 1.5;
|
|
}
|
|
|
|
.formatting-icon--small {
|
|
font-size: small;
|
|
line-height: 1.9;
|
|
}
|
|
|
|
.formatting-icon--serif {
|
|
font-family: @font-family-serif;
|
|
}
|
|
|
|
.formatting-more {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.formatting-menu {
|
|
min-width: auto;
|
|
max-width: 130px;
|
|
background-color: @formatting-menu-bg;
|
|
}
|
|
|
|
.formatting-menu-item {
|
|
float: left;
|
|
}
|
|
|
|
.formatting-menu-item > .formatting-btn {
|
|
border-right: none;
|
|
}
|
|
|
|
// Disable border on left-most icon in menu
|
|
.formatting-menu-item:nth-of-type(4n + 1) > .formatting-btn {
|
|
border-left: none;
|
|
}
|
|
|
|
.toolbar.toolbar-pdf > a[disabled] {
|
|
cursor: not-allowed;
|
|
.opacity(0.65);
|
|
.box-shadow(none);
|
|
}
|
|
|
|
.toolbar-btn-secondary {
|
|
height: @toolbar-btn-height;
|
|
padding-bottom: 0px;
|
|
margin-bottom: 0.5px;
|
|
}
|
|
|
|
.switch-to-editor-btn {
|
|
margin-right: 7px;
|
|
}
|
|
|
|
.switch-to-editor-btn,
|
|
.switch-to-pdf-btn {
|
|
text-align: left;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.toolbar-btn-secondary-icon {
|
|
margin-right: 5px;
|
|
}
|
|
}
|