sketchucation logo sketchucation
    • Login
    🤑 SketchPlus 1.3 | 44 Tools for $15 until June 20th Buy Now

    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.
    • Rich O BrienR Offline
      Rich O Brien Moderator
      last edited by

      404 Not Found

      favicon

      (kushagragour.in)

      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
      • TIGT Offline
        TIG Moderator
        last edited by

        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
        • First post
          Last post
        Buy SketchPlus
        Buy SUbD
        Buy WrapR
        Buy eBook
        Buy Modelur
        Buy Vertex Tools
        Buy SketchCuisine
        Buy FormFonts

        Advertisement