github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #19124 from overleaf/dp-light-hover-bug

Browse source 
Refactor pdf toolbar button styles to fix bug with hovering over active logs button

GitOrigin-RevId: f8034c9daade32cda7c4f08ccd292c86ef6b8454
This commit is contained in:
David 2024-06-26 13:37:51 +01:00 committed by Copybot
parent 74b1ebac02
commit 1844603a2d
2 changed files with 48 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
services/web/frontend/js/features/pdf-preview/components/pdf-zoom-dropdown.tsx
View file

@ -68,6 +68,7 @@ function PdfZoomDropdown({
pullRight pullRight
> >
<Dropdown.Toggle <Dropdown.Toggle
bsStyle={null}
className="btn pdf-toolbar-btn pdfjs-zoom-dropdown-button small" className="btn pdf-toolbar-btn pdfjs-zoom-dropdown-button small"
value={rawScale} value={rawScale}
title={rawScaleToPercentage(rawScale)} title={rawScaleToPercentage(rawScale)}

109
services/web/frontend/stylesheets/app/editor/pdf.less
View file

@ -57,72 +57,57 @@
padding-left: @line-height-computed / 4; padding-left: @line-height-computed / 4;
} }
.toolbar-pdf-hybrid {
.btn:not(.detach-compile-button):not(.btn-orphan):not(
.detach-synctex-control
):not(.switch-to-editor-btn):not(.split-menu-dropdown-toggle):not(
.split-menu-button
) {
display: inline-block;
color: @toolbar-btn-color;
background-color: transparent;
padding: 4px 2px;
line-height: 1;
height: 24px;
border-radius: 2px;
&:hover,
&:active,
&:focus {
color: @toolbar-btn-color;
}
.label {
position: absolute;
top: 0;
right: 0;
padding: 0.15em 0.6em 0.2em;
font-size: 60%;
pointer-events: none;
}
.btn {
display: inline-block;
color: #fff;
background-color: transparent;
padding: 4px 2px;
line-height: 1;
height: 24px;
border-radius: 2px;
}
&.log-btn {
border: none;
margin-right: 3px;
&.active {
color: white;
background-color: @link-color;
box-shadow: @toolbar-icon-btn-hover-boxshadow;
opacity: 0.65;
&:hover {
color: white;
}
}
&:focus {
outline: none;
}
}
}
}
.pdf-toolbar-btn { .pdf-toolbar-btn {
display: inline-block;
color: @toolbar-btn-color;
background-color: transparent;
padding: 4px 2px;
line-height: 1;
height: 24px;
border-radius: 2px;
border-radius: @border-radius-base; border-radius: @border-radius-base;
&:hover,
&:active,
&:focus {
color: @toolbar-btn-color;
}
&:hover { &:hover {
&:not(:disabled) { &:not(:disabled) {
background-color: @pdf-toolbar-btn-hover-color !important; background-color: @pdf-toolbar-btn-hover-color;
}
}
.label {
position: absolute;
top: 0;
right: 0;
padding: 0.15em 0.6em 0.2em;
font-size: 60%;
pointer-events: none;
}
&.log-btn {
border: none;
margin-right: 3px;
&.active {
color: white;
background-color: @link-color;
box-shadow: @toolbar-icon-btn-hover-boxshadow;
opacity: 0.65;
&:hover {
&:not(:disabled) {
background-color: transparent;
color: @toolbar-btn-color;
}
}
}
&:focus {
outline: none;
} }
} }
} }