You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
797 lines
16 KiB
797 lines
16 KiB
|
|
@color-main: #F890E7; |
|
@color-focus: #0BD3D3; |
|
@color-other-links: #666; |
|
@color-fonts: #282828; |
|
@center-width: 70em; |
|
@link-background: rgba(248, 144, 231, 0.3); /* this is just vice pink in rgb */ |
|
@link-background-hover: rgba(11, 211, 211, 0.4); /* This is just vice blue in rgb */ |
|
|
|
/* Fonts */ |
|
|
|
/* Source Sans Pro */ |
|
@font-face { |
|
font-family: "Source Sans Pro"; |
|
font-style: normal; |
|
font-weight: 400; |
|
font-display: swap; |
|
src: url('../fonts/SourceSansPro-Regular.otf.woff2') format('woff2'); |
|
} |
|
@font-face { |
|
font-family: "Source Sans Pro"; |
|
font-style: normal; |
|
font-weight: 900; |
|
font-display: swap; |
|
src: url('../fonts/SourceSansPro-Black.otf.woff2') format('woff2'); |
|
} |
|
@font-face { |
|
font-family: "Source Sans Pro"; |
|
font-style: normal; |
|
font-weight: 700; |
|
font-display: swap; |
|
src: url('../fonts/SourceSansPro-Bold.otf.woff2') format('woff2'); |
|
} |
|
@font-face { |
|
font-family: "Source Sans Pro"; |
|
font-style: normal; |
|
font-weight: 600; |
|
font-display: swap; |
|
src: url('../fonts/SourceSansPro-Semibold.otf.woff2') format('woff2'); |
|
} |
|
@font-face { |
|
font-family: "Source Sans Pro"; |
|
font-style: normal; |
|
font-weight: 300; |
|
font-display: swap; |
|
src: url('../fonts/SourceSansPro-Light.otf.woff2') format('woff2'); |
|
} |
|
@font-face { |
|
font-family: "Source Sans Pro"; |
|
font-style: normal; |
|
font-weight: 200; |
|
font-display: swap; |
|
src: url('../fonts/SourceSansPro-ExtraLight.otf.woff2') format('woff2'); |
|
} |
|
|
|
/* IBM Plex Copyright © 2017 IBM Corp. with Reserved Font Name "Plex" |
|
This Font Software is licensed under the SIL Open Font License, Version 1.1. */ |
|
@font-face { |
|
font-family: "IBM Plex"; |
|
font-style: normal; |
|
font-weight: 500; |
|
font-display: swap; |
|
src: url('../fonts/IBMPlexMono-Medium.otf') format('opentype'); |
|
} |
|
|
|
// Original Styles |
|
|
|
* { |
|
-webkit-box-sizing: border-box; |
|
-moz-box-sizing: border-box; |
|
box-sizing: border-box; |
|
} |
|
|
|
input[type="search"] { |
|
-webkit-appearance: textfield; |
|
} |
|
|
|
|
|
body { |
|
font-family: "Source Sans Pro", sans-serif; |
|
line-height: 1.5; |
|
margin: 0; |
|
background: white; |
|
} |
|
|
|
html { |
|
position: relative; |
|
min-height: 100%; |
|
} |
|
|
|
h1 { |
|
margin-bottom: 0; |
|
} |
|
|
|
a { |
|
text-decoration: none; |
|
color: inherit; |
|
} |
|
|
|
.title h1 { |
|
font-size:7em; |
|
color: #1D353B; |
|
margin:0 auto; |
|
line-height:100px; |
|
margin-top:-20px; |
|
padding-bottom:20px; |
|
font-weight: 300; |
|
} |
|
|
|
.title h1 .Miami { |
|
font-weight: 900; |
|
} |
|
|
|
.center { |
|
max-width: @center-width; |
|
text-align: center; |
|
background: rgb(255,255,255); |
|
padding: 3em 3em 2em 3em; |
|
margin: 7% auto 0; |
|
position: relative; |
|
} |
|
|
|
.center.search { |
|
position: static; |
|
width: auto; |
|
background: none; |
|
margin: auto; |
|
padding-top: 1.8em; |
|
} |
|
|
|
@media screen and (min-width: 1001px) { |
|
.center:after { |
|
content: ""; |
|
z-index: -1; |
|
background: url(../img/bg-body-index.jpg) no-repeat; |
|
background-size: cover; |
|
width: 100%; |
|
height: 100%; |
|
top: 0; |
|
left: 0; |
|
position: fixed; |
|
} |
|
.center.search:after { |
|
content: none; |
|
} |
|
} |
|
|
|
.autocompleter-choices { |
|
position: absolute; |
|
margin: 0; |
|
padding: 0; |
|
background: #FFF; |
|
} |
|
|
|
.autocompleter-choices li { |
|
padding: 0.5em 1em; |
|
} |
|
|
|
.autocompleter-choices li:hover { |
|
background: @color-main; |
|
color: #FFF; |
|
cursor: pointer; |
|
} |
|
|
|
#categories { |
|
text-align: center; |
|
} |
|
|
|
fieldset #categories { |
|
margin-top: -1.5em; |
|
} |
|
|
|
.top_margin { |
|
position: absolute; |
|
bottom: -3.5em; |
|
width: 100%; |
|
left: 0; |
|
background-color: white; |
|
padding-bottom: 1em; |
|
} |
|
|
|
.top_margin a { |
|
display: inline-block; |
|
margin-right: 0.5em; |
|
margin-left: 0.5em; |
|
text-decoration: none; |
|
color: @color-fonts; |
|
padding: .5em 1em; |
|
border-radius: 4px; |
|
font-weight: 500; |
|
font-family: "IBM Plex", monospace; |
|
font-size: 0.8em; |
|
} |
|
|
|
.top_margin a:hover::before, |
|
.top_margin a:focus::before { |
|
content: "/" |
|
} |
|
|
|
@media screen and (max-width: 1000px) { |
|
.center { background: none; } |
|
.top_margin a { |
|
color: @color-fonts; |
|
} |
|
} |
|
|
|
.checkbox_container { margin-top: 1.5em; } |
|
.checkbox_container label { |
|
padding: 0.5em 1em; |
|
color: @color-fonts; |
|
cursor: pointer; |
|
font-size: 0.9em; |
|
background: @link-background; |
|
transition: all 0.8s ease; |
|
} |
|
|
|
.checkbox_container label:hover { |
|
background: @link-background-hover; |
|
color: @color-fonts; |
|
} |
|
|
|
.checkbox_container input[type="checkbox"] { |
|
position: absolute; |
|
top: -9999px; |
|
} |
|
|
|
.checkbox_container input[type="checkbox"]:checked + label { |
|
background: @link-background-hover; |
|
color: @color-fonts; |
|
} |
|
|
|
#categories_container > div { |
|
display: inline-block; |
|
} |
|
|
|
#categories .hidden { |
|
display: none; |
|
position: absolute; |
|
bottom: 1em; |
|
left: 0; |
|
text-align: center; |
|
width: 100%; |
|
font-size: 0.9em; |
|
font-style: italic; |
|
color: @color-fonts; |
|
} |
|
|
|
#categories:hover .hidden { |
|
display: block; |
|
} |
|
|
|
@media screen and (max-width: 900px) { |
|
#categories_container { letter-spacing: -5px; } |
|
#categories_container > div { |
|
letter-spacing: normal; |
|
margin-top: 1em; |
|
} |
|
.checkbox_container { |
|
margin: 0; |
|
} |
|
.checkbox_container label { |
|
display: block; |
|
padding: 1em; |
|
} |
|
.top_margin { position: static; } |
|
#categories .hidden { |
|
position: static; |
|
display: block; |
|
} |
|
} |
|
|
|
@media screen and (max-width: 900px) and (min-width: 501px) { |
|
#categories_container > div { |
|
width: 31%; |
|
margin-left: 2.333%; |
|
} |
|
#categories_container > div:nth-child(3n+1) { margin-left: 0; } |
|
} |
|
|
|
@media screen and (max-width: 500px) { |
|
#categories_container > div { |
|
width: 48%; |
|
margin-left: 2%; |
|
font-size: 0.9em; |
|
} |
|
} |
|
|
|
#search_wrapper { |
|
position: relative; |
|
display: flex; |
|
flex-direction: row-reverse; |
|
} |
|
|
|
.q { |
|
padding: 0.5em 3em 0.5em 0; |
|
width: 100%; |
|
font-size: 1.5em; |
|
border: 0; |
|
border-bottom: 1px solid @color-main; |
|
color: @color-fonts; |
|
transition: all 1.2s ease; |
|
background-color: white; |
|
} |
|
.q:focus-visible { |
|
outline: none; |
|
} |
|
|
|
#search_submit { |
|
position: absolute; |
|
top: 0; |
|
right: 0; |
|
border: 0; |
|
background:url("../img/search-icon.png") no-repeat scroll center center / 57% auto @color-main; |
|
text-indent: -9999px; |
|
width: 5em; |
|
height: 100%; |
|
cursor: pointer; |
|
transition: all 1.2s ease; |
|
} |
|
|
|
#search_submit:hover, |
|
#search_submit:focus { |
|
background-color: @color-focus; |
|
} |
|
|
|
#search_submit:hover + .q { |
|
border-bottom-color: @color-focus; |
|
} |
|
|
|
#sidebar { |
|
display: flex; |
|
align-items: center; |
|
justify-content: center; |
|
flex-wrap: wrap; |
|
} |
|
#sidebar #apis { |
|
display: flex; |
|
align-items: center; |
|
} |
|
|
|
.right { |
|
padding-bottom: 0.1em; |
|
} |
|
|
|
.right a { |
|
text-decoration: none; |
|
} |
|
|
|
.right a:hover::before, |
|
.right a:focus::before { |
|
content: "$ "; |
|
} |
|
|
|
#preferences { |
|
text-decoration: none; |
|
font-family: "IBM Plex", mono; |
|
font-weight: 500; |
|
font-size: 0.8em; |
|
} |
|
|
|
#preferences:hover::before, |
|
#preferences:focus::before { |
|
content: "/" |
|
} |
|
|
|
#search_url input { |
|
border: 0; |
|
padding: 0.5em; |
|
} |
|
|
|
#sidebar > div { |
|
margin: 0; |
|
margin-right: 1em; |
|
margin-left: 1em; |
|
} |
|
|
|
#sidebar form { |
|
display: inline-block; |
|
} |
|
|
|
#sidebar input[type="submit"] { |
|
border: 0; |
|
padding: 0.5em 1em; |
|
cursor: pointer; |
|
margin-left: 1em; |
|
} |
|
|
|
#sidebar input[type="submit"]:hover, |
|
#sidebar input[type="submit"]:focus { |
|
} |
|
|
|
#results { |
|
max-width: 100ch; |
|
margin: auto; |
|
} |
|
|
|
.result p { |
|
font-size: 0.9em; |
|
} |
|
|
|
.result .engines { |
|
text-align: right; |
|
} |
|
|
|
.result .content { |
|
margin: 0; |
|
color: #666; |
|
} |
|
|
|
.result .url { |
|
margin-top: 0; |
|
color: #FF6530; |
|
} |
|
|
|
.result .favicon { |
|
float: left; |
|
position: relative; |
|
top: 0.5em; |
|
margin-right: 0.5em; |
|
} |
|
|
|
.definition_result { |
|
background: #CCC; |
|
padding: 1em; |
|
} |
|
|
|
.definition_result .result_title, |
|
.definition_result p { |
|
margin: 0; |
|
} |
|
|
|
.result_title { |
|
margin-bottom: 0; |
|
font-weight: normal; |
|
} |
|
|
|
.highlight { |
|
font-weight: bold; |
|
} |
|
|
|
.result_title a { |
|
color: @color-fonts; |
|
background-color: @link-background; |
|
text-decoration: none; |
|
transition: background 1.2s ease; |
|
} |
|
|
|
.result_title a:hover, |
|
.result_title a:focus { |
|
background-color: @link-background-hover; |
|
} |
|
|
|
.cache_link { |
|
color: #666; |
|
font-size: 0.9em; |
|
font-style: italic; |
|
} |
|
|
|
.search.center { |
|
max-width: 111ch; |
|
} |
|
|
|
#answers { |
|
border: 2px solid @color-main; |
|
padding: 20px; |
|
color:#666; |
|
text-align: center; |
|
max-width:@center-width; |
|
margin:0 auto 20px; |
|
} |
|
|
|
#suggestions { margin-bottom: 1em; } |
|
|
|
#suggestions span { color: #666; } |
|
|
|
#suggestions form { |
|
display: inline-block; |
|
vertical-align: top; |
|
margin-bottom: 0.5em; |
|
} |
|
|
|
#suggestions input[type="submit"] { |
|
color: @color-fonts; |
|
padding: 0.5em 1em; |
|
border: 0; |
|
background: #CCC; |
|
cursor:pointer; |
|
} |
|
|
|
#suggestions input[type="submit"]:hover, |
|
#suggestions input[type="submit"]:focus { |
|
background: @color-main; |
|
color: #FFF; |
|
} |
|
|
|
#pagination { |
|
margin: 1.5em 0 2em; |
|
} |
|
|
|
#pagination form + form { |
|
float: right; |
|
margin-top: -2em; |
|
} |
|
|
|
input[type="submit"] { |
|
display: inline-block; |
|
background: @link-background; |
|
color: @color-fonts; |
|
border: 0; |
|
padding: 0.5em 2em; |
|
cursor: pointer; |
|
transition: background 1s ease; |
|
} |
|
|
|
input[type="submit"]:hover, |
|
input[type="submit"]:focus { |
|
background: @link-background-hover; |
|
} |
|
|
|
.row { |
|
max-width: 60em; |
|
margin: auto; |
|
} |
|
|
|
.row a { |
|
color: @color-main; |
|
} |
|
|
|
.row form { |
|
letter-spacing: -5px; |
|
} |
|
|
|
.row form > * { letter-spacing: normal; } |
|
|
|
.row p { margin: 0; } |
|
|
|
.row fieldset { |
|
display: inline-block; |
|
width: 48%; |
|
vertical-align: top; |
|
} |
|
|
|
.row fieldset:last-of-type { |
|
//display: block; |
|
width: auto; |
|
//background: none; |
|
//padding: 0; |
|
} |
|
|
|
.row fieldset:nth-child(odd) { |
|
margin-right: 2%; |
|
} |
|
|
|
.row fieldset:nth-child(2) { |
|
min-height: 9em; |
|
} |
|
|
|
@media screen and (max-width: 900px) { |
|
.row { |
|
margin: 0 1em; |
|
} |
|
|
|
.row fieldset { width: 49%; } |
|
.row fieldset, |
|
.row fieldset:nth-child(odd) { |
|
margin-right: 0; |
|
} |
|
|
|
.row fieldset:first-child { |
|
width: 100%; |
|
margin-right: 0; |
|
} |
|
|
|
.row fieldset:nth-child(even) { |
|
margin-right: 2%; |
|
} |
|
} |
|
|
|
@media screen and (max-width: 800px) { |
|
.row fieldset { width: 100%; } |
|
|
|
select { width: 100%; } |
|
|
|
table { font-size: 0.8em; } |
|
.right {display: none;} |
|
#sidebar { display: none; } |
|
#results { padding: 0 2em; } |
|
.search.center { |
|
padding-right: 2em; |
|
} |
|
.title h1 { |
|
font-size: 15vw; |
|
} |
|
} |
|
|
|
@media screen and (max-width: 400px) { |
|
.row #categories_container > div { |
|
width: 100%; |
|
margin-left: 0; |
|
} |
|
} |
|
|
|
fieldset { |
|
border: 2px solid @color-main; |
|
border-radius: 5px; |
|
margin: 1em 0; |
|
background: white; |
|
padding: 1.5em; |
|
|
|
} |
|
|
|
table { |
|
width: auto; |
|
margin: auto; |
|
text-align: left; |
|
border-collapse: collapse; |
|
} |
|
|
|
table th, |
|
table td { |
|
padding: 0.5em 1em; |
|
//border: 1px solid @color-fonts; |
|
} |
|
|
|
.engine_checkbox label { |
|
padding: 0.5em; |
|
background: @color-main; |
|
color: #FFF; |
|
cursor: pointer; |
|
} |
|
|
|
.engine_checkbox .deny { |
|
background: @color-focus; |
|
} |
|
|
|
.engine_checkbox .allow { |
|
display: none; |
|
background: @color-main; |
|
} |
|
|
|
.engine_checkbox input { |
|
display: none; |
|
} |
|
|
|
.engine_checkbox input:checked + .allow { |
|
display: inline; |
|
} |
|
|
|
.engine_checkbox input:checked + .allow + .deny{ |
|
display: none; |
|
} |
|
|
|
.row input[type="submit"] { |
|
font-size: 1em; |
|
margin: 1em 2em 2em 0; |
|
} |
|
|
|
.row .right { |
|
position: static; |
|
display: inline-block; |
|
|
|
} |
|
|
|
.row .right a { |
|
color: @color-fonts; |
|
width: auto; |
|
text-align: left; |
|
padding: 0; |
|
} |
|
|
|
.small_font { |
|
font-size: 0.8em; |
|
} |
|
|
|
table th { |
|
padding: 1em; |
|
} |
|
|
|
legend { |
|
background: white; |
|
padding: 0 1em; |
|
position: relative; |
|
border: 2px solid @color-main; |
|
border-radius: 5px; |
|
font-family: "IBM Plex", monospace; |
|
font-size: 0.9em; |
|
} |
|
|
|
select { |
|
border: 1px solid @color-fonts; |
|
padding: 0.25em 1em; |
|
font-size: 1em; |
|
background-color: white; |
|
} |
|
|
|
.preferences-actions > * { |
|
margin-right: 2em; |
|
} |
|
|
|
.highlight .hll { background-color: #ffffcc } |
|
.highlight .c { color: #408080; font-style: italic } /* Comment */ |
|
.highlight .err { border: 1px solid #FF0000 } /* Error */ |
|
.highlight .k { color: #008000; font-weight: bold } /* Keyword */ |
|
.highlight .o { color: #666666 } /* Operator */ |
|
.highlight .cm { color: #408080; font-style: italic } /* Comment.Multiline */ |
|
.highlight .cp { color: #BC7A00 } /* Comment.Preproc */ |
|
.highlight .c1 { color: #408080; font-style: italic } /* Comment.Single */ |
|
.highlight .cs { color: #408080; font-style: italic } /* Comment.Special */ |
|
.highlight .gd { color: #A00000 } /* Generic.Deleted */ |
|
.highlight .ge { font-style: italic } /* Generic.Emph */ |
|
.highlight .gr { color: #FF0000 } /* Generic.Error */ |
|
.highlight .gh { color: #000080; font-weight: bold } /* Generic.Heading */ |
|
.highlight .gi { color: #00A000 } /* Generic.Inserted */ |
|
.highlight .go { color: #888888 } /* Generic.Output */ |
|
.highlight .gp { color: #000080; font-weight: bold } /* Generic.Prompt */ |
|
.highlight .gs { font-weight: bold } /* Generic.Strong */ |
|
.highlight .gu { color: #800080; font-weight: bold } /* Generic.Subheading */ |
|
.highlight .gt { color: #0044DD } /* Generic.Traceback */ |
|
.highlight .kc { color: #008000; font-weight: bold } /* Keyword.Constant */ |
|
.highlight .kd { color: #008000; font-weight: bold } /* Keyword.Declaration */ |
|
.highlight .kn { color: #008000; font-weight: bold } /* Keyword.Namespace */ |
|
.highlight .kp { color: #008000 } /* Keyword.Pseudo */ |
|
.highlight .kr { color: #008000; font-weight: bold } /* Keyword.Reserved */ |
|
.highlight .kt { color: #B00040 } /* Keyword.Type */ |
|
.highlight .m { color: #666666 } /* Literal.Number */ |
|
.highlight .s { color: #BA2121 } /* Literal.String */ |
|
.highlight .na { color: #7D9029 } /* Name.Attribute */ |
|
.highlight .nb { color: #008000 } /* Name.Builtin */ |
|
.highlight .nc { color: #0000FF; font-weight: bold } /* Name.Class */ |
|
.highlight .no { color: #880000 } /* Name.Constant */ |
|
.highlight .nd { color: #AA22FF } /* Name.Decorator */ |
|
.highlight .ni { color: #999999; font-weight: bold } /* Name.Entity */ |
|
.highlight .ne { color: #D2413A; font-weight: bold } /* Name.Exception */ |
|
.highlight .nf { color: #0000FF } /* Name.Function */ |
|
.highlight .nl { color: #A0A000 } /* Name.Label */ |
|
.highlight .nn { color: #0000FF; font-weight: bold } /* Name.Namespace */ |
|
.highlight .nt { color: #008000; font-weight: bold } /* Name.Tag */ |
|
.highlight .nv { color: #19177C } /* Name.Variable */ |
|
.highlight .ow { color: #AA22FF; font-weight: bold } /* Operator.Word */ |
|
.highlight .w { color: #bbbbbb } /* Text.Whitespace */ |
|
.highlight .mf { color: #666666 } /* Literal.Number.Float */ |
|
.highlight .mh { color: #666666 } /* Literal.Number.Hex */ |
|
.highlight .mi { color: #666666 } /* Literal.Number.Integer */ |
|
.highlight .mo { color: #666666 } /* Literal.Number.Oct */ |
|
.highlight .sb { color: #BA2121 } /* Literal.String.Backtick */ |
|
.highlight .sc { color: #BA2121 } /* Literal.String.Char */ |
|
.highlight .sd { color: #BA2121; font-style: italic } /* Literal.String.Doc */ |
|
.highlight .s2 { color: #BA2121 } /* Literal.String.Double */ |
|
.highlight .se { color: #BB6622; font-weight: bold } /* Literal.String.Escape */ |
|
.highlight .sh { color: #BA2121 } /* Literal.String.Heredoc */ |
|
.highlight .si { color: #BB6688; font-weight: bold } /* Literal.String.Interpol */ |
|
.highlight .sx { color: #008000 } /* Literal.String.Other */ |
|
.highlight .sr { color: #BB6688 } /* Literal.String.Regex */ |
|
.highlight .s1 { color: #BA2121 } /* Literal.String.Single */ |
|
.highlight .ss { color: #19177C } /* Literal.String.Symbol */ |
|
.highlight .bp { color: #008000 } /* Name.Builtin.Pseudo */ |
|
.highlight .vc { color: #19177C } /* Name.Variable.Class */ |
|
.highlight .vg { color: #19177C } /* Name.Variable.Global */ |
|
.highlight .vi { color: #19177C } /* Name.Variable.Instance */ |
|
.highlight .il { color: #666666 } /* Literal.Number.Integer.Long */ |
|
|
|
.highlight pre { overflow: auto; } |
|
|
|
.highlight .lineno { |
|
-webkit-touch-callout: none; |
|
-webkit-user-select: none; |
|
-khtml-user-select: none; |
|
-moz-user-select: none; |
|
-ms-user-select: none; |
|
user-select: none; |
|
cursor: default; |
|
} |
|
|
|
.highlight .lineno::selection { background: transparent; } /* WebKit/Blink Browsers */ |
|
.highlight .lineno::-moz-selection { background: transparent; } /* Gecko Browsers */ |
|
|
|
.about-container { |
|
max-width: 90ch; |
|
margin: auto; |
|
padding: 1em; |
|
font-size: 1.2em; |
|
h1 { |
|
font-size: 1.5em; |
|
line-height: 1.1; |
|
} |
|
h2 { |
|
font-size: 1.3em; |
|
line-height: 1.2; |
|
} |
|
} |
|
.about-container a { |
|
background-color: @link-background; |
|
transition: background 1.2s ease; |
|
} |
|
.about-container a:hover { |
|
background-color: @link-background-hover; |
|
}
|
|
|