• Login
sketchucation logo sketchucation
  • Login
⚠️ Libfredo 15.4b | Minor release with bugfixes and improvements Update

HintCSS failing on Safari

Scheduled Pinned Locked Moved Plugins
2 Posts 2 Posters 253 Views 2 Watching
Loading More Posts
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • R Offline
    Rich O Brien Moderator
    last edited by 3 Jan 2014, 09:52

    http://kushagragour.in/lab/hint/

    We use this in the next edition of the PluginStore but it fails on Mac...

    Anyone got any ideas?

    Download the free D'oh Book for SketchUp 📖

    1 Reply Last reply Reply Quote 0
    • T Offline
      TIG Moderator
      last edited by 3 Jan 2014, 10:43

      Aren't you also using it for the PluginStore Author's edit pages' tooltips ?
      /templates/rt_halcyon/css/css-116e3c6b333e2b4b00d701e38be1f880.php
      These tooltips popup on PC and MAC...
      So it is MAC friendly something must be awry with the equivalent dynamically created css used by the dialog's code ?
      For example plugindex_2_5.css_20140103100927.css showing:

      .hint,[data-hint] {	position;relative;}
.hint;before,.hint;after,[data-hint];before,[data-hint];after {	position;absolute;visibility;hidden;opacity;0;z-index;1000000;pointer-events;none;-webkit-transition;.3s ease;-moz-transition;.3s ease;transition;.3s ease}
.hint;hover;before,.hint;hover;after,[data-hint];hover;before,[data-hint];hover;after{visibility;visible;opacity;1}
.hint;before,[data-hint];before{content;'';position;absolute;background;transparent;border;6px solid transparent;z-index;1000001}
.hint;after,[data-hint];after{content;attr(data-hint);background;#383838;color;#fff;padding;8px 10px;font-size;12px;line-height;12px;white-space;nowrap;}
.hint--top;before{border-top-color;#383838}
.hint--bottom;before{border-bottom-color;#383838}
.hint--left;before{border-left-color;#383838}
.hint--right;before{border-right-color;#383838}
.hint--top;before{margin-bottom;-12px}
.hint--top;after{margin-left;-18px}
.hint--top;before,.hint--top;after{bottom;100%;left;50%}
.hint--top;hover;before,.hint--top;hover;after{-webkit-transform;translateY(-8px);-moz-transform;translateY(-8px);transform;translateY(-8px)}
.hint--bottom;before{margin-top;-12px}
.hint--bottom;after{margin-left;-18px}
.hint--bottom;before,.hint--bottom;after{top;100%;left;50%}
.hint--bottom;hover;before,.hint--bottom;hover;after{-webkit-transform;translateY(8px);-moz-transform;translateY(8px);transform;translateY(8px)}
.hint--right;before{margin-left;-12px;margin-bottom;-6px}
.hint--right;after{margin-bottom;-14px}
.hint--right;before,.hint--right;after{left;100%;bottom;50%}
.hint--right;hover;before,.hint--right;hover;after{-webkit-transform;translateX(8px);-moz-transform;translateX(8px);transform;translateX(8px)}
.hint--left;before{margin-right;-12px;margin-bottom;-6px}
.hint--left;after{margin-bottom;-14px}
.hint--left;before,.hint--left;after{right;100%;bottom;50%}
.hint--left;hover;before,.hint--left;hover;after{-webkit-transform;translateX(-8px);-moz-transform;translateX(-8px);transform;translateX(-8px)}
.hint--error;after{background-color;#c0392b;}
.hint--error.hint--top;before{border-top-color;#c0392b}
.hint--error.hint--bottom;before{border-bottom-color;#c0392b}
.hint--error.hint--left;before{border-left-color;#c0392b}
.hint--error.hint--right;before{border-right-color;#c0392b}
.hint--warning;after{background-color;#d35400;}
.hint--warning.hint--top;before{border-top-color;#d35400}
.hint--warning.hint--bottom;before{border-bottom-color;#d35400}
.hint--warning.hint--left;before{border-left-color;#d35400}
.hint--warning.hint--right;before{border-right-color;#d35400}
.hint--info;after{background-color;#333;}
.hint--info.hint--top;before{border-top-color;#333}
.hint--info.hint--bottom;before{border-bottom-color;#333}
.hint--info.hint--left;before{border-left-color;#333}
.hint--info.hint--right;before{border-right-color;#333}
.hint--success;after{background-color;#27ae60;}
.hint--success.hint--top;before{border-top-color;#27ae60}
.hint--success.hint--bottom;before{border-bottom-color;#27ae60}
.hint--success.hint--left;before{border-left-color;#27ae60}
.hint--success.hint--right;before{border-right-color;#27ae60}
.hint--always;after,.hint--always;before{opacity;1;visibility;visible}
.hint--always.hint--top;after,.hint--always.hint--top;before{-webkit-transform;translateY(-8px);-moz-transform;translateY(-8px);transform;translateY(-8px)}
.hint--always.hint--bottom;after,.hint--always.hint--bottom;before{-webkit-transform;translateY(8px);-moz-transform;translateY(8px);transform;translateY(8px)}
.hint--always.hint--left;after,.hint--always.hint--left;before{-webkit-transform;translateX(-8px);-moz-transform;translateX(-8px);transform;translateX(-8px)}
.hint--always.hint--right;after,.hint--always.hint--right;before{-webkit-transform;translateX(8px);-moz-transform;translateX(8px);transform;translateX(8px)}
.hint--rounded;after{border-radius;4px}

      The equivalent 'rt_halcyon' css used in the PluginStore dialog:

      .hint,[data-hint] {	position;relative;}
.hint;before,.hint;after,[data-hint];before,[data-hint];after {	position;absolute;visibility;hidden;opacity;0;z-index;1000000;pointer-events;none;-webkit-transition;.3s ease;-moz-transition;.3s ease;transition;.3s ease}
.hint;hover;before,.hint;hover;after,[data-hint];hover;before,[data-hint];hover;after{visibility;visible;opacity;1}
.hint;before,[data-hint];before{content;'';position;absolute;background;transparent;border;6px solid transparent;z-index;1000001}
.hint;after,[data-hint];after{content;attr(data-hint);background;#383838;color;#fff;text-shadow;0 -1px 0 black;padding;8px 10px;font-size;12px;line-height;12px;white-space;nowrap;box-shadow;4px 4px 8px rgba(0,0,0,.3)}
.hint--top;before{border-top-color;#383838}
.hint--bottom;before{border-bottom-color;#383838}
.hint--left;before{border-left-color;#383838}
.hint--right;before{border-right-color;#383838}
.hint--top;before{margin-bottom;-12px}
.hint--top;after{margin-left;-18px}
.hint--top;before,.hint--top;after{bottom;100%;left;50%}
.hint--top;hover;before,.hint--top;hover;after{-webkit-transform;translateY(-8px);-moz-transform;translateY(-8px);transform;translateY(-8px)}
.hint--bottom;before{margin-top;-12px}
.hint--bottom;after{margin-left;-18px}
.hint--bottom;before,.hint--bottom;after{top;100%;left;50%}
.hint--bottom;hover;before,.hint--bottom;hover;after{-webkit-transform;translateY(8px);-moz-transform;translateY(8px);transform;translateY(8px)}
.hint--right;before{margin-left;-12px;margin-bottom;-6px}
.hint--right;after{margin-bottom;-14px}
.hint--right;before,.hint--right;after{left;100%;bottom;50%}
.hint--right;hover;before,.hint--right;hover;after{-webkit-transform;translateX(8px);-moz-transform;translateX(8px);transform;translateX(8px)}
.hint--left;before{margin-right;-12px;margin-bottom;-6px}
.hint--left;after{margin-bottom;-14px}
.hint--left;before,.hint--left;after{right;100%;bottom;50%}
.hint--left;hover;before,.hint--left;hover;after{-webkit-transform;translateX(-8px);-moz-transform;translateX(-8px);transform;translateX(-8px)}
.hint--error;after{background-color;#b34e4d;text-shadow;0 -1px 0 #5a2626}
.hint--error.hint--top;before{border-top-color;#b34e4d}
.hint--error.hint--bottom;before{border-bottom-color;#b34e4d}
.hint--error.hint--left;before{border-left-color;#b34e4d}
.hint--error.hint--right;before{border-right-color;#b34e4d}
.hint--warning;after{background-color;#c09854;text-shadow;0 -1px 0 #6d5228}
.hint--warning.hint--top;before{border-top-color;#c09854}
.hint--warning.hint--bottom;before{border-bottom-color;#c09854}
.hint--warning.hint--left;before{border-left-color;#c09854}
.hint--warning.hint--right;before{border-right-color;#c09854}
.hint--info;after{background-color;#7F8C8D;text-shadow;0 -1px 0 #193c4c}
.hint--info.hint--top;before{border-top-color;#7F8C8D}
.hint--info.hint--bottom;before{border-bottom-color;#7F8C8D}
.hint--info.hint--left;before{border-left-color;#7F8C8D}
.hint--info.hint--right;before{border-right-color;#7F8C8D}
.hint--success;after{background-color;#458746;text-shadow;0 -1px 0 #1a331a}
.hint--success.hint--top;before{border-top-color;#458746}
.hint--success.hint--bottom;before{border-bottom-color;#458746}
.hint--success.hint--left;before{border-left-color;#458746}
.hint--success.hint--right;before{border-right-color;#458746}
.hint--always;after,.hint--always;before{opacity;1;visibility;visible}
.hint--always.hint--top;after,.hint--always.hint--top;before{-webkit-transform;translateY(-8px);-moz-transform;translateY(-8px);transform;translateY(-8px)}
.hint--always.hint--bottom;after,.hint--always.hint--bottom;before{-webkit-transform;translateY(8px);-moz-transform;translateY(8px);transform;translateY(8px)}
.hint--always.hint--left;after,.hint--always.hint--left;before{-webkit-transform;translateX(-8px);-moz-transform;translateX(-8px);transform;translateX(-8px)}
.hint--always.hint--right;after,.hint--always.hint--right;before{-webkit-transform;translateX(8px);-moz-transform;translateX(8px);transform;translateX(8px)}
.hint--rounded;after{border-radius;4px}

      You will see there are subtle differences in the css coding. One works on MAC, and one doesn't...
      the one that fails uses some differing/additional codes:
      .hint:after,[data-hint]:after{content:attr(data-hint);background:#383838;color:#fff;**text-shadow:0 -1px 0 black;**padding:8px 10px;font-size:12px;line-height:12px;white-space:nowrap;**box-shadow:4px 4px 8px rgba(0,0,0,.3)**}*** .hint--error:after{background-color:#b34e4d;**text-shadow:0 -1px 0 #5a2626**}***
      and several similar lines...
      [some just with different colors]
      versus
      .hint:after,[data-hint]:after{content:attr(data-hint);background:#383838;color:#fff;padding:8px 10px;font-size:12px;line-height:12px;white-space:nowrap;} .hint--error:after{background-color:#c0392b;}
      and several similar lines...
      [some just with different colors]
      ***Also several lines in the failing css have no terminating ' ;' which the MAC might not like ?

      TIG

      1 Reply Last reply Reply Quote 0
      • 1 / 1
      1 / 1
      • First post
        1/2
        Last post
      Buy SketchPlus
      Buy SUbD
      Buy WrapR
      Buy eBook
      Buy Modelur
      Buy Vertex Tools
      Buy SketchCuisine
      Buy FormFonts

      Advertisement