autocomplete.css in Open Social 8.9
.ui-autocomplete.ui-widget-content {
box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
background: white;
padding: 0;
list-style: none;
max-height: 305px;
overflow-y: auto;
}
.ui-autocomplete.ui-widget-content.upward {
bottom: 38px;
top: auto !important;
}
.ui-autocomplete.ui-widget-content .ui-menu-item {
font-size: 0.875rem;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
color: #555555;
cursor: pointer;
}
.ui-autocomplete.ui-widget-content .ui-menu-item > a {
padding: 7px 10px;
display: flex;
}
.ui-autocomplete.ui-widget-content .ui-menu-item .ui-state-active {
background-color: #e6e6e6;
}
.ui-autocomplete.ui-widget-content .ui-menu-item .mention__avatar {
flex: 0 0 24px;
max-width: 24px;
margin-right: 10px;
}
.ui-autocomplete.ui-widget-content .ui-menu-item .mention__name {
align-self: center;
flex-grow: 1;
}
.ui-autocomplete.ui-widget-content .ui-menu-item:hover {
background: #e6e6e6;
border: 0;
}
.ui-autocomplete.ui-widget-content::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #f7f7f7;
}
.ui-autocomplete.ui-widget-content::-webkit-scrollbar {
width: 12px;
background-color: #f7f7f7;
}
.ui-autocomplete.ui-widget-content::-webkit-scrollbar-thumb {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
background-color: #777777;
}
.ui-autocomplete {
margin-top: -1px;
padding-top: 0;
padding-bottom: 0;
}
.ui-front {
z-index: 1060;
}
.ui-widget-header {
font-weight: 700;
}
.ui-menu .ui-state-focus,
.ui-menu .ui-state-active {
margin: 0;
}
/* Interaction states
----------------------------------*/
.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited {
color: #555555;
}
.ui-autocomplete .ui-state-hover,
.ui-autocomplete .ui-state-focus {
background: #e6e6e6;
}
.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited {
color: #212121;
text-decoration: none;
}
.ui-autocomplete .ui-state-active a,
.ui-autocomplete .ui-state-active a:link,
.ui-autocomplete .ui-state-active a:visited {
color: #212121;
text-decoration: none;
}
/* Interaction Cues
----------------------------------*/
.ui-state-highlight,
.ui-widget-content .ui-state-highlight,
.ui-widget-header .ui-state-highlight {
border: 1px solid #e6e6e6;
background: #e6e6e6;
color: #363636;
}
.ui-state-highlight a,
.ui-widget-content .ui-state-highlight a,
.ui-widget-header .ui-state-highlight a {
color: #363636;
}
.ui-state-error,
.ui-widget-content .ui-state-error,
.ui-widget-header .ui-state-error {
border: 1px solid #cd0a0a;
background: #fef1ec url("images/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x;
color: #cd0a0a;
}
.ui-state-error a,
.ui-widget-content .ui-state-error a,
.ui-widget-header .ui-state-error a {
color: #cd0a0a;
}
.ui-state-error-text,
.ui-widget-content .ui-state-error-text,
.ui-widget-header .ui-state-error-text {
color: #cd0a0a;
}
.ui-priority-primary,
.ui-widget-content .ui-priority-primary,
.ui-widget-header .ui-priority-primary {
font-weight: bold;
}
.ui-priority-secondary,
.ui-widget-content .ui-priority-secondary,
.ui-widget-header .ui-priority-secondary {
opacity: .7;
filter: Alpha(Opacity=70);
/* support: IE8 */
font-weight: normal;
}
.ui-state-disabled,
.ui-widget-content .ui-state-disabled,
.ui-widget-header .ui-state-disabled {
opacity: .35;
filter: Alpha(Opacity=35);
/* support: IE8 */
background-image: none;
}
.ui-state-disabled .ui-icon {
filter: Alpha(Opacity=35);
/* support: IE8 - See #6059 */
}
/* Layout helpers
----------------------------------*/
.ui-helper-hidden {
display: none;
}
.ui-helper-hidden-accessible {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.ui-helper-reset {
margin: 0;
padding: 0;
border: 0;
outline: 0;
line-height: 1.3;
text-decoration: none;
font-size: 100%;
list-style: none;
}
.ui-helper-clearfix {
min-height: 0;
/* support: IE7 */
}
.ui-helper-zfix {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
opacity: 0;
filter: Alpha(Opacity=0);
/* support: IE8 */
}
/* Interaction Cues
----------------------------------*/
.ui-state-disabled {
cursor: default !important;
}
/* Misc visuals
----------------------------------*/
/* Overlays */
.ui-widget-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
File
themes/socialbase/assets/css/autocomplete.css
View source
- .ui-autocomplete.ui-widget-content {
- box-shadow: 0 0 6px rgba(0, 0, 0, 0.16), 0 6px 12px rgba(0, 0, 0, 0.32);
- background: white;
- padding: 0;
- list-style: none;
- max-height: 305px;
- overflow-y: auto;
- }
-
- .ui-autocomplete.ui-widget-content.upward {
- bottom: 38px;
- top: auto !important;
- }
-
- .ui-autocomplete.ui-widget-content .ui-menu-item {
- font-size: 0.875rem;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- color: #555555;
- cursor: pointer;
- }
-
- .ui-autocomplete.ui-widget-content .ui-menu-item > a {
- padding: 7px 10px;
- display: flex;
- }
-
- .ui-autocomplete.ui-widget-content .ui-menu-item .ui-state-active {
- background-color: #e6e6e6;
- }
-
- .ui-autocomplete.ui-widget-content .ui-menu-item .mention__avatar {
- flex: 0 0 24px;
- max-width: 24px;
- margin-right: 10px;
- }
-
- .ui-autocomplete.ui-widget-content .ui-menu-item .mention__name {
- align-self: center;
- flex-grow: 1;
- }
-
- .ui-autocomplete.ui-widget-content .ui-menu-item:hover {
- background: #e6e6e6;
- border: 0;
- }
-
- .ui-autocomplete.ui-widget-content::-webkit-scrollbar-track {
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
- background-color: #f7f7f7;
- }
-
- .ui-autocomplete.ui-widget-content::-webkit-scrollbar {
- width: 12px;
- background-color: #f7f7f7;
- }
-
- .ui-autocomplete.ui-widget-content::-webkit-scrollbar-thumb {
- -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1);
- background-color: #777777;
- }
-
- .ui-autocomplete {
- margin-top: -1px;
- padding-top: 0;
- padding-bottom: 0;
- }
-
- .ui-front {
- z-index: 1060;
- }
-
- .ui-widget-header {
- font-weight: 700;
- }
-
- .ui-menu .ui-state-focus,
- .ui-menu .ui-state-active {
- margin: 0;
- }
-
- /* Interaction states
- ----------------------------------*/
- .ui-state-default a,
- .ui-state-default a:link,
- .ui-state-default a:visited {
- color: #555555;
- }
-
- .ui-autocomplete .ui-state-hover,
- .ui-autocomplete .ui-state-focus {
- background: #e6e6e6;
- }
-
- .ui-state-hover a,
- .ui-state-hover a:hover,
- .ui-state-hover a:link,
- .ui-state-hover a:visited,
- .ui-state-focus a,
- .ui-state-focus a:hover,
- .ui-state-focus a:link,
- .ui-state-focus a:visited {
- color: #212121;
- text-decoration: none;
- }
-
- .ui-autocomplete .ui-state-active a,
- .ui-autocomplete .ui-state-active a:link,
- .ui-autocomplete .ui-state-active a:visited {
- color: #212121;
- text-decoration: none;
- }
-
- /* Interaction Cues
- ----------------------------------*/
- .ui-state-highlight,
- .ui-widget-content .ui-state-highlight,
- .ui-widget-header .ui-state-highlight {
- border: 1px solid #e6e6e6;
- background: #e6e6e6;
- color: #363636;
- }
-
- .ui-state-highlight a,
- .ui-widget-content .ui-state-highlight a,
- .ui-widget-header .ui-state-highlight a {
- color: #363636;
- }
-
- .ui-state-error,
- .ui-widget-content .ui-state-error,
- .ui-widget-header .ui-state-error {
- border: 1px solid #cd0a0a;
- background: #fef1ec url("images/ui-bg_glass_95_fef1ec_1x400.png") 50% 50% repeat-x;
- color: #cd0a0a;
- }
-
- .ui-state-error a,
- .ui-widget-content .ui-state-error a,
- .ui-widget-header .ui-state-error a {
- color: #cd0a0a;
- }
-
- .ui-state-error-text,
- .ui-widget-content .ui-state-error-text,
- .ui-widget-header .ui-state-error-text {
- color: #cd0a0a;
- }
-
- .ui-priority-primary,
- .ui-widget-content .ui-priority-primary,
- .ui-widget-header .ui-priority-primary {
- font-weight: bold;
- }
-
- .ui-priority-secondary,
- .ui-widget-content .ui-priority-secondary,
- .ui-widget-header .ui-priority-secondary {
- opacity: .7;
- filter: Alpha(Opacity=70);
- /* support: IE8 */
- font-weight: normal;
- }
-
- .ui-state-disabled,
- .ui-widget-content .ui-state-disabled,
- .ui-widget-header .ui-state-disabled {
- opacity: .35;
- filter: Alpha(Opacity=35);
- /* support: IE8 */
- background-image: none;
- }
-
- .ui-state-disabled .ui-icon {
- filter: Alpha(Opacity=35);
- /* support: IE8 - See #6059 */
- }
-
- /* Layout helpers
- ----------------------------------*/
- .ui-helper-hidden {
- display: none;
- }
-
- .ui-helper-hidden-accessible {
- border: 0;
- clip: rect(0 0 0 0);
- height: 1px;
- margin: -1px;
- overflow: hidden;
- padding: 0;
- position: absolute;
- width: 1px;
- }
-
- .ui-helper-reset {
- margin: 0;
- padding: 0;
- border: 0;
- outline: 0;
- line-height: 1.3;
- text-decoration: none;
- font-size: 100%;
- list-style: none;
- }
-
- .ui-helper-clearfix {
- min-height: 0;
- /* support: IE7 */
- }
-
- .ui-helper-zfix {
- width: 100%;
- height: 100%;
- top: 0;
- left: 0;
- position: absolute;
- opacity: 0;
- filter: Alpha(Opacity=0);
- /* support: IE8 */
- }
-
- /* Interaction Cues
- ----------------------------------*/
- .ui-state-disabled {
- cursor: default !important;
- }
-
- /* Misc visuals
- ----------------------------------*/
- /* Overlays */
- .ui-widget-overlay {
- position: fixed;
- top: 0;
- left: 0;
- width: 100%;
- height: 100%;
- }