fixed icon links bug (mask not working every where)

sites/all/themes/custom/edlptheme/assets/dist/img/random-active.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 3.96875 3.9687501"><g transform="translate(0 -293.031)"><rect style="isolation:auto;mix-blend-mode:normal" width="3.969" height="3.969" y="293.031" rx="2.299" ry="2.874" color="#000" overflow="visible" fill="none"/><path d="M1.516 294.3q-.122.188-.28.557-.044-.092-.075-.147-.03-.057-.083-.13-.051-.074-.104-.115-.051-.043-.128-.071-.076-.03-.166-.03H.224q-.029 0-.047-.019-.018-.018-.018-.047v-.391q0-.029.018-.047t.047-.018H.68q.51 0 .836.458zm2.277 1.582q.018.018.018.047 0 .028-.018.047l-.652.652q-.019.018-.047.018-.027 0-.047-.02-.019-.019-.019-.045v-.391l-.173.002q-.108 0-.165.002l-.149-.002q-.091-.005-.144-.011l-.13-.022q-.078-.015-.13-.037-.05-.024-.118-.06-.067-.034-.12-.08-.053-.048-.112-.109-.059-.063-.114-.142.12-.19.277-.557.045.092.076.149.03.055.081.128.053.074.104.116.053.041.128.072.078.028.168.028h.521v-.391q0-.029.019-.047.018-.018.047-.018.024 0 .049.02zm0-1.826q.018.018.018.047 0 .028-.018.046l-.652.653q-.019.018-.047.018-.027 0-.047-.018-.019-.02-.019-.047v-.392h-.521q-.098 0-.178.031-.08.03-.14.092-.062.06-.104.126-.043.063-.092.157-.065.126-.159.348l-.102.227q-.04.091-.11.214-.067.122-.13.203-.062.082-.151.17-.088.087-.184.14-.093.051-.216.086-.122.032-.26.032H.223q-.029 0-.047-.018t-.018-.047v-.391q0-.029.018-.047t.047-.018H.68q.098 0 .178-.03.08-.031.14-.092.062-.062.104-.125.043-.065.092-.159.065-.126.159-.348l.1-.227q.043-.091.11-.214.07-.122.13-.203.064-.082.151-.17.09-.087.184-.138.095-.053.218-.086.122-.034.26-.034h.522v-.392q0-.028.019-.047.018-.018.047-.018.024 0 .049.02z" style="line-height:20px;-inkscape-font-specification:'Crimson, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;text-align:start" font-weight="400" font-family="#dc143c" letter-spacing="0" word-spacing="0" fill="#fb0000"/></g></svg>

sites/all/themes/custom/edlptheme/assets/dist/img/search-active.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 3.96875 3.9687501"><g transform="translate(0 -293.031)"><rect style="isolation:auto;mix-blend-mode:normal" width="3.969" height="3.969" y="293.031" rx="2.299" ry="2.874" color="#000" overflow="visible" fill="none"/><path d="M2.33 295.421a.927.927 0 0 0 .282-.68.92.92 0 0 0-.283-.678.92.92 0 0 0-.678-.283.927.927 0 0 0-.68.283.924.924 0 0 0-.28.678.93.93 0 0 0 .28.68.93.93 0 0 0 .68.281c.265 0 .49-.094.678-.281zm1.301.912c.053.053.08.117.08.193a.26.26 0 0 1-.082.193.26.26 0 0 1-.193.081.255.255 0 0 1-.193-.081l-.736-.734a1.469 1.469 0 0 1-.856.266c-.204 0-.4-.04-.587-.118a1.55 1.55 0 0 1-.483-.322 1.55 1.55 0 0 1-.322-.482 1.503 1.503 0 0 1 0-1.174c.08-.187.188-.348.322-.482.136-.136.297-.243.483-.322a1.48 1.48 0 0 1 1.173 0 1.472 1.472 0 0 1 .804.804c.08.186.12.382.12.586 0 .315-.088.6-.266.856z" style="line-height:20px;-inkscape-font-specification:'Crimson, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;text-align:start" font-weight="400" font-size="20" font-family="#dc143c" letter-spacing="0" word-spacing="0" fill="red" stroke-width="1.033"/></g></svg>

