resources/src/mediawiki.skinning/content.externallinks.css

   1 /*!
   2  * Icons and colors for external links.
   3  */
   4
   5 /* T68091 is blocking is from converting this file to LESS
   6  * and using the .background-image-svg mixin. */
   7
   8 /* SVG support using a transparent gradient to guarantee cross-browser
   9  * compatibility ( browsers able to understand gradient syntax support also SVG ).
  10  * http://pauginer.tumblr.com/post/36614680636/invisible-gradient-technique */
  11
  12 .mw-body-content a.external,
  13 .link-https {
  14         background: url( images/external-ltr.png ) center right no-repeat;
  15         /* @embed */
  16         background-image: -webkit-linear-gradient( transparent, transparent ), url( images/external-ltr.svg );
  17         /* @embed */
  18         background-image: linear-gradient( transparent, transparent ), url( images/external-ltr.svg );
  19         padding-right: 15px;
  20 }
  21
  22 .mw-body-content a.external[href^='mailto:'],
  23 .link-mailto {
  24         background: url( images/mail.png ) center right no-repeat;
  25         /* @embed */
  26         background-image: linear-gradient( transparent, transparent ), url( images/mail.svg );
  27         padding-right: 15px;
  28 }
  29
  30 .mw-body-content a.external[href^='ftp://'],
  31 .link-ftp {
  32         background: url( images/ftp-ltr.png ) center right no-repeat;
  33         /* @embed */
  34         background-image: linear-gradient( transparent, transparent ), url( images/ftp-ltr.svg );
  35         padding-right: 15px;
  36 }
  37
  38 .mw-body-content a.external[href^='irc://'],
  39 .mw-body-content a.external[href^='ircs://'],
  40 .link-irc {
  41         background: url( images/chat-ltr.png ) center right no-repeat;
  42         /* @embed */
  43         background-image: linear-gradient( transparent, transparent ), url( images/chat-ltr.svg );
  44         padding-right: 15px;
  45 }
  46
  47 .mw-body-content a.external[href$='.ogg'],
  48 .mw-body-content a.external[href$='.OGG'],
  49 .mw-body-content a.external[href$='.mid'],
  50 .mw-body-content a.external[href$='.MID'],
  51 .mw-body-content a.external[href$='.midi'],
  52 .mw-body-content a.external[href$='.MIDI'],
  53 .mw-body-content a.external[href$='.mp3'],
  54 .mw-body-content a.external[href$='.MP3'],
  55 .mw-body-content a.external[href$='.wav'],
  56 .mw-body-content a.external[href$='.WAV'],
  57 .mw-body-content a.external[href$='.wma'],
  58 .mw-body-content a.external[href$='.WMA'],
  59 .link-audio {
  60         background: url( images/audio-ltr.png ) center right no-repeat;
  61         /* @embed */
  62         background-image: linear-gradient( transparent, transparent ), url( images/audio-ltr.svg );
  63         padding-right: 15px;
  64 }
  65
  66 .mw-body-content a.external[href$='.ogm'],
  67 .mw-body-content a.external[href$='.OGM'],
  68 .mw-body-content a.external[href$='.avi'],
  69 .mw-body-content a.external[href$='.AVI'],
  70 .mw-body-content a.external[href$='.mpeg'],
  71 .mw-body-content a.external[href$='.MPEG'],
  72 .mw-body-content a.external[href$='.mpg'],
  73 .mw-body-content a.external[href$='.MPG'],
  74 .link-video {
  75         background: url( images/video.png ) center right no-repeat;
  76         /* @embed */
  77         background-image: linear-gradient( transparent, transparent ), url( images/video.svg );
  78         padding-right: 15px;
  79 }
  80
  81 .mw-body-content a.external[href$='.pdf'],
  82 .mw-body-content a.external[href$='.PDF'],
  83 .mw-body-content a.external[href*='.pdf#'],
  84 .mw-body-content a.external[href*='.PDF#'],
  85 .mw-body-content a.external[href*='.pdf?'],
  86 .mw-body-content a.external[href*='.PDF?'],
  87 .link-document {
  88         background: url( images/document-ltr.png ) center right no-repeat;
  89         /* @embed */
  90         background-image: linear-gradient( transparent, transparent ), url( images/document-ltr.svg );
  91         padding-right: 15px;
  92 }
  93
  94 /* Interwiki styling */
  95 .mw-body-content a.extiw,
  96 .mw-body-content a.extiw:active {
  97         color: #36b;
  98 }
  99
 100 /* External link color */
 101 .mw-body-content a.external {
 102         color: #36b;
 103 }