fix(front): 🐛 wrapping repo infos
This commit is contained in:
34
index.html
34
index.html
@@ -40,22 +40,25 @@
|
||||
<input type="color" id="bg-color" name="bg-color">
|
||||
</div>
|
||||
|
||||
<input class="txt-input span-all" type="url" name="repo-url" id="repo-url" placeholder="Repository url">
|
||||
<div class="list-of-items">
|
||||
<label for="show-info">Show info:</label>
|
||||
<div class="center-txt-vertically">
|
||||
<input type="checkbox" id="issues" value="issues" name="show-info">
|
||||
<label for="issues">Issues</label><br>
|
||||
<div class="repo-wrapper">
|
||||
<label for="repo-url">Repo-Info</label>
|
||||
<input class="txt-input span-all" type="url" name="repo-url" id="repo-url" placeholder="Repository url">
|
||||
<div class="list-of-items">
|
||||
<label for="show-info">Show info:</label>
|
||||
<div class="center-txt-vertically">
|
||||
<input type="checkbox" id="issues" value="issues" name="show-info">
|
||||
<label for="issues">Issues</label><br>
|
||||
</div>
|
||||
<div class="center-txt-vertically">
|
||||
<input type="checkbox" id="prs" value="prs" name="show-info">
|
||||
<label for="prs">Pull requests</label><br>
|
||||
</div>
|
||||
<div class="center-txt-vertically">
|
||||
<input type="checkbox" id="contributors" value="contributors" name="show-info">
|
||||
<label for="contributors">Contributors</label><br>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="center-txt-vertically">
|
||||
<input type="checkbox" id="prs" value="prs" name="show-info">
|
||||
<label for="prs">Pull requests</label><br>
|
||||
</div>
|
||||
<div class="center-txt-vertically">
|
||||
<input type="checkbox" id="contributors" value="contributors" name="show-info">
|
||||
<label for="contributors">Contributors</label><br>
|
||||
</div>
|
||||
<br>
|
||||
</div>
|
||||
<div class="list-of-items">
|
||||
<label for="deco">Event decoration:</label>
|
||||
@@ -75,7 +78,6 @@
|
||||
<input type="radio" id="pride" value="pride" name="deco">
|
||||
<label for="pride">Pride month</label><br>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
@@ -44,8 +44,9 @@ body {
|
||||
/* background-color: var(--options-bgc); */
|
||||
color: white;
|
||||
padding: 70px;
|
||||
/* overflow: auto;
|
||||
*/}
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
input::placeholder {
|
||||
color: var(--dark-txt-color);
|
||||
@@ -55,6 +56,7 @@ input::placeholder {
|
||||
label {
|
||||
color: var(--dark-txt-color);
|
||||
font-size: 1.5rem;
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
h1 {
|
||||
@@ -98,11 +100,6 @@ input:focus, select:focus, .style-layout > input[type="color"]:focus {
|
||||
color: var(--dark-txt-color);
|
||||
}
|
||||
|
||||
|
||||
option {
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
input[type="radio"], input[type="checkbox"] {
|
||||
-webkit-appearance: none;
|
||||
appearance: none;
|
||||
@@ -116,8 +113,6 @@ input[type="radio"], input[type="checkbox"] {
|
||||
|
||||
}
|
||||
|
||||
/*checkbox*/
|
||||
|
||||
input[type="radio"]:focus, input[type="checkbox"]:focus {
|
||||
border-style: none;
|
||||
box-shadow: none;
|
||||
@@ -134,10 +129,6 @@ input[type="radio"]:not(:checked), input[type="checkbox"]:not(:checked) {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
label {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.center-txt-vertically {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -159,7 +150,7 @@ label {
|
||||
align-self: center;
|
||||
}
|
||||
|
||||
.style-layout {
|
||||
.style-layout, .repo-wrapper {
|
||||
display: grid;
|
||||
gap: 15px;
|
||||
}
|
||||
@@ -188,4 +179,16 @@ label {
|
||||
background-color: var(--options-bgc);
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.repo-wrapper {
|
||||
border: solid 1px var(--dark-txt-color);
|
||||
border-radius: 6px;
|
||||
padding: 1rem;
|
||||
width: 20rem;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.repo-wrapper > input {
|
||||
width: 100%;
|
||||
}
|
||||
Reference in New Issue
Block a user