1/* 2 * DirPictures Plugin style 3 * Anchor to a div with 4 * 5 * Mosaic markups : 6 * <a><div><span></span></div></a> 7 */ 8 9 10/* Style */ 11 12div.mosaicMain a:hover { 13 background-color:#f4ff4f; 14} 15 16div.mosaicMain a { 17 padding:5px; 18 color: #ff00000; 19 background-color:#eee; 20 font-size: 100%; 21 width:32%; 22 max-width: 350px; 23 height:230px; 24 float:left; 25 margin:5px; 26} 27 28div.mosaicImg { 29 padding:5px; 30 overflow: hidden; 31 background-size: cover; 32 background-position: 50% 50%; 33 width: 100%; 34 height: 220px; 35 float:left; 36} 37 38.mosaicTitle { 39background-color:#f4ff4f; 40 display:block; 41 overflow: hidden; 42 font-size: 16px; 43 font-weight: bold; 44 text-align: left; 45 color: #444; 46 font-family: 'Lato', 'Arial', sans-serif; 47 text-decoration: none;max-width: 320px; 48 margin-left: -5px; 49 margin-top: 165px; 50 padding-left: 3px; 51 52} 53 54.mosaicDate { 55 overflow: hidden; 56 font-size: 11px; 57 font-weight: normal; 58 text-align: left; 59 color: #eee; 60 font-family: 'Lato', 'Arial', sans-serif; 61 text-decoration: none; 62 background: black; 63 padding-right: 10px; 64 padding-left:5px; 65 margin-left: -5px; 66} 67 68 69 70/* ---------- RTL --------------*/ 71 72[dir=rtl] div.mosaicMain a:hover { 73 background-color:#f4ff4f; 74} 75 76[dir=rtl] div.mosaicMain a { 77 padding:5px; 78 color: #ff00000; 79 background-color:#eee; 80 font-size: 100%; 81 width:32%; 82 max-width: 350px; 83 height:230px; 84 float:left; 85 margin:5px; 86} 87 88[dir=rtl] div.mosaicImg { 89 padding:5px; 90 overflow: hidden; 91 background-size: cover; 92 background-position: 50% 50%; 93 width: 100%; 94 height: 220px; 95 float:left; 96} 97 98[dir=rtl] .mosaicTitle { 99background-color:#f4ff4f; 100 display:block; 101 overflow: hidden; 102 font-size: 16px; 103 font-weight: bold; 104 text-align: left; 105 color: #444; 106 font-family: 'Lato', 'Arial', sans-serif; 107 text-decoration: none;max-width: 320px; 108 margin-left: -5px; 109 margin-top: 165px; 110 padding-left: 3px; 111 112} 113 114[dir=rtl] .mosaicDate { 115 overflow: hidden; 116 font-size: 11px; 117 font-weight: normal; 118 text-align: left; 119 color: #eee; 120 font-family: 'Lato', 'Arial', sans-serif; 121 text-decoration: none; 122 background: black; 123 padding-right: 10px; 124 padding-left:5px; 125 margin-left: -5px; 126} 127