overleaf/services/web/frontend/stylesheets/app/editor/toolbar.less
Domagoj Kriskovic 17452b51d7 [cm6] Add toolbar to Source Mode for Beta users (#13429)
* [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
2023-07-17 10:46:26 +00:00

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;
}
}