mirror of
https://git.wownero.com/wownero/onion-wownero-blockchain-explorer.git
synced 2024-08-15 00:33:12 +00:00
reoragnization of css styles started
This commit is contained in:
parent
922f6c02c2
commit
df2a86ca91
5 changed files with 153 additions and 348 deletions
35
src/page.h
35
src/page.h
|
@ -27,6 +27,7 @@
|
||||||
|
|
||||||
#define TMPL_DIR "./templates"
|
#define TMPL_DIR "./templates"
|
||||||
#define TMPL_PARIALS_DIR TMPL_DIR "/partials"
|
#define TMPL_PARIALS_DIR TMPL_DIR "/partials"
|
||||||
|
#define TMPL_CSS_STYLES TMPL_DIR "/css/style.css"
|
||||||
#define TMPL_INDEX TMPL_DIR "/index.html"
|
#define TMPL_INDEX TMPL_DIR "/index.html"
|
||||||
#define TMPL_INDEX2 TMPL_DIR "/index2.html"
|
#define TMPL_INDEX2 TMPL_DIR "/index2.html"
|
||||||
#define TMPL_MEMPOOL TMPL_DIR "/mempool.html"
|
#define TMPL_MEMPOOL TMPL_DIR "/mempool.html"
|
||||||
|
@ -242,6 +243,8 @@ namespace xmreg {
|
||||||
|
|
||||||
string lmdb2_path;
|
string lmdb2_path;
|
||||||
|
|
||||||
|
string css_styles;
|
||||||
|
|
||||||
bool testnet;
|
bool testnet;
|
||||||
|
|
||||||
|
|
||||||
|
@ -256,7 +259,7 @@ namespace xmreg {
|
||||||
lmdb2_path {_lmdb2_path},
|
lmdb2_path {_lmdb2_path},
|
||||||
testnet {_testnet}
|
testnet {_testnet}
|
||||||
{
|
{
|
||||||
|
css_styles = xmreg::read(TMPL_CSS_STYLES);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@ -447,6 +450,8 @@ namespace xmreg {
|
||||||
// add header and footer
|
// add header and footer
|
||||||
string full_page = get_full_page(index_html);
|
string full_page = get_full_page(index_html);
|
||||||
|
|
||||||
|
context["css_styles"] = this->css_styles;
|
||||||
|
|
||||||
// render the page
|
// render the page
|
||||||
return mstch::render(full_page, context);
|
return mstch::render(full_page, context);
|
||||||
}
|
}
|
||||||
|
@ -612,6 +617,8 @@ namespace xmreg {
|
||||||
// add header and footer
|
// add header and footer
|
||||||
string full_page = get_full_page(index2_html);
|
string full_page = get_full_page(index2_html);
|
||||||
|
|
||||||
|
add_css_style(context);
|
||||||
|
|
||||||
// render the page
|
// render the page
|
||||||
return mstch::render(full_page, context);
|
return mstch::render(full_page, context);
|
||||||
|
|
||||||
|
@ -865,6 +872,8 @@ namespace xmreg {
|
||||||
// read block.html
|
// read block.html
|
||||||
string block_html = xmreg::read(TMPL_BLOCK);
|
string block_html = xmreg::read(TMPL_BLOCK);
|
||||||
|
|
||||||
|
context["css_styles"] = this->css_styles;
|
||||||
|
|
||||||
// add header and footer
|
// add header and footer
|
||||||
string full_page = get_full_page(block_html);
|
string full_page = get_full_page(block_html);
|
||||||
|
|
||||||
|
@ -972,6 +981,8 @@ namespace xmreg {
|
||||||
// read tx.html
|
// read tx.html
|
||||||
string tx_html = xmreg::read(TMPL_TX);
|
string tx_html = xmreg::read(TMPL_TX);
|
||||||
|
|
||||||
|
context["css_styles"] = this->css_styles;
|
||||||
|
|
||||||
// add header and footer
|
// add header and footer
|
||||||
string full_page = get_full_page(tx_html);
|
string full_page = get_full_page(tx_html);
|
||||||
|
|
||||||
|
@ -1243,6 +1254,8 @@ namespace xmreg {
|
||||||
// add header and footer
|
// add header and footer
|
||||||
string full_page = get_full_page(my_outputs_html);
|
string full_page = get_full_page(my_outputs_html);
|
||||||
|
|
||||||
|
context["css_styles"] = this->css_styles;
|
||||||
|
|
||||||
// render the page
|
// render the page
|
||||||
return mstch::render(full_page, context);
|
return mstch::render(full_page, context);
|
||||||
}
|
}
|
||||||
|
@ -1270,6 +1283,8 @@ namespace xmreg {
|
||||||
// add header and footer
|
// add header and footer
|
||||||
string full_page = rawtx_html + xmreg::read(TMPL_FOOTER);
|
string full_page = rawtx_html + xmreg::read(TMPL_FOOTER);
|
||||||
|
|
||||||
|
context["css_styles"] = this->css_styles;
|
||||||
|
|
||||||
// render the page
|
// render the page
|
||||||
return mstch::render(full_page, context);
|
return mstch::render(full_page, context);
|
||||||
}
|
}
|
||||||
|
@ -1732,6 +1747,8 @@ namespace xmreg {
|
||||||
// add header and footer
|
// add header and footer
|
||||||
string full_page = checkrawtx_html + xmreg::read(TMPL_FOOTER);
|
string full_page = checkrawtx_html + xmreg::read(TMPL_FOOTER);
|
||||||
|
|
||||||
|
context["css_styles"] = this->css_styles;
|
||||||
|
|
||||||
// render the page
|
// render the page
|
||||||
return mstch::render(full_page, context, partials);
|
return mstch::render(full_page, context, partials);
|
||||||
}
|
}
|
||||||
|
@ -2224,6 +2241,8 @@ namespace xmreg {
|
||||||
// add header and footer
|
// add header and footer
|
||||||
string full_page = get_full_page(address_html);
|
string full_page = get_full_page(address_html);
|
||||||
|
|
||||||
|
context["css_styles"] = this->css_styles;
|
||||||
|
|
||||||
// render the page
|
// render the page
|
||||||
return mstch::render(full_page, context);
|
return mstch::render(full_page, context);
|
||||||
}
|
}
|
||||||
|
@ -2252,6 +2271,8 @@ namespace xmreg {
|
||||||
// read address.html
|
// read address.html
|
||||||
string address_html = xmreg::read(TMPL_ADDRESS);
|
string address_html = xmreg::read(TMPL_ADDRESS);
|
||||||
|
|
||||||
|
context["css_styles"] = this->css_styles;
|
||||||
|
|
||||||
// add header and footer
|
// add header and footer
|
||||||
string full_page = get_full_page(address_html);
|
string full_page = get_full_page(address_html);
|
||||||
|
|
||||||
|
@ -2469,6 +2490,8 @@ namespace xmreg {
|
||||||
{"tx_table_row" , xmreg::read(string(TMPL_PARIALS_DIR) + "/tx_table_row.html")}
|
{"tx_table_row" , xmreg::read(string(TMPL_PARIALS_DIR) + "/tx_table_row.html")}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
context["css_styles"] = this->css_styles;
|
||||||
|
|
||||||
// render the page
|
// render the page
|
||||||
return mstch::render(full_page, context, partials);
|
return mstch::render(full_page, context, partials);
|
||||||
}
|
}
|
||||||
|
@ -3196,6 +3219,16 @@ namespace xmreg {
|
||||||
+ xmreg::read(TMPL_FOOTER);
|
+ xmreg::read(TMPL_FOOTER);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
void
|
||||||
|
add_css_style(mstch::map& context)
|
||||||
|
{
|
||||||
|
context["css_styles"] = this->css_styles;
|
||||||
|
context["unrendered"] = mstch::lambda{[&](const std::string& text) -> mstch::node {
|
||||||
|
return text;
|
||||||
|
}};
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -9,121 +9,7 @@
|
||||||
<title>Onion Monero Blockchain Explorer</title>
|
<title>Onion Monero Blockchain Explorer</title>
|
||||||
<!--<link rel="stylesheet" type="text/css" href="/css/style.css">-->
|
<!--<link rel="stylesheet" type="text/css" href="/css/style.css">-->
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
body {
|
{{css_styles}}
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
color: white;
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
|
||||||
margin: auto;
|
|
||||||
width: 96%;
|
|
||||||
/*border: 1px solid #73AD21;
|
|
||||||
padding: 10px;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
tr, li, #pages {
|
|
||||||
font-family: "Lucida Console", Monaco, monospace;
|
|
||||||
font-size : 12px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pages
|
|
||||||
{
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:link {
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:visited {
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:active {
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
form {
|
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.style-1 input[type="text"] {
|
|
||||||
padding: 2px;
|
|
||||||
border: solid 1px #dcdcdc;
|
|
||||||
transition: box-shadow 0.3s, border 0.3s;
|
|
||||||
}
|
|
||||||
.style-1 input[type="text"]:focus,
|
|
||||||
.style-1 input[type="text"].focus {
|
|
||||||
border: solid 1px #707070;
|
|
||||||
box-shadow: 0 0 5px 1px #969696;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.tabs {
|
|
||||||
position: relative;
|
|
||||||
min-height: 200px; /* This part sucks */
|
|
||||||
clear: both;
|
|
||||||
margin: 25px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab label {
|
|
||||||
background: black;
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
margin-left: -1px;
|
|
||||||
position: relative;
|
|
||||||
left: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab [type=radio] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
position: absolute;
|
|
||||||
top: 28px;
|
|
||||||
left: 0;
|
|
||||||
background: black;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
padding: 20px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
[type=radio]:checked ~ label {
|
|
||||||
background: #505050 ;
|
|
||||||
border-bottom: 1px solid white;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
[type=radio]:checked ~ label ~ .content {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
114
src/templates/css/style.css
Normal file
114
src/templates/css/style.css
Normal file
|
@ -0,0 +1,114 @@
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
color: white;
|
||||||
|
background-color: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.center {
|
||||||
|
margin: auto;
|
||||||
|
width: 96%;
|
||||||
|
/*border: 1px solid #73AD21;
|
||||||
|
padding: 10px;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
tr, li, #pages {
|
||||||
|
font-family: "Lucida Console", Monaco, monospace;
|
||||||
|
font-size : 12px;
|
||||||
|
height: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#pages
|
||||||
|
{
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
td {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:link {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:visited {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:active {
|
||||||
|
text-decoration: none;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
form {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.style-1 input[type="text"] {
|
||||||
|
padding: 2px;
|
||||||
|
border: solid 1px #dcdcdc;
|
||||||
|
transition: box-shadow 0.3s, border 0.3s;
|
||||||
|
}
|
||||||
|
.style-1 input[type="text"]:focus,
|
||||||
|
.style-1 input[type="text"].focus {
|
||||||
|
border: solid 1px #707070;
|
||||||
|
box-shadow: 0 0 5px 1px #969696;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.tabs {
|
||||||
|
position: relative;
|
||||||
|
min-height: 200px; /* This part sucks */
|
||||||
|
clear: both;
|
||||||
|
margin: 25px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab label {
|
||||||
|
background: black;
|
||||||
|
padding: 10px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
margin-left: -1px;
|
||||||
|
position: relative;
|
||||||
|
left: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab [type=radio] {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
position: absolute;
|
||||||
|
top: 28px;
|
||||||
|
left: 0;
|
||||||
|
background: black;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
padding: 20px;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type=radio]:checked ~ label {
|
||||||
|
background: #505050 ;
|
||||||
|
border-bottom: 1px solid white;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
[type=radio]:checked ~ label ~ .content {
|
||||||
|
z-index: 1;
|
||||||
|
}
|
|
@ -9,123 +9,9 @@
|
||||||
<title>Onion Monero Blockchain Explorer</title>
|
<title>Onion Monero Blockchain Explorer</title>
|
||||||
<!--<link rel="stylesheet" type="text/css" href="/css/style.css">-->
|
<!--<link rel="stylesheet" type="text/css" href="/css/style.css">-->
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
body {
|
{{#unrendered}}
|
||||||
margin: 0;
|
{{css_styles}}
|
||||||
padding: 0;
|
{{/unrendered}}
|
||||||
color: white;
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
|
||||||
margin: auto;
|
|
||||||
width: 96%;
|
|
||||||
/*border: 1px solid #73AD21;
|
|
||||||
padding: 10px;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
tr, li, #pages {
|
|
||||||
font-family: "Lucida Console", Monaco, monospace;
|
|
||||||
font-size : 12px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pages
|
|
||||||
{
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:link {
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:visited {
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:active {
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
form {
|
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.style-1 input[type="text"] {
|
|
||||||
padding: 2px;
|
|
||||||
border: solid 1px #dcdcdc;
|
|
||||||
transition: box-shadow 0.3s, border 0.3s;
|
|
||||||
}
|
|
||||||
.style-1 input[type="text"]:focus,
|
|
||||||
.style-1 input[type="text"].focus {
|
|
||||||
border: solid 1px #707070;
|
|
||||||
box-shadow: 0 0 5px 1px #969696;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.tabs {
|
|
||||||
position: relative;
|
|
||||||
min-height: 200px; /* This part sucks */
|
|
||||||
clear: both;
|
|
||||||
margin: 25px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab label {
|
|
||||||
background: black;
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
margin-left: -1px;
|
|
||||||
position: relative;
|
|
||||||
left: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab [type=radio] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
position: absolute;
|
|
||||||
top: 28px;
|
|
||||||
left: 0;
|
|
||||||
background: black;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
padding: 20px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
[type=radio]:checked ~ label {
|
|
||||||
background: #505050 ;
|
|
||||||
border-bottom: 1px solid white;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
[type=radio]:checked ~ label ~ .content {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
|
@ -9,121 +9,7 @@
|
||||||
<title>Onion Monero Blockchain Explorer</title>
|
<title>Onion Monero Blockchain Explorer</title>
|
||||||
<!--<link rel="stylesheet" type="text/css" href="/css/style.css">-->
|
<!--<link rel="stylesheet" type="text/css" href="/css/style.css">-->
|
||||||
<style type="text/css">
|
<style type="text/css">
|
||||||
body {
|
{{css_styles}}
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
color: white;
|
|
||||||
background-color: black;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1, h2, h3, h4, h5, h6 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.center {
|
|
||||||
margin: auto;
|
|
||||||
width: 96%;
|
|
||||||
/*border: 1px solid #73AD21;
|
|
||||||
padding: 10px;*/
|
|
||||||
}
|
|
||||||
|
|
||||||
tr, li, #pages {
|
|
||||||
font-family: "Lucida Console", Monaco, monospace;
|
|
||||||
font-size : 12px;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#pages
|
|
||||||
{
|
|
||||||
margin-top: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:link {
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:visited {
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
text-decoration: underline;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:active {
|
|
||||||
text-decoration: none;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
|
|
||||||
form {
|
|
||||||
display: inline-block;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.style-1 input[type="text"] {
|
|
||||||
padding: 2px;
|
|
||||||
border: solid 1px #dcdcdc;
|
|
||||||
transition: box-shadow 0.3s, border 0.3s;
|
|
||||||
}
|
|
||||||
.style-1 input[type="text"]:focus,
|
|
||||||
.style-1 input[type="text"].focus {
|
|
||||||
border: solid 1px #707070;
|
|
||||||
box-shadow: 0 0 5px 1px #969696;
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
.tabs {
|
|
||||||
position: relative;
|
|
||||||
min-height: 200px; /* This part sucks */
|
|
||||||
clear: both;
|
|
||||||
margin: 25px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab {
|
|
||||||
float: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab label {
|
|
||||||
background: black;
|
|
||||||
padding: 10px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
margin-left: -1px;
|
|
||||||
position: relative;
|
|
||||||
left: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab [type=radio] {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
position: absolute;
|
|
||||||
top: 28px;
|
|
||||||
left: 0;
|
|
||||||
background: black;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
padding: 20px;
|
|
||||||
border: 1px solid #ccc;
|
|
||||||
}
|
|
||||||
|
|
||||||
[type=radio]:checked ~ label {
|
|
||||||
background: #505050 ;
|
|
||||||
border-bottom: 1px solid white;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
[type=radio]:checked ~ label ~ .content {
|
|
||||||
z-index: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue