fa/breadcrumb-the-shire
1
0
Fork 1
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Global Boomarks

Browse Source
This commit is contained in:
Felix Schneider
2026-03-14 21:45:58 +01:00
parent 921977bdd3
commit 9688848401
53 changed files with 4232 additions and 966 deletions
Download Patch File Download Diff File Expand all files Collapse all files

124
web/css/components/app-bookmark-form.css Normal file
View File

@@ -0,0 +1,124 @@
/**
* app-bookmark-form.css
* Styles for bookmark and bookmark-group dialogs.
*/
@layer components {
dialog[data-app-bookmark-dialog] > article.app-bookmark-dialog,
dialog[data-app-bookmark-group-dialog] > article.app-bookmark-dialog {
max-width: 24rem;
}
dialog[data-app-bookmark-dialog] > article.app-bookmark-dialog > header,
dialog[data-app-bookmark-group-dialog] > article.app-bookmark-dialog > header {
position: relative;
padding-inline-end: 2rem;
}
dialog[data-app-bookmark-dialog] > article.app-bookmark-dialog > header h2,
dialog[data-app-bookmark-group-dialog] > article.app-bookmark-dialog > header h2 {
margin: 0;
}
dialog[data-app-bookmark-dialog] [data-bookmark-dialog-close].close,
dialog[data-app-bookmark-group-dialog] [data-bookmark-group-dialog-close].close {
position: absolute;
inset-inline-end: 1rem;
inset-block-start: 1rem;
float: none;
margin: 0;
}
dialog[data-app-bookmark-dialog] form,
dialog[data-app-bookmark-group-dialog] form {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
}
dialog[data-app-bookmark-dialog] form label,
dialog[data-app-bookmark-group-dialog] form label {
font-size: 0.85rem;
font-weight: 600;
margin: 0;
}
dialog[data-app-bookmark-dialog] form input[type="text"],
dialog[data-app-bookmark-dialog] form select,
dialog[data-app-bookmark-group-dialog] form input[type="text"],
dialog[data-app-bookmark-group-dialog] form select {
width: 100%;
margin: 0;
}
dialog[data-app-bookmark-dialog] form footer,
dialog[data-app-bookmark-group-dialog] form footer {
display: flex;
align-items: center;
gap: 0.5rem;
justify-content: flex-end;
padding-top: var(--app-spacing);
}
dialog[data-app-bookmark-dialog] form footer button,
dialog[data-app-bookmark-group-dialog] form footer button {
margin: 0;
}
.app-bookmark-delete-btn {
color: var(--app-del-color, #c62828);
border-color: var(--app-del-color, #c62828);
width: 100%;
}
.app-bookmark-delete-btn:hover {
background: var(--app-del-color, #c62828);
color: #fff;
}
.app-bookmark-new-group-btn {
width: 100%;
}
.app-bookmark-group-icon-picker {
display: grid;
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 0.3rem;
}
.app-bookmark-group-icon-option {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
aspect-ratio: 1 / 1;
min-height: 1.9rem;
border: 1px solid var(--app-border);
border-radius: var(--app-border-radius);
background: transparent;
color: var(--app-muted-color);
cursor: pointer;
padding: 0;
margin: 0;
transition: border-color 120ms ease, color 120ms ease;
}
.app-bookmark-group-icon-option:hover {
border-color: var(--app-primary);
color: var(--app-primary);
}
.app-bookmark-group-icon-option.active {
border-color: var(--app-primary);
background: var(--app-primary);
color: #fff;
}
.app-bookmark-group-icon-option > i {
font-size: 0.95rem;
}
.app-bookmark-delete-separator {
margin-block: 0.2rem 0.35rem;
}
}

26
web/css/components/app-details-titlebar.css
View File

@@ -73,26 +73,24 @@
}
.app-details-titlebar details.dropdown li {
padding: 0 !important;
margin: 0 !important;
border-bottom: 1px solid var(--app-border);
}
.app-details-titlebar details.dropdown li:last-child {
border-bottom: none;
}
.app-details-titlebar details.dropdown ul {
padding: 0 !important;
margin: 0 !important;
padding: 0;
margin: 0;
}
.app-details-titlebar details.dropdown li button,
.app-details-titlebar details.dropdown li [role="button"] {
margin: 0 !important;
margin: 0;
border: none;
border-radius: 0;
border-radius: 3px;
width: 100%;
text-align: left;
padding: 0.375rem 0.5rem;
}
.app-details-titlebar details.dropdown li button:hover,
.app-details-titlebar details.dropdown li button:focus-visible,
.app-details-titlebar details.dropdown li [role="button"]:hover,
.app-details-titlebar details.dropdown li [role="button"]:focus-visible {
background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
}
}

26
web/css/components/app-list-titlebar.css
View File

@@ -59,26 +59,24 @@
}
.app-list-titlebar details.dropdown li {
padding: 0 !important;
margin: 0 !important;
border-bottom: 1px solid var(--app-border);
}
.app-list-titlebar details.dropdown li:last-child {
border-bottom: none;
}
.app-list-titlebar details.dropdown ul {
padding: 0 !important;
margin: 0 !important;
padding: 0;
margin: 0;
}
.app-list-titlebar details.dropdown li button,
.app-list-titlebar details.dropdown li [role="button"] {
margin: 0 !important;
margin: 0;
border: none;
border-radius: 0;
border-radius: 3px;
width: 100%;
text-align: left;
padding: 0.375rem 0.5rem;
}
.app-list-titlebar details.dropdown li button:hover,
.app-list-titlebar details.dropdown li button:focus-visible,
.app-list-titlebar details.dropdown li [role="button"]:hover,
.app-list-titlebar details.dropdown li [role="button"]:focus-visible {
background: color-mix(in srgb, var(--app-contrast) 8%, transparent);
}
}