Got basic index page, started on new domain page
This commit is contained in:
Brian Picciano
parent
a3c41ee4d6
commit
cf3b11862c
@ -1,4 +1,5 @@
|
|||||||
use serde::{Deserialize, Serialize};
|
use serde::{Deserialize, Serialize};
|
||||||
|
use std::collections::HashMap;
|
||||||
use std::error::Error;
|
use std::error::Error;
|
||||||
use std::sync;
|
use std::sync;
|
||||||
use warp::Filter;
|
use warp::Filter;
|
||||||
@ -8,33 +9,55 @@ use crate::domain;
|
|||||||
pub mod http_tpl;
|
pub mod http_tpl;
|
||||||
|
|
||||||
/*
|
/*
|
||||||
* POST /domain/init (domain, config) -> token
|
* POST /domain/config (domain, config, secret, init?) -> token?
|
||||||
* POST /domain/config (domain, config)
|
|
||||||
* GET /domain/config (domain) -> config
|
* GET /domain/config (domain) -> config
|
||||||
* GET /domains
|
* GET /domains
|
||||||
*/
|
*/
|
||||||
|
|
||||||
type Handlebars<'a> = sync::Arc<handlebars::Handlebars<'a>>;
|
type Handlebars<'a> = sync::Arc<handlebars::Handlebars<'a>>;
|
||||||
|
|
||||||
fn render<'a, T: 'a>(hbs: Handlebars<'a>, name: &'a str, value: &'a T) -> impl warp::Reply
|
struct RenderContext<'a> {
|
||||||
|
handlebars: Handlebars<'a>,
|
||||||
|
query_args: HashMap<String, String>,
|
||||||
|
}
|
||||||
|
|
||||||
|
// TODO make this use an io::Write, rather than warp::Reply
|
||||||
|
fn render<'a, T>(handlebars: Handlebars<'a>, name: &'a str, value: T) -> impl warp::Reply
|
||||||
where
|
where
|
||||||
T: Serialize,
|
T: Serialize,
|
||||||
{
|
{
|
||||||
// TODO deal with 404
|
// TODO deal with 404
|
||||||
let render = hbs
|
let render = handlebars
|
||||||
.render(name, value)
|
.render(name, &value)
|
||||||
.unwrap_or_else(|err| err.to_string());
|
.unwrap_or_else(|err| err.to_string());
|
||||||
|
|
||||||
let content_type = mime_guess::from_path(name)
|
let content_type = mime_guess::from_path(name)
|
||||||
.first_or_octet_stream()
|
.first_or_octet_stream()
|
||||||
.to_string();
|
.to_string();
|
||||||
|
|
||||||
warp::reply::with_header(warp::reply::html(render), "Content-Type", content_type)
|
let reply = warp::reply::html(render);
|
||||||
|
|
||||||
|
warp::reply::with_header(reply, "Content-Type", content_type)
|
||||||
}
|
}
|
||||||
|
|
||||||
#[derive(Deserialize)]
|
fn render_page<'a, T>(render_ctx: RenderContext<'a>, name: String, data: T) -> impl warp::Reply
|
||||||
struct DomainInitRequest {
|
where
|
||||||
//config: domain::config::Config,
|
T: Serialize,
|
||||||
|
{
|
||||||
|
#[derive(Serialize)]
|
||||||
|
struct Presenter<T> {
|
||||||
|
page_name: String,
|
||||||
|
query_args: HashMap<String, String>,
|
||||||
|
data: T,
|
||||||
|
}
|
||||||
|
|
||||||
|
let presenter = Presenter {
|
||||||
|
page_name: name,
|
||||||
|
query_args: render_ctx.query_args,
|
||||||
|
data,
|
||||||
|
};
|
||||||
|
|
||||||
|
render(render_ctx.handlebars, "/base.html", presenter)
|
||||||
}
|
}
|
||||||
|
|
||||||
pub fn new(
|
pub fn new(
|
||||||
@ -44,25 +67,51 @@ pub fn new(
|
|||||||
Box<dyn Error>,
|
Box<dyn Error>,
|
||||||
> {
|
> {
|
||||||
let hbs = sync::Arc::new(self::http_tpl::get()?);
|
let hbs = sync::Arc::new(self::http_tpl::get()?);
|
||||||
let with_hbs = warp::any().map(move || hbs.clone());
|
let with_render_ctx = warp::any()
|
||||||
|
.and(warp::query::<HashMap<String, String>>())
|
||||||
let index = warp::get()
|
.map(move |query_args: HashMap<String, String>| RenderContext {
|
||||||
.and(warp::path::end())
|
handlebars: hbs.clone(),
|
||||||
.and(with_hbs.clone())
|
query_args,
|
||||||
.map(|hbs: Handlebars<'_>| render(hbs, "/index.html", &()));
|
});
|
||||||
|
|
||||||
let static_dir = warp::get()
|
let static_dir = warp::get()
|
||||||
|
.and(with_render_ctx.clone())
|
||||||
.and(warp::path("static"))
|
.and(warp::path("static"))
|
||||||
.and(warp::path::full())
|
.and(warp::path::full())
|
||||||
.and(with_hbs.clone())
|
.map(
|
||||||
.map(|full: warp::path::FullPath, hbs: Handlebars<'_>| render(hbs, full.as_str(), &()));
|
|render_ctx: RenderContext<'_>, full: warp::path::FullPath| {
|
||||||
|
render(render_ctx.handlebars, full.as_str(), ())
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
//filter = warp::path!("domain" / "init").and(warp::post())
|
let index = warp::get()
|
||||||
// .and(warp::query::<DomainInitRequest>())
|
.and(with_render_ctx.clone())
|
||||||
// .map(|q: DomainInitRequest| {
|
.and(warp::path::end())
|
||||||
// let config_hash = q.config.hash().expect("TODO");
|
.map(|render_ctx: RenderContext<'_>| {
|
||||||
// warp::reply::html(config_hash)
|
render_page(render_ctx, String::from("/index.html"), ())
|
||||||
// });
|
});
|
||||||
|
|
||||||
Ok(index.or(static_dir))
|
#[derive(Deserialize)]
|
||||||
|
struct DomainGetNewRequest {
|
||||||
|
domain: String,
|
||||||
|
}
|
||||||
|
|
||||||
|
let domain_get = warp::get()
|
||||||
|
.and(with_render_ctx.clone())
|
||||||
|
.and(warp::path("domain.html"))
|
||||||
|
.and(warp::query::<DomainGetNewRequest>())
|
||||||
|
.map(|render_ctx: RenderContext<'_>, req: DomainGetNewRequest| {
|
||||||
|
#[derive(Serialize)]
|
||||||
|
struct DomainGetNewResponse {
|
||||||
|
domain: String,
|
||||||
|
}
|
||||||
|
|
||||||
|
render_page(
|
||||||
|
render_ctx,
|
||||||
|
String::from("/domain_get_new.html"),
|
||||||
|
DomainGetNewResponse { domain: req.domain },
|
||||||
|
)
|
||||||
|
});
|
||||||
|
|
||||||
|
Ok(static_dir.or(index).or(domain_get))
|
||||||
}
|
}
|
||||||
|
|||||||
49
src/service/http_tpl/base.html
Normal file
49
src/service/http_tpl/base.html
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
|
||||||
|
<title>Cosmux - The universal, zero-authentication hosting service</title>
|
||||||
|
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<meta name="description" content="" />
|
||||||
|
<link rel="icon" href="favicon.png">
|
||||||
|
-->
|
||||||
|
|
||||||
|
<!--
|
||||||
|
<link rel="stylesheet" type="text/css" href="/static/new.css" />
|
||||||
|
-->
|
||||||
|
|
||||||
|
<link rel="stylesheet" type="text/css" href="/static/normalize.css" />
|
||||||
|
<link rel="stylesheet" type="text/css" href="/static/concrete.css" />
|
||||||
|
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
background: #f9f5ff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<main>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
<h1><a href="/">Cosmux</a></h1>
|
||||||
|
<blockquote>The universal, zero-authentication hosting service</blockquote>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section>
|
||||||
|
{{> (lookup this "page_name")}}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
</main>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
|
|
||||||
41
src/service/http_tpl/domain_get_new.html
Normal file
41
src/service/http_tpl/domain_get_new.html
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<h2>
|
||||||
|
Configure New Domain
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<p>Your domain <code>{{ data.domain }}</code> is not yet configured with Cosmux.
|
||||||
|
To get started, please input the details of a public git repo which will be used
|
||||||
|
to serve your domain. When you update the given branch, your domain will be
|
||||||
|
automatically updated too!</p>
|
||||||
|
|
||||||
|
<p><em>In the future Cosmux will support more backends than just git
|
||||||
|
repos.</em></p>
|
||||||
|
|
||||||
|
|
||||||
|
<form method="POST" action="/domain.html">
|
||||||
|
<input name="init" type="hidden" value="true" />
|
||||||
|
<input name="domain" type="hidden" value="{{ data.domain }}" />
|
||||||
|
|
||||||
|
<fieldset>
|
||||||
|
<legend>Git Repository</legend>
|
||||||
|
<p>
|
||||||
|
<label>
|
||||||
|
URL (HTTPS only):
|
||||||
|
<input name="git_url"
|
||||||
|
type="text"
|
||||||
|
placeholder="https://example.com/some_repo.git"
|
||||||
|
required />
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p>
|
||||||
|
<label>
|
||||||
|
Branch name:
|
||||||
|
<input name="git_branch_name"
|
||||||
|
type="text"
|
||||||
|
placeholder="main / master / etc..."
|
||||||
|
required />
|
||||||
|
</label>
|
||||||
|
</p>
|
||||||
|
</fieldset>
|
||||||
|
|
||||||
|
</form>
|
||||||
@ -1,29 +1,47 @@
|
|||||||
<!DOCTYPE html>
|
<p>Cosmux connects your domain to whatever you want to host on it, all with no
|
||||||
|
account needed. Just input your desired backend, add two entries to your DNS
|
||||||
|
server, and you're done!</p>
|
||||||
|
|
||||||
<html lang="en">
|
<p><strong>Cosmux is currently only a proof-of-concept with limited features,
|
||||||
|
but will continue to be expanded as development time permits</strong></p>
|
||||||
|
|
||||||
<head>
|
<p>The following backends are supported for serving a domain:</p>
|
||||||
|
|
||||||
<meta charset="UTF-8" />
|
<ul>
|
||||||
|
<li><strong>Git repository</strong>: Your domain will be served out of a
|
||||||
|
branch of a public git repository, a la Github Pages.</li>
|
||||||
|
<li><strong>IPFS/IPNS Hash</strong>: TODO</li>
|
||||||
|
<li><strong>Alternative URL (reverse proxy)</strong>: TODO</li>
|
||||||
|
<li><strong>Google Drive</strong>: TODO (maybe)</li>
|
||||||
|
<li><strong>Dropbox</strong>: TODO (maybe)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<title>Hello, world!</title>
|
<h2>Get Started</h2>
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1" />
|
<p>Input your domain name below to set it up, or reconfigure it if you have used
|
||||||
|
it before:</p>
|
||||||
|
|
||||||
<!--
|
<form method="get" action="/domain.html">
|
||||||
<meta name="description" content="" />
|
<label>
|
||||||
<link rel="icon" href="favicon.png">
|
Domain name:
|
||||||
-->
|
<input type="text" name="domain" placeholder="example.org" required />
|
||||||
|
</label>
|
||||||
|
|
||||||
<link rel="stylesheet" type="text/css" href="/static/new.css" />
|
<input type="submit" value="Go!" />
|
||||||
|
</form>
|
||||||
|
|
||||||
</head>
|
<p>Alternatively you can do any of the following alternative actions:</p>
|
||||||
|
|
||||||
<body>
|
<ul>
|
||||||
|
<li>List all existing domains</li>
|
||||||
|
<li>View the Source Code (TODO)</li>
|
||||||
|
<li>View the Project Roadmap (TODO)</li>
|
||||||
|
<li>Report a Bug (TODO)</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
<h1>OK</h1>
|
<h2>About</h2>
|
||||||
|
|
||||||
</body>
|
|
||||||
|
|
||||||
</html>
|
|
||||||
|
|
||||||
|
<p>Cosmux is an open-source project which is designed to be hosted by
|
||||||
|
individuals for their community of friends and family. By making it super easy
|
||||||
|
to set up a domain we can help our non-technical folk own their own slice of
|
||||||
|
the internet, the way it was always intended.</p>
|
||||||
|
|||||||
400
src/service/http_tpl/static/concrete.css
Normal file
400
src/service/http_tpl/static/concrete.css
Normal file
@ -0,0 +1,400 @@
|
|||||||
|
/*! concrete.css v2.0.3 | MIT License | github.com/louismerlin/concrete.css */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Modify the base font-size to 62.5% so that 1.6rem = 16px.
|
||||||
|
* 2. Set box-sizing globally to handle padding and border widths.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
font-size: 62.5%; /* 1 */
|
||||||
|
box-sizing: border-box; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Continue the global box-sizing modification.
|
||||||
|
* 2. Set the underline size for all elements.
|
||||||
|
*/
|
||||||
|
|
||||||
|
*, ::after, ::before {
|
||||||
|
box-sizing: inherit; /* 1 */
|
||||||
|
text-decoration-thickness: .2rem; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Set global font size to 2rem (20px) with a normal weight.
|
||||||
|
* 2. Set the text and background color to white and black by default.
|
||||||
|
* 3. Set the font-family to Helvetica, or equivalent.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
font-size: 2rem; /* 1 */
|
||||||
|
font-weight: 400; /* 1 */
|
||||||
|
background: #fff; /* 2 */
|
||||||
|
color: #111; /* 2 */
|
||||||
|
font-family: Helvetica, Arial, sans-serif; /* 3 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the link color to black
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Set the max width of images to 100%, so that they don't overflow.
|
||||||
|
* 2. Set the height of images relative to their width.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-width: 100%; /* 1 */
|
||||||
|
height: auto; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Center the main element horizontally.
|
||||||
|
* 2. Set the width of the element to 640px, with padding for mobile screens.
|
||||||
|
*/
|
||||||
|
|
||||||
|
main {
|
||||||
|
margin: auto; /* 1 */
|
||||||
|
max-width: 66rem; /* 2 */
|
||||||
|
padding: 0 1rem; /* 2 */
|
||||||
|
width: 100%; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add some padding around the header.
|
||||||
|
* 2. Increase the size of text in the header.
|
||||||
|
*/
|
||||||
|
|
||||||
|
header {
|
||||||
|
padding: 16rem 0; /* 1 */
|
||||||
|
font-size: 1.2em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Center the text in the footer.
|
||||||
|
*/
|
||||||
|
|
||||||
|
footer {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add some padding around the sections.
|
||||||
|
*/
|
||||||
|
|
||||||
|
section {
|
||||||
|
padding: 4rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Change the style of the button.
|
||||||
|
* 2. Set the color and border of the button.
|
||||||
|
* 3. Add the pointer cursor when hovering a button.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input[type="button"],
|
||||||
|
input[type="reset"],
|
||||||
|
input[type="submit"] {
|
||||||
|
display: inline-block; /* 1 */
|
||||||
|
vertical-align: middle; /* 1 */
|
||||||
|
padding: .4rem 1rem; /* 1 */
|
||||||
|
font-size: 2rem; /* 1 */
|
||||||
|
font-weight: normal; /* 1 */
|
||||||
|
margin-bottom: 1rem; /* 1 */
|
||||||
|
background: #fff; /* 2 */
|
||||||
|
color: #111; /* 2 */
|
||||||
|
border: .2rem solid #111; /* 2 */
|
||||||
|
border-radius: 0; /* 2 */
|
||||||
|
cursor: pointer; /* 3 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Invert the colors of the disabled button.
|
||||||
|
* 2. Add the not-allowed cursor when hovering a disabled button.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button:disabled,
|
||||||
|
input[type="button"]:disabled,
|
||||||
|
input[type="reset"]:disabled,
|
||||||
|
input[type="submit"]:disabled{
|
||||||
|
color: #fff; /* 1 */
|
||||||
|
background: #111; /* 1 */
|
||||||
|
cursor: not-allowed; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the list bullet to square.
|
||||||
|
*/
|
||||||
|
|
||||||
|
ul {
|
||||||
|
list-style: square;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the border around a fieldset.
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
border: .2rem solid #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Modify the display of labels and legends.
|
||||||
|
* 2. Add a margin underneath.
|
||||||
|
*/
|
||||||
|
|
||||||
|
label, legend {
|
||||||
|
display: block; /* 1 */
|
||||||
|
font-weight: bold; /* 1 */
|
||||||
|
margin-bottom: .8rem; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Change the appearance of the text input.
|
||||||
|
* 2. Set the color and border of the text input.
|
||||||
|
*/
|
||||||
|
|
||||||
|
input[type="email"],
|
||||||
|
input[type="number"],
|
||||||
|
input[type="password"],
|
||||||
|
input[type="search"],
|
||||||
|
input[type="tel"],
|
||||||
|
input[type="text"],
|
||||||
|
input[type="url"],
|
||||||
|
textarea,
|
||||||
|
select {
|
||||||
|
-webkit-appearance: none; /* 1 */
|
||||||
|
-moz-appearance: none; /* 1 */
|
||||||
|
appearance: none; /* 1 */
|
||||||
|
box-shadow: none; /* 1 */
|
||||||
|
box-sizing: inherit; /* 1 */
|
||||||
|
padding: .4rem 1rem; /* 1 */
|
||||||
|
width: 100%; /* 1 */
|
||||||
|
font-size: 2rem; /* 1 */
|
||||||
|
color: #111; /* 2 */
|
||||||
|
background-color: #fff; /* 2 */
|
||||||
|
border: .2rem solid #111; /* 2 */
|
||||||
|
border-radius: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set margin for form elements.
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset, input, select, textarea {
|
||||||
|
margin: 0 0 1.6rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Set the font color for the placeholder in inputs.
|
||||||
|
* 2. Set font-style to italic for the placeholder in inputs.
|
||||||
|
*/
|
||||||
|
|
||||||
|
input::placeholder,
|
||||||
|
textarea::placeholder {
|
||||||
|
color: #111; /* 1 */
|
||||||
|
font-style: italic; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Expand width to 100% for the table element.
|
||||||
|
* 2. Remove the distance between the borders of adjacent table cells.
|
||||||
|
*/
|
||||||
|
|
||||||
|
table {
|
||||||
|
width: 100%; /* 1 */
|
||||||
|
border-spacing: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add padding around table cells.
|
||||||
|
*/
|
||||||
|
|
||||||
|
td, th {
|
||||||
|
padding: .8rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove left padding for first cell in a row.
|
||||||
|
*/
|
||||||
|
|
||||||
|
td:first-child, th:first-child {
|
||||||
|
padding-left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove right padding for last cell in a row.
|
||||||
|
*/
|
||||||
|
|
||||||
|
td:last-child, th:last-child {
|
||||||
|
padding-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add a border under the table header.
|
||||||
|
* 2. Align the text to the left in the table header.
|
||||||
|
*/
|
||||||
|
|
||||||
|
th {
|
||||||
|
border-bottom: .2rem solid #111; /* 1 */
|
||||||
|
text-align: left; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add a thiner border under table rows.
|
||||||
|
*/
|
||||||
|
|
||||||
|
td {
|
||||||
|
border-bottom: .1rem solid #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Change the margins and padding.
|
||||||
|
* 2. Add a border on the left of these elements.
|
||||||
|
* 3. Set the y overflow to hidden to hide the navigation bar.
|
||||||
|
*/
|
||||||
|
|
||||||
|
blockquote, pre {
|
||||||
|
margin-left: 0; /* 1 */
|
||||||
|
margin-right: 0; /* 1 */
|
||||||
|
padding: 1rem 1.6rem; /* 1 */
|
||||||
|
border-left: .2rem solid #111; /* 2 */
|
||||||
|
overflow-y: hidden; /* 3 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Set the rest of the border of the preformatted element to dotted.
|
||||||
|
* 2. Re-set the left border style.
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre {
|
||||||
|
border: 0.1rem dotted #111;
|
||||||
|
border-left: 0.2rem solid #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Modify the display of the code block.
|
||||||
|
* 2. Reduce the font size of the code block.
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre > code {
|
||||||
|
white-space: pre; /* 1 */
|
||||||
|
display: block; /* 1 */
|
||||||
|
font-size: 1.6rem; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Modify the display of the progress bar in all browsers.
|
||||||
|
* 2. Set the colors and border of the progress bar.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress {
|
||||||
|
-moz-appearance: none; /* 1 */
|
||||||
|
-webkit-appearance: none; /* 1 */
|
||||||
|
display: block; /* 1 */
|
||||||
|
height: 1rem; /* 1 */
|
||||||
|
overflow: hidden; /* 1 */
|
||||||
|
padding: 0; /* 1 */
|
||||||
|
width: 100%; /* 1 */
|
||||||
|
background: #fff; /* 2 */
|
||||||
|
color: #111; /* 2 */
|
||||||
|
border: .2rem solid #111; /* 2 */
|
||||||
|
border-radius: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the background color of the webkit progress bar.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress::-webkit-progress-bar {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the color of the webkit progress bar.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress::-webkit-progress-value {
|
||||||
|
background-color: #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the color of the mozilla progress bar.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress::-moz-progress-bar {
|
||||||
|
background-color: #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Set the border for the horizontal rule.
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
border: .1rem solid #111;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Invert the colors if the user has dark mode activated.
|
||||||
|
*/
|
||||||
|
|
||||||
|
@media (prefers-color-scheme: dark) {
|
||||||
|
body {
|
||||||
|
background: #111;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
a,
|
||||||
|
input::placeholder,
|
||||||
|
textarea::placeholder {
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
button,
|
||||||
|
input[type="button"],
|
||||||
|
input[type="reset"],
|
||||||
|
input[type="submit"],
|
||||||
|
input[type="email"],
|
||||||
|
input[type="number"],
|
||||||
|
input[type="password"],
|
||||||
|
input[type="search"],
|
||||||
|
input[type="tel"],
|
||||||
|
input[type="text"],
|
||||||
|
input[type="url"],
|
||||||
|
textarea,
|
||||||
|
select,
|
||||||
|
progress {
|
||||||
|
background: #111;
|
||||||
|
color: #fff;
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
button:disabled,
|
||||||
|
input[type="button"]:disabled,
|
||||||
|
input[type="reset"]:disabled,
|
||||||
|
input[type="submit"]:disabled{
|
||||||
|
color: #111;
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
fieldset {
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
td,
|
||||||
|
th,
|
||||||
|
blockquote,
|
||||||
|
pre,
|
||||||
|
hr {
|
||||||
|
border-color: #fff;
|
||||||
|
}
|
||||||
|
progress::-webkit-progress-bar {
|
||||||
|
background-color: #111;
|
||||||
|
}
|
||||||
|
progress::-webkit-progress-value {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
progress::-moz-progress-bar {
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -1,432 +0,0 @@
|
|||||||
:root {
|
|
||||||
--nc-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
|
|
||||||
--nc-font-mono: Consolas, monaco, 'Ubuntu Mono', 'Liberation Mono', 'Courier New', Courier, monospace;
|
|
||||||
--nc-tx-1: #000000;
|
|
||||||
--nc-tx-2: #1A1A1A;
|
|
||||||
--nc-bg-1: #FFFFFF;
|
|
||||||
--nc-bg-2: #F6F8FA;
|
|
||||||
--nc-bg-3: #E5E7EB;
|
|
||||||
--nc-lk-1: #0070F3;
|
|
||||||
--nc-lk-2: #0366D6;
|
|
||||||
--nc-lk-tx: #FFFFFF;
|
|
||||||
--nc-ac-1: #79FFE1;
|
|
||||||
--nc-ac-tx: #0C4047;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
|
||||||
:root {
|
|
||||||
--nc-tx-1: #ffffff;
|
|
||||||
--nc-tx-2: #eeeeee;
|
|
||||||
--nc-bg-1: #000000;
|
|
||||||
--nc-bg-2: #111111;
|
|
||||||
--nc-bg-3: #222222;
|
|
||||||
--nc-lk-1: #3291FF;
|
|
||||||
--nc-lk-2: #0070F3;
|
|
||||||
--nc-lk-tx: #FFFFFF;
|
|
||||||
--nc-ac-1: #7928CA;
|
|
||||||
--nc-ac-tx: #FFFFFF;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
* {
|
|
||||||
/* Reset margins and padding */
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
address,
|
|
||||||
area,
|
|
||||||
article,
|
|
||||||
aside,
|
|
||||||
audio,
|
|
||||||
blockquote,
|
|
||||||
datalist,
|
|
||||||
details,
|
|
||||||
dl,
|
|
||||||
fieldset,
|
|
||||||
figure,
|
|
||||||
form,
|
|
||||||
input,
|
|
||||||
iframe,
|
|
||||||
img,
|
|
||||||
meter,
|
|
||||||
nav,
|
|
||||||
ol,
|
|
||||||
optgroup,
|
|
||||||
option,
|
|
||||||
output,
|
|
||||||
p,
|
|
||||||
pre,
|
|
||||||
progress,
|
|
||||||
ruby,
|
|
||||||
section,
|
|
||||||
table,
|
|
||||||
textarea,
|
|
||||||
ul,
|
|
||||||
video {
|
|
||||||
/* Margins for most elements */
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
html,input,select,button {
|
|
||||||
/* Set body font family and some finicky elements */
|
|
||||||
font-family: var(--nc-font-sans);
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
/* Center body in page */
|
|
||||||
margin: 0 auto;
|
|
||||||
max-width: 750px;
|
|
||||||
padding: 2rem;
|
|
||||||
border-radius: 6px;
|
|
||||||
overflow-x: hidden;
|
|
||||||
word-break: break-word;
|
|
||||||
overflow-wrap: break-word;
|
|
||||||
background: var(--nc-bg-1);
|
|
||||||
|
|
||||||
/* Main body text */
|
|
||||||
color: var(--nc-tx-2);
|
|
||||||
font-size: 1.03rem;
|
|
||||||
line-height: 1.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
::selection {
|
|
||||||
/* Set background color for selected text */
|
|
||||||
background: var(--nc-ac-1);
|
|
||||||
color: var(--nc-ac-tx);
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,h2,h3,h4,h5,h6 {
|
|
||||||
line-height: 1;
|
|
||||||
color: var(--nc-tx-1);
|
|
||||||
padding-top: .875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1,
|
|
||||||
h2,
|
|
||||||
h3 {
|
|
||||||
color: var(--nc-tx-1);
|
|
||||||
padding-bottom: 2px;
|
|
||||||
margin-bottom: 8px;
|
|
||||||
border-bottom: 1px solid var(--nc-bg-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
h4,
|
|
||||||
h5,
|
|
||||||
h6 {
|
|
||||||
margin-bottom: .3rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 2.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
font-size: 1.85rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.55rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h5 {
|
|
||||||
font-size: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
h6 {
|
|
||||||
font-size: .875rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
color: var(--nc-lk-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
color: var(--nc-lk-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
abbr:hover {
|
|
||||||
/* Set the '?' cursor while hovering an abbreviation */
|
|
||||||
cursor: help;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote {
|
|
||||||
padding: 1.5rem;
|
|
||||||
background: var(--nc-bg-2);
|
|
||||||
border-left: 5px solid var(--nc-bg-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
abbr {
|
|
||||||
cursor: help;
|
|
||||||
}
|
|
||||||
|
|
||||||
blockquote *:last-child {
|
|
||||||
padding-bottom: 0;
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
header {
|
|
||||||
background: var(--nc-bg-2);
|
|
||||||
border-bottom: 1px solid var(--nc-bg-3);
|
|
||||||
padding: 2rem 1.5rem;
|
|
||||||
|
|
||||||
/* This sets the right and left margins to cancel out the body's margins. It's width is still the same, but the background stretches across the page's width. */
|
|
||||||
|
|
||||||
margin: -2rem calc(0px - (50vw - 50%)) 2rem;
|
|
||||||
|
|
||||||
/* Shorthand for:
|
|
||||||
|
|
||||||
margin-top: -2rem;
|
|
||||||
margin-bottom: 2rem;
|
|
||||||
|
|
||||||
margin-left: calc(0px - (50vw - 50%));
|
|
||||||
margin-right: calc(0px - (50vw - 50%)); */
|
|
||||||
|
|
||||||
padding-left: calc(50vw - 50%);
|
|
||||||
padding-right: calc(50vw - 50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
header h1,
|
|
||||||
header h2,
|
|
||||||
header h3 {
|
|
||||||
padding-bottom: 0;
|
|
||||||
border-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
header > *:first-child {
|
|
||||||
margin-top: 0;
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
header > *:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a button,
|
|
||||||
button,
|
|
||||||
input[type="submit"],
|
|
||||||
input[type="reset"],
|
|
||||||
input[type="button"] {
|
|
||||||
font-size: 1rem;
|
|
||||||
display: inline-block;
|
|
||||||
padding: 6px 12px;
|
|
||||||
text-align: center;
|
|
||||||
text-decoration: none;
|
|
||||||
white-space: nowrap;
|
|
||||||
background: var(--nc-lk-1);
|
|
||||||
color: var(--nc-lk-tx);
|
|
||||||
border: 0;
|
|
||||||
border-radius: 4px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--nc-lk-tx);
|
|
||||||
}
|
|
||||||
|
|
||||||
a button[disabled],
|
|
||||||
button[disabled],
|
|
||||||
input[type="submit"][disabled],
|
|
||||||
input[type="reset"][disabled],
|
|
||||||
input[type="button"][disabled] {
|
|
||||||
cursor: default;
|
|
||||||
opacity: .5;
|
|
||||||
|
|
||||||
/* Set the [X] cursor while hovering a disabled link */
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.button:focus,
|
|
||||||
.button:hover,
|
|
||||||
button:focus,
|
|
||||||
button:hover,
|
|
||||||
input[type="submit"]:focus,
|
|
||||||
input[type="submit"]:hover,
|
|
||||||
input[type="reset"]:focus,
|
|
||||||
input[type="reset"]:hover,
|
|
||||||
input[type="button"]:focus,
|
|
||||||
input[type="button"]:hover {
|
|
||||||
background: var(--nc-lk-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
code,
|
|
||||||
pre,
|
|
||||||
kbd,
|
|
||||||
samp {
|
|
||||||
/* Set the font family for monospaced elements */
|
|
||||||
font-family: var(--nc-font-mono);
|
|
||||||
}
|
|
||||||
|
|
||||||
code,
|
|
||||||
samp,
|
|
||||||
kbd,
|
|
||||||
pre {
|
|
||||||
/* The main preformatted style. This is changed slightly across different cases. */
|
|
||||||
background: var(--nc-bg-2);
|
|
||||||
border: 1px solid var(--nc-bg-3);
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 3px 6px;
|
|
||||||
font-size: 0.9rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
kbd {
|
|
||||||
/* Makes the kbd element look like a keyboard key */
|
|
||||||
border-bottom: 3px solid var(--nc-bg-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
pre {
|
|
||||||
padding: 1rem 1.4rem;
|
|
||||||
max-width: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
pre code {
|
|
||||||
/* When <code> is in a <pre>, reset it's formatting to blend in */
|
|
||||||
background: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
color: inherit;
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
code pre {
|
|
||||||
/* When <pre> is in a <code>, reset it's formatting to blend in */
|
|
||||||
display: inline;
|
|
||||||
background: inherit;
|
|
||||||
font-size: inherit;
|
|
||||||
color: inherit;
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
details {
|
|
||||||
/* Make the <details> look more "clickable" */
|
|
||||||
padding: .6rem 1rem;
|
|
||||||
background: var(--nc-bg-2);
|
|
||||||
border: 1px solid var(--nc-bg-3);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
summary {
|
|
||||||
/* Makes the <summary> look more like a "clickable" link with the pointer cursor */
|
|
||||||
cursor: pointer;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
details[open] {
|
|
||||||
/* Adjust the <details> padding while open */
|
|
||||||
padding-bottom: .75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
details[open] summary {
|
|
||||||
/* Adjust the <details> padding while open */
|
|
||||||
margin-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
details[open]>*:last-child {
|
|
||||||
/* Resets the bottom margin of the last element in the <details> while <details> is opened. This prevents double margins/paddings. */
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
dt {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
dd::before {
|
|
||||||
/* Add an arrow to data table definitions */
|
|
||||||
content: '→ ';
|
|
||||||
}
|
|
||||||
|
|
||||||
hr {
|
|
||||||
/* Reset the border of the <hr> separator, then set a better line */
|
|
||||||
border: 0;
|
|
||||||
border-bottom: 1px solid var(--nc-bg-3);
|
|
||||||
margin: 1rem auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
fieldset {
|
|
||||||
margin-top: 1rem;
|
|
||||||
padding: 2rem;
|
|
||||||
border: 1px solid var(--nc-bg-3);
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
legend {
|
|
||||||
padding: auto .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
/* border-collapse sets the table's elements to share borders, rather than floating as separate "boxes". */
|
|
||||||
border-collapse: collapse;
|
|
||||||
width: 100%
|
|
||||||
}
|
|
||||||
|
|
||||||
td,
|
|
||||||
th {
|
|
||||||
border: 1px solid var(--nc-bg-3);
|
|
||||||
text-align: left;
|
|
||||||
padding: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
background: var(--nc-bg-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
tr:nth-child(even) {
|
|
||||||
/* Set every other cell slightly darker. Improves readability. */
|
|
||||||
background: var(--nc-bg-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
table caption {
|
|
||||||
font-weight: bold;
|
|
||||||
margin-bottom: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea {
|
|
||||||
/* Don't let the <textarea> extend off the screen naturally or when dragged by the user */
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
ol,
|
|
||||||
ul {
|
|
||||||
/* Replace the browser default padding */
|
|
||||||
padding-left: 2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
margin-top: .4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul ul,
|
|
||||||
ol ul,
|
|
||||||
ul ol,
|
|
||||||
ol ol {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
mark {
|
|
||||||
padding: 3px 6px;
|
|
||||||
background: var(--nc-ac-1);
|
|
||||||
color: var(--nc-ac-tx);
|
|
||||||
}
|
|
||||||
|
|
||||||
textarea,
|
|
||||||
select,
|
|
||||||
input {
|
|
||||||
padding: 6px 12px;
|
|
||||||
margin-bottom: .5rem;
|
|
||||||
background: var(--nc-bg-2);
|
|
||||||
color: var(--nc-tx-2);
|
|
||||||
border: 1px solid var(--nc-bg-3);
|
|
||||||
border-radius: 4px;
|
|
||||||
box-shadow: none;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
max-width: 100%;
|
|
||||||
}
|
|
||||||
349
src/service/http_tpl/static/normalize.css
vendored
Normal file
349
src/service/http_tpl/static/normalize.css
vendored
Normal file
@ -0,0 +1,349 @@
|
|||||||
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
||||||
|
|
||||||
|
/* Document
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the line height in all browsers.
|
||||||
|
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
html {
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
-webkit-text-size-adjust: 100%; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Sections
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the margin in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Render the `main` element consistently in IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
main {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the font size and margin on `h1` elements within `section` and
|
||||||
|
* `article` contexts in Chrome, Firefox, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 2em;
|
||||||
|
margin: 0.67em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grouping content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in Firefox.
|
||||||
|
* 2. Show the overflow in Edge and IE.
|
||||||
|
*/
|
||||||
|
|
||||||
|
hr {
|
||||||
|
box-sizing: content-box; /* 1 */
|
||||||
|
height: 0; /* 1 */
|
||||||
|
overflow: visible; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
pre {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text-level semantics
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the gray background on active links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
a {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Remove the bottom border in Chrome 57-
|
||||||
|
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
abbr[title] {
|
||||||
|
border-bottom: none; /* 1 */
|
||||||
|
text-decoration: underline; /* 2 */
|
||||||
|
text-decoration: underline dotted; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font weight in Chrome, Edge, and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
b,
|
||||||
|
strong {
|
||||||
|
font-weight: bolder;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
||||||
|
* 2. Correct the odd `em` font sizing in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
samp {
|
||||||
|
font-family: monospace, monospace; /* 1 */
|
||||||
|
font-size: 1em; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct font size in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
small {
|
||||||
|
font-size: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Prevent `sub` and `sup` elements from affecting the line height in
|
||||||
|
* all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
sub,
|
||||||
|
sup {
|
||||||
|
font-size: 75%;
|
||||||
|
line-height: 0;
|
||||||
|
position: relative;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
sub {
|
||||||
|
bottom: -0.25em;
|
||||||
|
}
|
||||||
|
|
||||||
|
sup {
|
||||||
|
top: -0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Embedded content
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the border on images inside links in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
img {
|
||||||
|
border-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Forms
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Change the font styles in all browsers.
|
||||||
|
* 2. Remove the margin in Firefox and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
optgroup,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-family: inherit; /* 1 */
|
||||||
|
font-size: 100%; /* 1 */
|
||||||
|
line-height: 1.15; /* 1 */
|
||||||
|
margin: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Show the overflow in IE.
|
||||||
|
* 1. Show the overflow in Edge.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
input { /* 1 */
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
||||||
|
* 1. Remove the inheritance of text transform in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
select { /* 1 */
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button,
|
||||||
|
[type="button"],
|
||||||
|
[type="reset"],
|
||||||
|
[type="submit"] {
|
||||||
|
-webkit-appearance: button;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner border and padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button::-moz-focus-inner,
|
||||||
|
[type="button"]::-moz-focus-inner,
|
||||||
|
[type="reset"]::-moz-focus-inner,
|
||||||
|
[type="submit"]::-moz-focus-inner {
|
||||||
|
border-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Restore the focus styles unset by the previous rule.
|
||||||
|
*/
|
||||||
|
|
||||||
|
button:-moz-focusring,
|
||||||
|
[type="button"]:-moz-focusring,
|
||||||
|
[type="reset"]:-moz-focusring,
|
||||||
|
[type="submit"]:-moz-focusring {
|
||||||
|
outline: 1px dotted ButtonText;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the padding in Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
fieldset {
|
||||||
|
padding: 0.35em 0.75em 0.625em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the text wrapping in Edge and IE.
|
||||||
|
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
||||||
|
* 3. Remove the padding so developers are not caught out when they zero out
|
||||||
|
* `fieldset` elements in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
legend {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
color: inherit; /* 2 */
|
||||||
|
display: table; /* 1 */
|
||||||
|
max-width: 100%; /* 1 */
|
||||||
|
padding: 0; /* 3 */
|
||||||
|
white-space: normal; /* 1 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
||||||
|
*/
|
||||||
|
|
||||||
|
progress {
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the default vertical scrollbar in IE 10+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Add the correct box sizing in IE 10.
|
||||||
|
* 2. Remove the padding in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="checkbox"],
|
||||||
|
[type="radio"] {
|
||||||
|
box-sizing: border-box; /* 1 */
|
||||||
|
padding: 0; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Correct the cursor style of increment and decrement buttons in Chrome.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="number"]::-webkit-inner-spin-button,
|
||||||
|
[type="number"]::-webkit-outer-spin-button {
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the odd appearance in Chrome and Safari.
|
||||||
|
* 2. Correct the outline style in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"] {
|
||||||
|
-webkit-appearance: textfield; /* 1 */
|
||||||
|
outline-offset: -2px; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Remove the inner padding in Chrome and Safari on macOS.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[type="search"]::-webkit-search-decoration {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 1. Correct the inability to style clickable types in iOS and Safari.
|
||||||
|
* 2. Change font properties to `inherit` in Safari.
|
||||||
|
*/
|
||||||
|
|
||||||
|
::-webkit-file-upload-button {
|
||||||
|
-webkit-appearance: button; /* 1 */
|
||||||
|
font: inherit; /* 2 */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Interactive
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in Edge, IE 10+, and Firefox.
|
||||||
|
*/
|
||||||
|
|
||||||
|
details {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*
|
||||||
|
* Add the correct display in all browsers.
|
||||||
|
*/
|
||||||
|
|
||||||
|
summary {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Misc
|
||||||
|
========================================================================== */
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10+.
|
||||||
|
*/
|
||||||
|
|
||||||
|
template {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Add the correct display in IE 10.
|
||||||
|
*/
|
||||||
|
|
||||||
|
[hidden] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user