#orbit-bar { top: 0px; left: -10px; right: -10px; height: 40px; z-index: 1041; position: fixed; margin-bottom: 0; } #orbit-bar .orbitlogo { width: 20px; height: 20px; background-size: 70%; display: inline-block; background-position: center; background-repeat: no-repeat; background-image: url(<%= asset_path 'orbit-logo.svg' %>); /* For Suck IE */ background-image: url(<%= asset_path 'orbit-logo.png' %>)\9; } #orbit-bar.navbar .nav > li > a { color: #EEE; text-shadow: 0 -1px 0 #000; border-right: 1px solid #363636; box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.3); } #orbit-bar.navbar .nav > li:first-child > a { border-left: 1px solid #363636; box-shadow: -1px 0px 0px rgba(0, 0, 0, 0.3), inset -1px 0px 0px rgba(0, 0, 0, 0.3); } #orbit-bar.navbar .nav > li > a:focus, #orbit-bar.navbar .nav > li > a:hover { background-color: #0095CF; text-shadow: 0 -1px 0 #014380; } #orbit-bar.navbar .nav li.dropdown.open > .dropdown-toggle, #orbit-bar.navbar .nav li.dropdown.active > .dropdown-toggle, #orbit-bar.navbar .nav li.dropdown.open.active > .dropdown-toggle { background-color: #0095CF; text-shadow: 0 -1px 0 #014380; } #orbit-bar .navbar-inner { height: 40px; border-width: 0; min-height: 40px; background-color: #333333; -webkit-border-radius: 0px; -moz-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: 0 2px 10px rgba(0,0,0,.7); -moz-box-shadow: 0 2px 10px rgba(0,0,0,.7); box-shadow: 0 2px 10px rgba(0,0,0,.7); /* Customization Color*/ background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#333333), to(#1D1D1D)); background-image: -webkit-linear-gradient(top, #333333, #1D1D1D); background-image: -moz-linear-gradient(top, #333333, #1D1D1D); background-image: -o-linear-gradient(top, #333333, #1D1D1D); background-image: linear-gradient(to bottom, #333333, #1D1D1D); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#333333', endColorstr='#1D1D1D', GradientType=0); } #orbit-bar .nav { top: auto; left: auto; right: auto; bottom: auto; } #orbit-bar .nav [class^="icon"], #orbit-bar .nav [class*=" icon"] { font-size: 1.5em; } /*Login*/ #orbit-bar .modal { width: 460px; margin-left: -230px; } #orbit-bar .modal-footer { text-align: center; } #orbit-bar .modal .container { width: 312px; margin-bottom: 0; } #orbit-bar .modal [class^="icon"], #orbit-bar .modal [class*=" icon"] { font-size: 1em; color: #8D8D8D; } #orbit-bar .modal .input-append, #orbit-bar .modal .input-prepend { margin-bottom: 15px; } /*Search*/ #orbit-bar #search { margin-bottom: 0; position: relative; padding: 8px 10px 0; border-right: 1px solid #363636; box-shadow: 1px 0px 0px rgba(0, 0, 0, 0.3); } #orbit-bar #search form { margin-bottom: 8px; } #orbit-bar #search input[type="text"] { height: 14px; line-height: 15px; font-size: 13px; padding-left: 25px; padding-right: 25px; -webkit-border-radius: 12px; -moz-border-radius: 12px; -o-border-radius: 12px; border-radius: 12px; /* For Suck IE */ line-height: 16px\9; } #orbit-bar #search .icon-search, #orbit-bar #search .search-clear { position: absolute; color: #A3A3A3; top: 14px; } #orbit-bar #search .icon-search { left: 20px; top: 12px; font-size: 1.2em; } #orbit-bar #search .search-clear { right: 14px; font-size: 1.3em; } #orbit-bar #search .search-clear:hover { color: #333; cursor:pointer; } /*Search Container*/ #search_container{ display: none; top: 40px; right: 20px; width: 40%; background: #FAFAFA; position: absolute; box-shadow: 0px 5px 20px #666; color: #666; font-family: "微軟正黑體", "Raleway"; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; overflow: hidden; } #search_head{ text-align: right; padding: 5px 25px 5px 10px; /*border-bottom: 1px solid #CCC;*/ color: #666; /*background: #EEE;*/ height: 20px; } #search_loading{ text-align: center; padding: 20px; } #search_footer{ height: 10px; padding: 5px 25px 5px 10px; border-bottom: 1px solid #CCC; color: #666; /*background: #DDD;*/ } #search_results{ max-height: 500px; overflow-y: auto; overflow-x: hidden; } #search_results::-webkit-scrollbar { width: 8px; background: #CCC; } #search_results::-webkit-scrollbar-track { } #search_results::-webkit-scrollbar-thumb { background: #888; } #search_results a:hover{ text-decoration: none; color: #333; } .seach_title{ padding: 5px 0; color: #0053CF; font-size: 15px; } .search_result{ padding: 15px 15px; /*border-bottom: 1px solid #DDD; border-top: 1px solid #FFF;*/ font-size: 12px; line-height: 20px; } .search_result:hover{ background: #FFF; box-shadow: 0px 0px 20px #DDD; /*border-bottom: 1px solid #FFF;*/ } .search_result a{ width: 100%; } .search_result b{ font-weight: normal; color: #B90000; } /*User info*/ #orbit-bar #orbit-user .user-pic { width: 40px; height: 40px; margin: -13px 10px -10px -15px; } /*Language & flag*/ #orbit-bar #orbit-language [class^="flag-"], #orbit-bar #orbit-language [class*=" flag-"] { background-image: url(<%= asset_path 'flag.png' %>); background-repeat: no-repeat; background-color: transparent; display: inline-block; margin: -8px 0 -8px -5px; width: 24px; height: 24px; } #orbit-bar #orbit-language .dropdown-menu [class^="flag-"], #orbit-bar #orbit-language .dropdown-menu [class*=" flag-"] { margin: -8px 10px -8px 0px; } .flag-bg {background-position: 0px 0px;} .flag-cs {background-position: -24px 0px;} .flag-da {background-position: -48px 0px;} .flag-de {background-position: -72px 0px;} .flag-en {background-position: 0px -24px;} .flag-es {background-position: -24px -24px;} .flag-fi {background-position: -48px -24px;} .flag-fr {background-position: -72px -24px;} .flag-hr {background-position: 0px -48px;} .flag-id {background-position: -24px -48px;} .flag-is {background-position: -48px -48px;} .flag-it {background-position: -72px -48px;} .flag-ja {background-position: 0px -72px;} .flag-kr {background-position: -24px -72px;} .flag-lt {background-position: -48px -72px;} .flag-lv {background-position: -72px -72px;} .flag-ms {background-position: 0px -96px;} .flag-nb {background-position: -24px -96px;} .flag-nl {background-position: -48px -96px;} .flag-pl {background-position: -72px -96px;} .flag-pt-BR {background-position: 0px -120px;} .flag-pt {background-position: -24px -120px;} .flag-ro {background-position: -48px -120px;} .flag-ru {background-position: -72px -120px;} .flag-sk {background-position: 0px -144px;} .flag-sl {background-position: -24px -144px;} .flag-sr {background-position: -48px -144px;} .flag-sv {background-position: -72px -144px;} .flag-th {background-position: 0px -168px;} .flag-tr {background-position: -24px -168px;} .flag-zh-CN {background-position: -48px -168px;} .flag-zh-TW {background-position: -72px -168px;} /* For Retina */ @media screen and (-webkit-min-device-pixel-ratio: 2), screen and (max--moz-device-pixel-ratio: 2) { #orbit-bar #orbit-language [class^="flag-"], #orbit-bar #orbit-language [class*=" flag-"] { background-image: url(<%= asset_path 'flag@2x.png' %>); background-size: 96px 192px; } } /* Responsive */ @media (max-width: 480px) { #orbit-bar .navbar-inner .nav { margin-right: 0; } #orbit-bar #orbit-user span, #orbit-bar #search { display: none; } #orbit-bar #orbit-language [class^="flag-"], #orbit-bar #orbit-language [class*=" flag-"] { margin: -8px; } #orbit-bar #orbit-user .user-pic { margin: -12px -15px -10px -15px; } #orbit-bar .modal { width: 350px; margin-left: -175px; } }