sites/all/themes/custom/edlptheme/assets/dist/img/studio-active.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 3.96875 3.9687501"><g transform="translate(0 -293.031)"><path d="M3.946 295.143q0 .391-.141.74l-.048.116-.436.077q-.052.196-.214.323-.16.125-.368.125v.076q0 .033-.021.054-.022.021-.055.021h-.15q-.034 0-.055-.02-.021-.022-.021-.055v-1.358q0-.033.021-.054.021-.022.054-.022h.151q.033 0 .055.022.02.02.02.054v.075q.168 0 .307.085.14.083.22.224l.16-.028q.068-.224.068-.455 0-.349-.207-.658-.208-.309-.559-.493-.349-.183-.743-.183-.393 0-.745.183-.349.184-.556.493-.208.309-.208.658 0 .231.069.455l.16.028q.08-.141.22-.224.139-.085.306-.085v-.075q0-.033.021-.054.021-.022.055-.022h.15q.033 0 .055.022.02.02.02.054v1.358q0 .033-.02.054-.022.021-.055.021h-.15q-.034 0-.055-.02-.021-.022-.021-.055v-.076q-.207 0-.37-.125-.16-.127-.212-.323L.21 296l-.047-.116q-.141-.349-.141-.74 0-.356.158-.686.158-.33.422-.57.264-.244.627-.387.363-.144.754-.144.392 0 .755.144.363.143.627.386.264.24.422.57.158.33.158.687z" style="line-height:20px;-inkscape-font-specification:'Crimson, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;text-align:start" font-weight="400" font-family="#dc143c" letter-spacing="0" word-spacing="0" fill="#fb0000"/><rect style="isolation:auto;mix-blend-mode:normal" width="3.969" height="3.969" y="293.031" rx="2.299" ry="2.874" color="#000" overflow="visible" fill="none"/></g></svg>

sites/all/themes/custom/edlptheme/assets/img/search-active.svg

@@ -0,0 +1,79 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="15"
+   height="15"
+   viewBox="0 0 3.96875 3.9687501"
+   version="1.1"
+   id="svg15566"
+   inkscape:version="0.92.2 2405546, 2018-03-11"
+   sodipodi:docname="search-active.svg">
+  <defs
+     id="defs15560" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="31.678384"
+     inkscape:cx="-5.0816285"
+     inkscape:cy="7.0840227"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1025"
+     inkscape:window-x="0"
+     inkscape:window-y="28"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata15563">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-293.03123)">
+    <rect
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.05833328;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       id="rect16117"
+       width="3.96875"
+       height="3.96875"
+       x="0"
+       y="293.03122"
+       rx="2.2991402"
+       ry="2.8739254" />
+    <g
+       id="g35509"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:20px;line-height:20px;font-family:Crimson;-inkscape-font-specification:'Crimson, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;display:inline;fill:#ff0000;fill-opacity:1;stroke:none;stroke-width:1.03276014"
+       transform="matrix(0.19219275,0,0,0.19219275,-321.49785,187.32388)"
+       aria-label="">
+      <path
+         sodipodi:nodetypes="cscscscsccscsccscccscccscccscc"
+         inkscape:connector-curvature="0"
+         id="path35507"
+         d="m 1684.9076,562.44127 c 0.9821,-0.98214 1.4732,-2.16145 1.4732,-3.53794 0,-1.37649 -0.4911,-2.55208 -1.4732,-3.52679 -0.9747,-0.98214 -2.1503,-1.47321 -3.5268,-1.47321 -1.3765,0 -2.5558,0.49107 -3.5379,1.47321 -0.9747,0.97471 -1.4621,2.1503 -1.4621,3.52679 0,1.37649 0.4874,2.5558 1.4621,3.53794 0.9821,0.97471 2.1614,1.46206 3.5379,1.46206 1.3765,0 2.5521,-0.48735 3.5268,-1.46206 z m 6.7746,4.74331 c 0.2753,0.27529 0.4129,0.61011 0.4129,1.00446 0,0.39435 -0.1414,0.72917 -0.4241,1.00447 -0.2753,0.28273 -0.6101,0.4241 -1.0044,0.4241 -0.4018,0 -0.7366,-0.14137 -1.0045,-0.4241 l -3.8281,-3.81697 c -1.3319,0.92262 -2.8163,1.38393 -4.4532,1.38393 -1.0639,0 -2.0833,-0.20461 -3.058,-0.61384 -0.9673,-0.41667 -1.8043,-0.9747 -2.5112,-1.67411 -0.6994,-0.70684 -1.2574,-1.54389 -1.6741,-2.51116 -0.4092,-0.9747 -0.6138,-1.99404 -0.6138,-3.05803 0,-1.06399 0.2046,-2.07961 0.6138,-3.04688 0.4167,-0.9747 0.9747,-1.81175 1.6741,-2.51116 0.7069,-0.70685 1.5439,-1.26488 2.5112,-1.6741 0.9747,-0.41667 1.9941,-0.625 3.058,-0.625 1.064,0 2.0796,0.20833 3.0469,0.625 0.9747,0.40922 1.8118,0.96725 2.5112,1.6741 0.7068,0.69941 1.2648,1.53646 1.6741,2.51116 0.4167,0.96727 0.625,1.98289 0.625,3.04688 0,1.63691 -0.4613,3.12128 -1.3839,4.45312 z"
+         style="stroke-width:1.03276014;fill:#ff0000;fill-opacity:1" />
+    </g>
+  </g>
+</svg>

