mirror of
https://github.com/sissbruecker/linkding
synced 2024-11-10 06:04:15 +00:00
9c48085829
* Experiment with bookmark details * Add basic tests * Refactor details into modal * Implement edit and delete button * Remove slide down animation * Add fallback details view * Add status actions * Improve dark theme * Improve return URLs * Make bookmark details sharable * Fix E2E tests
184 lines
4.3 KiB
SCSS
184 lines
4.3 KiB
SCSS
// Customized Spectre CSS imports, removing modules that are not used
|
|
// See node_modules/spectre.css/src/spectre.scss for the original version
|
|
|
|
// Variables and mixins
|
|
@import "../../node_modules/spectre.css/src/variables";
|
|
@import "../../node_modules/spectre.css/src/mixins";
|
|
|
|
/*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */
|
|
// Reset and dependencies
|
|
@import "../../node_modules/spectre.css/src/normalize";
|
|
@import "../../node_modules/spectre.css/src/base";
|
|
|
|
// Elements
|
|
@import "../../node_modules/spectre.css/src/typography";
|
|
@import "../../node_modules/spectre.css/src/asian";
|
|
@import "../../node_modules/spectre.css/src/tables";
|
|
@import "../../node_modules/spectre.css/src/buttons";
|
|
@import "../../node_modules/spectre.css/src/forms";
|
|
@import "../../node_modules/spectre.css/src/labels";
|
|
@import "../../node_modules/spectre.css/src/codes";
|
|
@import "../../node_modules/spectre.css/src/media";
|
|
|
|
// Components
|
|
@import "../../node_modules/spectre.css/src/badges";
|
|
@import "../../node_modules/spectre.css/src/dropdowns";
|
|
@import "../../node_modules/spectre.css/src/empty";
|
|
@import "../../node_modules/spectre.css/src/menus";
|
|
@import "../../node_modules/spectre.css/src/modals";
|
|
@import "../../node_modules/spectre.css/src/pagination";
|
|
@import "../../node_modules/spectre.css/src/tabs";
|
|
@import "../../node_modules/spectre.css/src/toasts";
|
|
@import "../../node_modules/spectre.css/src/tooltips";
|
|
|
|
// Utility classes
|
|
@import "../../node_modules/spectre.css/src/animations";
|
|
@import "../../node_modules/spectre.css/src/utilities";
|
|
|
|
// Auto-complete component
|
|
@import "../../node_modules/spectre.css/src/autocomplete";
|
|
|
|
|
|
/* Spectre overrides / fixes */
|
|
|
|
// Fix up visited styles
|
|
a:visited {
|
|
color: $link-color;
|
|
}
|
|
|
|
a:visited:hover {
|
|
color: $link-color-dark;
|
|
}
|
|
|
|
.btn-link:visited:not(.btn-primary) {
|
|
color: $link-color;
|
|
}
|
|
|
|
.btn-link:visited:not(.btn-primary):hover {
|
|
color: $link-color-dark;
|
|
}
|
|
|
|
// Disable transitions on buttons, which can otherwise flicker while loading CSS file
|
|
// something to do with .btn applying a transition for background, and then .btn-link setting a different background
|
|
.btn {
|
|
transition: none !important;
|
|
}
|
|
|
|
// Fix radio button sub-pixel size
|
|
.form-radio .form-icon {
|
|
width: 14px;
|
|
height: 14px;
|
|
border-width: 1px;
|
|
}
|
|
|
|
.form-radio input:checked + .form-icon::before {
|
|
top: 3px;
|
|
left: 3px;
|
|
transform: unset;
|
|
}
|
|
|
|
// Make code work with light and dark theme
|
|
code {
|
|
color: $gray-color-dark;
|
|
background-color: $code-bg-color;
|
|
box-shadow: 1px 1px 0 $code-shadow-color;
|
|
}
|
|
|
|
// Remove left padding from first pagination link
|
|
.pagination .page-item:first-child a {
|
|
padding-left: 0;
|
|
}
|
|
|
|
// Override border color for tab block
|
|
.tab-block {
|
|
border-bottom: solid 1px $border-color;
|
|
}
|
|
|
|
// Fix padding for first menu item
|
|
ul.menu li:first-child {
|
|
margin-top: 0;
|
|
}
|
|
|
|
// Form auto-complete menu
|
|
.form-autocomplete .menu {
|
|
.menu-item.selected > a, .menu-item > a:hover {
|
|
background: $secondary-color;
|
|
color: $primary-color;
|
|
}
|
|
|
|
.group-item, .group-item:hover {
|
|
color: $gray-color;
|
|
text-transform: uppercase;
|
|
background: none;
|
|
font-size: 0.6rem;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.modal {
|
|
// Add border to separate from background in dark mode
|
|
.modal-container {
|
|
border: solid 1px $border-color;
|
|
}
|
|
|
|
// Fix modal header to use default color
|
|
.modal-header {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
// Customize modal animation
|
|
@keyframes fade-in {
|
|
0% {
|
|
opacity: 0;
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
@keyframes fade-out {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.modal.active .modal-container, .modal.active .modal-overlay {
|
|
animation: fade-in .15s ease 1;
|
|
}
|
|
|
|
.modal.active.closing .modal-container, .modal.active.closing .modal-overlay {
|
|
animation: fade-out .15s ease 1;
|
|
}
|
|
|
|
// Customize menu animation
|
|
.dropdown .menu {
|
|
animation: fade-in .15s ease 1;
|
|
}
|
|
|
|
// Modal close button
|
|
.modal .modal-header button.close {
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
line-height: 0;
|
|
cursor: pointer;
|
|
opacity: .85;
|
|
color: $gray-color-dark;
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
// Increase input font size on small viewports to prevent zooming on focus the input
|
|
// on mobile devices. 430px relates to the "normalized" iPhone 14 Pro Max
|
|
// viewport size
|
|
@media screen and (max-width: 430px) {
|
|
.form-input {
|
|
font-size: 16px;
|
|
}
|
|
}
|