open.source/stylus
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

use a thin underline under big bold titles in inline search

Browse Source
This commit is contained in:
tophf 2017-12-10 12:00:40 +03:00
parent 6fb9d2d157
commit f44ed87646
3 changed files with 10 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
popup.html
View File

@ -85,7 +85,7 @@
<template data-id="searchResult"> <template data-id="searchResult">
<div class="search-result"> <div class="search-result">
<a class="search-result-title"></a> <a class="search-result-title"><span></span></a>
<div class="search-result-info"> <div class="search-result-info">
<img class="search-result-screenshot"> <img class="search-result-screenshot">
<div class="actions"> <div class="actions">
@ -177,9 +177,7 @@
<span id="find-styles-inline-group"> <span id="find-styles-inline-group">
<label i18n-title="findStylesInlineTooltip"> <label i18n-title="findStylesInlineTooltip">
<input id="popup.findStylesInline" class="checker" type="checkbox"> <input id="popup.findStylesInline" class="checker" type="checkbox">
<svg class="svg-icon checked" viewBox="0 0 1000 1000"> <svg class="svg-icon checked"><use xlink:href="#svg-icon-checked"/></svg>
<path fill-rule="evenodd" d="M983.2,184.3L853,69.8c-4-3.5-9.3-5.3-14.5-5c-5.3,0.4-10.3,2.8-13.8,6.8L352.3,609.2L184.4,386.9c-3.2-4.2-8-7-13.2-7.8c-5.3-0.8-10.6,0.6-14.9,3.9L18,487.5c-8.8,6.7-10.6,19.3-3.9,28.1L325,927.2c3.6,4.8,9.3,7.7,15.3,8c0.2,0,0.5,0,0.7,0c5.8,0,11.3-2.5,15.1-6.8L985,212.6C992.3,204.3,991.5,191.6,983.2,184.3z"/>
</svg>
<span i18n-text="findStylesInline"></span> <span i18n-text="findStylesInline"></span>
</label> </label>
</span> </span>

7
popup/search-results.css
View File

@ -48,14 +48,17 @@ body.search-results-shown {
} }
.search-result-title { .search-result-title {
font-size: 1.2em;
font-weight: 600;
margin-bottom: .5em; margin-bottom: .5em;
display: block; display: block;
color: #666; color: #666;
overflow-wrap: break-word; overflow-wrap: break-word;
} }
.search-result-title span {
font-size: 1.2em;
font-weight: 600;
}
.search-result:hover .search-result-title { .search-result:hover .search-result-title {
color: initial; color: initial;
} }

5
popup/search-results.js
View File

@ -290,13 +290,14 @@ window.addEventListener('showStyles:done', function _() {
id: ENTRY_ID_PREFIX + result.id, id: ENTRY_ID_PREFIX + result.id,
}); });
const displayedName = result.name.length < 300 ? result.name : result.name.slice(0, 300) + '...';
Object.assign($('.search-result-title', entry), { Object.assign($('.search-result-title', entry), {
textContent: tWordBreak(displayedName),
onclick: handleEvent.openURLandHide, onclick: handleEvent.openURLandHide,
href: searchAPI.BASE_URL + result.url href: searchAPI.BASE_URL + result.url
}); });
const displayedName = result.name.length < 300 ? result.name : result.name.slice(0, 300) + '...';
$('.search-result-title span', entry).textContent = tWordBreak(displayedName);
const screenshot = $('.search-result-screenshot', entry); const screenshot = $('.search-result-screenshot', entry);
let screenshotUrl = result.screenshot_url; let screenshotUrl = result.screenshot_url;
if (screenshotUrl === null) { if (screenshotUrl === null) {