Skip to content

Instantly share code, notes, and snippets.

@Vivelin
Created April 6, 2020 11:57
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save Vivelin/c974f9846a6ad6baf691dfb393d56b34 to your computer and use it in GitHub Desktop.
Save Vivelin/c974f9846a6ad6baf691dfb393d56b34 to your computer and use it in GitHub Desktop.
Tabliss custom CSS for a search box that looks like in the default Firefox new tab page
.Widgets .container {
width: 100%;
max-width: 768px;
}
.Widgets .container .Time {
max-width: 333px;
margin: 0 auto;
}
.Search input {
background: -moz-Field url(moz-extension://4d661c1f-e16f-4ed5-8a38-e082e753b9f6/favicon.ico) .75rem .70rem / 24px 24px no-repeat;
border: 1px solid rgba(249, 249, 250, 0.2);
border-radius: 3px;
padding: .75rem 0 .75rem 3rem;
color: -moz-FieldText;
text-align: start;
font: 400 1.1rem 'Segoe UI';
transition: border-color 150ms ease-in-out, box-shadow 150ms ease-in-out;
}
.Search input::placeholder {
color: unset;
opacity: 0.54;
}
.Search input:focus {
border: solid 1px #0060df;
box-shadow: 0 0 0 1px #0060df, 0 0 0 4px rgba(0, 96, 223, 0.3);
}
.Overlay, .credit {
opacity: 0.75;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment