Skip to content

Commit

Permalink
[Web] Add more borders subtitle card and line markers
Browse files Browse the repository at this point in the history
  • Loading branch information
Cerlancism committed Jan 20, 2024
1 parent 6bd1502 commit c73840c
Show file tree
Hide file tree
Showing 3 changed files with 11 additions and 4 deletions.
5 changes: 5 additions & 0 deletions web/src/app/globals.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,8 @@
@tailwind base;
@tailwind components;
@tailwind utilities;

.line-marker li::marker {
/* content: counter(list-item) ". "; */
color: rgba(0, 0, 0, 0.3);
}
6 changes: 4 additions & 2 deletions web/src/components/SubtitleCard.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,10 @@ export function SubtitleCard({ children, text }) {
<div className='rounded-lg border bg-card shadow-sm'>
<div className='p-8'>
<h2 className="text-lg font-medium">{text}</h2>
<div className='ml-4 rounded-lg border bg-card text-card-foreground shadow-sm min-h-96 '>
{children}
<div className="rounded-lg pl-8 border">
<div className='ml-4 rounded-lg border-l bg-card text-card-foreground shadow-sm min-h-96 '>
{children}
</div>
</div>
</div>
</div>
Expand Down
4 changes: 2 additions & 2 deletions web/src/components/TranslatorApplication.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -195,7 +195,7 @@ export function TranslatorApplication() {
<div className="lg:flex lg:gap-4 px-4">
<div className="lg:w-1/2">
<SubtitleCard text={"Input"}>
<ol className="py-2 list-decimal">
<ol className="py-2 list-decimal line-marker ">
{inputs.map((line, i) => {
return (
<li key={i} className=''>
Expand All @@ -211,7 +211,7 @@ export function TranslatorApplication() {

<div className="lg:w-1/2">
<SubtitleCard text={"Output"}>
<ol className="py-2 list-decimal">
<ol className="py-2 list-decimal line-marker ">
{outputs.map((line, i) => {
return (
<li key={i} className=''>
Expand Down

0 comments on commit c73840c

Please sign in to comment.