Created
September 13, 2016 21:33
-
-
Save Kaiyuan/52e29bbd6776ae4b379d99dd844c3814 to your computer and use it in GitHub Desktop.
BOXKS blog Google cse style
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/** | |
* Default Theme, v2. | |
* | |
*/ | |
/* Slight reset to make the preview have ample padding. */ | |
#SearchPageBox { | |
height: 40px; | |
border: 1px solid #d7d7d7; | |
border-radius: 6px; | |
width: -moz-calc(100% - 2px); | |
width: -webkit-calc(100% - 2px); | |
width: calc(100% - 2px); | |
margin: 2em 0; | |
} | |
#SearchPageInputs { | |
height: 40px; | |
width: -moz-calc(100% - 40px); | |
width: -webkit-calc(100% - 40px); | |
width: calc(100% - 40px); | |
} | |
#SearchPageInputs form { | |
margin: 0; | |
padding: 0; | |
} | |
body #SearchPageInputs form input { | |
height: 20px; | |
padding: 10px; | |
line-height: 20px; | |
font-size: 20px; | |
margin: 0; | |
border: 0; | |
border: 0 solid #000; | |
color: #000; | |
} | |
body #SearchPageInputs form input.st-search-input { | |
height: 40px; | |
width: -moz-calc(100% - 40px); | |
width: -webkit-calc(100% - 40px); | |
width: calc(100% - 40px); | |
background: #fff; | |
padding: 5px 20px 5px 10px; | |
border: 0 solid #000; | |
border-radius: 8px; | |
box-shadow: 0 0 0 #fff !important; | |
background-image: none; | |
box-sizing: border-box; | |
} | |
#SearchPageInputs #search-page-submit{ | |
width: 40px; | |
height: 40px; | |
line-height: 40px; | |
text-align: center; | |
background-color: #f2f2f2; | |
background-repeat: no-repeat; | |
background-position: center center; | |
background-size: 20px; | |
} | |
#SearchPageInputs #search-page-submit:hover { | |
opacity: 1; | |
} | |
#Seachs { | |
margin: 2px; | |
background-color: #fff; | |
border-radius: 6px; | |
} | |
#Seachs, #Seachs>ul>li { | |
width: 36px; | |
height: 36px; | |
line-height: 36px; | |
font-size: 24px; | |
text-align: center; | |
z-index: 1000; | |
position: relative; | |
} | |
#Seachs>.googlelogo { | |
position: absolute; | |
width: 36px; | |
height: 36px; | |
color: #4688f1; | |
top: 0; | |
left: 0; | |
cursor: pointer; | |
} | |
#Seachs>ul{ | |
display: none; | |
height: auto; | |
background-color: #f7f7f7; | |
position: absolute; | |
border-radius: 6px; | |
top: 0; | |
left: 0; | |
box-shadow: 0 2px 5px rgba(0,0,0,0.3); | |
} | |
/*#Seachs.show>ul{ | |
height: 108px; | |
background-color: #eee; | |
}*/ | |
#Seachs>ul>li#BingSearch>a { | |
background: no-repeat center center; | |
background-size: 24px 24px; | |
background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkJpbmciIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMjU1LjEyIDI1NS4xMiIgZW5hYmxlLWJhY2tncm91bmQ9Im5ldyAwIDAgMjU1LjEyIDI1NS4xMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8cG9seWdvbiBmaWxsPSIjRUFCODMwIiBwb2ludHM9IjEwMS4zMzIsNjYuNjA4IDEyNy4wNDIsMTIyLjM1OCAxNjUuMDM0LDEzOS41NDIgMjcuOTk4LDIxMS42MzggODQuMTQ3LDE2MS41ODggODQuMTQ3LDE4Ljg5NiANCgkyNi4zMjEsMS4xODUgMjYuMzIxLDIxMy40MDcgODMuNzkzLDI1My42OTMgMjI4LjMzOCwxNjcuNTk2IDIyOC4zMzgsMTA1LjUyOCAiLz4NCjwvc3ZnPg0K); | |
} | |
#Seachs>ul>li>a { | |
display: block; | |
} | |
#Seachs>ul>li>a:hover, #Seachs>ul>li#BingSearch>a:hover { | |
background-color: #eee; | |
} | |
#loading-box { | |
width: 100%; | |
padding: 5px; | |
text-align: center; | |
height: 80px; | |
line-height: 80px; | |
} | |
.cse .gsc-control-cse, | |
.gsc-control-cse { | |
width: auto; | |
} | |
.cse .gsc-control-wrapper-cse, | |
.gsc-control-wrapper-cse { | |
width: 100%; | |
} | |
.cse .gsc-branding, | |
.gsc-branding { | |
display: none; | |
} | |
.cse .gsc-control-cse div, | |
.gsc-control-cse div { | |
position: normal; | |
} | |
/* Selector for entire element. */ | |
.cse .gsc-control-cse, | |
.gsc-control-cse { | |
background-color: #fff; | |
border: 1px solid #fff; | |
} | |
.cse .gsc-control-cse:after, | |
.gsc-control-cse:after { | |
content:"."; | |
display:block; | |
height:0; | |
clear:both; | |
visibility:hidden; | |
} | |
.cse .gsc-resultsHeader, | |
.gsc-resultsHeader { | |
border: block; | |
} | |
table.gsc-search-box td.gsc-input { | |
padding-right: 24px; | |
} | |
.gsc-search-box-tools .gsc-search-box .gsc-input { | |
padding-right: 12px; | |
} | |
input.gsc-input { | |
font-size: 16px; | |
padding: 4px 9px; | |
border: 1px solid #D9D9D9; | |
width: 99%; | |
} | |
.gsc-input-box { | |
border: 1px solid #D9D9D9; | |
background: #fff; | |
height: 25px; | |
} | |
.gsc-search-box .gsc-input>input:hover, | |
.gsc-input-box-hover { | |
border: 1px solid #b9b9b9; | |
border-top-color: #a0a0a0; | |
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1); | |
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1); | |
box-shadow: inset 0 1px 2px rgba(0,0,0,.1); | |
outline: none; | |
} | |
.gsc-search-box .gsc-input>input:focus, | |
.gsc-input-box-focus { | |
border: 1px solid #4d90fe; | |
-moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.3); | |
-webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.3); | |
box-shadow: inset 0 1px 2px rgba(0,0,0,.3); | |
outline: none; | |
} | |
/* Search button */ | |
.cse input.gsc-search-button, | |
input.gsc-search-button { | |
font-family: inherit; | |
font-size: 11px; | |
font-weight: bold; | |
color: #fff; | |
padding: 0 8px; | |
height: 29px; | |
min-width: 54px; | |
border: 1px solid #666666; | |
border-radius: 2px; | |
-moz-border-radius: 2px; | |
-webkit-border-radius: 2px; | |
border-color: #3079ed; | |
background-color: #4d90fe; | |
background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#4787ed)); | |
background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed); | |
background-image: -moz-linear-gradient(top,#4d90fe,#4787ed); | |
background-image: -ms-linear-gradient(top,#4d90fe,#4787ed); | |
background-image: -o-linear-gradient(top,#4d90fe,#4787ed); | |
background-image: linear-gradient(top,#4d90fe,#4787ed); | |
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#4787ed'); | |
} | |
.cse input.gsc-search-button:hover, | |
input.gsc-search-button:hover { | |
border-color: #2f5bb7; | |
background-color: #357ae8; | |
background-image: -webkit-gradient(linear,left top,left bottom,from(#4d90fe),to(#357ae8)); | |
background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8); | |
background-image: -moz-linear-gradient(top,#4d90fe,#357ae8); | |
background-image: -ms-linear-gradient(top,#4d90fe,#357ae8); | |
background-image: -o-linear-gradient(top,#4d90fe,#357ae8); | |
background-image: linear-gradient(top,#4d90fe,#357ae8); | |
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#357ae8'); | |
} | |
.cse input.gsc-search-button:focus, | |
input.gsc-search-button:focus { | |
box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5); | |
-webkit-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5); | |
-moz-box-shadow:inset 0 0 0 1px rgba(255,255,255,0.5); | |
} | |
.cse .gsc-search-button input.gsc-search-button-v2, | |
input.gsc-search-button-v2 { | |
width: 13px; | |
height: 13px; | |
padding: 6px 27px; | |
min-width: 13px; | |
margin-top: 2px; | |
} | |
.gsc-refinementHeader { | |
text-decoration: none; | |
font-weight: bold; | |
color: #666; | |
} | |
.gsc-refinementHeader.gsc-refinementhActive { | |
text-decoration: none; | |
color: #DD4B39; | |
} | |
.gsc-refinementHeader.gsc-refinementhInactive { | |
text-decoration: none; | |
cursor: pointer; | |
} | |
.gsc-refinementHeader.gsc-refinementhInactive>span:hover { | |
text-decoration: underline; | |
} | |
.gsc-refinementhActive>span { | |
border-bottom: 3px solid; | |
padding-bottom: 2px; | |
} | |
.gsc-refinementsArea { | |
padding-bottom: 15px; | |
padding-top: 10px; | |
} | |
/* Foont size for refinements */ | |
.gsc-tabsArea { | |
font-size: 11px; | |
} | |
/* For searcher tabs */ | |
.gsc-tabsArea > .gsc-tabHeader { | |
height: 27px; | |
} | |
.gsc-tabsArea > div { | |
height: 30px; | |
overflow: auto; | |
} | |
/* No spacers needed for keneddy refinements */ | |
.gsc-tabsArea .gs-spacer { | |
display: none; | |
} | |
.gsc-tabsArea .gs-spacer-opera { | |
display: none; | |
} | |
.gsc-tabsArea { | |
margin-top: 12px; | |
margin-bottom: 0; | |
height: 29px; | |
border-bottom: 1px solid #CCC; | |
} | |
/* Refinement tab properties */ | |
.gsc-tabHeader { | |
display: inline-block; | |
padding: 0 8px 1px 8px; | |
margin-right: 0px; | |
margin-top: 0px; | |
font-weight: bold; | |
height: 27px; | |
line-height: 27px; | |
min-width: 54px; | |
text-align: center; | |
} | |
/* Active refinement tab properties */ | |
.gsc-tabsAreaInvisible { | |
display: none; | |
} | |
.gsc-tabHeader.gsc-tabhActive { | |
border: 1px solid #ccc; | |
border-bottom-color: #fff; | |
color: #202020; | |
} | |
/* Inactive refinement tab properties */ | |
.gsc-tabHeader.gsc-tabhInactive { | |
background: #fff; | |
color: #666; | |
border-left: 0; | |
border-right: 0; | |
border-top: 0; | |
} | |
/* Inner wrapper for an image result */ | |
.gsc-imageResult-column, | |
.gsc-imageResult-classic { | |
padding: .25em; | |
border: 1px solid #fff; | |
margin-bottom: 1em; | |
} | |
/* Inner wrapper for a result */ | |
.gsc-webResult.gsc-result { | |
padding: .25em; | |
border: 0px solid #fff; | |
margin-bottom: 0; | |
} | |
/* Inner wrapper for a result */ | |
.cse .gsc-webResult.gsc-result { | |
border: 1px solid #fff; | |
margin-bottom: 0; | |
} | |
/* Wrapper for a result. */ | |
.gsc-webResult .gsc-result { | |
padding: 0 0 4em 0; | |
float: left; | |
} | |
/* Result hover event styling */ | |
.cse .gsc-webResult.gsc-result:hover, | |
.gsc-webResult.gsc-result:hover, | |
.gsc-webResult.gsc-result.gsc-promotion:hover, | |
.gsc-results .gsc-imageResult-classic:hover, | |
.gsc-results .gsc-imageResult-column:hover { | |
border: 0px solid #fff; | |
} | |
.gs-web-image-box, | |
.gs-promotion-image-box { | |
padding: 2px 0; | |
} | |
.gs-promotion-image-box img.gs-promotion-image { | |
max-width: 50px; | |
} | |
.gs-promotion-image-box img.gs-promotion-image, | |
.gs-promotion-image-box { | |
width: 50px; | |
} | |
.gs-web-image-box img.gs-image { | |
max-width: 70px; | |
max-height: 70px; | |
} | |
.gs-web-image-box-landscape img.gs-image { | |
max-width: 70px; | |
max-height: 50px; | |
} | |
.gs-web-image-box-portrait img.gs-image { | |
max-width: 50px; | |
max-height: 120px; | |
} | |
.gs-image-box.gs-web-image-box.gs-web-image-box-landscape { | |
width: 80px; | |
} | |
.gs-image-box.gs-web-image-box.gs-web-image-box-portrait { | |
width: 60px; | |
height: 50px; | |
overflow: hidden; | |
} | |
.gs-web-image-box { | |
text-align: inherit; | |
} | |
.gs-promotion-image-box img.gs-promotion-image { | |
border: 1px solid #ebebeb; | |
} | |
/*Promotion Settings*/ | |
/* The entire promo */ | |
.cse .gsc-webResult.gsc-result.gsc-promotion, | |
.gsc-webResult.gsc-result.gsc-promotion { | |
background-color: #F6F6F6; | |
margin-top: 5px; | |
margin-bottom: 10px; | |
} | |
.gsc-result-info { | |
float: left; | |
} | |
.gs-promotion-text-cell .gs-visibleUrl, | |
.gs-promotion-text-cell .gs-snippet { | |
font-size: 13px; | |
} | |
.gsc-table-result, | |
.gsc-thumbnail-inside, | |
.gsc-url-top { | |
/*padding-left: 8px;*/ | |
} | |
.gs-promotion-table { | |
margin-left: 8px; | |
margin-right: 8px; | |
} | |
.gs-promotion table { | |
padding-left: 8px; | |
padding-right: 8px; | |
} | |
table.gs-promotion-table-snippet-with-image{ | |
padding-left: 0; | |
padding-right: 0; | |
} | |
.gs-promotion-text-cell { | |
margin-left: 8px; | |
margin-right: 8px; | |
} | |
.gs-promotion-text-cell-with-image { | |
padding-left: 10px; | |
padding-right: 10px; | |
vertical-align: top; | |
} | |
/* Promotion links */ | |
.cse .gs-promotion a.gs-title:link, | |
.gs-promotion a.gs-title:link, | |
.cse .gs-promotion a.gs-title:link *, | |
.gs-promotion a.gs-title:link *, | |
.cse .gs-promotion .gs-snippet a:link, | |
.gs-promotion .gs-snippet a:link { | |
color: #15C; | |
} | |
.cse .gs-promotion a.gs-title:visited, | |
.gs-promotion a.gs-title:visited, | |
.cse .gs-promotion a.gs-title:visited *, | |
.gs-promotion a.gs-title:visited *, | |
.cse .gs-promotion .gs-snippet a:visited, | |
.gs-promotion .gs-snippet a:visited { | |
color: #15C; | |
} | |
.cse .gs-promotion a.gs-title:hover, | |
.gs-promotion a.gs-title:hover, | |
.cse .gs-promotion a.gs-title:hover *, | |
.gs-promotion a.gs-title:hover *, | |
.cse .gs-promotion .gs-snippet a:hover, | |
.gs-promotion .gs-snippet a:hover { | |
color: #15C; | |
} | |
.cse .gs-promotion a.gs-title:active, | |
.gs-promotion a.gs-title:active, | |
.cse .gs-promotion a.gs-title:active *, | |
.gs-promotion a.gs-title:active *, | |
.cse .gs-promotion .gs-snippet a:active, | |
.gs-promotion .gs-snippet a:active { | |
color: #15C; | |
} | |
/* Promotion snippet */ | |
.cse .gs-promotion .gs-snippet, | |
.gs-promotion .gs-snippet, | |
.cse .gs-promotion .gs-title .gs-promotion-title-right, | |
.gs-promotion .gs-title .gs-promotion-title-right, | |
.cse .gs-promotion .gs-title .gs-promotion-title-right *, | |
.gs-promotion .gs-title .gs-promotion-title-right * { | |
color: #000; | |
} | |
/* Promotion url */ | |
.cse .gs-promotion .gs-visibleUrl, | |
.gs-promotion .gs-visibleUrl { | |
color: #093; | |
} | |
/* Style for auto-completion table | |
* .gsc-completion-selected : styling for a suggested query which the user has moused-over | |
* .gsc-completion-container : styling for the table which contains the completions | |
*/ | |
.gsc-completion-selected { | |
background: #EEE; | |
} | |
.gsc-completion-container { | |
font-family: Arial, sans-serif; | |
font-size: 16px; | |
background: white; | |
border: 1px solid #CCC; | |
border-top-color: #D9D9D9; | |
margin: 0; | |
} | |
.gsc-completion-title { | |
color: #15C; | |
} | |
.gsc-completion-snippet { | |
color: #000; | |
} | |
/* Full URL */ | |
.gs-webResult div.gs-visibleUrl-short, | |
.gs-promotion div.gs-visibleUrl-short { | |
display: none; | |
} | |
.gs-webResult div.gs-visibleUrl-long, | |
.gs-promotion div.gs-visibleUrl-long { | |
display: block; | |
} | |
/* Keneddy shows url at the top of the snippet, after title */ | |
.gsc-url-top { | |
display: block; | |
font-size: 12px; | |
} | |
.gsc-url-bottom { | |
display: none; | |
} | |
/* Keneddy shows thumbnail inside the snippet, under title and url */ | |
.gsc-thumbnail-left { | |
display: none; | |
} | |
.gsc-thumbnail-inside { | |
display: block; | |
} | |
.gsc-result .gs-title { | |
height: auto; | |
font-size: 1.2em; | |
-webkit-font-smoothing:antialiased; | |
} | |
/*.gs-result .gs-title, | |
.gs-result .gs-title * { | |
color: #000; | |
} | |
.gs-result .gs-title:hover * { | |
color: #4396cb; | |
background: none; | |
}*/ | |
.gs-result a.gs-visibleUrl, | |
.gs-result .gs-visibleUrl { | |
color: #bcc2d1; | |
text-decoration: none; | |
padding-bottom: 2px; | |
font-size: 14px; | |
} | |
.gsc-results .gsc-cursor-box { | |
float: left; | |
margin: 40px 0 0 0; | |
} | |
.gsc-results .gsc-cursor-box .gsc-cursor-page { | |
text-decoration: none; | |
} | |
.gsc-results .gsc-cursor-box .gsc-cursor-current-page { | |
text-decoration: none; | |
} | |
.gsc-preview-reviews, | |
.gsc-control-cse .gs-snippet, | |
.gsc-control-cse .gs-promotion em, | |
.gsc-control-cse .gs-snippet, | |
.gsc-control-cse .gs-promotion em { | |
color: #333; | |
} | |
.gsc-control-cse-zh_CN .gs-snippet b, | |
.gsc-control-cse-zh_CN .gs-promotion em, | |
.gsc-control-cse-zh_TW .gs-snippet b, | |
.gsc-control-cse-zh_TW .gs-promotion em { | |
color: #C03; | |
} | |
.gsc-snippet-metadata, | |
.gsc-role, | |
.gsc-tel, | |
.gsc-org, | |
.gsc-location, | |
.gsc-reviewer, | |
.gsc-author { | |
color: #666; | |
} | |
.gsc-wrapper.gsc-thinWrapper { | |
border-right: 1px solid #e9e9e9; | |
} | |
.gs-spelling a { | |
color: #15C; | |
} | |
.gs-spelling { | |
color: #333; | |
padding-left: 7px; | |
padding-right: 7px; | |
} | |
.gs-snippet { | |
margin-top: 1px; | |
} | |
div.gsc-clear-button { | |
background-image: url('//www.google.com/uds/css/v2/clear.png'); | |
} | |
div.gsc-clear-button:hover { | |
background-image: url('//www.google.com/uds/css/v2/clear-hover.png'); | |
} | |
.gsc-preview-reviews ul { | |
padding-left: 0; | |
padding-right: 0; | |
} | |
.gsc-completion-container .gsc-completion-icon-cell { | |
width: 42px; | |
height: 42px; | |
padding-right: 10px; | |
} | |
td.gsc-branding-text, td.gcsc-branding-text { | |
color: #666; | |
} | |
.gcsc-branding { | |
padding-top: 2px; | |
padding-left: 8px; | |
margin-top: 20px; | |
font-size: 12px; | |
float: right; | |
} | |
.gsc-adBlock { | |
padding-bottom: 5px; | |
} | |
.gsc-table-cell-snippet-close, | |
.gsc-table-cell-snippet-open { | |
padding-left: 0; | |
padding-right: 0; | |
} | |
.gsc-selected-option-container { | |
background-color: whiteSmoke; | |
background-image: linear-gradient(top,whiteSmoke,#F1F1F1); | |
background-image: -webkit-linear-gradient(top,whiteSmoke,#F1F1F1); | |
background-image: -moz-linear-gradient(top,whiteSmoke,#F1F1F1); | |
background-image: -ms-linear-gradient(top,whiteSmoke,#F1F1F1); | |
background-image: -o-linear-gradient(top,whiteSmoke,#F1F1F1); | |
} | |
.gsc-cursor-page { | |
float: left; | |
padding: 5px 10px; | |
margin: 0 3px; | |
height: 24px; | |
line-height: 24px; | |
background: #f7f7f7; | |
border-radius: 6px; | |
color: #999; | |
cursor: pointer; | |
} | |
.gsc-cursor-page:hover { | |
background: #f1f2f4; | |
color: #000; | |
} | |
.gsc-cursor-current-page, .gsc-cursor-current-page:hover { | |
background: #ddd; | |
color: #fff; | |
} | |
.gs-watermark { | |
font-size: 12px; | |
color: #DDD; | |
float: right; | |
display: none; | |
} | |
.gsc-table-result { | |
font-size: 1em; | |
} | |
.gsc-above-wrapper-area, .gsc-resultsHeader * { | |
float: left; | |
} | |
.gsc-above-wrapper-area { | |
margin-bottom: 60px; | |
} | |
.gsc-resultsHeader { | |
float: right | |
} | |
.gsc-adBlockNoHeight { | |
position: absolute; | |
overflow: hidden; | |
height: 0; | |
width: 0; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment