Merge "Revised styling of sister-search sidebar."
[lhc/web/wiklou.git] / resources / src / mediawiki.special / mediawiki.special.search.interwikiwidget.styles.less
index 5504883..92e3e1c 100644 (file)
 /* interwiki search results */
 /*==========================*/
 
-#mw-interwiki-results {
-       float: right;
-       width: 30%;
-}
-
-.iw-headline {
-       font-weight: bold;
-       font-size: 1rem;
-       font-size: 16px;
-       opacity: 0.7;
-}
-
-.iw-results {
-       list-style: none;
-       margin: 0;
-}
-
-.iw-resultset {
-       margin-bottom: 1.2em;
-       background-color: #f2f4f7;
-       vertical-align: top;
-       width: 100%;
-       float: left;
-       list-style-type: none;
-}
-
-/* clearfix */
-.iw-result:after {
-       visibility: hidden;
-       display: block;
-       font-size: 0;
-       content: ' ';
-       clear: both;
-       height: 0;
-}
-
-* html .interwiki-result { /* IE6 */
-       zoom: 1;
-}
-*:first-child + html .iw-resultset { /* IE7 */
-       zoom: 1;
-}
-
-/* padding each .iw-resultset section seperately.
-This allows us greater flexibility in the design.
-For example changing the background color on the
-header and footer. */
-.iw-result__header,
-.iw-result__title,
-.iw-result__content,
-.iw-result__footer {
-       padding: 0.25em 0.85em;
-}
-
-/* definition titles appear inline,
-to resemble a traditional dictionary definition */
-.iw-resultset--definition .iw-result__title {
-       display: inline;
-       padding: 0;
-}
-
-.iw-resultset > div:first-child {
-       padding-top: 0.85em;
-}
-
-.iw-resultset > div:last-child {
-       padding-bottom: 0.85em;
-}
-
-.iw-result__title {
-       font-size: 16px; /* rem fallback */
-       font-size: 1rem;
-}
-
-.iw-result__title a.extiw {
-       color: #252525;
-       font-weight: bold;
-}
-
-.iw-result__content:after { /* clearfix */
-       visibility: hidden;
-       display: block;
-       font-size: 0;
-       content: ' ';
-       clear: both;
-       height: 0;
-}
-
-.iw-result__footer {
-       float: right;
-}
-
-.iw-result__icon {
-       display: inline-block;
-       width: 24px;
-       height: 24px;
-       vertical-align: middle;
-       margin-right: 0.25em;
-       background: url( images/special.search/definition-icon.svg ) no-repeat 0 0;
-       background-size: 100% 100%;
-}
-
-@interwikiContentTypes: definition, travel, quotation, book, course, news, textbook, image;
-
-.generate-iwIcons();
+@import 'mediawiki.ui/variables.less';
+@import 'mediawiki.mixins';
 
-.generate-iwIcons( @i:1 ) when ( @i =< length( @interwikiContentTypes ) ) {
-       @iwIcon: extract( @interwikiContentTypes, @i );
+.mw-searchresults-has-iw {
 
-       .iw-result__icon--@{iwIcon} {
-               /*  stylelint-disable-next-line function-url-quotes */
-               background-image: url( 'images/special.search/@{iwIcon}-icon.png' );
-               /*  stylelint-disable-next-line function-url-quotes */
-               background-image: url( 'images/special.search/@{iwIcon}-icon.svg' );
+       .iw-headline {
+               font-weight: bold;
        }
 
-       .generate-iwIcons( @i + 1 );
-}
-
-/* image search result */
-.iw-result__mini-gallery {
-       position: relative;
-       float: left;
-       width: 60%;
-       height: 200px;
-       box-sizing: border-box;
-       padding: 0.25rem;
-}
-
-/* second and third images are small */
-.iw-result__mini-gallery:nth-child( 2 ),
-.iw-result__mini-gallery:nth-child( 3 ) { /* stylelint-disable-line indentation */
-       width: 40%;
-       height: 100px;
-}
+       .iw-results {
+               list-style: none;
+               margin: 0;
+       }
 
-.iw-result__mini-gallery__image {
-       display: block;
-       position: relative;
-       width: 100%;
-       height: 100%;
-       background-size: cover;
-       background-repeat: no-repeat;
-       background-position: center center;
-}
+       .iw-resultset {
+               .box-sizing(border-box);
+               padding: 0.5em;
+               vertical-align: top;
+               width: 100%;
+               float: left;
+               background-color: @colorGray15;
+               margin-bottom: 1em;
+               word-break: break-word;
+       }
 
-.iw-result__mini-gallery__image > .iw-result__mini-gallery__caption { /* image gallery text */
-       visibility: hidden;
-       position: absolute;
-       bottom: 0;
-       left: 0;
-       text-align: center;
-       color: #fff;
-       text-shadow: 0 0 10px rgba( 0, 0, 0, 0.4 ); /* improves legibility on white background*/
-       font-size: 0.8em;
-       padding: 5px;
-       background-color: rgba( 0, 0, 0, 0.5 );
-}
+       .iw-result__title {
+               font-size: 108%; /* matching regular search title */
+       }
 
-.iw-result__mini-gallery__image:hover > .iw-result__mini-gallery__caption {
-       visibility: visible;
-}
+       .iw-result:after,
+       .iw-result__content:after { /* clearfix */
+               visibility: hidden;
+               display: block;
+               font-size: 0;
+               content: ' ';
+               clear: both;
+               height: 0;
+       }
 
-/* different types of interwiki result boxes */
-/* quotation box */
-.iw-resultset--quotation .iw-result__content {
-       border-left: 4px solid #afb1b5;
-       margin-left: 1em;
-       padding-top: 0;
-       margin-top: 0.25em;
-}
-.iw-resultset--quotation .iw-result__title {
-       margin-left: 1em;
-}
-.iw-result--quotation .iw-result__title:before {
-       content: ' — ';
-       display: inline-block;
-}
-.iw-result--quotation .iw-result__footer {
-       text-align: right;
-}
+       .iw-result__footer {
+               float: right;
+               font-size: 97%; /* matching main search result font-size */
+               margin-top: 0.5em;
+       }
+       .iw-result__footer a {
+               vertical-align: middle;
+               color: @colorGray7;
+               font-style: italic;
+       }
 
-/* no results
-span the interwiki results across the bottom of the page.
-*/
+       .oo-ui-icon-favicon {
+               padding-right: 1em;
+       }
 
-.mw-search-nonefound ~ #mw-search-interwiki {
-       width: 100%;
-}
+       /* image search result */
+       .iw-result__mini-gallery {
+               position: relative;
+               float: left;
+               width: 100%;
+               height: 200px;
+               .box-sizing(border-box);
+               padding: 0.25rem;
+       }
 
-.mw-search-nonefound ~ #mw-search-interwiki .iw-resultset {
-       width: 30%;
-       max-width: 300px;
-       margin-left: 0.5em;
-       margin-right: 0.5em;
-}
+       /* second and third images are small */
+       .iw-result__mini-gallery:nth-child( 2 ),
+       .iw-result__mini-gallery:nth-child( 3 ) { /* stylelint-disable-line indentation */
+               width: 50%;
+               height: 100px;
+       }
 
-/* mobile */
-/* stylelint-disable declaration-no-important */
-@media only screen and ( max-width: 768px ) {
-       #mw-interwiki-results {
+       .iw-result__mini-gallery__image {
+               display: block;
+               position: relative;
                width: 100%;
+               height: 100%;
+               background-size: 100% auto;
+               background-size: cover;
+               background-repeat: no-repeat;
+               background-position: center center;
        }
-       .mw-search-results {
-               max-width: none !important;
-       }
-       .iw-resultset {
-               width: 45% !important;
-               margin-left: 0.5em !important;
-               margin-right: 0.5em !important;
+
+       /* image gallery text */
+       .iw-result__mini-gallery__image > .iw-result__mini-gallery__caption {
+               visibility: hidden;
+               position: absolute;
+               bottom: 0;
+               left: 0;
+               text-align: center;
+               color: #fff;
+               font-size: 0.8em;
+               padding: 0.5em;
+               background-color: rgba( 0, 0, 0, 0.5 );
        }
 
-}
+       .iw-result__mini-gallery__image:hover > .iw-result__mini-gallery__caption {
+               visibility: visible;
+       }
 
-@media only screen and ( max-width: 600px ) {
-       .iw-resultset {
-               width: 100% !important;
-               margin-left: 0 !important;
-               margin-right: 0 !important;
-               max-width: none !important;
+       /* tablet and up */
+
+       @media only screen and ( min-width: @deviceWidthTablet ) {
+
+               #mw-interwiki-results {
+                       width: 30%;
+                       display: inline-block; /* used to align interwiki sidebar with the top of the main search results */
+                       margin-left: 10%;
+               }
+               .mw-search-createlink,
+               .mw-search-nonefound,
+               .mw-search-results {
+                       float: left;
+                       width: 60%;
+                       clear: left;
+                       max-width: 60%;
+               }
        }
 }
-/* stylelint-enable declaration-no-important */