mirror of
https://github.com/logseq/logseq.git
synced 2026-05-01 09:26:28 +00:00
434 lines
8.5 KiB
CSS
434 lines
8.5 KiB
CSS
#ui__ac {
|
|
&-inner {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
position: relative;
|
|
-webkit-overflow-scrolling: touch;
|
|
|
|
.menu-link {
|
|
word-break: break-all;
|
|
|
|
.has-help {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
small {
|
|
visibility: visible;
|
|
cursor: help;
|
|
|
|
svg {
|
|
opacity: .3;
|
|
}
|
|
|
|
&:hover svg {
|
|
opacity: .9;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:hover, &.chosen {
|
|
.has-help small {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
&:not(.chosen):hover {
|
|
background-color: unset !important;
|
|
color: or(--lx-gray-12, --ls-primary-text-color);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.menu-link {
|
|
&.no-padding {
|
|
padding: 0 !important;
|
|
}
|
|
}
|
|
|
|
.ui__ac-group-name {
|
|
@apply p-2 text-xs;
|
|
color: or(--logseq-og-dropdown-title-color, --lx-gray-11-alpha, --ls-block-ref-link-text-color);
|
|
background-color: or(--logseq-og-dropdown-title-background, --lx-gray-03);
|
|
}
|
|
|
|
.search-all #ui__ac-inner {
|
|
max-height: none;
|
|
}
|
|
|
|
.ui__notifications {
|
|
position: fixed;
|
|
z-index: var(--ls-z-index-level-4);
|
|
width: 100%;
|
|
top: 3.2em;
|
|
pointer-events: none;
|
|
|
|
&-content {
|
|
@apply inset-0 flex items-end justify-center px-4 py-3
|
|
pointer-events-none sm:px-6 sm:py-3 sm:items-start
|
|
sm:justify-end;
|
|
}
|
|
|
|
.notification-area {
|
|
background-color: or(--logseq-of-notification-background, --lx-gray-04, --ls-tertiary-background-color, #fff);
|
|
color: or(--logseq-og-notification-text-color, --lx-gray-11, --ls-primary-text-color);
|
|
}
|
|
}
|
|
|
|
.ui__toggle {
|
|
.wrapper {
|
|
@apply relative flex-shrink-0
|
|
h-6 w-11 border-2 border-transparent flex
|
|
rounded-full cursor-pointer focus:outline-none;
|
|
}
|
|
|
|
.switcher {
|
|
@apply inline-block h-5 w-5 rounded-full bg-white shadow;
|
|
}
|
|
|
|
&.is-small {
|
|
.wrapper {
|
|
@apply h-4 w-8;
|
|
}
|
|
|
|
.switcher {
|
|
@apply h-3 w-3;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui__modal {
|
|
@apply fixed px-4 pb-4 inset-0 flex items-baseline justify-center
|
|
top-12 sm:top-[calc(3vh+50px)];
|
|
|
|
&-overlay {
|
|
@apply fixed inset-0 transition-opacity;
|
|
}
|
|
|
|
&-overlay div {
|
|
--from: or(--lx-gray-03, --ls-primary-background-color);
|
|
--to: or(--lx-gray-06, --ls-quaternary-background-color);
|
|
background-image: linear-gradient(to bottom, var(--from), var(--to));
|
|
}
|
|
|
|
&-panel {
|
|
@apply relative rounded-md shadow-xl border;
|
|
border-color: or(--lx-gray-07, --ls-border-color);
|
|
|
|
overflow: hidden;
|
|
background: or(--lx-gray-04, --ls-secondary-background-color);
|
|
|
|
.panel-content {
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
width: calc(96vw - 2rem);
|
|
max-height: 89vh;
|
|
padding: 2rem 1.5rem;
|
|
|
|
@screen sm {
|
|
overflow-y: overlay;
|
|
max-height: 85vh;
|
|
padding: 2rem;
|
|
width: auto;
|
|
min-width: 600px;
|
|
|
|
.ls-card,
|
|
.ls-search {
|
|
width: 740px;
|
|
}
|
|
|
|
.ls-card {
|
|
min-height: 60vh;
|
|
}
|
|
|
|
.ls-search {
|
|
width: var(--ls-main-content-max-width);
|
|
}
|
|
}
|
|
|
|
@screen md {
|
|
min-width: 720px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-close {
|
|
@apply text-gray-400 hover:text-gray-500
|
|
focus:outline-none focus:text-gray-500
|
|
transition ease-in-out duration-150 opacity-60
|
|
hover:opacity-100;
|
|
|
|
&-wrap {
|
|
@apply z-10 absolute top-0 right-0 pt-2 pr-2;
|
|
}
|
|
}
|
|
|
|
&[label="ls-modal-align-center"] {
|
|
top: 0;
|
|
|
|
.ui__modal-panel {
|
|
top: 50vh;
|
|
transform: translateY(-52%);
|
|
}
|
|
}
|
|
|
|
&[label="diff__cp"] {
|
|
.panel-content {
|
|
padding: 2rem 1rem;
|
|
|
|
@screen sm {
|
|
padding: 2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[label="flashcards__cp"] {
|
|
.panel-content {
|
|
padding: 2rem 0;
|
|
|
|
@screen sm {
|
|
padding: 2rem 2rem;
|
|
}
|
|
}
|
|
}
|
|
|
|
&[label="instruction__cp"] {
|
|
|
|
.ui__modal-panel {
|
|
height: 90%;
|
|
}
|
|
|
|
.panel-content {
|
|
height: 100%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.instruction {
|
|
height: 40%;
|
|
|
|
@screen sm {
|
|
height: 70%;
|
|
}
|
|
}
|
|
|
|
html.is-native-android,
|
|
html.is-native-iphone,
|
|
html.is-native-iphone-without-notch {
|
|
.references {
|
|
.blocks-container {
|
|
transform: translateX(-8px);
|
|
width: 104%;
|
|
}
|
|
}
|
|
|
|
.ls-card {
|
|
min-height: 65vh;
|
|
}
|
|
|
|
.ui__modal {
|
|
&[label="flashcards__cp"] {
|
|
.panel-content {
|
|
padding: 2rem 1rem 1rem;
|
|
width: 90vw;
|
|
|
|
.cards-review {
|
|
padding-left: 0px;
|
|
padding-right: 0px;
|
|
}
|
|
|
|
.blocks-container {
|
|
transform: translateX(-7px);
|
|
width: 103%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
html.is-mobile {
|
|
.ui__modal {
|
|
@apply bottom-0 inset-x-0 top-20;
|
|
|
|
&[label="ls-modal-search"] {
|
|
.panel-content {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
.ls-search {
|
|
padding-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui__confirm-modal {
|
|
.sublabel {
|
|
display: flex;
|
|
padding: 2px 0;
|
|
align-items: center;
|
|
font-size: 14px;
|
|
|
|
input[type='checkbox'] {
|
|
margin-right: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.ui__button {
|
|
@apply inline-flex items-center px-3 py-2 border border-transparent
|
|
text-sm leading-4 font-medium rounded-md
|
|
focus:outline-none transition ease-in-out duration-150;
|
|
|
|
/* background-color: or(--lx-accent-04, --color-indigo-600); */
|
|
/* color: or(--lx-accent-11, white); */
|
|
background-color: or(--lx-accent-07, --color-indigo-600);
|
|
color: or(--lx-accent-12, white);
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&:hover:not([disabled]) {
|
|
/* opacity: or(--lx-accent-01, 0.8); */
|
|
opacity: 1;
|
|
background-color: or(--lx-accent-07);
|
|
}
|
|
|
|
&.is-link {
|
|
@apply text-white;
|
|
}
|
|
|
|
&[intent='logseq'] {
|
|
@apply focus:border-gray-500 dark:hover:text-gray-200;
|
|
|
|
color: or(--logseq-of-notification-clear-button-text, --lx-gray-12, --ls-primary-text-color);
|
|
background: or(--logseq-og-notification-clear-button-background, --lx-gray-04, --ls-secondary-background-color);
|
|
|
|
&:hover {
|
|
color: or(--lx-accent-11, --ls-link-text-color);
|
|
}
|
|
}
|
|
|
|
&[intent='link'], &[intent='border-link'] {
|
|
@apply focus:border-gray-500 dark:hover:text-gray-200;
|
|
|
|
color: or(--lx-gray-12, --ls-primary-text-color);
|
|
background: transparent;
|
|
|
|
&:hover {
|
|
color: or(--lx-accent-11, --ls-link-text-color);
|
|
}
|
|
}
|
|
|
|
&[intent='border-link'] {
|
|
border: 1px solid;
|
|
}
|
|
|
|
&.p-1 {
|
|
padding: 0.25rem 0.5rem !important;
|
|
}
|
|
}
|
|
|
|
.dropdown-wrapper {
|
|
background-color: or(--logseq-og-dropdown-background, --lx-gray-03, --ls-primary-background-color, #fff);
|
|
border: 1px solid or(--logseq-og-dropdown-border-color, --lx-gray-05, --ls-tertiary-background-color);
|
|
min-width: 12rem;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
.dropdown-caret {
|
|
display: inline-block;
|
|
width: 0;
|
|
height: 0;
|
|
vertical-align: middle;
|
|
content: '';
|
|
border-top-style: solid;
|
|
border-top-width: 4px;
|
|
border-right: 4px solid transparent;
|
|
border-bottom: 0 solid transparent;
|
|
border-left: 4px solid transparent;
|
|
}
|
|
|
|
.form-select {
|
|
@apply block w-full pl-3 pr-10 py-2 text-base leading-6 rounded
|
|
border-gray-300 focus:outline-none sm:text-sm sm:leading-5;
|
|
|
|
background-color: or(--lx-gray-03, --ls-primary-background-color, transparent);
|
|
background-repeat: no-repeat;
|
|
border-width: 1px;
|
|
border-color: or(--lx-gray-07, --ls-border-color);
|
|
|
|
&.is-small {
|
|
@apply pl-2 py-1.5 sm:leading-4 sm:text-xs;
|
|
}
|
|
}
|
|
|
|
.form-input {
|
|
@apply block w-full pl-2
|
|
sm:text-sm sm:leading-5 rounded;
|
|
|
|
border-width: 1px;
|
|
border-color: or(--lx-gray-07, --ls-border-color);
|
|
|
|
&:focus {
|
|
box-shadow: 0 0 0 2px rgba(164, 202, 254, 0.45);
|
|
}
|
|
|
|
&.is-small {
|
|
@apply py-1.5 sm:leading-4 sm:text-xs;
|
|
}
|
|
}
|
|
|
|
.rotating-arrow.not-collapsed svg {
|
|
transform: rotate(90deg);
|
|
}
|
|
|
|
.rotating-arrow svg {
|
|
transition: all 100ms ease-in 0ms;
|
|
}
|
|
|
|
.bg-quaternary {
|
|
background-color: or(--lx-gray-06, --ls-quaternary-background-color);
|
|
}
|
|
|
|
.ui__icon {
|
|
display: inline-block;
|
|
}
|
|
|
|
.type-icon {
|
|
@apply text-base text-center flex items-center justify-center rounded border mr-2 relative;
|
|
|
|
width: 24px;
|
|
height: 24px;
|
|
flex-shrink: 0;
|
|
border-color: or(--lx-gray-03, --ls-primary-background-color);
|
|
overflow: hidden;
|
|
color: or(--lx-gray-12, --ls-primary-text-color);
|
|
|
|
.ti,
|
|
.tie {
|
|
z-index: 1;
|
|
}
|
|
|
|
&:before {
|
|
@apply block absolute inset-0 ;
|
|
background: or(--lx-gray-03, --ls-primary-background-color);
|
|
content: " ";
|
|
}
|
|
}
|
|
|
|
.ui__radio-list {
|
|
@apply grid grid-flow-col gap-2;
|
|
}
|
|
|
|
.ui__toggle-background-on {
|
|
background: or(--logseq-og-toggle-on-background, --lx-accent-09, rgb(2, 132, 199));
|
|
}
|
|
|
|
.ui__toggle-background-off {
|
|
background: or(--logseq-og-toggle-off-background, --lx-gray-08, rgb(212, 212, 212));
|
|
}
|