extern/pdf-to-markdown
1
0
Fork 0
mirror of https://github.com/jzillmann/pdf-to-markdown.git synced 2025-02-23 05:10:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Unify select color

Browse Source
This commit is contained in:
Johannes Zillmann 2021-03-04 07:45:25 +01:00
parent aae2d94eab
commit 4d41de82ea
9 changed files with 58 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
ui/src/components/Checkbox.svelte
View File

@ -6,16 +6,20 @@
<input id="checkbox-{name}" type="checkbox" class="hidden" bind:checked={enabled} />
<label
for="checkbox-{name}"
class="py-0.5 px-1 border-2 border-transparent cursor-pointer select-none whitespace-nowrap">{name}</label>
class="py-0.5 px-1 border-t-2 border-b-2 border-transparent cursor-pointer select-none whitespace-nowrap">{name}</label>
<style>
label:hover {
color: var(--color-blue-600);
input:not(:checked) + label:hover {
transform: scale(1.1);
@apply text-select;
}
input:checked + label:hover {
transform: scale(1.1);
}
input:checked + label {
border-top-color: var(--color-blue-600);
border-bottom-color: var(--color-blue-600);
@apply border-select;
}
input + label:hover:not(:active) {

2
ui/src/components/ProgressRing.svelte
View File

@ -19,7 +19,7 @@
<svg
height={radius * 2}
width={radius * 2}
class="text-green-600 stroke-current"
class="text-select stroke-current"
style="filter: brightness({$progressTweened / 100 / 2 + 0.5}) sepia({0.5 - $progressTweened / 100 / 2}) blur({0.6 - $progressTweened / 100 / 3}px)">
<circle
fill="transparent"

10
ui/src/debug/DebugView.svelte
View File

@ -45,13 +45,13 @@
<div class="flex items-center space-x-2">
{#if pageIsPinned}
<span on:click={() => (pinnedPage = undefined)} transition:slideH={{ duration: 180, easing: linear }}>
<Icon class="text-xs hover:text-green-700 hover:opacity-25 cursor-pointer opacity-75" icon={pin} />
<Icon class="text-xs hover:text-select hover:opacity-25 cursor-pointer opacity-75" icon={pin} />
</span>
{/if}
<span>
<Popup>
<span slot="trigger">
<BookOpen size="1x" class="hover:text-green-700 cursor-pointer" />
<BookOpen size="1x" class="hover:text-select cursor-pointer" />
</span>
<span slot="content">
<PageSelectionPopup
@ -67,10 +67,10 @@
<div>|</div>
<div>Transformation:</div>
<span on:click={() => canPrev && debugStage.update((cur) => cur - 1)}>
<ArrowLeft size="1x" class={canPrev ? 'hover:text-green-700 cursor-pointer' : 'opacity-50'} />
<ArrowLeft size="1x" class={canPrev ? 'hover:text-select cursor-pointer' : 'opacity-50'} />
</span>
<span on:click={() => canNext && debugStage.update((cur) => cur + 1)}>
<ArrowRight size="1x" class={canNext ? 'hover:text-green-700 cursor-pointer' : 'opacity-50'} />
<ArrowRight size="1x" class={canNext ? 'hover:text-select cursor-pointer' : 'opacity-50'} />
</span>
<span>
<Popup>
@ -105,7 +105,7 @@
<!-- Stage Messages -->
<ul
class="messages list-disc list-inside mb-2 p-2 bg-yellow-100 rounded shadow text-sm"
class="messages list-disc list-inside mb-2 p-2 bg-blue-50 rounded shadow text-sm"
style="max-height:{stageResult.messages.length * 40}px">
{#each stageResult.messages as message}
<li in:slide={{ delay: 200 }} out:slide>{message}</li>

6
ui/src/debug/FontEntry.svelte
View File

@ -49,10 +49,10 @@
grid-template-columns: 1fr 2.5fr;
}
.header:hover {
filter: hue-rotate(180deg);
transform: scale(1.01);
@apply bg-select;
transform: scale(1.02);
}
.opened {
filter: hue-rotate(180deg);
@apply bg-select;
}
</style>

5
ui/src/debug/FontIndex.svelte
View File

@ -1,4 +1,5 @@
<script>
import { clickOutside } from '../actions/clickOutside';
import slideH from '../svelte/slideH';
import FontEntry from './FontEntry.svelte';
@ -6,7 +7,7 @@
export let fontMap: Map<string, object>;
</script>
<div class="flex items-start">
<div class="flex items-start" use:clickOutside={{ enabled: showFonts, cb: () => (showFonts = false) }}>
{#if showFonts}
<div class="py-2 px-2 bg-gray-200 rounded-br">
<div class=" overflow-y-scroll " style="max-height: 65vh" transition:slideH={{ duration: 400 }}>
@ -17,7 +18,7 @@
</div>
{/if}
<div
class=" px-1.5 py-0.5 bg-gray-200 text-lg font-mono font-bold rounded-r {showFonts ? '' : 'shadow'} cursor-pointer hover:text-blue-600"
class=" px-1.5 py-0.5 bg-gray-200 text-lg font-mono font-bold rounded-r {showFonts ? '' : 'shadow'} cursor-pointer hover:text-select"
style="font-family: AmericanTypewriter, verdana"
on:click={() => (showFonts = !showFonts)}>
{showFonts ? 'X' : 'F'}

4
ui/src/debug/PageSelectionPopup.svelte
View File

@ -24,13 +24,13 @@
<div class="absolute mt-2 p-2 flex bg-gray-200 shadow-lg rounded-sm overflow-auto max-h-96" transition:slide>
<span class="mt-1 pr-2" on:click={!!pinnedPage && unpinPage}>
<Collection size="1x" class={!!pinnedPage ? 'hover:text-green-700 cursor-pointer' : 'opacity-50'} />
<Collection size="1x" class={!!pinnedPage ? 'hover:text-select cursor-pointer' : 'opacity-50'} />
</span>
<div class="grid gap-3" style="grid-template-columns: repeat({Math.min(20, maxPage + 1)}, minmax(0, 1fr));">
{#each new Array(maxPage + 1) as _, idx}
<div
on:click={() => pagesNumbers.has(idx) && pinPage(idx)}
class="px-2 border border-gray-300 rounded-full text-center {pagesNumbers.has(idx) ? (pinnedPage === idx ? 'bg-green-600' : 'hover:text-green-700 hover:border-green-700 cursor-pointer') : 'opacity-50'}">
class="px-2 border border-gray-300 rounded-full text-center {pagesNumbers.has(idx) ? (pinnedPage === idx ? 'bg-select' : 'hover:text-select hover:border-select cursor-pointer') : 'opacity-50'}">
{idx}
</div>
{/each}

8
ui/src/debug/TransformerSelectionPopup.svelte
View File

@ -43,8 +43,7 @@
@apply cursor-pointer;
}
.selectable:hover {
@apply bg-gray-400;
@apply text-green-700;
@apply bg-select;
@apply rounded;
}
@ -59,7 +58,10 @@
/* the arrow */
border: 10px solid;
border-color: transparent transparent transparent var(--color-gray-600);
@apply border-select;
@apply border-t-transparent;
@apply border-r-transparent;
@apply border-b-transparent;
/* basic styles */
@apply ml-2;

8
ui/src/main/Upload.svelte
View File

@ -53,7 +53,7 @@
</div>
<!-- Upload Box -->
<div class="mb-5 border-2 border-dashed border-gray-400 hover:border-green-800" class:dragover>
<div class="mb-5 border-2 border-dashed border-gray-400 hover:border-select" class:dragover>
<Dropzone
on:drop={handleFilesSelect}
on:dragenter={() => (dragover = true)}
@ -106,7 +106,7 @@
{stage}
{parseProgress.stageDetails[index] ? parseProgress.stageDetails[index] : ''}
</div>
<Check size="1.5x" class="text-green-700" />
<Check size="1.5x" class="text-select" />
</div>
{/if}
{/each}
@ -127,9 +127,9 @@
<style>
.dragover {
@apply border-green-600;
@apply border-select;
}
.dragoverItem {
@apply text-green-600;
@apply text-select;
}
</style>

44
ui/tailwind.config.js
View File

@ -1,3 +1,5 @@
const plugin = require('tailwindcss/plugin');
module.exports = {
future: {
removeDeprecatedGapUtilities: true,
@ -7,29 +9,35 @@ module.exports = {
content: ['./src/**/*.svelte', './src/**/*.ts'],
},
theme: {
extend: {},
extend: {
colors: {
// gray-400 hue-rotated 180deg
select: '#A8A297',
},
},
},
variants: {
extend: {},
},
plugins: [
function ({ addBase, theme }) {
function extractColorVars(colorObj, colorGroup = '') {
return Object.keys(colorObj).reduce((vars, colorKey) => {
const value = colorObj[colorKey];
plugin(function ({ addUtilities, theme }) {
const themeColors = theme('colors');
const individualBorderColors = Object.keys(themeColors).map((colorName) => ({
[`.border-b-${colorName}`]: {
borderBottomColor: themeColors[colorName],
},
[`.border-t-${colorName}`]: {
borderTopColor: themeColors[colorName],
},
[`.border-l-${colorName}`]: {
borderLeftColor: themeColors[colorName],
},
[`.border-r-${colorName}`]: {
borderRightColor: themeColors[colorName],
},
}));
const newVars =
typeof value === 'string'
? { [`--color${colorGroup}-${colorKey}`]: value }
: extractColorVars(value, `-${colorKey}`);
return { ...vars, ...newVars };
}, {});
}
addBase({
':root': extractColorVars(theme('colors')),
});
},
addUtilities(individualBorderColors);
}),
],
};