@@ -4003,6 +4003,209 @@ html.dark .boostlook pre.rouge .cm {
40034003 background-color : transparent;
40044004}
40054005
4006+ /* Search Field Container */
4007+ # search-field {
4008+ display : flex;
4009+ position : relative;
4010+ }
4011+
4012+ /* Search Input */
4013+ # search-input {
4014+ padding : 0.15rem 0.75rem 0.15rem 1.75rem !important ;
4015+ border : 1px solid var (--border-border-secondary );
4016+ border-radius : 6px ;
4017+ background-color : var (--surface-background-main-surface-primary );
4018+ background-image : url ("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E" );
4019+ background-repeat : no-repeat;
4020+ background-position : 0.35rem center;
4021+ background-size : 16px 16px ;
4022+ color : var (--text-main-text-body-primary );
4023+ font-family : inherit;
4024+ font-size : 1rem !important ; /* 16px minimum prevents iOS zoom on focus */
4025+ transition : border-color 0.15s ease, box-shadow 0.15s ease;
4026+ }
4027+
4028+ # search-input ::placeholder {
4029+ color : var (--text-main-text-body-tetriary );
4030+ }
4031+
4032+ # search-input : focus {
4033+ outline : none;
4034+ border-color : var (--border-border-blue-primary );
4035+ box-shadow : 0 0 0 3px var (--colors-blue-50 );
4036+ }
4037+
4038+ # search-input : disabled {
4039+ background : var (--colors-neutral-100 );
4040+ color : var (--text-main-text-body-tetriary );
4041+ cursor : not-allowed;
4042+ }
4043+
4044+ /* Results Dropdown */
4045+ .search-result-dropdown-menu {
4046+ position : absolute;
4047+ z-index : 100 ;
4048+ top : 100% ;
4049+ right : 0 ;
4050+ margin-top : 8px ;
4051+ min-width : 400px ;
4052+ border-radius : 8px ;
4053+ background : var (--surface-background-main-base-primary );
4054+ box-shadow : 0 4px 16px rgba (0 , 0 , 0 , 0.12 );
4055+ }
4056+
4057+ .search-result-dataset {
4058+ padding : 0.5rem ;
4059+ border : 1px solid var (--border-border-secondary );
4060+ border-radius : 8px ;
4061+ min-width : 580px ;
4062+ max-height : calc (100vh - 6rem );
4063+ overflow : auto;
4064+ }
4065+
4066+ /* Result Component Header */
4067+ .search-result-component-header {
4068+ padding : 0.5rem 0.75rem ;
4069+ margin : 0.25rem 0 ;
4070+ border-bottom : 1px solid var (--border-border-secondary );
4071+ color : var (--text-main-text-body-secondary );
4072+ font-size : 0.75rem ;
4073+ font-weight : 600 ;
4074+ text-transform : uppercase;
4075+ letter-spacing : 0.025em ;
4076+ }
4077+
4078+ /* Result Item */
4079+ .search-result-item {
4080+ display : flex;
4081+ margin : 0.25rem 0 ;
4082+ border-radius : 6px ;
4083+ }
4084+
4085+ .search-result-item : hover {
4086+ background : var (--colors-neutral-50 );
4087+ }
4088+
4089+ .search-result-item .no-result {
4090+ padding : 1rem ;
4091+ color : var (--text-main-text-body-tetriary );
4092+ text-align : center;
4093+ }
4094+
4095+ /* Result Document Title (Left Column) */
4096+ .search-result-document-title {
4097+ width : 25% ;
4098+ padding : 0.625rem 0.75rem ;
4099+ border-right : 1px solid var (--border-border-secondary );
4100+ color : var (--text-main-text-body-tetriary );
4101+ font-size : 0.75rem ;
4102+ text-align : right;
4103+ }
4104+
4105+ /* Result Document Hit (Right Column) */
4106+ .search-result-document-hit {
4107+ flex : 1 ;
4108+ color : var (--text-main-text-body-secondary );
4109+ font-size : 0.8125rem ;
4110+ }
4111+
4112+ .search-result-document-hit > a {
4113+ display : block;
4114+ padding : 0.5rem 0.75rem ;
4115+ color : inherit;
4116+ text-decoration : none;
4117+ }
4118+
4119+ .search-result-document-hit > a : hover {
4120+ background : transparent;
4121+ }
4122+
4123+ .search-result-document-hit .search-result-section-title {
4124+ margin-bottom : 0.25rem ;
4125+ color : var (--text-main-text-body-primary );
4126+ font-size : 0.875rem ;
4127+ font-weight : 500 ;
4128+ }
4129+
4130+ .search-result-document-hit .search-result-highlight {
4131+ padding : 0.1em 0.2em ;
4132+ border-radius : 2px ;
4133+ background : var (--colors-blue-50 );
4134+ color : var (--text-main-text-link-blue );
4135+ font-weight : 500 ;
4136+ }
4137+
4138+ /* Search Responsive: Mobile (< 768px) */
4139+ @media screen and (max-width : 767px ) {
4140+ .boostlook .toolbar {
4141+ flex-wrap : wrap;
4142+ gap : 0.75rem ;
4143+ }
4144+
4145+ .search-container {
4146+ order : 99 ;
4147+ flex : 1 0 100% ;
4148+ }
4149+
4150+ # search-input {
4151+ width : 100% !important ;
4152+ min-width : unset;
4153+ font-size : 1rem !important ; /* Prevents iOS zoom on focus */
4154+ }
4155+
4156+ .search-result-dropdown-menu {
4157+ position : fixed;
4158+ top : 6rem ;
4159+ left : 1rem ;
4160+ right : 1rem ;
4161+ min-width : unset;
4162+ max-width : unset;
4163+ width : auto;
4164+ }
4165+
4166+ .search-result-dataset {
4167+ min-width : unset;
4168+ }
4169+ }
4170+
4171+ /* Search Responsive: Tablet (768px - 1023px) */
4172+ @media screen and (min-width : 768px ) {
4173+ # search-input {
4174+ width : unset !important ;
4175+ min-width : unset !important ;
4176+ }
4177+
4178+ .search-result-dropdown-menu {
4179+ position : fixed;
4180+ top : 4rem ;
4181+ left : calc (var (--main-max-width-leftbar ) + 1rem );
4182+ right : 1rem ;
4183+ min-width : unset;
4184+ max-width : unset;
4185+ width : auto;
4186+ }
4187+
4188+ .search-result-dataset {
4189+ min-width : unset;
4190+ }
4191+ }
4192+
4193+ /* Search Responsive: Desktop (1024px+) */
4194+ @media screen and (min-width : 1024px ) {
4195+ # search-input {
4196+ min-width : 200px !important ;
4197+ z-index : 1001 ;
4198+ }
4199+
4200+ .search-result-dropdown-menu {
4201+ position : absolute;
4202+ top : 100% ;
4203+ left : auto;
4204+ right : 0 ;
4205+ width : clamp (530px , 45vw , 600px );
4206+ }
4207+ }
4208+
40064209/*----------------- Styles specific to Antora Templates end -----------------*/
40074210
40084211/*---------- Quickbook docs styling fixes -----------*/
0 commit comments