shy-findbar.css (2299B)
1 /*== ShyFox Findbar ================================================================================================================================= 2 3 Ctrl + F 4 5 6 */ 7 8 findbar{ 9 --findbar-pad: 8px; 10 --fndbr-btn-wdt: 30px; 11 12 position: fixed !important; 13 z-index: 5 !important; 14 15 bottom: calc(var(--bottom-margin) + var(--margin)); 16 left: calc( 17 ( 18 100vw 19 - var(--findbar-wdt) 20 - var(--left-margin) 21 - var(--right-margin) 22 ) / 2 23 ); 24 25 height: calc(var(--toolbar-item-hgt) * 2); 26 padding-top: var(--toolbar-item-hgt) !important; 27 width: var(--findbar-wdt); 28 29 /* styles for input textbox */ 30 .findbar-textbox{ 31 position: absolute; 32 top: var(--findbar-pad); 33 left: var(--findbar-pad); 34 width: calc( 35 var(--findbar-wdt) 36 - var(--findbar-pad) * 2.5 37 - var(--fndbr-btn-wdt) * 3 38 ) !important; 39 } 40 41 /* put buttons to right place */ 42 .findbar-closebutton, 43 .findbar-find-next, 44 .findbar-find-previous 45 { 46 position: absolute; 47 top: var(--findbar-pad); 48 margin-inline-start: 0px !important; 49 margin-inline-end: 0px !important; 50 } 51 .findbar-closebutton {right: var(--findbar-pad);} 52 .findbar-find-next {right: calc(var(--fndbr-btn-wdt) + var(--findbar-pad) / 2 )} 53 .findbar-find-previous {right: calc(var(--fndbr-btn-wdt) * 2 + var(--findbar-pad) / 2 )} 54 55 /* some design */ 56 background: var(--tb-col) !important; 57 transition: var(--transition) !important; 58 & > * {opacity: var(--dyn-opct);} 59 60 /* corners, shadow */ 61 border: var(--outline) !important; 62 outline: var(--shadow) !important; 63 border-radius: var(--big-rounding) !important; 64 65 /* rounded buttons */ 66 .findbar-textbox, .findbar-closebutton, 67 .findbar-find-next, .findbar-find-previous 68 {border-radius: var(--rounding) !important;} 69 } 70 71 findbar[hidden]{ 72 margin-bottom: unset !important; 73 transition-delay: unset !important; 74 visibility: visible !important; 75 opacity: 0 !important; 76 pointer-events: none !important; 77 bottom: calc( 78 0px 79 - var(--toolbar-item-hgt) * 2 80 - var(--margin) * 2 81 ) !important; 82 } 83 84 /* adaptive findbar width */ 85 @media (max-width: 1500px) { 86 :root{ 87 --findbar-wdt: calc( 88 100vw 89 - var(--left-margin) 90 - var(--right-margin) 91 - var(--margin) * 2 92 ) !important; 93 } 94 }