Merge pull request #3666 from evazion/fix-3664
Fix #3664: Highlight non-gentags in post tooltip
This commit is contained in:
Albert Yi
GitHub
@@ -6,6 +6,7 @@
|
||||
//= require jquery.storageapi.js
|
||||
//= require jquery.dropdown.min.js
|
||||
//= require jquery.hammer.js
|
||||
//= require jquery.qtip.js
|
||||
//= require ugoira_player.js
|
||||
//= require stupidtable.js
|
||||
//= require rails.js
|
||||
|
||||
51
app/assets/javascripts/post_tooltips.js.erb
Normal file
51
app/assets/javascripts/post_tooltips.js.erb
Normal file
@@ -0,0 +1,51 @@
|
||||
Danbooru.PostTooltip = {};
|
||||
|
||||
Danbooru.PostTooltip.render_tooltip = function (event, qtip) {
|
||||
var post_id = $(event.target).parents("[data-id]").data("id");
|
||||
|
||||
return $.get("/posts/" + post_id, { variant: "tooltip" }).done(function () {
|
||||
qtip.elements.tooltip.removeClass("post-tooltip-loading");
|
||||
});
|
||||
};
|
||||
|
||||
// http://qtip2.com/options
|
||||
Danbooru.PostTooltip.QTIP_OPTIONS = {
|
||||
style: "qtip-light post-tooltip",
|
||||
content: Danbooru.PostTooltip.render_tooltip,
|
||||
overwrite: false,
|
||||
position: {
|
||||
my: "top left",
|
||||
at: "bottom left",
|
||||
target: "mouse",
|
||||
viewport: $(window),
|
||||
adjust: {
|
||||
mouse: false,
|
||||
y: 25,
|
||||
method: "shift",
|
||||
},
|
||||
},
|
||||
show: {
|
||||
solo: true,
|
||||
delay: 300,
|
||||
effect: false,
|
||||
ready: true,
|
||||
event: "mouseenter",
|
||||
},
|
||||
hide: {
|
||||
delay: 50,
|
||||
fixed: true,
|
||||
effect: false,
|
||||
event: "mouseleave",
|
||||
},
|
||||
events: {
|
||||
show: function (event, qtip) { qtip.elements.tooltip.addClass("post-tooltip-loading"); },
|
||||
},
|
||||
};
|
||||
|
||||
Danbooru.PostTooltip.initialize = function () {
|
||||
$(document).on("mouseenter", ".post-preview img", function (event) {
|
||||
$(this).qtip(Danbooru.PostTooltip.QTIP_OPTIONS, event);
|
||||
});
|
||||
};
|
||||
|
||||
$(document).ready(Danbooru.PostTooltip.initialize);
|
||||
@@ -4,8 +4,6 @@
|
||||
Danbooru.Post.pending_update_count = 0;
|
||||
|
||||
Danbooru.Post.initialize_all = function() {
|
||||
this.initialize_post_previews();
|
||||
|
||||
if ($("#c-posts").length) {
|
||||
this.initialize_shortcuts();
|
||||
this.initialize_saved_searches();
|
||||
@@ -321,28 +319,6 @@
|
||||
});
|
||||
}
|
||||
|
||||
Danbooru.Post.initialize_post_previews = function() {
|
||||
$(".post-preview").each(function(i, v) {
|
||||
Danbooru.Post.initialize_title_for(v);
|
||||
});
|
||||
}
|
||||
|
||||
Danbooru.Post.initialize_title_for = function(post) {
|
||||
var $post = $(post);
|
||||
var $img = $post.find("img");
|
||||
var score = null;
|
||||
if ($post.data("views")) {
|
||||
score = " views:" + $post.data("views");
|
||||
} else {
|
||||
score = " score:" + $post.data("score");
|
||||
}
|
||||
var uploader = " ";
|
||||
if ($post.attr("data-uploader")) {
|
||||
uploader += "user:" + $post.attr("data-uploader").replace(/_/g, " ");
|
||||
}
|
||||
$img.attr("title", $post.attr("data-tags") + uploader + " rating:" + $post.data("rating") + score);
|
||||
}
|
||||
|
||||
Danbooru.Post.expand_image = function(e) {
|
||||
if (Danbooru.test_max_width(660)) {
|
||||
// just do the default behavior
|
||||
@@ -519,7 +495,6 @@
|
||||
if (data.has_visible_children) {
|
||||
$post.addClass("post-status-has-children");
|
||||
}
|
||||
Danbooru.Post.initialize_title_for($post);
|
||||
}
|
||||
|
||||
Danbooru.Post.vote = function(score, id) {
|
||||
|
||||
@@ -1,10 +1,11 @@
|
||||
@import "jquery-ui-1.11.2.min.scss";
|
||||
@import "jquery.dropdown.scss";
|
||||
@import "jquery.qtip.css";
|
||||
@import "common/*";
|
||||
|
||||
// @import wildcards don't work with .erb files. Put .erb files in a separate
|
||||
// directory and load them explicitly to work around this.
|
||||
// https://github.com/rails/sass-rails/issues/185
|
||||
@import "specific/*";
|
||||
@import "specific/erb/posts";
|
||||
@import "specific/erb/mod_queue";
|
||||
@import "common/erb/tags";
|
||||
|
||||
33
app/assets/stylesheets/common/erb/tags.scss.erb
Normal file
33
app/assets/stylesheets/common/erb/tags.scss.erb
Normal file
@@ -0,0 +1,33 @@
|
||||
<% TagCategory.css_mapping.each do |category,cssmap| %>
|
||||
.category-<%= category %> a, a.tag-type-<%= category %>, .ui-state-focus a.tag-type-<%= category %> {
|
||||
color: <%= cssmap["color"] %>;
|
||||
|
||||
&:hover {
|
||||
color: <%= cssmap["hover"] %>;
|
||||
}
|
||||
}
|
||||
<% end %>
|
||||
|
||||
.category-banned a, a.tag-type-banned, .ui-state-focus a.tag-type-banned {
|
||||
color: black;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.inline-tag-list {
|
||||
ul {
|
||||
display: inline;
|
||||
|
||||
li {
|
||||
display: inline;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.split-inline-tag-list {
|
||||
@extend .inline-tag-list;
|
||||
|
||||
ul {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
@@ -66,12 +66,6 @@ div#c-comments {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
div.list-of-tags {
|
||||
a {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
div.notices {
|
||||
margin: 1em 0;
|
||||
}
|
||||
@@ -133,12 +127,6 @@ div#c-comments {
|
||||
div.post.blacklisted.blacklisted-active {
|
||||
display: none;
|
||||
}
|
||||
|
||||
div.list-of-tags {
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
12
app/assets/stylesheets/specific/post_tooltips.scss
Normal file
12
app/assets/stylesheets/specific/post_tooltips.scss
Normal file
@@ -0,0 +1,12 @@
|
||||
.post-tooltip {
|
||||
max-width: 660px;
|
||||
border-color: #767676;
|
||||
|
||||
.qtip-content {
|
||||
padding: 4px 6px;
|
||||
}
|
||||
|
||||
&.post-tooltip-loading {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../../common/000_vars.scss";
|
||||
@import "../common/000_vars.scss";
|
||||
|
||||
article.post-preview {
|
||||
height: 154px;
|
||||
@@ -179,21 +179,6 @@ body[data-user-can-approve-posts="true"] .post-preview {
|
||||
}
|
||||
}
|
||||
|
||||
<% TagCategory.css_mapping.each do |category,cssmap| %>
|
||||
.category-<%= category %> a, a.tag-type-<%= category %>, .ui-state-focus a.tag-type-<%= category %> {
|
||||
color: <%= cssmap["color"] %>;
|
||||
|
||||
&:hover {
|
||||
color: <%= cssmap["hover"] %>;
|
||||
}
|
||||
}
|
||||
<% end %>
|
||||
|
||||
.category-banned a, a.tag-type-banned,, .ui-state-focus a.tag-type-banned {
|
||||
color: black;
|
||||
background-color: red;
|
||||
}
|
||||
|
||||
.post-count {
|
||||
color: #CCC;
|
||||
margin-left: 0.2em;
|
||||
@@ -9,6 +9,7 @@ class ApplicationController < ActionController::Base
|
||||
before_action :set_started_at_session
|
||||
before_action :api_check
|
||||
before_action :set_safe_mode
|
||||
before_action :set_variant
|
||||
# before_action :secure_cookies_check
|
||||
layout "default"
|
||||
helper_method :show_moderation_notice?
|
||||
@@ -184,6 +185,10 @@ class ApplicationController < ActionController::Base
|
||||
end
|
||||
end
|
||||
|
||||
def set_variant
|
||||
request.variant = params[:variant].try(:to_sym)
|
||||
end
|
||||
|
||||
User::Roles.each do |role|
|
||||
define_method("#{role}_only") do
|
||||
if !CurrentUser.user.is_banned_or_ip_banned? && CurrentUser.user.__send__("is_#{role}?")
|
||||
|
||||
@@ -31,7 +31,10 @@ class PostsController < ApplicationController
|
||||
include_deleted = @post.is_deleted? || (@post.parent_id.present? && @post.parent.is_deleted?) || CurrentUser.user.show_deleted_children?
|
||||
@parent_post_set = PostSets::PostRelationship.new(@post.parent_id, :include_deleted => include_deleted)
|
||||
@children_post_set = PostSets::PostRelationship.new(@post.id, :include_deleted => include_deleted)
|
||||
respond_with(@post)
|
||||
|
||||
respond_with(@post) do |format|
|
||||
format.html.tooltip { render layout: false }
|
||||
end
|
||||
end
|
||||
|
||||
def show_seq
|
||||
|
||||
@@ -113,6 +113,10 @@ module ApplicationHelper
|
||||
link_to ip, moderator_ip_addrs_path(:search => {:ip_addr => ip})
|
||||
end
|
||||
|
||||
def link_to_search(search)
|
||||
link_to search, posts_path(tags: search)
|
||||
end
|
||||
|
||||
def link_to_wiki(*wiki_titles, **options)
|
||||
links = wiki_titles.map do |title|
|
||||
link_to title.tr("_", " "), wiki_pages_path(title: title)
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
class PostPresenter < Presenter
|
||||
attr_reader :pool, :next_post_in_pool
|
||||
delegate :tag_list_html, :split_tag_list_html, :inline_tag_list_html, :split_inline_tag_list_html, to: :tag_set_presenter
|
||||
|
||||
def self.preview(post, options = {})
|
||||
if post.nil?
|
||||
@@ -162,10 +163,6 @@ class PostPresenter < Presenter
|
||||
categorized_tag_groups.join(" \n")
|
||||
end
|
||||
|
||||
def humanized_categorized_tag_string
|
||||
categorized_tag_groups.flatten.slice(0, 25).join(", ").tr("_", " ")
|
||||
end
|
||||
|
||||
def safe_mode_message(template)
|
||||
html = ["This image is unavailable on safe mode (#{Danbooru.config.app_name}). Go to "]
|
||||
html << template.link_to("Danbooru", "https://danbooru.donmai.us") # XXX don't hardcode.
|
||||
@@ -193,18 +190,6 @@ class PostPresenter < Presenter
|
||||
end
|
||||
end
|
||||
|
||||
def tag_list_html(template, options = {})
|
||||
tag_set_presenter.tag_list_html(template, options.merge(:show_extra_links => CurrentUser.user.is_gold?))
|
||||
end
|
||||
|
||||
def split_tag_list_html(template, options = {})
|
||||
tag_set_presenter.split_tag_list_html(template, options.merge(:show_extra_links => CurrentUser.user.is_gold?))
|
||||
end
|
||||
|
||||
def inline_tag_list_html(template)
|
||||
tag_set_presenter.inline_tag_list(template)
|
||||
end
|
||||
|
||||
def has_nav_links?(template)
|
||||
has_sequential_navigation?(template.params) || @post.pools.undeleted.any? || @post.favorite_groups(active_id=template.params[:favgroup_id]).any?
|
||||
end
|
||||
|
||||
@@ -22,16 +22,16 @@ class TagSetPresenter < Presenter
|
||||
html.html_safe
|
||||
end
|
||||
|
||||
def split_tag_list_html(template, options = {})
|
||||
def split_tag_list_html(template, category_list: TagCategory.split_header_list, headers: true, **options)
|
||||
html = ""
|
||||
|
||||
TagCategory.split_header_list.each do |category|
|
||||
category_list.each do |category|
|
||||
typetags = typed_tags(category)
|
||||
if typetags.any?
|
||||
html << TagCategory.header_mapping[category]
|
||||
html << TagCategory.header_mapping[category] if headers
|
||||
html << %{<ul class="#{category}-tag-list">}
|
||||
typetags.each do |tag|
|
||||
html << build_list_item(tag, template, options)
|
||||
html << build_list_item(tag, template, **options)
|
||||
end
|
||||
html << "</ul>"
|
||||
end
|
||||
@@ -41,17 +41,17 @@ class TagSetPresenter < Presenter
|
||||
end
|
||||
|
||||
# compact (horizontal) list, as seen in the /comments index.
|
||||
def inline_tag_list(template)
|
||||
@tags.map do |tag_name|
|
||||
<<-EOS
|
||||
<span class="category-#{categories[tag_name]}">
|
||||
#{template.link_to(tag_name.tr("_", " "), template.posts_path(tags: tag_name))}
|
||||
</span>
|
||||
EOS
|
||||
end.join.html_safe
|
||||
def inline_tag_list_html(template, classes: "inline-tag-list", **options)
|
||||
html = split_tag_list_html(template, category_list: TagCategory.categorized_list, headers: false, name_only: true, humanize_tags: true, **options)
|
||||
template.tag.span(html, class: classes)
|
||||
end
|
||||
|
||||
private
|
||||
def split_inline_tag_list_html(template, **options)
|
||||
inline_tag_list_html(template, classes: "split-inline-tag-list", **options)
|
||||
end
|
||||
|
||||
private
|
||||
|
||||
def typed_tags(name)
|
||||
@typed_tags ||= {}
|
||||
@typed_tags[name] ||= begin
|
||||
@@ -72,34 +72,33 @@ private
|
||||
end
|
||||
end
|
||||
|
||||
def build_list_item(tag, template, options)
|
||||
def build_list_item(tag, template, name_only: false, humanize_tags: true, show_extra_links: CurrentUser.is_gold?)
|
||||
html = ""
|
||||
html << %{<li class="category-#{categories[tag]}">}
|
||||
current_query = template.params[:tags] || ""
|
||||
|
||||
unless options[:name_only]
|
||||
unless name_only
|
||||
if categories[tag] == Tag.categories.artist
|
||||
html << %{<a class="wiki-link" href="/artists/show_or_new?name=#{u(tag)}">?</a> }
|
||||
else
|
||||
html << %{<a class="wiki-link" href="/wiki_pages/show_or_new?title=#{u(tag)}">?</a> }
|
||||
end
|
||||
|
||||
if CurrentUser.user.is_gold? && current_query.present?
|
||||
if show_extra_links && current_query.present?
|
||||
html << %{<a rel="nofollow" href="/posts?tags=#{u(current_query)}+#{u(tag)}" class="search-inc-tag">+</a> }
|
||||
html << %{<a rel="nofollow" href="/posts?tags=#{u(current_query)}+-#{u(tag)}" class="search-exl-tag">–</a> }
|
||||
end
|
||||
end
|
||||
|
||||
humanized_tag = tag.tr("_", " ")
|
||||
path = options[:path_prefix] || "/posts"
|
||||
humanized_tag = humanize_tags ? tag.tr("_", " ") : tag
|
||||
if categories[tag] == Tag.categories.artist
|
||||
itemprop = 'itemprop="author"'
|
||||
else
|
||||
itemprop = nil
|
||||
end
|
||||
html << %{<a class="search-tag" #{itemprop} href="#{path}?tags=#{u(tag)}">#{h(humanized_tag)}</a> }
|
||||
html << %{<a class="search-tag" #{itemprop} href="/posts?tags=#{u(tag)}">#{h(humanized_tag)}</a> }
|
||||
|
||||
unless options[:name_only]
|
||||
unless name_only
|
||||
if counts[tag].to_i >= 10_000
|
||||
post_count = "#{counts[tag].to_i / 1_000}k"
|
||||
elsif counts[tag].to_i >= 1_000
|
||||
|
||||
7
app/views/posts/show.html+tooltip.erb
Normal file
7
app/views/posts/show.html+tooltip.erb
Normal file
@@ -0,0 +1,7 @@
|
||||
<%= @post.presenter.split_inline_tag_list_html(self) %>
|
||||
|
||||
<div class="post-tooltip-metatags">
|
||||
<%= link_to_search "user:#{@post.uploader_name}" if CurrentUser.is_moderator? %>
|
||||
<%= link_to_search "rating:#{@post.pretty_rating.downcase}" %>
|
||||
<%= link_to_search "score:#{@post.score}" %>
|
||||
</div>
|
||||
@@ -49,7 +49,7 @@
|
||||
|
||||
<span class="info">
|
||||
<strong>Tags</strong>
|
||||
<%= TagSetPresenter.new(upload.tag_string.split).inline_tag_list(self) %>
|
||||
<%= TagSetPresenter.new(upload.tag_string.split).inline_tag_list_html(self) %>
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
|
||||
2122
vendor/assets/javascripts/jquery.qtip.js
vendored
Normal file
2122
vendor/assets/javascripts/jquery.qtip.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
557
vendor/assets/stylesheets/jquery.qtip.css
vendored
Normal file
557
vendor/assets/stylesheets/jquery.qtip.css
vendored
Normal file
@@ -0,0 +1,557 @@
|
||||
/*
|
||||
* qTip2 - Pretty powerful tooltips - v3.0.3
|
||||
* http://qtip2.com
|
||||
*
|
||||
* Copyright (c) 2017
|
||||
* Released under the MIT licenses
|
||||
* http://jquery.org/license
|
||||
*
|
||||
* Date: Tue Aug 29 2017 06:03 EDT-0400
|
||||
* Plugins: viewport
|
||||
* Styles: core basic css3
|
||||
*/
|
||||
.qtip{
|
||||
position: absolute;
|
||||
left: -28000px;
|
||||
top: -28000px;
|
||||
display: none;
|
||||
|
||||
max-width: 280px;
|
||||
min-width: 50px;
|
||||
|
||||
font-size: 10.5px;
|
||||
line-height: 12px;
|
||||
|
||||
direction: ltr;
|
||||
|
||||
box-shadow: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.qtip-content{
|
||||
position: relative;
|
||||
padding: 5px 9px;
|
||||
overflow: hidden;
|
||||
|
||||
text-align: left;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.qtip-titlebar{
|
||||
position: relative;
|
||||
padding: 5px 35px 5px 10px;
|
||||
overflow: hidden;
|
||||
|
||||
border-width: 0 0 1px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.qtip-titlebar + .qtip-content{ border-top-width: 0 !important; }
|
||||
|
||||
/* Default close button class */
|
||||
.qtip-close{
|
||||
position: absolute;
|
||||
right: -9px; top: -9px;
|
||||
z-index: 11; /* Overlap .qtip-tip */
|
||||
|
||||
cursor: pointer;
|
||||
outline: medium none;
|
||||
|
||||
border: 1px solid transparent;
|
||||
}
|
||||
|
||||
.qtip-titlebar .qtip-close{
|
||||
right: 4px; top: 50%;
|
||||
margin-top: -9px;
|
||||
}
|
||||
|
||||
* html .qtip-titlebar .qtip-close{ top: 16px; } /* IE fix */
|
||||
|
||||
.qtip-titlebar .ui-icon,
|
||||
.qtip-icon .ui-icon{
|
||||
display: block;
|
||||
text-indent: -1000em;
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
.qtip-icon, .qtip-icon .ui-icon{
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.qtip-icon .ui-icon{
|
||||
width: 18px;
|
||||
height: 14px;
|
||||
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
text-indent: 0;
|
||||
font: normal bold 10px/13px Tahoma,sans-serif;
|
||||
|
||||
color: inherit;
|
||||
background: transparent none no-repeat -100em -100em;
|
||||
}
|
||||
|
||||
/* Applied to 'focused' tooltips e.g. most recently displayed/interacted with */
|
||||
.qtip-focus{}
|
||||
|
||||
/* Applied on hover of tooltips i.e. added/removed on mouseenter/mouseleave respectively */
|
||||
.qtip-hover{}
|
||||
|
||||
/* Default tooltip style */
|
||||
.qtip-default{
|
||||
border: 1px solid #F1D031;
|
||||
|
||||
background-color: #FFFFA3;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
.qtip-default .qtip-titlebar{
|
||||
background-color: #FFEF93;
|
||||
}
|
||||
|
||||
.qtip-default .qtip-icon{
|
||||
border-color: #CCC;
|
||||
background: #F1F1F1;
|
||||
color: #777;
|
||||
}
|
||||
|
||||
.qtip-default .qtip-titlebar .qtip-close{
|
||||
border-color: #AAA;
|
||||
color: #111;
|
||||
}
|
||||
|
||||
|
||||
/*! Light tooltip style */
|
||||
.qtip-light{
|
||||
background-color: white;
|
||||
border-color: #E2E2E2;
|
||||
color: #454545;
|
||||
}
|
||||
|
||||
.qtip-light .qtip-titlebar{
|
||||
background-color: #f1f1f1;
|
||||
}
|
||||
|
||||
|
||||
/*! Dark tooltip style */
|
||||
.qtip-dark{
|
||||
background-color: #505050;
|
||||
border-color: #303030;
|
||||
color: #f3f3f3;
|
||||
}
|
||||
|
||||
.qtip-dark .qtip-titlebar{
|
||||
background-color: #404040;
|
||||
}
|
||||
|
||||
.qtip-dark .qtip-icon{
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
.qtip-dark .qtip-titlebar .ui-state-hover{
|
||||
border-color: #303030;
|
||||
}
|
||||
|
||||
|
||||
/*! Cream tooltip style */
|
||||
.qtip-cream{
|
||||
background-color: #FBF7AA;
|
||||
border-color: #F9E98E;
|
||||
color: #A27D35;
|
||||
}
|
||||
|
||||
.qtip-cream .qtip-titlebar{
|
||||
background-color: #F0DE7D;
|
||||
}
|
||||
|
||||
.qtip-cream .qtip-close .qtip-icon{
|
||||
background-position: -82px 0;
|
||||
}
|
||||
|
||||
|
||||
/*! Red tooltip style */
|
||||
.qtip-red{
|
||||
background-color: #F78B83;
|
||||
border-color: #D95252;
|
||||
color: #912323;
|
||||
}
|
||||
|
||||
.qtip-red .qtip-titlebar{
|
||||
background-color: #F06D65;
|
||||
}
|
||||
|
||||
.qtip-red .qtip-close .qtip-icon{
|
||||
background-position: -102px 0;
|
||||
}
|
||||
|
||||
.qtip-red .qtip-icon{
|
||||
border-color: #D95252;
|
||||
}
|
||||
|
||||
.qtip-red .qtip-titlebar .ui-state-hover{
|
||||
border-color: #D95252;
|
||||
}
|
||||
|
||||
|
||||
/*! Green tooltip style */
|
||||
.qtip-green{
|
||||
background-color: #CAED9E;
|
||||
border-color: #90D93F;
|
||||
color: #3F6219;
|
||||
}
|
||||
|
||||
.qtip-green .qtip-titlebar{
|
||||
background-color: #B0DE78;
|
||||
}
|
||||
|
||||
.qtip-green .qtip-close .qtip-icon{
|
||||
background-position: -42px 0;
|
||||
}
|
||||
|
||||
|
||||
/*! Blue tooltip style */
|
||||
.qtip-blue{
|
||||
background-color: #E5F6FE;
|
||||
border-color: #ADD9ED;
|
||||
color: #5E99BD;
|
||||
}
|
||||
|
||||
.qtip-blue .qtip-titlebar{
|
||||
background-color: #D0E9F5;
|
||||
}
|
||||
|
||||
.qtip-blue .qtip-close .qtip-icon{
|
||||
background-position: -2px 0;
|
||||
}
|
||||
|
||||
|
||||
.qtip-shadow{
|
||||
-webkit-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
|
||||
-moz-box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
|
||||
box-shadow: 1px 1px 3px 1px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
/* Add rounded corners to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */
|
||||
.qtip-rounded,
|
||||
.qtip-tipsy,
|
||||
.qtip-bootstrap{
|
||||
-moz-border-radius: 5px;
|
||||
-webkit-border-radius: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
|
||||
.qtip-rounded .qtip-titlebar{
|
||||
-moz-border-radius: 4px 4px 0 0;
|
||||
-webkit-border-radius: 4px 4px 0 0;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
|
||||
/* Youtube tooltip style */
|
||||
.qtip-youtube{
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
|
||||
-webkit-box-shadow: 0 0 3px #333;
|
||||
-moz-box-shadow: 0 0 3px #333;
|
||||
box-shadow: 0 0 3px #333;
|
||||
|
||||
color: white;
|
||||
border: 0 solid transparent;
|
||||
|
||||
background: #4A4A4A;
|
||||
background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,#4A4A4A),color-stop(100%,black));
|
||||
background-image: -webkit-linear-gradient(top,#4A4A4A 0,black 100%);
|
||||
background-image: -moz-linear-gradient(top,#4A4A4A 0,black 100%);
|
||||
background-image: -ms-linear-gradient(top,#4A4A4A 0,black 100%);
|
||||
background-image: -o-linear-gradient(top,#4A4A4A 0,black 100%);
|
||||
}
|
||||
|
||||
.qtip-youtube .qtip-titlebar{
|
||||
background-color: #4A4A4A;
|
||||
background-color: rgba(0,0,0,0);
|
||||
}
|
||||
|
||||
.qtip-youtube .qtip-content{
|
||||
padding: .75em;
|
||||
font: 12px arial,sans-serif;
|
||||
|
||||
filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr=#4a4a4a,EndColorStr=#000000);";
|
||||
}
|
||||
|
||||
.qtip-youtube .qtip-icon{
|
||||
border-color: #222;
|
||||
}
|
||||
|
||||
.qtip-youtube .qtip-titlebar .ui-state-hover{
|
||||
border-color: #303030;
|
||||
}
|
||||
|
||||
|
||||
/* jQuery TOOLS Tooltip style */
|
||||
.qtip-jtools{
|
||||
background: #232323;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#717171), to(#232323));
|
||||
background-image: -moz-linear-gradient(top, #717171, #232323);
|
||||
background-image: -webkit-linear-gradient(top, #717171, #232323);
|
||||
background-image: -ms-linear-gradient(top, #717171, #232323);
|
||||
background-image: -o-linear-gradient(top, #717171, #232323);
|
||||
|
||||
border: 2px solid #ddd;
|
||||
border: 2px solid rgba(241,241,241,1);
|
||||
|
||||
-moz-border-radius: 2px;
|
||||
-webkit-border-radius: 2px;
|
||||
border-radius: 2px;
|
||||
|
||||
-webkit-box-shadow: 0 0 12px #333;
|
||||
-moz-box-shadow: 0 0 12px #333;
|
||||
box-shadow: 0 0 12px #333;
|
||||
}
|
||||
|
||||
/* IE Specific */
|
||||
.qtip-jtools .qtip-titlebar{
|
||||
background-color: transparent;
|
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A);
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#717171,endColorstr=#4A4A4A)";
|
||||
}
|
||||
.qtip-jtools .qtip-content{
|
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323);
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#4A4A4A,endColorstr=#232323)";
|
||||
}
|
||||
|
||||
.qtip-jtools .qtip-titlebar,
|
||||
.qtip-jtools .qtip-content{
|
||||
background: transparent;
|
||||
color: white;
|
||||
border: 0 dashed transparent;
|
||||
}
|
||||
|
||||
.qtip-jtools .qtip-icon{
|
||||
border-color: #555;
|
||||
}
|
||||
|
||||
.qtip-jtools .qtip-titlebar .ui-state-hover{
|
||||
border-color: #333;
|
||||
}
|
||||
|
||||
|
||||
/* Cluetip style */
|
||||
.qtip-cluetip{
|
||||
-webkit-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
|
||||
-moz-box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.4);
|
||||
|
||||
background-color: #D9D9C2;
|
||||
color: #111;
|
||||
border: 0 dashed transparent;
|
||||
}
|
||||
|
||||
.qtip-cluetip .qtip-titlebar{
|
||||
background-color: #87876A;
|
||||
color: white;
|
||||
border: 0 dashed transparent;
|
||||
}
|
||||
|
||||
.qtip-cluetip .qtip-icon{
|
||||
border-color: #808064;
|
||||
}
|
||||
|
||||
.qtip-cluetip .qtip-titlebar .ui-state-hover{
|
||||
border-color: #696952;
|
||||
color: #696952;
|
||||
}
|
||||
|
||||
|
||||
/* Tipsy style */
|
||||
.qtip-tipsy{
|
||||
background: black;
|
||||
background: rgba(0, 0, 0, .87);
|
||||
|
||||
color: white;
|
||||
border: 0 solid transparent;
|
||||
|
||||
font-size: 11px;
|
||||
font-family: 'Lucida Grande', sans-serif;
|
||||
font-weight: bold;
|
||||
line-height: 16px;
|
||||
text-shadow: 0 1px black;
|
||||
}
|
||||
|
||||
.qtip-tipsy .qtip-titlebar{
|
||||
padding: 6px 35px 0 10px;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.qtip-tipsy .qtip-content{
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
.qtip-tipsy .qtip-icon{
|
||||
border-color: #222;
|
||||
text-shadow: none;
|
||||
}
|
||||
|
||||
.qtip-tipsy .qtip-titlebar .ui-state-hover{
|
||||
border-color: #303030;
|
||||
}
|
||||
|
||||
|
||||
/* Tipped style */
|
||||
.qtip-tipped{
|
||||
border: 3px solid #959FA9;
|
||||
|
||||
-moz-border-radius: 3px;
|
||||
-webkit-border-radius: 3px;
|
||||
border-radius: 3px;
|
||||
|
||||
background-color: #F9F9F9;
|
||||
color: #454545;
|
||||
|
||||
font-weight: normal;
|
||||
font-family: serif;
|
||||
}
|
||||
|
||||
.qtip-tipped .qtip-titlebar{
|
||||
border-bottom-width: 0;
|
||||
|
||||
color: white;
|
||||
background: #3A79B8;
|
||||
background-image: -webkit-gradient(linear, left top, left bottom, from(#3A79B8), to(#2E629D));
|
||||
background-image: -webkit-linear-gradient(top, #3A79B8, #2E629D);
|
||||
background-image: -moz-linear-gradient(top, #3A79B8, #2E629D);
|
||||
background-image: -ms-linear-gradient(top, #3A79B8, #2E629D);
|
||||
background-image: -o-linear-gradient(top, #3A79B8, #2E629D);
|
||||
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D);
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#3A79B8,endColorstr=#2E629D)";
|
||||
}
|
||||
|
||||
.qtip-tipped .qtip-icon{
|
||||
border: 2px solid #285589;
|
||||
background: #285589;
|
||||
}
|
||||
|
||||
.qtip-tipped .qtip-icon .ui-icon{
|
||||
background-color: #FBFBFB;
|
||||
color: #555;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Twitter Bootstrap style.
|
||||
*
|
||||
* Tested with IE 8, IE 9, Chrome 18, Firefox 9, Opera 11.
|
||||
* Does not work with IE 7.
|
||||
*/
|
||||
.qtip-bootstrap{
|
||||
/** Taken from Bootstrap body */
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
color: #333333;
|
||||
|
||||
/** Taken from Bootstrap .popover */
|
||||
padding: 1px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid rgba(0, 0, 0, 0.2);
|
||||
-webkit-border-radius: 6px;
|
||||
-moz-border-radius: 6px;
|
||||
border-radius: 6px;
|
||||
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
|
||||
-webkit-background-clip: padding-box;
|
||||
-moz-background-clip: padding;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
|
||||
.qtip-bootstrap .qtip-titlebar{
|
||||
/** Taken from Bootstrap .popover-title */
|
||||
padding: 8px 14px;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
line-height: 18px;
|
||||
background-color: #f7f7f7;
|
||||
border-bottom: 1px solid #ebebeb;
|
||||
-webkit-border-radius: 5px 5px 0 0;
|
||||
-moz-border-radius: 5px 5px 0 0;
|
||||
border-radius: 5px 5px 0 0;
|
||||
}
|
||||
|
||||
.qtip-bootstrap .qtip-titlebar .qtip-close{
|
||||
/**
|
||||
* Overrides qTip2:
|
||||
* .qtip-titlebar .qtip-close{
|
||||
* [...]
|
||||
* right: 4px;
|
||||
* top: 50%;
|
||||
* [...]
|
||||
* border-style: solid;
|
||||
* }
|
||||
*/
|
||||
right: 11px;
|
||||
top: 45%;
|
||||
border-style: none;
|
||||
}
|
||||
|
||||
.qtip-bootstrap .qtip-content{
|
||||
/** Taken from Bootstrap .popover-content */
|
||||
padding: 9px 14px;
|
||||
}
|
||||
|
||||
.qtip-bootstrap .qtip-icon{
|
||||
/**
|
||||
* Overrides qTip2:
|
||||
* .qtip-default .qtip-icon {
|
||||
* border-color: #CCC;
|
||||
* background: #F1F1F1;
|
||||
* color: #777;
|
||||
* }
|
||||
*/
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
.qtip-bootstrap .qtip-icon .ui-icon{
|
||||
/**
|
||||
* Overrides qTip2:
|
||||
* .qtip-icon .ui-icon{
|
||||
* width: 18px;
|
||||
* height: 14px;
|
||||
* }
|
||||
*/
|
||||
width: auto;
|
||||
height: auto;
|
||||
|
||||
/* Taken from Bootstrap .close */
|
||||
float: right;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
line-height: 18px;
|
||||
color: #000000;
|
||||
text-shadow: 0 1px 0 #ffffff;
|
||||
opacity: 0.2;
|
||||
filter: alpha(opacity=20);
|
||||
}
|
||||
|
||||
.qtip-bootstrap .qtip-icon .ui-icon:hover{
|
||||
/* Taken from Bootstrap .close:hover */
|
||||
color: #000000;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
opacity: 0.4;
|
||||
filter: alpha(opacity=40);
|
||||
}
|
||||
|
||||
|
||||
/* IE9 fix - removes all filters */
|
||||
.qtip:not(.ie9haxors) div.qtip-content,
|
||||
.qtip:not(.ie9haxors) div.qtip-titlebar{
|
||||
filter: none;
|
||||
-ms-filter: none;
|
||||
}
|
||||
Reference in New Issue
Block a user