mirror of
https://github.com/logseq/logseq.git
synced 2026-04-27 07:35:01 +00:00
UX polish and refactor
- Visual polish for the settings page, keyboard shortcuts page, and outdenting tooltip - Tweak copy throughout the app to make it a little simpler - Add the ability to fetch the name of the meta key (i.e. Cmd or Ctrl) so it can be displayed to the user - Make it possible to Cancel out of editing a keyboard shortcut, rather than the only option being to Save
This commit is contained in:
Devon Zuegel
committed by
Tienson Qin
Tienson Qin
parent
7817efb81c
commit
592d731732
@@ -341,7 +341,294 @@ video {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
/* TODO: add all tailwind supported bg colors */
|
||||
.bg-black {
|
||||
background-color: rgba(0, 0, 0);
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
background-color: rgba(255, 255, 255);
|
||||
}
|
||||
|
||||
.bg-gray-50 {
|
||||
background-color: rgba(249, 250, 251);
|
||||
}
|
||||
|
||||
.bg-gray-100 {
|
||||
background-color: rgba(243, 244, 246);
|
||||
}
|
||||
|
||||
.bg-gray-200 {
|
||||
background-color: rgba(229, 231, 235);
|
||||
}
|
||||
|
||||
.bg-gray-300 {
|
||||
background-color: rgba(209, 213, 219);
|
||||
}
|
||||
|
||||
.bg-gray-400 {
|
||||
background-color: rgba(156, 163, 175);
|
||||
}
|
||||
|
||||
.bg-gray-500 {
|
||||
background-color: rgba(107, 114, 128);
|
||||
}
|
||||
|
||||
.bg-gray-600 {
|
||||
background-color: rgba(75, 85, 99);
|
||||
}
|
||||
|
||||
.bg-gray-700 {
|
||||
background-color: rgba(55, 65, 81);
|
||||
}
|
||||
|
||||
.bg-gray-800 {
|
||||
background-color: rgba(31, 41, 55);
|
||||
}
|
||||
|
||||
.bg-gray-900 {
|
||||
background-color: rgba(17, 24, 39);
|
||||
}
|
||||
|
||||
.bg-red-50 {
|
||||
background-color: rgba(254, 242, 242);
|
||||
}
|
||||
|
||||
.bg-red-100 {
|
||||
background-color: rgba(254, 226, 226);
|
||||
}
|
||||
|
||||
.bg-red-200 {
|
||||
background-color: rgba(254, 202, 202);
|
||||
}
|
||||
|
||||
.bg-red-300 {
|
||||
background-color: rgba(252, 165, 165);
|
||||
}
|
||||
|
||||
.bg-red-400 {
|
||||
background-color: rgba(248, 113, 113);
|
||||
}
|
||||
|
||||
.bg-red-500 {
|
||||
background-color: rgba(239, 68, 68);
|
||||
}
|
||||
|
||||
.bg-red-600 {
|
||||
background-color: rgba(220, 38, 38);
|
||||
}
|
||||
|
||||
.bg-red-700 {
|
||||
background-color: rgba(185, 28, 28);
|
||||
}
|
||||
|
||||
.bg-red-800 {
|
||||
background-color: rgba(153, 27, 27);
|
||||
}
|
||||
|
||||
.bg-red-900 {
|
||||
background-color: rgba(127, 29, 29);
|
||||
}
|
||||
|
||||
.bg-yellow-50 {
|
||||
background-color: rgba(255, 251, 235);
|
||||
}
|
||||
|
||||
.bg-yellow-100 {
|
||||
background-color: rgba(254, 243, 199);
|
||||
}
|
||||
|
||||
.bg-yellow-200 {
|
||||
background-color: rgba(253, 230, 138);
|
||||
}
|
||||
|
||||
.bg-yellow-300 {
|
||||
background-color: rgba(252, 211, 77);
|
||||
}
|
||||
|
||||
.bg-yellow-400 {
|
||||
background-color: rgba(251, 191, 36);
|
||||
}
|
||||
|
||||
.bg-yellow-500 {
|
||||
background-color: rgba(245, 158, 11);
|
||||
}
|
||||
|
||||
.bg-yellow-600 {
|
||||
background-color: rgba(217, 119, 6);
|
||||
}
|
||||
|
||||
.bg-yellow-700 {
|
||||
background-color: rgba(180, 83, 9);
|
||||
}
|
||||
|
||||
.bg-yellow-800 {
|
||||
background-color: rgba(146, 64, 14);
|
||||
}
|
||||
|
||||
.bg-yellow-900 {
|
||||
background-color: rgba(120, 53, 15);
|
||||
}
|
||||
|
||||
.bg-green-50 {
|
||||
background-color: rgba(236, 253, 245);
|
||||
}
|
||||
|
||||
.bg-green-100 {
|
||||
background-color: rgba(209, 250, 229);
|
||||
}
|
||||
|
||||
.bg-green-200 {
|
||||
background-color: rgba(167, 243, 208);
|
||||
}
|
||||
|
||||
.bg-green-300 {
|
||||
background-color: rgba(110, 231, 183);
|
||||
}
|
||||
|
||||
.bg-green-400 {
|
||||
background-color: rgba(52, 211, 153);
|
||||
}
|
||||
|
||||
.bg-green-500 {
|
||||
background-color: rgba(16, 185, 129);
|
||||
}
|
||||
|
||||
.bg-green-600 {
|
||||
background-color: rgba(5, 150, 105);
|
||||
}
|
||||
|
||||
.bg-green-700 {
|
||||
background-color: rgba(4, 120, 87);
|
||||
}
|
||||
|
||||
.bg-green-800 {
|
||||
background-color: rgba(6, 95, 70);
|
||||
}
|
||||
|
||||
.bg-green-900 {
|
||||
background-color: rgba(6, 78, 59);
|
||||
}
|
||||
|
||||
.bg-blue-50 {
|
||||
background-color: rgba(239, 246, 255);
|
||||
}
|
||||
|
||||
.bg-blue-100 {
|
||||
background-color: rgba(219, 234, 254);
|
||||
}
|
||||
|
||||
.bg-blue-200 {
|
||||
background-color: rgba(191, 219, 254);
|
||||
}
|
||||
|
||||
.bg-blue-300 {
|
||||
background-color: rgba(147, 197, 253);
|
||||
}
|
||||
|
||||
.bg-blue-400 {
|
||||
background-color: rgba(96, 165, 250);
|
||||
}
|
||||
|
||||
.bg-blue-500 {
|
||||
background-color: rgba(59, 130, 246);
|
||||
}
|
||||
|
||||
.bg-blue-600 {
|
||||
background-color: rgba(37, 99, 235);
|
||||
}
|
||||
|
||||
.bg-blue-700 {
|
||||
background-color: rgba(29, 78, 216);
|
||||
}
|
||||
|
||||
.bg-blue-800 {
|
||||
background-color: rgba(30, 64, 175);
|
||||
}
|
||||
|
||||
.bg-blue-900 {
|
||||
background-color: rgba(30, 58, 138);
|
||||
}
|
||||
|
||||
.bg-indigo-50 {
|
||||
background-color: rgba(238, 242, 255);
|
||||
}
|
||||
|
||||
.bg-indigo-100 {
|
||||
background-color: rgba(224, 231, 255);
|
||||
}
|
||||
|
||||
.bg-indigo-200 {
|
||||
background-color: rgba(199, 210, 254);
|
||||
}
|
||||
|
||||
.bg-indigo-300 {
|
||||
background-color: rgba(165, 180, 252);
|
||||
}
|
||||
|
||||
.bg-indigo-400 {
|
||||
background-color: rgba(129, 140, 248);
|
||||
}
|
||||
|
||||
.bg-indigo-500 {
|
||||
background-color: rgba(99, 102, 241);
|
||||
}
|
||||
|
||||
.bg-indigo-600 {
|
||||
background-color: rgba(79, 70, 229);
|
||||
}
|
||||
|
||||
.bg-indigo-700 {
|
||||
background-color: rgba(67, 56, 202);
|
||||
}
|
||||
|
||||
.bg-indigo-800 {
|
||||
background-color: rgba(55, 48, 163);
|
||||
}
|
||||
|
||||
.bg-indigo-900 {
|
||||
background-color: rgba(49, 46, 129);
|
||||
}
|
||||
|
||||
.bg-purple-50 {
|
||||
background-color: rgba(245, 243, 255);
|
||||
}
|
||||
|
||||
.bg-purple-100 {
|
||||
background-color: rgba(237, 233, 254);
|
||||
}
|
||||
|
||||
.bg-purple-200 {
|
||||
background-color: rgba(221, 214, 254);
|
||||
}
|
||||
|
||||
.bg-purple-300 {
|
||||
background-color: rgba(196, 181, 253);
|
||||
}
|
||||
|
||||
.bg-purple-400 {
|
||||
background-color: rgba(167, 139, 250);
|
||||
}
|
||||
|
||||
.bg-purple-500 {
|
||||
background-color: rgba(139, 92, 246);
|
||||
}
|
||||
|
||||
.bg-purple-600 {
|
||||
background-color: rgba(124, 58, 237);
|
||||
}
|
||||
|
||||
.bg-purple-700 {
|
||||
background-color: rgba(109, 40, 217);
|
||||
}
|
||||
|
||||
.bg-purple-800 {
|
||||
background-color: rgba(91, 33, 182);
|
||||
}
|
||||
|
||||
.bg-purple-900 {
|
||||
background-color: rgba(76, 29, 149);
|
||||
}
|
||||
|
||||
.bg-pink-100 {
|
||||
background-color: #fff5f7;
|
||||
}
|
||||
@@ -833,3 +1120,22 @@ a.page-op {
|
||||
.search-more {
|
||||
background: var(--ls-a-chosen-bg);
|
||||
}
|
||||
|
||||
.keyboard-shortcut > code {
|
||||
margin: 2px;
|
||||
background-color: var(--ls-quaternary-background-color);
|
||||
padding: 2px 4px !important;
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
html[data-theme='light'] .keyboard-shortcut > code {
|
||||
box-shadow: inset 0 -1px 0 #433f3855, 0 0 1px 1px #433f3822;
|
||||
}
|
||||
|
||||
html[data-theme='dark'] .keyboard-shortcut > code {
|
||||
box-shadow: inset 0 -1px 0 var(--ls-primary-background-color), 0 0 1px 1px rgba(255, 255, 255,.1);
|
||||
}
|
||||
|
||||
.ui__modal-panel {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user