Fix ellipsis colors

This commit is contained in:
Sasha Koshka 2022-10-09 15:07:23 -04:00
parent aeb2e68f34
commit 9827e28c6a
3 changed files with 40 additions and 9 deletions

20
prototype/icons/clone.svg Normal file
View File

@ -0,0 +1,20 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Created with Vectornator (http://vectornator.io/) -->
<svg height="100%" stroke-miterlimit="10" style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" version="1.1" viewBox="0 0 16 16" width="100%" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path d="M4 1L9 1C10.1046 1 11 1.89543 11 3L11 11C11 12.1046 10.1046 13 9 13L4 13C2.89543 13 2 12.1046 2 11L2 3C2 1.89543 2.89543 1 4 1Z" id="Fill"/>
</defs>
<g id="Layer-1">
<g opacity="1">
<mask height="12" id="StrokeMask" maskUnits="userSpaceOnUse" width="9" x="2" y="1">
<rect fill="#000000" height="12" stroke="none" width="9" x="2" y="1"/>
<use fill="#ffffff" fill-rule="evenodd" stroke="none" xlink:href="#Fill"/>
</mask>
<use fill="none" mask="url(#StrokeMask)" stroke="#ff0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" xlink:href="#Fill"/>
</g>
<path d="M6.5 4.5L6.5 9.5" fill="none" opacity="1" stroke="#ff0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path d="M4.5 7.5L6.5 9.5L8.5 7.5" fill="none" opacity="1" stroke="#ff0000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1"/>
<path d="M12 3L12 4C12.5523 4 13 4.44772 13 5L13 13C13 13.5523 12.5523 14 12 14L8 14L7 14L5.4375 14C5.7925 14.5573 6.29032 15 7 15L12 15C13.1046 15 14 14.1046 14 13L14 5C14 3.89543 13.1046 3 12 3Z" fill="#ff0000" fill-rule="nonzero" opacity="1" stroke="none"/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.6 KiB

View File

@ -64,14 +64,14 @@ for the JavaScript code in this page.
<span>
viewing
<span class=linkedPath>
<a href="/">owner</a>/<a href="/">repo</a>/<a href="/">branch</a> |
gitea@git.tebibyte.media:/owner/repo
<a href="/">owner</a>/<a href="/">repo</a>/<a href="/">branch</a>
</span>
</span>
<ul class=buttonList>
<li><a class=watchButton href="/">watch</a></li>
<li><a class=starButton href="/">star</a></li>
<li><a class=forkButton href="/">fork</a></li>
<li><a class=cloneButton href="/">clone</a></li>
</ul>
</header>
@ -84,22 +84,22 @@ for the JavaScript code in this page.
<tbody>
<tr>
<td><a class=file href="/">file name</a></td>
<td><a href="/">most recent commit</a></td>
<td><a class=commit href="/">most recent commit</a></td>
<td><time datetime="2023-01-01">in 2 months</time></td>
</tr>
<tr>
<td><a class=directory href="/">directory/</a></td>
<td><a href="/">most recent commit</a></td>
<td><a class=commit href="/">most recent commit</a></td>
<td><time datetime="2023-01-01">in 2 months</time></td>
</tr>
<tr>
<td><a class=file href="/">file name</a></td>
<td><a href="/">most recent commit</a></td>
<td><a class=commit href="/">most recent commit</a></td>
<td><time datetime="2023-01-01">in 2 months</time></td>
</tr>
<tr>
<td><a class=file href="/">file name</a></td>
<td><a href="/">most recent commit</a></td>
<td><a class=commit href="/">most recent commit</a></td>
<td><time datetime="2023-01-01">in 2 months</time></td>
</tr>
</tbody>

View File

@ -130,7 +130,7 @@ header .buttonList {
var(--background) 100%);
}
nav > .buttonListWrap:first-child {
nav > .buttonListWrap {
text-align: center;
}
@ -188,9 +188,15 @@ header .buttonList {
.files td {
border: none;
padding: 0;
min-width: 0;
}
.files td > * {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
display: block;
}
.files td:last-child {
@ -218,7 +224,8 @@ header .buttonList {
.dashboardButton::before,
.watchButton::before,
.starButton::before,
.forkButton::before
.forkButton::before,
.cloneButton::before
{
content: "";
width: 16px;
@ -262,6 +269,10 @@ header .buttonList {
background-image: url("icons/fork.svg");
}
.cloneButton::before {
background-image: url("icons/clone.svg");
}
.previewLabel {
color: var(--subtle-foreground);
}