docs/choosealicense.com
docs/choosealicense.com
1
0
Fork 0
mirror of https://github.com/github/choosealicense.com synced 2024-12-22 04:40:09 +01:00
Code Issues Releases Wiki Activity

adding tooltips for definitions

Browse Source
This commit is contained in:
Jason Long 2012-12-04 17:12:12 -05:00 committed by Haacked
parent 7a96385e21
commit fda40bf7e4
7 changed files with 717 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
css/application.css
View File

@ -258,6 +258,9 @@ table.license td ul li {
margin-right: 15px;
padding-left: 16px;
}
table.license td ul li:hover {
color: #443a33;
}
table.license td ul.required li {
background-image: url(/images/blue-dot@2x.png);
}
@ -350,6 +353,46 @@ div.sidebar div.boilerplate {
margin-left: 20px;
}
/* Qtip styles */
.qtip-required {
background-color: #d0ebf6 ! important;
border-color: #149ad4 ! important;
color: #0d648a ! important;
font-size: 12px ! important;
line-height: 1.3 ! important;
}
.qtip-required .qtip-titlebar{
background-color: #149ad4 ! important;
color: #fff ! important;
}
.qtip-permitted {
background-color: #d8f4d7 ! important;
border-color: #3dc637 ! important;
color: #298625 ! important;
font-size: 12px ! important;
line-height: 1.3 ! important;
}
.qtip-permitted .qtip-titlebar{
background-color: #3dc637 ! important;
color: #fff ! important;
}
.qtip-forbidden {
background-color: #f4d9d8 ! important;
border-color: #c6403d ! important;
color: #812a28 ! important;
font-size: 12px ! important;
line-height: 1.3 ! important;
}
.qtip-forbidden .qtip-titlebar{
background-color: #c6403d ! important;
color: #fff ! important;
}
/* For modern browsers */
.cf:before,
.cf:after {

599
css/jquery.qtip.css Normal file
View File

@ -0,0 +1,599 @@
/*! qTip2 - Pretty powerful tooltips - v2.0.0pre - 2012-11-29
* http://craigsworks.com/projects/qtip2/
* Copyright (c) 2012 Craig Michael Thompson; Licensed MIT, GPL */
/* Core qTip styles */
.qtip, .qtip{
position: absolute;
left: -28000px;
top: -28000px;
display: none;
max-width: 280px;
min-width: 50px;
font-size: 10.5px;
line-height: 12px;
direction: ltr;
}
.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;
cursor: pointer;
outline: medium none;
border-width: 1px;
border-style: solid;
border-color: 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;
vertical-align: middle;
}
.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;
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-width: 1px;
border-style: solid;
border-color: #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;
}
/* Add shadows to your tooltips in: FF3+, Chrome 2+, Opera 10.6+, IE9+, Safari 2+ */
.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;
}
/* 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-width: 0;
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 10;
background-color: transparent;
}
.qtip-tipsy .qtip-content{
padding: 6px 10;
}
.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;
}
/* Tips plugin */
.qtip .qtip-tip{
margin: 0 auto;
overflow: hidden;
z-index: 10;
}
.qtip .qtip-tip,
.qtip .qtip-tip .qtip-vml{
position: absolute;
color: #123456;
background: transparent;
border: 0 dashed transparent;
}
.qtip .qtip-tip canvas{ top: 0; left: 0; }
.qtip .qtip-tip .qtip-vml{
behavior: url(#default#VML);
display: inline-block;
visibility: visible;
}
/* Modal plugin */
#qtip-overlay{
position: fixed;
left: -10000em;
top: -10000em;
}
/* Applied to modals with show.modal.blur set to true */
#qtip-overlay.blurs{ cursor: pointer; }
/* Change opacity of overlay here */
#qtip-overlay div{
position: absolute;
left: 0; top: 0;
width: 100%; height: 100%;
background-color: black;
opacity: 0.7;
filter:alpha(opacity=70);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=70)";
}
/* IE6 Modal plugin fix */
.qtipmodal-ie6fix{
position: absolute !important;
}

45
javascripts/app.js Normal file
View File

@ -0,0 +1,45 @@
var qtip_position = {
my: 'top center',
at: 'bottom center'
};
$(document).ready(function() {
$('table.license ul.required li').qtip({
content: {
text: false,
title: {
text: 'Required'
}
},
position: qtip_position,
style: {
classes: 'qtip-shadow qtip-required'
}
});
$('table.license ul.permitted li').qtip({
content: {
text: false,
title: {
text: 'Permitted'
}
},
position: qtip_position,
style: {
classes: 'qtip-shadow qtip-permitted'
}
});
$('table.license ul.forbidden li').qtip({
content: {
text: false,
title: {
text: 'Forbidden'
}
},
position: qtip_position,
style: {
classes: 'qtip-shadow qtip-forbidden'
}
});
});

2
javascripts/jquery.qtip.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

24
licenses/foundation/index.html
View File

