prehistoric-systems/keepassxc-browser
1
0
Fork 0
mirror of https://github.com/keepassxreboot/keepassxc-browser.git synced 2026-03-11 08:54:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Styling improvements

Browse source
This commit is contained in:
varjolintu 2025-05-16 20:11:49 +03:00
parent 951557d50b
commit 2c639749cc
3 changed files with 66 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
keepassxc-browser/_locales/en/messages.json
View file

@ -20,7 +20,7 @@
"description": "Connect button title text."
},
"copyDebugInfoButtonTitle": {
"message": "Copy debug info to clipboard.",
"message": "Copy debug info to clipboard",
"description": "Copy debug info button title text on About tab."
},
"dismissHttpAuthButtonTitle": {

40
keepassxc-browser/options/options.css
View file

@ -43,6 +43,14 @@ input[type="range"] {
color: var(--kpxc-text-color) !important;
}
input[type="range"]::-moz-range-thumb {
background-color: green;
}
input[type="range"]::-webkit-slider-thumb {
background-color: green;
}
input:active {
border-color: var(--kpxc-input-active-border-color);
}
@ -74,19 +82,14 @@ pre {
white-space: pre-line;
}
.table,
tbody,
thead,
tr,
th,
td {
border-color: var(--kpxc-table-border-color) !important;
}
.table > caption {
color: var(--kpxc-text-color);
}
.table-sm>:not(caption)>*>* {
padding: 0.25rem 0.5rem;
}
.table > thead,
tbody {
color: var(--kpxc-text-color);
@ -114,7 +117,7 @@ tbody {
.table-striped > tbody > tr:nth-of-type(even) input[type="url"] {
--bs-table-bg-type: var(--kpxc-card-background-color) !important;
background-color: var(--kpxc-card-background-color) !important;
background-color: var(--bs-table-bg) !important;
color: var(--kpxc-text-color) !important;
}
@ -169,6 +172,10 @@ table td:last-of-type {
background-color: var(--kpxc-checkbox-color) !important;
}
.form-switch > .form-check-input:checked {
background-color: green !important;
}
.help-text {
margin-left: 1.725em;
}
@ -209,6 +216,7 @@ table td:last-of-type {
.active > a {
border-color: currentColor;
border-radius: var(--bs-border-radius-sm);
color: #a0a0a0 !important;
}
@ -229,6 +237,7 @@ table td:last-of-type {
border: 0;
border-bottom-right-radius: 4px !important;
border-top-right-radius: 4px !important;
padding-left: 0;
}
.site-preferences-input:disabled {
@ -248,6 +257,17 @@ button#sitePreferencesCancelEdit {
border-top-left-radius: 4px !important;
}
.btn-success {
--bs-btn-bg: green !important;
--bs-btn-border-color: green !important;
--bs-btn-hover-bg: green !important;
--bs-btn-hover-border-color: green !important;
}
.btn-success:hover {
filter: brightness(88%) !important;
}
@media (min-width: 768px) {
.sidebar {
height: auto;

69
keepassxc-browser/options/options.html
View file

@ -27,7 +27,7 @@
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse d-none d-md-block" id="sidebar">
<h1 class="text-uppercase text-white-50 d-none d-md-flex px-3 pb-4 mt-4 mb-1">KeePassXC-Browser</h1>
<h1 class="text-uppercase text-white d-none d-md-flex px-3 pb-4 mt-4 mb-1">KeePassXC-Browser</h1>
<ul class="nav flex-column mb-2 text-uppercase">
<li class="active nav-item">
<a class="nav-link text-light rounded-sm" href="#general-settings">
@ -62,7 +62,7 @@
</ul>
</div>
<footer class="px-3 mt-4 mb-1 text-uppercase position-absolute small text-muted">
© 2017-2024 - KeePassXC Team
© 2017-2025 - KeePassXC Team
</footer>
</nav>
@ -93,7 +93,7 @@
<!-- Activate username icons -->
<div class="form-group">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="showLoginFormIcon" id="usernameIconsCheckBox" value="true">
<label class="form-check-label" for="usernameIconsCheckBox" data-i18n="optionsCheckboxUsernameIcons"></label>
<div id="passwordHelpBlock" class="form-text" data-i18n="optionsShowLoginFormIconHelpText"></div>
@ -102,7 +102,7 @@
<!-- Activate password icons -->
<div class="form-group">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="usePasswordGeneratorIcons" id="passwordIconsCheckBox" value="true">
<label class="form-check-label" for="passwordIconsCheckBox" data-i18n="optionsCheckboxUsePasswordGenerator"></label>
<div class="form-text" data-i18n="optionsUsePasswordGeneratorHelpText"></div>
@ -112,7 +112,7 @@
<!-- Activate TOTP icons -->
<div class="form-group">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="showOTPIcon" id="totpIconsCheckBox" value="true">
<label class="form-check-label" for="totpIconsCheckBox" data-i18n="optionsCheckboxOTPIcons"></label>
<div class="form-text" data-i18n="optionsShowOTPIconHelpText"></div>
@ -126,7 +126,7 @@
<!-- Show notifications -->
<div class="form-group">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="showNotifications" id="notificationCheckBox" value="true">
<label class="form-check-label" for="notificationCheckBox" data-i18n="optionsCheckboxShowNotifications"></label>
<div class="form-text" data-i18n="optionsShowNotificationsHelpText"></div>
@ -135,7 +135,7 @@
<!-- Use monochrome toolbar icons -->
<div class="form-group">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="useMonochromeToolbarIcon" id="useMonochromeToolbarIconCheckBox" value="true">
<label class="form-check-label" for="useMonochromeToolbarIconCheckBox" data-i18n="optionsCheckboxUseMonochromeToolbarIcon"></label>
<div class="form-text" data-i18n="optionsUseMonochromeToolbarIconHelpText"></div>
@ -144,7 +144,7 @@
<!-- Use compact mode -->
<div class="form-group">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="useCompactMode" id="useCompactModeCheckBox" value="true">
<label class="form-check-label" for="useCompactModeCheckBox" data-i18n="optionsCheckboxUseCompactMode"></label>
<div class="form-text" data-i18n="optionsUseCompactModeHelpText"></div>
@ -185,7 +185,7 @@
<!-- Automatically retrieve credentials -->
<div class="form-group">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="autoRetrieveCredentials" id="autoRetrieveCredentials" value="true">
<label class="form-check-label" for="autoRetrieveCredentials" data-i18n="optionsCheckboxAutoRetrieveCredentials"></label>
<div class="form-text" data-i18n="optionsAutoRetrieveCredentialsHelpText"></div>
@ -194,7 +194,7 @@
<!-- Use Autocomplete Menu -->
<div class="form-group">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="autoCompleteUsernames" id="autoCompleteUsernames" value="true">
<label class="form-check-label" for="autoCompleteUsernames" data-i18n="optionsCheckboxAutoCompleteUsernames"></label>
<div class="form-text" data-i18n="optionsAutocompleteUsernamesHelpText"></div>
@ -222,7 +222,7 @@
</div>
<div>
<span class="form-text text-muted" data-i18n="optionsFillSortPriorityHelpText"></span>
<div class="form-check mt-2">
<div class="form-check form-switch mt-2">
<input class="form-check-input" type="checkbox" name="autoFillRelevantCredential" id="autoFillRelevantCredential" value="true">
<label class="form-check-label" for="autoFillRelevantCredential" data-i18n="optionsCheckboxAutoFillRelevantCredential"></label>
<div class="form-text" data-i18n="optionsAutoFillRelevantCredentialHelpText"></div>
@ -243,7 +243,7 @@
<!-- Use Auto-Submit -->
<div class="form-group py-2">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="autoSubmit" id="autoSubmit" value="true">
<label class="form-check-label" for="autoSubmit" data-i18n="optionsCheckboxAutoSubmit"></label>
<div class="form-text" data-i18n="optionsAutoSubmitHelpText"></div>
@ -252,7 +252,7 @@
<!-- Automatically fill single-credential entries -->
<div class="form-group">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="autoFillSingleEntry" id="autoFillSingleEntry" value="true">
<label class="form-check-label" for="autoFillSingleEntry" data-i18n="optionsCheckboxAutoFillSingleEntry"></label>
<div class="form-text" data-i18n="optionsAutoFillSingleEntryHelpText"></div>
@ -266,7 +266,7 @@
<!-- Automatically fill single-credential TOTP fields -->
<div class="form-group">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="autoFillSingleTotp" id="autoFillSingleTotp" value="true">
<label class="form-check-label" for="autoFillSingleTotp" data-i18n="optionsCheckboxAutoFillSingleTotp"></label>
<div class="form-text" data-i18n="optionsAutoFillSingleTotpHelpText"></div>
@ -275,7 +275,7 @@
<!-- Autofill HTTP Auth dialogs -->
<div class="form-group">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="autoFillAndSend" id="autoFillAndSend" value="true">
<label class="form-check-label" for="autoFillAndSend" data-i18n="optionsCheckboxAutoFillAndSend"></label>
<div class="form-text" data-i18n="optionsAutoFillAndSendHelpText"></div>
@ -296,7 +296,7 @@
<!-- Show Credential Banner -->
<div class="form-group">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="showLoginNotifications" id="showLoginNotifications" value="true">
<label class="form-check-label" for="showLoginNotifications" data-i18n="optionsCheckboxShowLoginNotifications"></label>
</div>
@ -304,7 +304,7 @@
<!-- Ask where to save credentials -->
<div class="form-group">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="defaultGroupAlwaysAsk" id="defaultGroupAlwaysAsk" value="true">
<label class="form-check-label" for="defaultGroupAlwaysAsk" data-i18n="optionsLabelDefaultGroupCheckboxText"></label>
<div class="form-text" data-i18n="optionsLabelDefaultGroupCheckboxHelpText"></div>
@ -330,7 +330,7 @@
<!-- Save domain only -->
<div class="form-group">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="saveDomainOnlyNewCreds" id="saveDomainOnlyNewCreds" value="true">
<label class="form-check-label" for="saveDomainOnlyNewCreds" data-i18n="optionsSaveDomainOnly"></label>
<div class="form-text" data-i18n="optionsSaveDomainOnlyHelpText"></div>
@ -339,7 +339,7 @@
<!-- Download favicon to entry after save -->
<div class="form-group" id="downloadFaviconAfterSaveFormGroup">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="downloadFaviconAfterSave" id="downloadFaviconAfterSave" value="true">
<label class="form-check-label" for="downloadFaviconAfterSave" data-i18n="optionsDownloadFaviconAfterSave"></label>
<div class="form-text" data-i18n="optionsDownloadFaviconAfterSaveHelpText"></div>
@ -364,7 +364,7 @@
<div class="card-body">
<!-- Enable Passkeys -->
<div class="form-group">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="passkeys" id="passkeys" value="true" />
<label class="form-check-label" for="passkeys" data-i18n="optionsPasskeysEnable"></label>
<div class="form-text help-text" data-i18n="optionsPasskeysEnableHelpText"></div>
@ -373,7 +373,7 @@
<!-- Enable Passkeys fallback -->
<div class="form-group">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="passkeysFallback" id="passkeysFallback" value="true" />
<label class="form-check-label" for="passkeysFallback" data-i18n="optionsPasskeysEnableFallback"></label>
<div class="form-text help-text" data-i18n="optionsPasskeysEnableFallbackHelpText"></div>
@ -455,7 +455,7 @@
<!-- Use dynamic input field detection -->
<div class="card-body">
<div class="form-group">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="useObserver" id="useObserver" value="true">
<label class="form-check-label" for="useObserver" data-i18n="optionsUseObserver"></label>
<div class="form-text" data-i18n="optionsUseObserverHelpText"></div>
@ -464,7 +464,7 @@
<!-- Display group name -->
<div class="form-group">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="showGroupNameInAutocomplete" id="showGroupNameInAutocomplete" value="true">
<label class="form-check-label" for="showGroupNameInAutocomplete" data-i18n="optionsCheckboxShowGroupNameInAutocomplete"></label>
<div class="form-text" data-i18n="optionsShowGroupNameInAutocompleteHelpText"></div>
@ -477,7 +477,7 @@
<!-- Automatic reconnect -->
<div class="form-group" hidden>
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="autoReconnect" id="autoReconnect" value="true">
<label class="form-check-label" for="autoReconnect" data-i18n="optionsCheckboxAutomaticReconnect"></label>
<div class="form-text" data-i18n="optionsAutomaticReconnectHelpText"></div>
@ -490,7 +490,7 @@
<!-- Save domain only -->
<div class="form-group">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="saveDomainOnly" id="saveDomainOnly" value="true">
<label class="form-check-label" for="saveDomainOnly" data-i18n="optionsSaveDomainOnly"></label>
<div class="form-text" data-i18n="optionsSaveDomainOnlyCustomLoginHelpText"></div>
@ -499,7 +499,7 @@
<!-- Use predefined sites -->
<div class="form-group">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="usePredefinedSites" id="usePredefinedSites" value="true">
<label class="form-check-label" for="usePredefinedSites" data-i18n="optionsUsePredefinedSites"></label>
<div class="form-text" data-i18n="optionsUsePredefinedSitesHelpText"></div>
@ -520,7 +520,7 @@
<!-- Debug logging -->
<div class="form-group mt-2">
<div class="form-check">
<div class="form-check form-switch">
<input class="form-check-input" type="checkbox" name="debugLogging" id="debugLogging" value="false">
<label class="form-check-label" for="debugLogging" data-i18n="optionsDebugLogging"></label>
<div class="form-text" data-i18n="optionsDebugLoggingHelpText"></div>
@ -590,7 +590,7 @@
<th scope="col"><span data-i18n="optionsDatabaseKey"></span></th>
<th scope="col"><span data-i18n="optionsDatabaseLastUsed"></span></th>
<th scope="col"><span data-i18n="optionsDatabaseCreated"></span></th>
<th scope="col"><span data-i18n="optionsDatabaseDelete"></span></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
@ -664,7 +664,7 @@
<thead>
<tr>
<th scope="col"><span data-i18n="optionsColumnPageURL"></span></th>
<th scope="col"><span data-i18n="optionsColumnDelete"></span></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
@ -674,7 +674,7 @@
<tr class="clone d-none">
<td></td>
<td class="text-nowrap">
<button class="btn btn-sm delete btn-danger btn" data-i18n="[title]removeCustomLoginFieldsButtonTitle">
<button class="btn btn-sm delete btn-danger" data-i18n="[title]removeCustomLoginFieldsButtonTitle">
<i class="fa fa-remove" aria-hidden="true"></i>
<span data-i18n="optionsButtonRemove"></span>
</button>
@ -730,7 +730,7 @@
</div>
<hr class="mt-0">
<div class="form-group was-validated">
<div class="form-group was-validated pb-3">
<label for="manualUrl" data-i18n="optionsSitePreferencesManualAddText"></label>
<div class="input-group w-75" id="manualUrlGroup">
<input class="form-control form-control-sm" type="url" id="manualUrl" aria-label="Manual URL" pattern="file://.*|ftp://.*|http://.*|https://.*" minlength="5" maxlength="2000" required>
@ -752,7 +752,7 @@
<th scope="col"><span data-i18n="optionsColumnUsernameOnly"></span></th>
<th scope="col"><span data-i18n="optionsColumnImprovedInputFieldDetection"></span></th>
<th scope="col"><span data-i18n="optionsColumnAllowIframes"></span></th>
<th scope="col"><span data-i18n="optionsColumnDelete"></span></th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
@ -789,7 +789,7 @@
<td><input class="form-check-input" type="checkbox" name="improvedFieldDetection" value="false" data-i18n="[title]optionsColumnImprovedInputFieldDetection"></td>
<td><input class="form-check-input" type="checkbox" name="allowIframes" value="false" data-i18n="[title]optionsColumnAllowIframes"></td>
<td class="text-nowrap">
<button class="btn btn-sm delete btn-danger btn" data-i18n="[title]removeSitePreferencesButtonTitle">
<button class="btn btn-sm delete btn-danger" data-i18n="[title]removeSitePreferencesButtonTitle">
<i class="fa fa-remove" aria-hidden="true"></i>
<span data-i18n="optionsButtonRemove"></span>
</button>
@ -899,8 +899,9 @@
<br>Operating system: <span class="kpxcbrOS"></span>
<br>Browser: <span class="kpxcbrBrowser"></span>
</p>
<button id="copyVersionToClipboard" class="btn btn btn-sm btn-primary ml-3" data-i18n="[title]copyDebugInfoButtonTitle">
<button id="copyVersionToClipboard" class="btn btn-sm btn-primary ml-3" data-i18n="[title]copyDebugInfoButtonTitle">
<i class="fa fa-clipboard"></i>
<span data-i18n="copyDebugInfoButtonTitle"></span>
</button>
</div>
</div>