From e553eea7ed6700342f4003f1300e29bb556b4eb8 Mon Sep 17 00:00:00 2001 From: Demis Bellot Date: Tue, 20 Feb 2024 13:09:30 +0800 Subject: [PATCH] update styles --- MyApp.Client/src/assets/styles/index.css | 68 +++++++++--------------- MyApp.Client/src/pages/bookings-auto.vue | 2 +- MyApp.Client/src/pages/todomvc.vue | 10 ++-- 3 files changed, 31 insertions(+), 49 deletions(-) diff --git a/MyApp.Client/src/assets/styles/index.css b/MyApp.Client/src/assets/styles/index.css index a7f2ba2..7a1ddbb 100644 --- a/MyApp.Client/src/assets/styles/index.css +++ b/MyApp.Client/src/assets/styles/index.css @@ -13,50 +13,32 @@ b, strong { font-weight:600; } /*vue*/ [v-cloak] {display:none} -/* @tailwindcss/forms css */ -[type='text'],[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='month'],[type='search'],[type='tel'],[type='time'],[multiple],textarea,select -{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:#fff;border-color:#6b7280;border-width:1px;border-radius:0;padding:0.5rem 0.75rem;font-size:1rem;line-height:1.5rem} -[type='text']:focus,[type='email']:focus,[type='url']:focus,[type='password']:focus,[type='number']:focus,[type='date']:focus,[type='month']:focus,[type='search']:focus,[type='tel']:focus,[type='time']:focus,[multiple]:focus,textarea:focus,select:focus{ - outline:2px solid transparent;outline-offset:2px;--tw-ring-inset:var(--tw-empty,/*!*/ /*!*/); - --tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb; - --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow,0 0 #0000);border-color:#2563eb} -input::-moz-placeholder,textarea::-moz-placeholder{color:#6b7280;opacity:1} -input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#6b7280;opacity:1} -input::placeholder,textarea::placeholder{color:#6b7280;opacity:1} -select{ - background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); - background-position:right 0.5rem center;background-repeat:no-repeat;background-size:1.5em 1.5em;padding-right:2.5rem;-webkit-print-color-adjust:exact;print-color-adjust:exact} -[multiple]{ - background-image:initial;background-position:initial;background-repeat:unset;background-size:initial;padding-right:0.75rem;-webkit-print-color-adjust:unset;print-color-adjust:unset;} -[type='checkbox'],[type='radio']{ - -webkit-appearance:none;-moz-appearance:none;appearance:none;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact;display:inline-block; - vertical-align:middle;background-origin:border-box;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none; - flex-shrink:0;height:1rem;width:1rem;color:#2563eb;background-color:#fff;border-color:#6b7280;border-width:1px} -[type='checkbox']{border-radius:0} -[type='radio']{border-radius:100%} -[type='checkbox']:focus,[type='radio']:focus{ - outline:2px solid transparent;outline-offset:2px; - --tw-ring-inset:var(--tw-empty,/*!*/ /*!*/);--tw-ring-offset-width:2px;--tw-ring-offset-color:#fff;--tw-ring-color:#2563eb; - --tw-ring-offset-shadow:var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000)} -[type='checkbox']:checked,[type='radio']:checked{ - border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat} -[type='checkbox']:checked{ - background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e")} -[type='radio']:checked{ - background-image:url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e")} -[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{ - border-color:transparent;background-color:currentColor} -[type='checkbox']:indeterminate{ - background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e"); - border-color:transparent;background-color:currentColor;background-size:100% 100%;background-position:center;background-repeat:no-repeat} -[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{border-color:transparent;background-color:currentColor} -[type='file']{background:unset;border-color:inherit;border-width:0;border-radius:0;padding:0;font-size:unset;line-height:inherit} -[type='file']:focus{outline:1px auto -webkit-focus-ring-color;} +/*typography*/ +.prose pre::-webkit-scrollbar, .prose code::-webkit-scrollbar { + width: 8px; + height: 8px; + background: #2d3748; +} +.prose pre::-webkit-scrollbar-thumb, .prose code::-webkit-scrollbar-thumb { + background-color: rgb(100 116 139); +} +code[class*=language-], pre[class*=language-] { + background-color:#1f2937; + min-width: fit-content; +} +.dark .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *,pre code)) { + background-color: #172554; /* blue-950 */ + color: #e5e7eb; /* gray-200 */ +} +/* dark mode autocomplete fields */ +.dark input:-webkit-autofill, +.dark input:-webkit-autofill:focus { + transition: background-color 600000s 0s, color 600000s 0s; +} +.dark input[data-autocompleted] { + background-color: transparent !important; +} /* @tailwindcss/aspect css */ .aspect-h-9 { diff --git a/MyApp.Client/src/pages/bookings-auto.vue b/MyApp.Client/src/pages/bookings-auto.vue index 8986014..b57bd35 100644 --- a/MyApp.Client/src/pages/bookings-auto.vue +++ b/MyApp.Client/src/pages/bookings-auto.vue @@ -5,7 +5,7 @@ diff --git a/MyApp.Client/src/pages/todomvc.vue b/MyApp.Client/src/pages/todomvc.vue index fce5bf8..f0b05a7 100644 --- a/MyApp.Client/src/pages/todomvc.vue +++ b/MyApp.Client/src/pages/todomvc.vue @@ -7,8 +7,8 @@ @keyup.enter.stop="store.addTodo()" /> -
-
    +
    +
    • @@ -50,7 +50,7 @@
      -
      +
      @@ -70,8 +70,8 @@ store.refreshTodos() const FilterTab = (props:{ filter:Filter }, context:SetupContext) => { return h('a', { href: '#', - 'class': `border-gray-200 text-sm font-medium px-4 py-2 hover:bg-gray-100 - focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:border-gray-600 + 'class': `border-gray-200 dark:border-gray-700 text-sm font-medium px-4 py-2 hover:bg-gray-100 + focus:z-10 focus:ring-2 focus:ring-blue-700 focus:text-blue-700 dark:text-white dark:hover:text-white dark:hover:bg-gray-600 dark:focus:ring-blue-500 dark:focus:text-white ${props.filter == store.filter ? 'text-blue-700 dark:bg-blue-600' : 'text-gray-900 hover:text-blue-700 dark:bg-gray-700'}`, onClick: (e:MouseEvent) => {