299 lines
7.1 KiB
CSS
299 lines
7.1 KiB
CSS
@import url("../themes/auto/auto.css");
|
|
|
|
body {
|
|
overflow: hidden;
|
|
margin: 0;
|
|
position: absolute;
|
|
/* CSS is pants. Move the bar down a tiny bit to cover up the gap. */
|
|
top: 1px;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
#command-line-holder {
|
|
background: var(--tridactyl-cmdl-bg);
|
|
color: var(--tridactyl-cmdl-fg);
|
|
font-family: var(--tridactyl-cmdl-font-family);
|
|
font-size: 9pt;
|
|
/* reduce the padding added by the colon so that the command line shows up roughly where it used to be */
|
|
padding-left: 0.125ex;
|
|
}
|
|
|
|
input {
|
|
width: 97%;
|
|
font-family: var(--tridactyl-cmdl-font-family);
|
|
font-size: var(--tridactyl-cmdl-font-size);
|
|
line-height: var(--tridactyl-cmdl-line-height);
|
|
color: var(--tridactyl-cmdl-fg);
|
|
background: var(--tridactyl-cmdl-bg);
|
|
border: unset;
|
|
/* reduce the padding from the colon */
|
|
/* margin-left: -0.25ex; */
|
|
/* we currently have a border from the completions */
|
|
/* border-top: solid 1px lightgray; */
|
|
}
|
|
|
|
input:focus {
|
|
outline: none;
|
|
}
|
|
|
|
#tridactyl-colon::before {
|
|
content: ":";
|
|
}
|
|
|
|
/* COMPLETIONS */
|
|
|
|
#completions {
|
|
--option-height: var(--tridactyl-cmplt-option-height);
|
|
color: var(--tridactyl-cmplt-fg);
|
|
background: var(--tridactyl-cmplt-bg);
|
|
display: inline-block;
|
|
font-size: var(--tridactyl-cmplt-font-size);
|
|
font-family: var(--tridactyl-cmplt-font-family);
|
|
overflow: hidden;
|
|
width: 100%;
|
|
border-top: var(--tridactyl-cmplt-border-top);
|
|
}
|
|
|
|
/* Olie doesn't know how CSS inheritance works */
|
|
#completions > div {
|
|
max-height: calc(20 * var(--option-height));
|
|
min-height: calc(10 * var(--option-height));
|
|
}
|
|
|
|
#completions > div > table {
|
|
width: 100%;
|
|
font-size: 9pt;
|
|
border-spacing: 0;
|
|
table-layout: fixed;
|
|
}
|
|
|
|
#completions table tr td.prefix {
|
|
width: 3.2em;
|
|
padding-left: 0.5em;
|
|
text-align: center;
|
|
}
|
|
#completions table tr td.container,
|
|
#completions table tr td.icon,
|
|
#completions table tr td.privatewindow {
|
|
width: 1.5em;
|
|
}
|
|
#completions table tr td.tabcount {
|
|
width: 6em;
|
|
}
|
|
#completions table tr td.tgroup {
|
|
width: 10em;
|
|
padding-left: 0.5em;
|
|
text-align: right;
|
|
}
|
|
#completions table tr td.tgroup:empty {
|
|
display: none;
|
|
}
|
|
/* #completions table tr td:nth-of-type(3) { width: 5em; } */
|
|
#completions table tr td.content {
|
|
width: 50%;
|
|
}
|
|
|
|
/* Accroding to src/completions/TabHistory.ts formatTimeSpan,
|
|
* max-width should be 14 characters (14ex), 20ex for more tolorance. */
|
|
#completions table tr td.time {
|
|
width: 20ex;
|
|
text-align: right;
|
|
padding-right: 2ex;
|
|
}
|
|
|
|
#completions table tr {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
|
|
#completions table tr td {
|
|
overflow: hidden;
|
|
}
|
|
|
|
#completions img {
|
|
display: inline;
|
|
vertical-align: middle;
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
|
|
#completions .sectionHeader {
|
|
background: linear-gradient(
|
|
var(--tridactyl-header-first-bg),
|
|
var(--tridactyl-header-second-bg),
|
|
var(--tridactyl-header-third-bg)
|
|
);
|
|
font-size: var(--tridactyl-header-font-size);
|
|
font-weight: var(--tridactyl-header-font-weight);
|
|
border-bottom: var(--tridactyl-header-border-bottom);
|
|
padding-left: 0.5ex;
|
|
}
|
|
|
|
#completions .sectionHeader,
|
|
#completions .option {
|
|
height: var(--option-height);
|
|
line-height: var(--option-height);
|
|
}
|
|
|
|
.url {
|
|
text-decoration: var(--tridactyl-url-text-decoration);
|
|
}
|
|
|
|
.option:not(.focused) .url {
|
|
color: var(--tridactyl-url-fg);
|
|
background: var(--tridactyl-url-bg);
|
|
}
|
|
|
|
a.url:hover {
|
|
cursor: var(--tridactyl-url-cursor);
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* Hide the URLs if the screen is small */
|
|
@media all and (max-width: 500px) {
|
|
.url {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.FindCompletionOption .match {
|
|
font-weight: bold;
|
|
}
|
|
|
|
.hidden {
|
|
display: none;
|
|
}
|
|
|
|
/* Pick the .url out especially because otherwise its link styles dominate. */
|
|
.focused,
|
|
.focused .url {
|
|
color: var(--tridactyl-of-fg);
|
|
background: var(--tridactyl-of-bg);
|
|
}
|
|
|
|
.option.incognito .privatewindow {
|
|
background-image: var(--tridactyl-private-window-icon-url);
|
|
}
|
|
|
|
/* Still completions, but container-related stuff */
|
|
.option .container {
|
|
mask-size: 1em;
|
|
mask-repeat: no-repeat;
|
|
mask-position: center;
|
|
}
|
|
.option .privatewindow {
|
|
background-size: 1em;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
}
|
|
.option.container_blue .container {
|
|
background-color: var(--tridactyl-container-color-blue);
|
|
}
|
|
.option.container_turquoise .container {
|
|
background-color: var(--tridactyl-container-color-turquoise);
|
|
}
|
|
.option.container_green .container {
|
|
background-color: var(--tridactyl-container-color-green);
|
|
}
|
|
.option.container_yellow .container {
|
|
background-color: var(--tridactyl-container-color-yellow);
|
|
}
|
|
.option.container_orange .container {
|
|
background-color: var(--tridactyl-container-color-orange);
|
|
}
|
|
.option.container_red .container {
|
|
background-color: var(--tridactyl-container-color-red);
|
|
}
|
|
.option.container_pink .container {
|
|
background-color: var(--tridactyl-container-color-pink);
|
|
}
|
|
.option.container_purple .container {
|
|
background-color: var(--tridactyl-container-color-purple);
|
|
}
|
|
.option.container_fingerprint .container {
|
|
mask-image: var(--tridactyl-container-fingerprint-url);
|
|
}
|
|
.option.container_briefcase .container {
|
|
mask-image: var(--tridactyl-container-briefcase-url);
|
|
}
|
|
.option.container_dollar .container {
|
|
mask-image: var(--tridactyl-container-dollar-url);
|
|
}
|
|
.option.container_cart .container {
|
|
mask-image: var(--tridactyl-container-cart-url);
|
|
}
|
|
.option.container_circle .container {
|
|
mask-image: var(--tridactyl-container-circle-url);
|
|
}
|
|
.option.container_gift .container {
|
|
mask-image: var(--tridactyl-container-gift-url);
|
|
}
|
|
.option.container_vacation .container {
|
|
mask-image: var(--tridactyl-container-vacation-url);
|
|
}
|
|
.option.container_food .container {
|
|
mask-image: var(--tridactyl-container-food-url);
|
|
}
|
|
.option.container_fruit .container {
|
|
mask-image: var(--tridactyl-container-fruit-url);
|
|
}
|
|
.option.container_pet .container {
|
|
mask-image: var(--tridactyl-container-pet-url);
|
|
}
|
|
.option.container_tree .container {
|
|
mask-image: var(--tridactyl-container-tree-url);
|
|
}
|
|
.option.container_chill .container {
|
|
mask-image: var(--tridactyl-container-chill-url);
|
|
}
|
|
|
|
.ExcmdCompletionOption td.excmd {
|
|
padding-left: 0.5em;
|
|
width: 20%;
|
|
}
|
|
|
|
.ExcmdCompletionOption td.documentation {
|
|
width: 100%;
|
|
}
|
|
|
|
.SettingsCompletionOption td.title {
|
|
padding-left: 0.5em;
|
|
}
|
|
|
|
#completions .SettingsCompletionOption td.title,
|
|
#completions .SettingsCompletionOption td.content,
|
|
#completions .SettingsCompletionOption td.type {
|
|
width: 15%;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#completions .TabGroupCompletionOption td.title {
|
|
width: 15%;
|
|
}
|
|
|
|
#completions .TabGroupCompletionOption td.content {
|
|
width: auto;
|
|
}
|
|
|
|
.HelpCompletionOption td.name {
|
|
width: 25%;
|
|
}
|
|
|
|
#completions .SessionCompletionOption td.type {
|
|
width: 1ch !important;
|
|
padding: 0px 3pt;
|
|
}
|
|
|
|
#completions .SessionCompletionOption td.time {
|
|
width: 5ch !important;
|
|
padding: 0px 3pt;
|
|
text-align: right;
|
|
}
|
|
|
|
#completions .WindowCompletionOption td.id {
|
|
width: 6ch !important;
|
|
text-align: right;
|
|
padding: 0px 8pt;
|
|
}
|