Better style for zoom text radio button

This commit is contained in:
Adële 2021-04-21 17:58:27 +02:00
parent e10c0e5679
commit c926084ab5
2 changed files with 18 additions and 21 deletions

View File

@ -366,7 +366,7 @@ function gmi2html($capsule, $body, $lang, $urlgem, $favicon)
'.@file_get_contents(__DIR__.'/style.css').'
</style>
</head>
<body>';
<body id="top">';
if(count($tocs)>1)
{
$html.= '<div class="toc" role="navigation">
@ -377,10 +377,13 @@ function gmi2html($capsule, $body, $lang, $urlgem, $favicon)
</div>';
}
$html.= '
<label class="control">🔍 </label>
<input type="radio" name="check-size" class="control check-small" />
<input type="radio" name="check-size" class="control check-normal" checked="checked" />
<input type="radio" name="check-size" class="control check-big" />
<label class="control" for="check-smaller">🔍 -</label>
<input type="radio" name="check-size" id="check-smaller" class="control check-smaller" />
<input type="radio" name="check-size" id="check-small" class="control check-small" />
<input type="radio" name="check-size" id="check-normal" class="control check-normal" checked="checked" />
<input type="radio" name="check-size" id="check-big" class="control check-big" />
<input type="radio" name="check-size" id="check-bigger" class="control check-bigger" />
<label class="control" for="check-bigger">+</label>
<div class="main" role="article">
'.implode("\n",$lines).'
</div>

View File

@ -62,29 +62,23 @@ div.toc .l3 {
list-style-type: disc;
}
.control {
float: left;
margin: 4px;
float: left;
margin: 4px;
}
.check-small {
width: 16px;
height: 16px;
}
.check-normal {
width: 20px;
height: 20px;
}
.check-big {
width: 24px;
height: 24px;
.check-bigger:checked ~ .main {
font-size: 150%;
}
.check-big:checked ~ .main {
font-size: 150%;
font-size: 120%;
}
.check-normal:checked ~ .main {
font-size: 100%;
font-size: 100%;
}
.check-small:checked ~ .main {
font-size: 70%;
font-size: 80%;
}
.check-smaller:checked ~ .main {
font-size: 50%;
}
div.inline-img img {
max-width: 100%;