/** * SeekQuarry/Yioop -- * Open Source Pure PHP Search Engine, Crawler, and Indexer * * Copyright (C) 2009 - 2013 Chris Pollett chris@pollett.org * * LICENSE: * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see <http://www.gnu.org/licenses/>. * * END LICENSE * * @author Chris Pollett chris@pollett.org * @package seek_quarry * @subpackage stylesheet * @license http://www.gnu.org/licenses/ GPL3 * @link http://www.seekquarry.com/ * @copyright 2009 - 2013 * @filesource */ /* search.css Main stylesheet for Yioop search engine */ /* We begin with some generic global styles and classes */ h2 { margin-bottom: 0; } p { margin: 0; padding: 0; width: 8.25in; } .mobile p { width: 300px; } .result h2 { font-size: 14pt; font-weight: normal; } .echo-link { color: green; } .left { float: left; } .right { float: right; } .align-right { text-align: right; } .blockquote { margin-left: 0.3in; margin-right: 0.3in; } .mobile .blockquote { margin-left: 25px; margin-right: 25px; } .red { color: red; } .highlight, .back-red { background-color: red; } .back-green { background-color: green; } .back-gray { background-color: lightgray; } .gray { color: gray; } .gray-link { color: gray; text-decoration: none; } .gray-link:hover { text-decoration: underline; } .back-yellow { background-color: yellow; } .frame { background-color: #fff; border: 1px solid #ccc; position: relative; } .name-table { padding: 5px; } .narrow-field { width: 2in; } .mobile .narrow-field { width: 100px; } .wide-field { width: 3in; } .mobile .wide-field { width: 150px; } .extra-wide-field { width: 5in; } .mobile .extra-wide-field { width: 200px; } .tall-text-area { height: 4in; width: 100%; } .mobile .tall-text-area { width: 90%; } .short-text-area { width: 100%; height: 1in; } .mobile .short-text-area { width: 90%; } .center { text-align: center; } .bold { font-weight: bold; } .mobile .center { left: -40px; right: -40px; position: relative; top: 10px; } .top-margin { margin-top: .2in; } .no-margin { margin: 0; } .box { border: 1px ridge #ccc; padding: 3px; } .slight-pad { padding: 0.1in; } fieldset { border-color:black; } /* set up prefixes for left-to-right, right-to-left and vertical text support*/ .html-tb { -ms-block-progression: tb; } .html-rl { -ms-block-progression: rl; -moz-transform: rotate(90deg) translate(2in); -webkit-transform: rotate(90deg) translate(2in); } .html-lr { -ms-block-progression: lr; -moz-transform: rotate(90deg); -webkit-transform: rotate(90deg); } .html-rtl { direction: rtl; text-align:right; } .html-ltr { direction: ltr; text-align: left; } body.html-ltr { margin-left: 0.5in; } body.html-rtl { margin-right: 0.5in; } body.html-rl-tb { writing-mode: rl-tb; } body.html-lr-tb { writing-mode: lr-tb; } body.html-tb-rl { writing-mode: tb-rl; } body.html-tb-lr { writing-mode: tb-lr; } /* set up global font preferences */ body { font-family: Arial, Helvetica, sans-serif; min-height: 16in; } /* .mobile is used for phone devices -- an attempt has been made to make the default non-mobile version of the page work with tablets */ body.mobile { left: 0; margin: 0; min-height: 0; position: absolute; right: 0; top: 0; width: 320px; } /* bar on which web, images, video subsearches and sign-in stuff live for many of the below things we need to handle them different on the landing page from pages where search results appear */ .top-bar { background: #DDD; background: -moz-linear-gradient(top, #FFF 0%,#EEF 30%,#EEF 70%, #FFF 100%); background: -webkit-linear-gradient(top, #FFF 0%,#EEF 30%,#EEF 70%, #FFF 100%); background: linear-gradient(to top, #FFF 0%, #EEF 30%,#EEF 70%, #FFF 100%); height: 45px; left: 0; min-width: 12in; position: absolute; right: 0; top: -12px; } .landing-top-bar { background: #DDD; background: linear-gradient(to top, #FFF 0%, #EEF 30%,#EEF 70%, #FFF 100%); background: -moz-linear-gradient(top, #FFF 0%,#EEF 30%,#EEF 70%, #FFF 100%); background: -webkit-linear-gradient(top, #FFF 0%,#EEF 30%,#EEF 70%, #FFF 100%); height: 45px; left: 0; position: absolute; right: 0; top: -12px; width: 100%; } .mobile .top-bar, .mobile .landing-top-bar { background: #DDD; background: linear-gradient(to top, #FFF 0%,#EEF 30%,#EEF 70%, #FFF 100%); background: -moz-linear-gradient(top, #FFF 0%,#EEF 30%,#EEF 70%, #FFF 100%); background: -webkit-linear-gradient(top, #FFF 0%,#EEF 30%,#EEF 70%, #FFF 100%); height: 30px; left: 0px; position: absolute; right: 0px; top: -5px; width: 330px; z-index: 1; } /* this is for informational messages when settings are changed or admin stuff done */ #message { position: absolute; text-align: center; top: .1in; width: 100%; z-index: 3; } .mobile #message { width: 320px; } /* for the sign-in, settings, admin, logout links on the top-bar */ .html-ltr .user-nav { margin: 0 0.5in 0 0; min-width: 10in; padding:0; text-align: right; } .html-rtl .user-nav { margin:0 0 0 0.5in; min-width: 10in; padding:0; text-align: left; } .html-ltr .user-nav ul li { display: inline; list-style-type: none; padding-left: 20px; } .html-rtl .user-nav ul li { display:inline; list-style-type: none; padding-right: 20px; } .mobile .user-nav { font-size:11pt; left:0px; min-width: 0; padding: 0px; position:absolute; right:0px; top: -10px; width:320px; } .mobile .user-nav ul li { padding:1px; } /* For the web, images, video links on the top-bar */ .html-ltr .subsearch ul.out-list { float:left; } .html-ltr .subsearch ul.out-list li.outer { display: inline; list-style-type: none; padding-left: 20px; } #more-menu { display:none; } #more-on b { background-color: white; margin-left: 2px; margin-right: 2px; margin-top: 2px; padding: 2px; position:relative; top:3px; z-index: 4; } #more-on { display: none; } #more-on { background-color: gray; } li.outer div { background-color: gray; display: block; padding:2px; width:1.25in; z-index:3; } .html-ltr li.outer div { left: 1.85in; position: relative; } .html-rtl li.outer div { right: 1.85in; position: relative; } .mobile .subsearch ul.out-list li.outer { padding-left: 3px; } .mobile li.outer div { left: 110px; position: relative; right: 110px; } ul.in-list { background-color: white; } ul.in-list li { list-style-type: none; padding-bottom: 0.05in; padding-top: 0.05in; } .html-rtl .subsearch ul { float: right; } .html-rtl .subsearch ul li { display: inline; list-style-type: none; padding-left: 20px; } .mobile .subsearch { left: -40px; padding: 0px; position: relative; right: -40px; top: -12px; width: 220px; z-index:1; } .mobile .subsearch ul li { font-size: 11pt; padding-left: 3px; padding-right: 3px; } .landing-spacer { height: 6in; } /* Landing page (www.yioop.com) specific css */ .html-ltr .landing { clear: both; left: 15%; min-width: 6in; position: absolute; top: 1.5in; } .html-rtl .landing { clear: both; min-width: 6in; position: absolute; right: 15%; top: 1.5in; } .mobile .landing { clear: both; left: 10px; min-width: 0; position: relative; right: 10px; top: 10px; } /* Style tweaks for blog, privacy, bot, settings, and admin pages */ .mobile .non-search { left: -10px; position: relative; right: -10px; top: 10px; } .mobile .non-search .logo { position: relative; top: 20px; } /* Styles to control logo (image + adjacent text) on various pages */ .logo { margin: 0; position: relative; top: 14pt; } .admin-heading { position: relative; top: 30px; } .mobile .admin-heading { position: absolute; top: 20px; } .landing .logo { min-width: 8in; position: relative; text-align: center; top: 0; } .mobile .landing .logo { min-width: 0px; } .logo img { border: 0; width:2in; } .mobile .logo img { left: 0px; position: relative; top: 15px; width: 50px; } .landing .logo img { border: 0; width:3in; } .mobile .landing .logo img { position: relative; left: 0px; top: 14px; width: 200px; } .mobile .admin-heading img { left: 80px; position: relative; right: 80px; top: 30px; width: 50px; } .logo span { position: relative; top: -.3in; } .mobile .admin-heading span { left: 70px; position: relative; right: 70px; top: 20px; } .mobile .non-search .logo span { left: 20px; position: relative; right: 20px; width: 200px; } .mobile .non-search .logo img { left: 20px; position: relative; right: 20px; top: -20px; width: 50px; } /* Styles for footers on various pages */ .landing-footer, .setting-footer, .signin-exit { clear: both; margin-top: 0.25in; text-align: center; } .mobile .landing-footer { left: 0; margin-top: 0; position: relative; right: 0; text-align: center; top: 0; width: 320px; } .mobile .landing .landing-footer, .mobile .setting-footer, .mobile .signin-exit { left: -10px; margin-top: 0.4in; position: relative; right: -10px; text-align: center; top: -20px; width: 320px; } /* If query infomation is available then web_layout will render statistics about all the SQL and search engine queries that were executed for a page. These styles control how this diagnostic info renders */ .query-statistics { border-top: 2px solid gray; color: gray; margin-top: 0.4in; } .mobile .query-statistics { position: relative; top: 200px; } .query { border: 1px solid gray; margin: 0.1in; padding: 0.05in; } /* Styles for the login and settings pages */ .html-ltr .login, .html-ltr .settings { font-size: 16pt; left: 1.25in; position: relative; } .html-ltr .cancel { text-align: right; } .html-rtl .cancel { text-align: left; } .html-rtl .login, .html-rtl .settings { font-size: 16pt; position: relative; right: 1.25in; } .login input { font-size: 16pt; margin: 5px; } .mobile .login, .mobile .settings, .mobile .statistics { font-size: 14pt; left: 10px; position: relative; right: 10px; } .login button, .settings button, .settings select { font-size: 16pt; } .mobile .login button, .mobile .settings button, .mobile .settings select { font-size: 14pt; } /* Styles for the statistics for a crawl page */ .mobile .stats span { left: -10px; position: relative; top: -10px; width: 200px; } .mobile .stats img { left: 0px; position: relative; top: 0px; width: 50px; } /* Styles for search and search result pages */ .html-ltr .serp { left: 2.2in; position: relative; top: -0.9in; width: 8in; } .html-ltr .serp-results { left: 0.5in; position: relative; top: -0.8in; width: 8in; } .html-rtl .serp { position: relative; right: 2.2in; top: -0.9in; width: 8in; } .html-rtl .serp-results { position: relative; right: 0.5in; top: -0.8in; width: 8in; } .serp-stats { color: #666; font-size: 14pt; left: 608px; margin: 0.2in 0 0 0; padding: 0; position: relative; top: -12px; } .serp-links-score { clear: both; color: #666; } .mobile .serp { left: 50px; position: relative; right: 50px; top: -70px; width: 300px; } .mobile .serp-results { left: 3px; position: relative; right: 3px; top: -30px; width: 300px; font-size:10pt; } .spell { color: #666; font-size: 14pt; left: 49px; position: relative; top: -47px; z-index: 1; } .search-box { background-color: #DDF; border-color: #AAA; border-radius: 0.07in; border-style: solid; border-width: 0.05in; padding: 0.1in; position: relative; top: 14pt; width: 8in; } .landing .search-box { position: relative; top: 0; } .mobile .search-box { padding: 3px; position: relative; top: 50px; width:240px; } .mobile .landing .search-box { position: relative; top: 10px; width: 289px; } .search-box p { font-size: 16pt; } .search-box input { border: 0; font-size: 16pt; margin: 0; padding: 0; padding-bottom: 0.05in; width: 6.5in; } .mobile .search-box input { font-size: 12pt; width: 180px; } .mobile .landing .search-box input { font-size: 12pt; width: 235px; } /* Styles for the word suggest drop down on search pages */ .dropdown { border-bottom-style: solid; border-color: #AAA; border-left-style: solid; border-right-style: solid; border-top-style: none; border-width: 0.05in; border-bottom-right-radius: 0.05in; border-bottom-left-radius: 0.05in; border-top-left-radius: 0.05in; margin: 0; margin-left: 0.023in; overflow-x: hidden; overflow-y: auto; padding-bottom: 0; position: relative; top: 0.20in; width: 6.5in; } .landing .dropdown { position: relative; top:0; } .mobile .dropdown { display: none; } .suggest-list { background: #DDF; border: 0; font-size: 16pt; margin: 0; padding: 0; padding-bottom: 0.05in; visibility: hidden; width: 6.30in; } .suggest-list li { background: #DDF; cursor: pointer; font-size: 16pt; list-style:none; margin-left: 0; margin-right: 0; padding-left: 0.1in; padding-right: 0.1in; padding-top: 0; width: 30.10in; } .suggest-list li span { color: black; display: block; height: 18pt; margin: 0; padding: 0; text-decoration: none; z-index: 5; } .suggest-list li span.unselected { background-color: white; } .suggest-list li span.selected { background-color: #AAE; } .mobile .suggest-list { display: none; } /* Styles for the bottom of search results links to additional pages of search results */ .pagination { margin-bottom: 10px; margin-top: 10px; } .html-ltr .pagination ul, .html-ltr .pagination ul li { display: inline; font-size: 18pt; padding-left: 0; padding-right: 10px; } .html-rtl .pagination ul, .html-rtl .pagination ul li { display:inline; font-size: 18pt; padding-left: 10px; padding-right: 0; } .html-ltr .pagination ul li a.item { border-color: blue; border-style: solid; border-width: 3px; display: block; float: left; height: 30px; margin-right: 10px; text-align: center; text-decoration: none; width: 30px; } .html-rtl .pagination ul li a.item { border-color: blue; border-style: solid; border-width: 3px; display: block; float: right; height: 30px; margin-left: 10px; text-align: center; text-decoration: none; width: 30px; } .pagination ul li a.item:hover { background-color: #88F; color: white; } .html-ltr .pagination ul li span.item { border-color: black; border-style: solid; border-width: 5px; display: block; float: left; height: 30px; margin-right: 10px; position: relative; text-align: center; top: -3px; width: 30px; } .html-rtl .pagination ul li span.item { border-color: black; border-style: solid; border-width: 5px; display: block; float: right; height: 30px; margin-left: 10px; position: relative; text-align: center; top: -3px; width: 30px; } .html-ltr .pagination ul li span.end { display:block; float:left; margin-right: 10px; } .html-rtl .pagination ul li span.end { display: block; float: right; margin-left: 10px; } .html-ltr .pagination ul li span.other { width: 30px; } /* Styles for video subsearch page */ .html-ltr .video-link { float: left; margin: 0; height: 90px; padding-top: 0.05in; width: 128px; } .video-link .thumb { height: 80px; width: 120px; } .html-ltr .video-play { height: 30px; left: 40px; position: relative; top: -60px; width: 40px; } .html-rtl .video-link { float: right; height: 90px; margin:0; padding-top: 0.05in; width: 128px; } .html-rtl .video-play { height: 30px; position: relative; right: 40px; top: -60px; width: 40px; } /* Styles for image subsearch page */ .image-list { margin-left: 10%; margin-right: 10%; margin-top: 10px; } .image-list img { width:1in; height:1in; padding: 5px; } .mobile .image-list { margin-left: 2px; margin-right: 2px; padding: 2px; position: relative; top: 15px; } .mobile .image-list img { height: 50px; width: 50px; } /* Styles for tables on login, settings, and admin pages */ .mobile .table-input select { width: 190px; } .mobile .table-input input { width: 150px; } .html-ltr .table-label { text-align: right; } .html-ltr .table-input { text-align: left; } .html-rtl .table-label { text-align: left; } .html-rtl .table-input { text-align: right; } /* Styles for different admin page elements */ .content { background-color: white; font-size: 12pt; margin-left: 0.5in; margin-right: 0.5in; min-height: 3in; padding: 8px; position: relative; width: 8in; } .mobile .content { clear: both; position: relative; left: 0; margin: 3px; right: 0; top: 0; width: 320px; } .content p { padding-bottom: 8px; } .html-ltr .button-box { color: black; font-size: 16pt; left: -0.05in; margin-left: 0; position: relative; text-align: center; text-decoration: none; top: 0.015in; } .html-rtl .button-box { color: black; font-size: 16pt; margin-right: 0; position: relative; right: -0.05in; text-align: center; text-decoration: none; top: 0.015in; } .mobile .button-box { font-size: 12pt; margin-left: 0; margin-right: 0; } .html-ltr .activity-menu { border-radius: 8px; float: left; padding: 0; position: relative; top: 30px; width: 2.5in; } .html-rtl .activity-menu { border-radius: 8px; float: right; padding: 0; position: relative; top: 30px; width: 2.5in; } .mobile .activity-menu { border: 0; float: none; position: relative; top: 100px; width:320px; } .activity-menu h2 { background-color: #8A4; border-top-right-radius: 8px; border-top-left-radius: 8px; color: #222; margin: 0; padding: .05in .15in .05in .15in; } .mobile .activity-menu h2 { display: none; } .mobile .activity-menu select { font-size:16pt; width:320px; } .activity-menu li { list-style-position: inside; list-style-type: none; margin: 0; padding: 0.10in; } .activity-menu li.bottom-border { border-bottom: 1px solid #ccc; } .activity-menu li a { color: #222; text-decoration: none; } .activity-menu li a:hover { color: #222; text-decoration: underline; } .activity-menu ul { border-radius: 8px; display: block; padding: 0; margin: 0; } .current-activity { background-color: #fff; border: 1px solid #ccc; border-radius: 8px; font-size: 16pt; max-width: 9in; min-height: 6in; min-width: 8.5in; padding-left: 0.1in; padding-right: 0.1in; padding-bottom: 0.1in; position: relative; top: 30px; } .html-ltr .current-activity { margin-left: 2.75in; } .html-rtl .current-activity { margin-right: 2.75in; } .mobile .current-activity { clear:both; position: relative; top:120px; left: 5px; right:5px; margin:0; padding:0; margin-right: 3px; padding-right: 1px; padding-left: 1px; padding-bottom: 1px; width: 310px; min-width: 0; min-height: 200px; font-size:12pt; } .current-activity h2 { margin-top: 0.05in; padding-top: 0.05in; } .current-activity input { font-size: 16pt; position: relative; top: 2px; } .current-activity object { height: 2in; min-width: 6in; width: 8in; } .current-activity select { font-size: 16pt; } .mobile .current-activity select { font-size: 12pt; } .html-ltr .role-table, .html-ltr .role-table td, .html-ltr .role-table th { border: 1px solid black; margin-left: 0.2in; padding: 1px; } .html-rtl .role-table, .html-rtl .role-table td, .html-rtl .role-table th { border: 1px solid black; margin-right: 0.2in; padding: 1px; } .html-ltr .locale-table, .html-ltr .locale-table td, .html-ltr .locale-table th { border: 1px ridge black; margin-left: 0.2in; } .html-rtl .locale-table, .html-rtl .locale-table td, .html-rtl .locale-table th { border: 1px ridge black; margin-right: 0.2in; } .tab-menu-list { border-bottom: 2px solid black; margin-bottom: 0px; padding: 0px; z-index: 1; } .tab-menu-list li { display: inline; list-style-type: none; } .tab-menu-list a { background-color:#EEE; border: 1px solid black; border-bottom: 0px; margin: 0; padding: 5px 5px 0px 5px; overflow: hidden; text-decoration: none; } .tab-menu-list a.active { background-color: white; border-bottom: 3px solid white; } .tab-menu-content { border: 1px solid black; border-top: none; padding: 10px; z-index: 2; } .crawls-table, .crawls-table td, .crawls-table th, .file-types-table, .file-types-table td, .mixes-table, .mixes-table td, .mixes-table th, .search-sources-table, .search-sources-table td, .search-sources-table th { border: 1px ridge black; padding: 2px; } .html-ltr .file-types-table, .html-ltr .file-types-all td { margin-left: 0.3in; vertical-align: top; } .html-rtl .file-types-table, .html-rtl .file-types-all td { margin-right: 0.3in; vertical-align: top; } .mobile .file-types-table, .mobile .file-types-all td { margin-left: 2px; margin-right: 2px; vertical-align: top; } .html-ltr .weights-table th { text-align: right; } .html-rtl .weights-table th { text-align: left; } .machine-table, .machine-table td, .machine-table th { border: 1px ridge black; margin: 2px; padding: 3px; } .toggle-table, .toggle-table td { border: 1px ridge black; } .file-types-table td, .translate-table, .translate-table td, .translate-table th { border: 1px ridge black; } .meta-words-table { width: 100%; } .meta-words-table, .meta-words-table td, .meta-words-table th { border: 1px ridge black; } .meta-words-table th { text-align: center; padding: 0.04in; } .meta-words-table td.input-word { width: 1.5in; } .meta-words-table td.input-word input { margin: 0.05in; width: 1.3in; } .meta-words-table td.input-url { margin: 0.03in; width: 100%; } .meta-words-table td.input-url input { margin: 0.05in; width: 97%; } .log-records-table { width:100%; } .log-records-table, .log-records-table td, .log-records-table th { border: 1px ridge black; } .log-records-table th { padding: 0.03in; text-align: center; } .log-records-table td.input-field { width: 1.3in; } .log-records-table td.input-field input { margin: 0.05in; width: 1.5in; } .log-records-table td.input-field-name { margin: 0.03in; width: 100%; } .log-records-table td.input-field-name input { margin: 0.05in; width: 97%; } .log-records-table td.input-field-type { margin: 0.03in; width: 100%; } .log-records-table td.input-field-type input { margin: 0.05in; width: 97%; } .html-rtl .log-record-new-field { position: relative; } .html-ltr .log-record-new-field { position: relative; } .database-connection-details-table { width:100%; } .database-connection-details-table, .database-connection-details-table td { border: 1px ridge black; } .database-connection-details-table td.input-name { width: 1.3in; } .database-connection-details-table td.input-data { margin: 0.03in; width: 100%; } .database-connection-details-table td.input-data input { margin: 0.05in; width: 98%; } .html-rtl .database-connection-details-submit { position: relative; } .html-ltr .database-connection-details-submit { position: relative; } .indexing-plugin-table { width:100%; } .indexing-plugin-table, .indexing-plugin-table td, .indexing-plugin-table th { border: 1px ridge black; text-align: center; } .indexing-plugin-table th { padding: 0.04in; } .indexing-plugin-table td.check { padding: 0.1in; text-align: center; width: 75%; } .restrict-sites-by-url { height:0.25in; width: 0.25in; }