sites/all/themes/custom/edlptheme/assets/img/studio-active.svg

@@ -0,0 +1,72 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   xmlns:dc="http://purl.org/dc/elements/1.1/"
+   xmlns:cc="http://creativecommons.org/ns#"
+   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+   xmlns:svg="http://www.w3.org/2000/svg"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   width="15"
+   height="15"
+   viewBox="0 0 3.96875 3.9687501"
+   version="1.1"
+   id="svg15566"
+   inkscape:version="0.92.2 2405546, 2018-03-11"
+   sodipodi:docname="studio-active.svg">
+  <defs
+     id="defs15560" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0.0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="31.678384"
+     inkscape:cx="-5.0816285"
+     inkscape:cy="7.0840227"
+     inkscape:document-units="mm"
+     inkscape:current-layer="layer1"
+     showgrid="false"
+     units="px"
+     inkscape:window-width="1920"
+     inkscape:window-height="1025"
+     inkscape:window-x="0"
+     inkscape:window-y="28"
+     inkscape:window-maximized="1" />
+  <metadata
+     id="metadata15563">
+    <rdf:RDF>
+      <cc:Work
+         rdf:about="">
+        <dc:format>image/svg+xml</dc:format>
+        <dc:type
+           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+        <dc:title></dc:title>
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Calque 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(0,-293.03123)">
+    <path
+       d="m 3.9459776,295.14291 q 0,0.39137 -0.1414624,0.74029 l -0.047254,0.11547 -0.4361469,0.0778 q -0.051936,0.1957 -0.2145454,0.32301 -0.1603423,0.12495 -0.3677999,0.12495 v 0.0755 q 0,0.033 -0.021179,0.0543 -0.021285,0.0212 -0.054278,0.0212 H 2.5124214 q -0.033099,0 -0.054171,-0.0212 -0.021285,-0.0212 -0.021285,-0.0543 v -1.35802 q 0,-0.033 0.021285,-0.0543 0.021179,-0.0212 0.054171,-0.0212 H 2.663313 q 0.032992,0 0.054278,0.0212 0.021179,0.0212 0.021179,0.0543 v 0.0755 q 0.1673877,0 0.3064876,0.0848 0.139121,0.0825 0.21926,0.22399 l 0.1603209,-0.0282 q 0.068432,-0.22398 0.068432,-0.45503 0,-0.34893 -0.2074681,-0.65778 -0.2074787,-0.30886 -0.5587612,-0.49276 -0.348941,-0.18389 -0.7426557,-0.18389 -0.3937467,0 -0.7450184,0.18389 -0.34893039,0.1839 -0.55639848,0.49276 -0.20748938,0.30885 -0.20748938,0.65778 0,0.23105 0.0684323,0.45503 l 0.16031078,0.0282 q 0.0801393,-0.14147 0.2192495,-0.22399 0.13912088,-0.0848 0.30649808,-0.0848 v -0.0755 q 0,-0.033 0.021285,-0.0543 0.021179,-0.0212 0.054278,-0.0212 H 1.456414 q 0.032992,0 0.054277,0.0212 0.021179,0.0212 0.021179,0.0543 v 1.35802 q 0,0.033 -0.021179,0.0543 -0.021285,0.0212 -0.054277,0.0212 H 1.3055326 q -0.033099,0 -0.054278,-0.0212 -0.021285,-0.0212 -0.021285,-0.0543 v -0.0755 q -0.2074574,0 -0.37014117,-0.12495 -0.16031046,-0.12731 -0.21219342,-0.32301 l -0.43615766,-0.0778 -0.0472534,-0.11547 q -0.14145164,-0.34892 -0.14145164,-0.74029 0,-0.35601 0.15794777,-0.68608 0.1579797,-0.33006 0.42202419,-0.57054 0.26405514,-0.24285 0.62712953,-0.38666 0.3630851,-0.14382 0.7544691,-0.14382 0.3913414,0 0.7544265,0.14382 0.3630744,0.14381 0.6271297,0.38666 0.2640656,0.24048 0.4220346,0.57054 0.1579586,0.33007 0.1579586,0.68608 z"
+       style="font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;font-size:medium;line-height:20px;font-family:Crimson;-inkscape-font-specification:'Crimson, Normal';font-variant-ligatures:normal;font-variant-caps:normal;font-variant-numeric:normal;text-align:start;letter-spacing:0px;word-spacing:0px;writing-mode:lr-tb;text-anchor:start;display:inline;fill:#fb0000;fill-opacity:1;stroke:none;stroke-width:0.19848901"
+       id="path35495"
+       inkscape:connector-curvature="0" />
+    <rect
+       style="color:#000000;clip-rule:nonzero;display:inline;overflow:visible;visibility:visible;opacity:1;isolation:auto;mix-blend-mode:normal;color-interpolation:sRGB;color-interpolation-filters:linearRGB;solid-color:#000000;solid-opacity:1;vector-effect:none;fill:none;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.05833328;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:0;color-rendering:auto;image-rendering:auto;shape-rendering:auto;text-rendering:auto;enable-background:accumulate"
+       id="rect16117"
+       width="3.96875"
+       height="3.96875"
+       x="1.3877788e-17"
+       y="293.03122"
+       rx="2.2991402"
+       ry="2.8739254" />
+  </g>
+</svg>

sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -1926,7 +1926,7 @@ footer{
   }
 
   $icons_w:20px;
-  @mixin iconlinkblock($bgimgurl) {
+  @mixin iconlinkblock($bgimgurl, $bgimgurlactive) {
     pointer-events: all;
     margin-left: 0.5em;
     // @include btn;
@@ -1938,26 +1938,30 @@ footer{
       text-indent: $wh*2;
       margin: 0;
       overflow: hidden;
-      mask-image: $bgimgurl;
-      mask-size: contain;
-      background-color: #000;
-      transition: background-color 0.3s ease-in-out;
+      // mask-image: $bgimgurl;
+      // mask-size: contain;
+      // background-color: #000;
+      // transition: background-color 0.3s ease-in-out;
+      background-image: $bgimgurl;
+      background-repeat: no-repeat;
+      background-size: contain;
       cursor: pointer;
-      &.is-active{
-        background-color: red;
+      &:hover, &.is-active{
+        // background-color: red;
+        background-image: $bgimgurlactive;
       }
     }
   }
 
   .block.random-player{
     margin-bottom: 1em;
-    @include iconlinkblock(url(../img/random.svg));
+    @include iconlinkblock(url(../img/random.svg), url(../img/random-active.svg));
   }
 
   #block-studiolinkblock{
     margin-bottom: 1em;
     margin-left: 0.2em;
-    @include iconlinkblock(url(../img/studio.svg));
+    @include iconlinkblock(url(../img/studio.svg), url(../img/studio-active.svg));
   }
 
   #block-userlogin{
@@ -2033,7 +2037,7 @@ footer{
 
   #block-edlpsearchlinkblock{
     margin-bottom: 1em;
-    @include iconlinkblock(url(../img/search.svg));
+    @include iconlinkblock(url(../img/search.svg), url(../img/search-active.svg));
     margin-left: 0.2em;
   }