blackbeard420/terminal.css
1
0
Fork 0
mirror of https://github.com/Gioni06/terminal.css synced 2025-03-09 09:09:04 -04:00
Code Issues Projects Releases Wiki Activity

fix smaller things

Browse Source
This commit is contained in:
Jonas Duri 2023-12-07 13:16:09 +01:00
parent a6444e767c
commit 4d16082d19
3 changed files with 125 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
lib/terminal.css
View File

@ -108,8 +108,6 @@ ul,
h1, h1,
.logo { .logo {
position: relative; position: relative;
display: inline-block;
display: table-cell;
padding: calc(var(--global-space) * 2) 0 calc(var(--global-space) * 2); padding: calc(var(--global-space) * 2) 0 calc(var(--global-space) * 2);
margin: 0; margin: 0;
overflow: hidden; overflow: hidden;
@ -142,7 +140,6 @@ h6 {
blockquote { blockquote {
position: relative; position: relative;
padding-left: calc(var(--global-space) * 2); padding-left: calc(var(--global-space) * 2);
padding-left: 2ch;
overflow: hidden; overflow: hidden;
} }
@ -499,8 +496,10 @@ table th {
font-size: 1em; font-size: 1em;
} }
table thead th { table thead tr th {
font-size: 1em; font-size: 1em;
vertical-align: middle;
font-weight: 700;
} }
table tfoot tr th { table tfoot tr th {
@ -512,11 +511,6 @@ table caption {
margin: 0 0 1em; margin: 0 0 1em;
} }
table tbody td:first-child {
font-weight: 700;
color: var(--secondary-color);
}
.form { .form {
width: 100%; width: 100%;
} }
@ -535,12 +529,20 @@ input[type="email"],
input[type="text"], input[type="text"],
input[type="number"], input[type="number"],
input[type="password"], input[type="password"],
input[type="search"] { input[type="search"],
input[type="date"],
input[type="time"] {
border: 1px var(--input-style) var(--font-color); border: 1px var(--input-style) var(--font-color);
width: 100%; width: 100%;
padding: 0.7em 0.5em; padding: 0.7em 0.5em;
font-size: 1em; font-size: 1em;
font-family: var(--font-stack); font-family: var(--font-stack);
/* stylelint-disable */
-webkit-appearance: none;
-moz-appearance: none;
/* stylelint-enable */
appearance: none; appearance: none;
border-radius: 0; border-radius: 0;
} }
@ -550,12 +552,22 @@ input[type="text"]:active,
input[type="number"]:active, input[type="number"]:active,
input[type="password"]:active, input[type="password"]:active,
input[type="search"]:active, input[type="search"]:active,
input[type="date"]:active,
input[type="time"]:active,
input[type="email"]:focus, input[type="email"]:focus,
input[type="text"]:focus, input[type="text"]:focus,
input[type="number"]:focus, input[type="number"]:focus,
input[type="password"]:focus, input[type="password"]:focus,
input[type="search"]:focus { input[type="search"]:focus,
input[type="date"]:focus,
input[type="time"]:focus {
outline: none; outline: none;
/* stylelint-disable */
-webkit-appearance: none;
-moz-appearance: none;
/* stylelint-enable */
appearance: none; appearance: none;
border: 1px solid var(--font-color); border: 1px solid var(--font-color);
} }
@ -564,7 +576,9 @@ input[type="text"]:not(:placeholder-shown):invalid,
input[type="email"]:not(:placeholder-shown):invalid, input[type="email"]:not(:placeholder-shown):invalid,
input[type="password"]:not(:placeholder-shown):invalid, input[type="password"]:not(:placeholder-shown):invalid,
input[type="search"]:not(:placeholder-shown):invalid, input[type="search"]:not(:placeholder-shown):invalid,
input[type="number"]:not(:placeholder-shown):invalid { input[type="number"]:not(:placeholder-shown):invalid,
input[type="date"]:not(:placeholder-shown):invalid,
input[type="time"]:not(:placeholder-shown):invalid {
border-color: var(--error-color); border-color: var(--error-color);
} }
@ -594,6 +608,12 @@ textarea {
textarea:focus { textarea:focus {
outline: none; outline: none;
/* stylelint-disable */
-webkit-appearance: none;
-moz-appearance: none;
/* stylelint-enable */
appearance: none; appearance: none;
border: 1px solid var(--font-color); border: 1px solid var(--font-color);
} }
@ -602,6 +622,26 @@ textarea:not(:placeholder-shown):invalid {
border-color: var(--error-color); border-color: var(--error-color);
} }
select {
border: 1px var(--input-style) var(--font-color);
width: 100%;
padding: .7em .5em;
font-size: 1em;
font-family: var(--font-stack);
color: var(--font-color);
border-radius: 0;
/* stylelint-disable */
-webkit-appearance: none;
-moz-appearance: none;
/* stylelint-enable */
background-color: var(--background-color);
background-image: url("data:image/svg+xml;utf8,<svg fill='currentColor' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
background-repeat: no-repeat;
background-position: right .5em bottom .5em;
}
input:-webkit-autofill, input:-webkit-autofill,
input:-webkit-autofill:hover, input:-webkit-autofill:hover,
input:-webkit-autofill:focus textarea:-webkit-autofill, input:-webkit-autofill:focus textarea:-webkit-autofill,
@ -813,7 +853,10 @@ select:-webkit-autofill:focus {
border-color: var(--primary-color); border-color: var(--primary-color);
} }
@media screen and (width <= 960px) { /* stylelint-disable */
@media screen and (min-width: 960px) {
/* stylelint-enable */
label { label {
display: block; display: block;
width: 100%; width: 100%;
@ -824,13 +867,17 @@ select:-webkit-autofill:focus {
} }
} }
@media screen and (width <= 480px) { /* stylelint-disable */
@media screen and (min-width: 480px) {
/* stylelint-enable */
form { form {
width: 100%; width: 100%;
} }
} }
@media only screen and (width >= 30em) { /* stylelint-disable */
@media screen and (min-width: 30rem) {
/* stylelint-enable */
.terminal-nav { .terminal-nav {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -844,8 +891,7 @@ select:-webkit-autofill:focus {
} }
.terminal-menu li { .terminal-menu li {
margin: 0; margin: 0 2em 0 0;
margin-right: 2em;
} }
.terminal-menu li:last-child { .terminal-menu li:last-child {

12
templates/partials/forms.html
View File

@ -35,8 +35,16 @@
</select> </select>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="tarea">Textarea:</label> <label for="event-date">Event date:</label>
<textarea id="tarea" cols="30" rows="5" name=="tarea">Textarea text</textarea> <input type="date" id="event-date" name="event-date">
</div>
<div class="form-group">
<label for="event-time">Event time:</label>
<input type="time" id="event-time" name="event-time">
</div>
<div class="form-group">
<label for="textarea">Textarea:</label>
<textarea id="textarea" cols="30" rows="5" name=="textarea">Textarea text</textarea>
</div> </div>
<div class="form-group"> <div class="form-group">
<label for="submit">Input Button:</label> <label for="submit">Input Button:</label>

124
templates/partials/tables.html
View File

@ -1,74 +1,54 @@
<section> <section>
<header> <header>
<h2 id="Tables">Tables</h2> <h2 id="Tables">Tables</h2>
</header> </header>
<table> <table>
<caption> <caption>
Most Downloaded Movies on BitTorrent, 2011 Traditional colors of Japan
</caption> </caption>
<thead> <tfoot>
<tr> <tr>
<th>Rank</th> <th colspan="5"><a href="https://en.wikipedia.org/wiki/Traditional_colors_of_Japan" target="_blank">Source: Wikipedia</a></th>
<th>Movie</th> </tr>
<th>Downloads</th> </tfoot>
</tr> <tbody>
</thead> <thead>
<tfoot> <tr>
<tr> <th>Japanese name</th>
<th colspan="4">torrentfreak.com</th> <th>Romanized</th>
</tr> <th>English translation</th>
</tfoot> <th>RGB</th>
<tbody> <th>Hex triplet</th>
<tr> </tr>
<th>1</th> </thead>
<td>Fast Five</td> <tr>
<td>9,260,000</td> <td>一斤染</td>
</tr> <td>Ikkonzome</td>
<tr> <td>One kin (0.6&nbsp;kg (1.3&nbsp;lb)) dye</td>
<th>2</th> <td>240,143,144</td>
<td>The Hangover II</td> <td>#F08F90</td>
<td>8,840,000</td> </tr>
</tr> <tr>
<tr> <td>紅梅色</td>
<th>3</th> <td>Kōbai-iro</td>
<td>Thor</td> <td>Red plum colored</td>
<td>8,330,000</td> <td>219,90,107</td>
</tr> <td>#DB5A6B</td>
<tr> </tr>
<th>4</th> <tr>
<td>Source Code</td> <td>桜色</td>
<td>7,910,000</td> <td>Sakura-iro</td>
</tr> <td>Cherry blossom color</td>
<tr> <td>252,201,185</td>
<th>5</th> <td>#FCC9B9</td>
<td>I Am Number Four</td> </tr>
<td>7,670,000</td> <tr>
</tr> <td>薄紅</td>
<tr> <td>Usubeni</td>
<th>6</th> <td>Pale crimson (dye)</td>
<td>Sucker Punch</td> <td>242,102,108</td>
<td>7,200,000</td> <td>#F2666C</td>
</tr> </tr>
<tr> </tbody>
<th>7</th> </table>
<td>127 Hours</td>
<td>6,910,000</td>
</tr>
<tr>
<th>8</th>
<td>Rango</td>
<td>6,480,000</td>
</tr>
<tr>
<th>9</th>
<td>The King’s Speech</td>
<td>6,250,000</td>
</tr>
<tr>
<th>10</th>
<td>Harry Potter and the Deathly Hallows Part 2</td>
<td>6,030,000</td>
</tr>
</tbody>
</table>
</section> </section>