Gemini
/
ergol-http
mirror of https://codeberg.org/rdelaage/ergol-http.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
index.php
View File

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

26
style.css
View File

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