diff --git a/packages/pdfjs-viewer/src/custom.css b/packages/pdfjs-viewer/src/custom.css index 7e55ab50f7..425b9aa45c 100644 --- a/packages/pdfjs-viewer/src/custom.css +++ b/packages/pdfjs-viewer/src/custom.css @@ -3,7 +3,7 @@ :root { --main-color: var(--tn-main-text-color); --body-bg-color: transparent; - --outline-color: var(--tn-input-focus-outline-color); + --outline-color: gray; --focus-ring-color: var(--tn-input-focus-outline-color); --toolbar-border-color: var(--tn-main-border-color); --toolbar-icon-bg-color: var(--tn-main-text-color); @@ -28,7 +28,7 @@ :root #toolbarContainer #toolbarViewer input, :root #editorUndoBar, :root .dialogButton { - font-family: "Inter"; + font-family: Inter, sans-serif; } #secondaryToolbar, @@ -73,14 +73,15 @@ } /* Text boxes */ -input { +input:not([type]), +input[type="number"] { --field-border-color: transparent; --field-bg-color: var(--tn-input-background-color); --field-color: var(--tn-input-text-color); --input-horizontal-padding: 8px; border-radius: 4px !important; - font-size: .8rem !important; + font-size: .85rem !important; &:hover { --field-bg-color: var(--tn-input-hover-background); @@ -104,6 +105,22 @@ input { } } +input[type="color"] { + border: 0; + outline: 0; + background: transparent; + border-radius: 4px; + + &:hover { + opacity: .75; + } + + &:focus { + outline: 2px solid var(--tn-input-focus-outline-color); + outline-offset: 2px; + } +} + /* #endregion */ /* #region Toolbar */ @@ -192,17 +209,27 @@ input { /* Not found message */ #findMsg[data-status="notFound"] { color: var(--tn-dropdown-item-icon-destructive-color); + opacity: 1; } } +#toolbarContainer #toolbarViewer #pageNumber { + font-size: 12px; + font-weight: 600; +} + #scaleSelectContainer { --dropdown-btn-bg-color: transparent; - --button-hover-color: var(--tn-hover-item-background-color); + --button-hover-color: transparent; border-radius: 6px; select:focus { background: var(--tn-main-background-color); } + + &:hover { + background-color: var(--tn-hover-item-background-color); + } } /* Toolbar editor dropdowns */ @@ -237,7 +264,8 @@ input { .toolbarButton.labeled { color: var(--tn-menu-text-color); padding-inline-end: 12px; - font-size: 13px; + padding-block: 6px; + font-size: .9em; } }