@ -7,6 +7,10 @@
<link href='../../favicon.ico' rel='shortcut icon' type='image/x-icon'>
<link href='http://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
<link type="text/css" href="../../css/application.css" media="screen" rel="stylesheet">
<link type="text/css" href="../../css/jquery.qtip.css" media="screen" rel="stylesheet">
<script type="text/javascript" src="../../javascripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../javascripts/app.js"></script>
<script type="text/javascript" src="../../javascripts/jquery.qtip.min.js"></script>
<script type="text/javascript" src="../../javascripts/modernizr.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script src='../../javascripts/selectivizr-min.js' type='text/javascript'></script>
@ -34,9 +38,9 @@
<td class='label'>Required</td>
<td>
<ul class='required'>
<li>Copyright inclusion</li>
<li>License inclusion</li>
<li>Include header</li>
<li title="You must retain the original copyright.">Copyright inclusion</li>
<li title="Must include full text of license in modified software.">License inclusion</li>
<li title="Must state significant changes made to software.">Include header</li>
</ul>
</td>
</tr>
@ -44,11 +48,11 @@
<td class='label'>Permitted</td>
<td>
<ul class='permitted'>
<li>Commercial use</li>
<li>Modification</li>
<li>Distribution</li>
<li>Sublicensing</li>
<li>Warranty</li>
<li title="This software can be used for commercial purposes in derivative works.">Commercial use</li>
<li title="This software can be modified.">Modification</li>
<li title="The software may be distributed.">Distribution</li>
<li title="This software allows you to give partial production/distribution rights to third parties not included in the license.">Sublicensing</li>
<li title="You can place a warranty on the software.">Warranty</li>
</ul>
</td>
</tr>
@ -56,8 +60,8 @@
<td class='label'>Forbidden</td>
<td>
<ul class='forbidden'>
<li>Liability</li>
<li>Use Trademark</li>
<li title="Software is released without warranty and the software/license owner cannot be charged for damages.">Liability</li>
<li title="You may NOT use contributors' names, logos or trademarks.">Use Trademark</li>
</ul>
</td>
</tr>

4
licenses/permissive/index.html
View File

@ -7,6 +7,10 @@
<link href='../../favicon.ico' rel='shortcut icon' type='image/x-icon'>
<link href='http://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
<link type="text/css" href="../../css/application.css" media="screen" rel="stylesheet">
<link type="text/css" href="../../css/jquery.qtip.css" media="screen" rel="stylesheet">
<script type="text/javascript" src="../../javascripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../javascripts/app.js"></script>
<script type="text/javascript" src="../../javascripts/jquery.qtip.min.js"></script>
<script type="text/javascript" src="../../javascripts/modernizr.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script src='../../javascripts/selectivizr-min.js' type='text/javascript'></script>

16
licenses/reciprocal/index.html
View File

@ -7,6 +7,10 @@
<link href='../../favicon.ico' rel='shortcut icon' type='image/x-icon'>
<link href='http://fonts.googleapis.com/css?family=Chivo:900' rel='stylesheet' type='text/css'>
<link type="text/css" href="../../css/application.css" media="screen" rel="stylesheet">
<link type="text/css" href="../../css/jquery.qtip.css" media="screen" rel="stylesheet">
<script type="text/javascript" src="../../javascripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../javascripts/app.js"></script>
<script type="text/javascript" src="../../javascripts/jquery.qtip.min.js"></script>
<script type="text/javascript" src="../../javascripts/modernizr.js"></script>
<!--[if (gte IE 6)&(lte IE 8)]>
<script src='../../javascripts/selectivizr-min.js' type='text/javascript'></script>
@ -26,7 +30,7 @@
<a href="gpl-v2">GPL v2</a>
</th>
<th class='summary'>
GPL is the most widely used free software license and is fully reciprocal. Derived
GPL is the most widely used free software license and is fully reciprocal. Derived
works must be distributed under the same license.
<a href="gpl-v2">View full license »</a>
</th>
@ -68,7 +72,7 @@
<a href="gpl-v3">GPL v3</a>
</th>
<th class='summary'>
Version 3 of the GPL adds a clause that requires source code when distributed on
Version 3 of the GPL adds a clause that requires source code when distributed on
hardware devices.
<a href="gpl-v3">View full license »</a>
</th>
@ -110,7 +114,7 @@
<a href="lgpl-v2.1">LGPL v2.1</a>
</th>
<th class='summary'>
Primarily used for software libraries, LGPL requires that derived works be licensed under the same license, but
Primarily used for software libraries, LGPL requires that derived works be licensed under the same license, but
works that only link to it do not fall under this restriction.
<a href="lgpl-v2.1">View full license »</a>
</th>
@ -143,15 +147,15 @@
</ul>
</td>
</tr>
</table>
</table>
<table class='license'>
<tr>
<th class='name'>
<a href="lgpl-v3">LGPL v3</a>
</th>
<th class='summary'>
Version 3 of the LGPL is an additional set of permissions to the <a href="gpl-v3">GPL v3 license</a>
that requires that derived works be licensed under the same license, but works that only link to
Version 3 of the LGPL is an additional set of permissions to the <a href="gpl-v3">GPL v3 license</a>
that requires that derived works be licensed under the same license, but works that only link to
it do not fall under this restriction.
<a href="lgpl-v3">View full license »</a>
</th>