1
0
mirror of https://github.com/github/choosealicense.com synced 2024-12-22 21:00:10 +01:00
choosealicense.com/assets/css/application.scss

547 lines
9.4 KiB
SCSS
Raw Normal View History

---
---
@import "../vendor/normalize-css/normalize.css";
@import "../vendor/qtip2/jquery.qtip.min.css";
2012-09-12 15:20:53 -04:00
body {
2015-09-18 14:45:55 -04:00
background: #fafafa;
2013-07-16 14:24:45 -04:00
color: #5c5855;
font: 0.875rem/1.4 "Helvetica Neue", Helvetica, Arial, sans-serif;
2012-09-12 15:20:53 -04:00
}
2021-06-12 17:01:43 +02:00
@media (prefers-color-scheme: dark) {
body {
background: #212121;
color: #d0c8c1;
}
h1, h2, h3, h5 {
color: #dadada !important;
2021-06-12 17:01:43 +02:00
}
.site-footer {
color: #ccc !important;
2021-06-12 17:01:43 +02:00
}
.site-footer a {
color: #ddd !important;
2021-06-12 17:01:43 +02:00
}
.home h2 {
color: #c7cdce !important;
}
.license-body pre {
background-color: #131313 !important;
border: 1px solid #3e3e3e !important;
}
.note {
color: #9fa5a6 !important;
}
strong {
color: #bdbdbd !important;
}
button, input, optgroup, select, textarea {
color: black !important;
2021-06-12 17:01:43 +02:00
}
}
2012-09-12 15:20:53 -04:00
a {
color: #149ad4;
font-weight: bold;
text-decoration: none;
}
2012-09-12 15:20:53 -04:00
a:hover {
text-decoration: underline;
}
h1, h2, h3, h5 {
2015-09-18 14:45:55 -04:00
color: #444;
2013-10-30 20:23:28 +02:00
font-family: Chivo, "Helvetica Neue", Helvetica, Arial, serif;
2012-09-12 15:20:53 -04:00
font-weight: 900;
line-height: 1.1;
}
h1 {
font-size: 2.1875rem;
2012-09-12 15:20:53 -04:00
margin-bottom: 25px;
}
.license h1 {
max-width: 700px;
}
2012-11-29 10:40:26 -05:00
h2 {
opacity: 0.8;
font-size: 1.5rem;
margin-top: 24px;
2012-11-29 10:40:26 -05:00
margin-bottom: 10px;
}
h3 {
font-size: 0.9375rem;
margin-top: 20px;
margin-bottom: 10px;
}
2012-09-12 15:20:53 -04:00
h5 {
font-size: 0.875rem;
2012-09-12 15:20:53 -04:00
margin-bottom: 15px;
}
p {
margin-bottom: 1em;
}
ol, ul { padding: 0; margin: 0; list-style-type: none; }
th, td { text-align: left; font-weight: normal; }
2012-09-12 15:20:53 -04:00
strong {
2015-09-18 14:45:55 -04:00
color: #444;
2012-09-12 15:20:53 -04:00
}
:target {
background-color: yellow;
}
.container {
2012-09-12 15:20:53 -04:00
margin: 40px auto;
width: 940px;
2012-09-12 15:20:53 -04:00
}
.home {
2012-09-12 15:20:53 -04:00
text-align: center;
}
.home h1 {
font-size: 3.75rem;
2012-09-12 15:20:53 -04:00
}
.home h2 {
color: #687072;
font-size: 1.6875rem;
2012-09-12 15:20:53 -04:00
line-height: 70px;
margin-bottom: 45px;
vertical-align: middle;
opacity: 1;
2012-09-12 15:20:53 -04:00
}
.home h2 span {
color: rgba(127,127,127,10%);
font-size: 4.375rem;
2012-09-12 15:20:53 -04:00
padding: 0 5px;
position: relative;
top: 10px;
}
.triptych {
width: 900px;
margin: 0 auto 20px;
}
.triptych li {
width: 280px;
2012-09-12 15:20:53 -04:00
float: left;
margin-left: 27px;
}
.triptych li:first-child {
2012-09-12 15:20:53 -04:00
margin-left: 0;
2012-11-26 09:34:26 -08:00
}
.triptych li > a {
2012-11-26 09:34:26 -08:00
text-decoration: none;
}
.triptych h3 {
font-size: 1.375rem;
margin: 0 auto 20px auto;
width: 220px;
2012-09-12 15:20:53 -04:00
}
2012-11-26 09:34:26 -08:00
2018-06-18 00:04:36 -07:00
.situations .existing {
margin-top: 16px;
}
.situations .whatever {
margin-top: 16px;
}
.situations .copyleft {
margin-top: 3px;
}
.situations .button {
margin-top: 20px;
}
.triptych-sprite {
background-image: url(../img/home-sprite.png);
background-repeat: no-repeat;
display: inline-block;
}
.three-arrows { background-position: 0 0; width: 72px; height: 56px; }
2018-06-18 00:04:36 -07:00
.community { background-position: 0 -57px; width: 72px; height: 56px; }
.circular { background-position: 0 -115px; width: 72px; height: 68px; }
.license-overview {
2013-11-06 10:10:48 -05:00
clear: both;
2016-06-06 10:25:18 -07:00
margin-bottom: 40px;
2013-11-06 10:10:48 -05:00
}
.license-overview-heading {
2013-11-06 10:10:48 -05:00
float: left;
width: 35%;
}
.license-details {
2013-12-10 09:49:05 +02:00
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
float: left;
2013-11-06 10:10:48 -05:00
width: 55%;
padding-left: 20px;
2013-11-06 10:10:48 -05:00
}
.license-page-details {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.license-overview-name {
font-size: 1.75rem;
margin-top: 5px;
}
.license-overview-description {
2015-09-18 14:45:55 -04:00
color: #555;
}
.license-rules {
2015-09-18 14:45:55 -04:00
border-bottom: solid 1px #ddd;
font-size: 0.8125rem;
2012-09-12 15:20:53 -04:00
line-height: 1.3;
2013-11-06 10:10:48 -05:00
margin-bottom: 12px;
2013-06-11 14:13:00 -04:00
width: 100%;
2012-09-12 15:20:53 -04:00
}
2013-11-06 10:10:48 -05:00
.license-rules th,
.license-rules td {
width: 33%;
}
.license-rules th {
font-size: 0.9375rem;
2013-11-06 10:10:48 -05:00
padding: 5px 10px 5px 0;
2013-06-11 14:13:00 -04:00
vertical-align: bottom;
}
2013-06-11 14:13:00 -04:00
.license-rules th.summary {
line-height: 1.4;
2012-09-12 15:20:53 -04:00
}
.license-rules .name {
2013-12-10 09:49:05 +02:00
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
2015-09-18 14:45:55 -04:00
border-right: solid 1px #ddd;
2013-06-11 14:13:00 -04:00
padding-left: 0;
width: 280px;
2012-09-12 15:20:53 -04:00
}
.license-rules .name a {
font-size: 1.75rem;
2012-09-12 15:20:53 -04:00
}
.license-rules .name small a {
font-size: 1rem;
}
.license-rules td {
2013-11-06 10:10:48 -05:00
padding: 4px 0 12px 0;
vertical-align: top;
2012-09-12 15:20:53 -04:00
}
.license-rules .label {
2012-09-12 15:20:53 -04:00
font-weight: bold;
}
.license-rules li {
2012-09-12 15:20:53 -04:00
margin-right: 15px;
2013-11-06 10:10:48 -05:00
margin-bottom: 5px;
2012-09-12 15:20:53 -04:00
}
.license-rules li:hover {
2015-09-18 14:45:55 -04:00
color: #444;
2012-12-04 17:12:12 -05:00
}
.license-sprite {
background-image: url(../img/license-sprite.png);
background-repeat: no-repeat;
display: inline-block;
2012-09-12 15:20:53 -04:00
}
.sidebar .source span { background-position: 0 0; width: 16px; height: 12px; }
.license-limitations span { background-position: -16px 0; width: 12px; height: 12px; }
.license-permissions span { background-position: -28px 0; width: 12px; height: 12px; }
.license-conditions span { background-position: -40px 0; width: 12px; height: 12px; }
.lite span { opacity: 0.5; }
2012-09-12 15:20:53 -04:00
.license-rules-sidebar li {
float: none;
padding-bottom: 3px;
}
.license-body {
font-size: 0.9375rem;
2012-09-12 15:20:53 -04:00
float: left;
width: 700px;
2012-09-12 15:20:53 -04:00
}
.license-body pre {
font-family: Consolas, Monaco, Courier, monospace;
font-size: 0.875rem;
background-color: #fff;
2015-09-18 14:45:55 -04:00
border: 1px solid #eee;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
padding: 20px;
}
.license-nickname {
margin-top: 0;
}
.sidebar {
2012-09-12 15:20:53 -04:00
float: right;
width: 220px;
font-size: 0.75rem;
2012-09-12 15:20:53 -04:00
}
2012-11-28 10:40:00 -08:00
.sidebar a.button {
2012-09-12 15:20:53 -04:00
margin-top: -110px;
width: 100%;
}
2018-10-14 20:21:54 -03:00
.sidebar input#repository-url {
width: 100%;
2018-10-14 20:21:54 -03:00
padding: 5px 20px 5px 10px;
box-sizing: border-box;
margin-right: 12px;
}
.input-wrapper {
2018-10-14 20:21:54 -03:00
position: relative;
}
.input-wrapper .status-indicator {
2018-10-14 20:21:54 -03:00
position: absolute;
right: 5px;
top: 6px;
height: 8px;
width: 8px;
border-radius: 50%;
background: #fff;
animation: none;
border: 4px solid #ddd;
2018-10-14 20:21:54 -03:00
}
.input-wrapper .status-indicator.fetching {
2018-10-14 20:21:54 -03:00
border-right-color: transparent;
animation: rotate 0.8s infinite linear;
}
.input-wrapper .status-indicator.error {
border: 4px solid #c6403d;
2018-10-14 20:21:54 -03:00
}
@keyframes rotate {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.note {
color: #687072;
}
.button {
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
-o-border-radius: 3px;
border-radius: 3px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
2015-09-18 14:45:55 -04:00
border-color: #ccc #bbb #aaa #bbb;
border-style: solid;
border-width: 1px;
2015-09-18 14:45:55 -04:00
color: #444;
-webkit-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px, rgba(255, 255, 255, 0.8) 0 1px 0 0 inset;
-moz-box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px, rgba(255, 255, 255, 0.8) 0 1px 0 0 inset;
box-shadow: rgba(0, 0, 0, 0.1) 0 2px 4px, rgba(255, 255, 255, 0.8) 0 1px 0 0 inset;
2015-09-18 14:45:55 -04:00
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eee), color-stop(100%, #ddd));
background-image: -webkit-linear-gradient(#eee, #ddd);
background-image: -moz-linear-gradient(#eee, #ddd);
background-image: -o-linear-gradient(#eee, #ddd);
background-image: linear-gradient(#eee, #ddd);
display: inline-block;
font-size: 0.75rem;
font-weight: normal;
padding: 5px 10px;
text-align: center;
vertical-align: middle;
}
.button:hover {
text-decoration: none;
2015-09-18 14:45:55 -04:00
background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eee), color-stop(100%, #ccc));
background-image: -webkit-linear-gradient(#eee, #ccc);
background-image: -moz-linear-gradient(#eee, #ccc);
background-image: -o-linear-gradient(#eee, #ccc);
background-image: linear-gradient(#eee, #ccc);
}
.projects-with-license li {
padding-bottom: 3px;
}
.site-footer {
2015-09-18 14:45:55 -04:00
border-top: 1px solid #eee;
2012-11-27 16:16:07 -05:00
margin-top: 30px;
padding-top: 20px;
2015-09-18 14:45:55 -04:00
color: #555;
font-size: 0.75rem;
2012-11-27 16:16:07 -05:00
text-align: left;
line-height: 1.5;
}
.site-footer a {
2015-09-18 14:45:55 -04:00
color: #444;
2012-11-27 16:16:07 -05:00
font-weight: normal;
}
.site-footer p {
2012-11-27 16:16:07 -05:00
float: left;
margin-top: 0;
2012-11-27 16:16:07 -05:00
}
.site-footer nav {
2012-11-27 16:16:07 -05:00
float: right;
}
.site-footer nav a {
2012-11-27 16:16:07 -05:00
display: inline-block;
margin-left: 20px;
}
.bullets {
list-style-type: disc;
}
.bullets > li {
margin-left: 2em;
}
2013-11-06 10:10:48 -05:00
.small {
font-size: 90%;
}
2012-12-04 17:12:12 -05:00
/* Qtip styles */
.qtip-conditions,
.qtip-permissions,
2018-10-14 20:21:54 -03:00
.qtip-limitations,
.qtip-fetching,
.qtip-error {
font-size: 0.75rem;
line-height: 1.3;
}
.qtip-conditions {
background-color: #d0ebf6;
border-color: #149ad4;
color: #0d648a;
2012-12-04 17:12:12 -05:00
}
.qtip-conditions .qtip-titlebar {
background-color: #149ad4;
color: #fff;
2012-12-04 17:12:12 -05:00
}
2018-10-14 20:21:54 -03:00
.qtip-fetching,
.qtip-permissions {
background-color: #d8f4d7;
border-color: #3dc637;
color: #298625;
2012-12-04 17:12:12 -05:00
}
2018-10-14 20:21:54 -03:00
.qtip-fetching .qtip-titlebar,
2016-04-16 09:58:54 -07:00
.qtip-permissions .qtip-titlebar {
background-color: #3dc637;
color: #fff;
2012-12-04 17:12:12 -05:00
}
2018-10-14 20:21:54 -03:00
.qtip-error,
.qtip-limitations {
background-color: #f4d9d8;
border-color: #c6403d;
color: #812a28;
2012-12-04 17:12:12 -05:00
}
2018-10-14 20:21:54 -03:00
.qtip-error .qtip-titlebar,
.qtip-limitations .qtip-titlebar {
background-color: #c6403d;
color: #fff;
2012-12-04 17:12:12 -05:00
}
2012-11-27 16:16:07 -05:00
/* For modern browsers */
2013-12-09 20:05:34 +02:00
.clearfix:before,
.clearfix:after {
content: "";
display: table;
2012-11-27 16:16:07 -05:00
}
2013-12-09 20:05:34 +02:00
.clearfix:after {
clear: both;
2012-11-27 16:16:07 -05:00
}
.with-love { float: right; clear: right; }
@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
only screen and (min--moz-device-pixel-ratio: 2.0),
only screen and (-o-min-device-pixel-ratio: 200/100),
only screen and (min-device-pixel-ratio: 2.0) {
.three-arrows,
2018-06-18 00:04:36 -07:00
.community,
.circular {
background-image: url(../img/home-sprite@2x.png);
-webkit-background-size: 72px 182px;
-moz-background-size: 72px 182px;
background-size: 72px 182px;
}
.license-sprite {
background-image: url(../img/license-sprite@2x.png);
-webkit-background-size: 52px 12px;
-moz-background-size: 52px 12px;
background-size: 52px 12px;
}
}
2013-12-20 00:27:35 +01:00
{% include css/responsive.css %}