diff --git a/links/templates/links/page_detail.html b/links/templates/links/page_detail.html index 72381ee..248f8f1 100644 --- a/links/templates/links/page_detail.html +++ b/links/templates/links/page_detail.html @@ -24,18 +24,33 @@

{{ page.title|default:"Untitled" }}

- - - + + + {% trans "Edit" %} - - - + + + {% trans "Visit URL" %} +
@@ -131,6 +146,12 @@ type="button" onclick="takeNewScreenshot({{ page.id }})" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> + + + + {% trans "Take Another Screenshot" %} diff --git a/new_theme/static/css/dist/styles.css b/new_theme/static/css/dist/styles.css index d8b8468..ad84992 100644 --- a/new_theme/static/css/dist/styles.css +++ b/new_theme/static/css/dist/styles.css @@ -588,30 +588,10 @@ video { } } -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; -} - .pointer-events-none { pointer-events: none; } -.visible { - visibility: visible; -} - -.collapse { - visibility: collapse; -} - .static { position: static; } @@ -628,15 +608,15 @@ video { position: relative; } -.sticky { - position: sticky; -} - .inset-y-0 { top: 0px; bottom: 0px; } +.bottom-0 { + bottom: 0px; +} + .left-0 { left: 0px; } @@ -780,8 +760,8 @@ video { display: block; } -.inline { - display: inline; +.inline-block { + display: inline-block; } .flex { @@ -800,14 +780,14 @@ video { display: grid; } -.contents { - display: contents; -} - .hidden { display: none; } +.h-10 { + height: 2.5rem; +} + .h-12 { height: 3rem; } @@ -832,6 +812,10 @@ video { height: 1.25rem; } +.h-6 { + height: 1.5rem; +} + .h-auto { height: auto; } @@ -872,6 +856,10 @@ video { width: 1.25rem; } +.w-6 { + width: 1.5rem; +} + .w-full { width: 100%; } @@ -896,6 +884,10 @@ video { max-width: 80rem; } +.max-w-full { + max-width: 100%; +} + .max-w-lg { max-width: 32rem; } @@ -928,14 +920,14 @@ video { flex-grow: 1; } -.border-collapse { - border-collapse: collapse; -} - .transform { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.cursor-not-allowed { + cursor: not-allowed; +} + .select-all { -webkit-user-select: all; -moz-user-select: all; @@ -968,10 +960,6 @@ video { flex-direction: column; } -.content-start { - align-content: flex-start; -} - .items-start { align-items: flex-start; } @@ -1039,6 +1027,12 @@ video { margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } +.space-y-1\.5 > :not([hidden]) ~ :not([hidden]) { + --tw-space-y-reverse: 0; + margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); + margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); +} + .space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); @@ -1280,6 +1274,30 @@ video { background-color: rgb(254 249 195 / var(--tw-bg-opacity)); } +.bg-gradient-to-b { + background-image: linear-gradient(to bottom, var(--tw-gradient-stops)); +} + +.bg-gradient-to-t { + background-image: linear-gradient(to top, var(--tw-gradient-stops)); +} + +.from-black\/40 { + --tw-gradient-from: rgb(0 0 0 / 0.4) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.from-black\/60 { + --tw-gradient-from: rgb(0 0 0 / 0.6) var(--tw-gradient-from-position); + --tw-gradient-to: rgb(0 0 0 / 0) var(--tw-gradient-to-position); + --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); +} + +.to-transparent { + --tw-gradient-to: transparent var(--tw-gradient-to-position); +} + .object-contain { -o-object-fit: contain; object-fit: contain; @@ -1294,6 +1312,10 @@ video { padding: 0.25rem; } +.p-1\.5 { + padding: 0.375rem; +} + .p-2 { padding: 0.5rem; } @@ -1310,6 +1332,10 @@ video { padding: 1.5rem; } +.p-8 { + padding: 2rem; +} + .px-2 { padding-left: 0.5rem; padding-right: 0.5rem; @@ -1375,6 +1401,14 @@ video { padding-bottom: 2rem; } +.pl-3 { + padding-left: 0.75rem; +} + +.pr-10 { + padding-right: 2.5rem; +} + .pr-3 { padding-right: 0.75rem; } @@ -1617,6 +1651,14 @@ video { text-decoration-line: line-through; } +.opacity-0 { + opacity: 0; +} + +.opacity-50 { + opacity: 0.5; +} + .shadow { --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color); @@ -1664,6 +1706,12 @@ video { transition-duration: 150ms; } +.transition-opacity { + transition-property: opacity; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + .transition-transform { transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); @@ -1783,6 +1831,11 @@ video { background-color: rgb(147 51 234 / var(--tw-bg-opacity)); } +.hover\:bg-red-200:hover { + --tw-bg-opacity: 1; + background-color: rgb(254 202 202 / var(--tw-bg-opacity)); +} + .hover\:bg-red-50:hover { --tw-bg-opacity: 1; background-color: rgb(254 242 242 / var(--tw-bg-opacity)); @@ -1828,6 +1881,11 @@ video { color: rgb(55 65 81 / var(--tw-text-opacity)); } +.hover\:text-gray-800:hover { + --tw-text-opacity: 1; + color: rgb(31 41 55 / var(--tw-text-opacity)); +} + .hover\:text-gray-900:hover { --tw-text-opacity: 1; color: rgb(17 24 39 / var(--tw-text-opacity)); @@ -1904,6 +1962,11 @@ video { --tw-ring-color: rgb(107 114 128 / var(--tw-ring-opacity)); } +.focus\:ring-green-500:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(34 197 94 / var(--tw-ring-opacity)); +} + .focus\:ring-red-500:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(239 68 68 / var(--tw-ring-opacity)); @@ -1923,6 +1986,10 @@ video { transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } +.group:hover .group-hover\:opacity-100 { + opacity: 1; +} + @media (min-width: 640px) { .sm\:col-span-1 { grid-column: span 1 / span 1; @@ -1960,6 +2027,10 @@ video { grid-template-columns: repeat(2, minmax(0, 1fr)); } + .sm\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + .sm\:flex-row { flex-direction: row; } @@ -1982,6 +2053,12 @@ video { margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse))); } + .sm\:space-x-4 > :not([hidden]) ~ :not([hidden]) { + --tw-space-x-reverse: 0; + margin-right: calc(1rem * var(--tw-space-x-reverse)); + margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse))); + } + .sm\:space-y-0 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0px * calc(1 - var(--tw-space-y-reverse))); @@ -2034,6 +2111,10 @@ video { .md\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } + + .md\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } } @media (min-width: 1024px) { diff --git a/templates/base.html b/templates/base.html index acedf39..97489a7 100644 --- a/templates/base.html +++ b/templates/base.html @@ -102,14 +102,7 @@ {% trans "Tools" %} - -
- - - - {% trans "Help" %} -
- +
@@ -119,6 +112,14 @@ {% trans "Screenshots" %}
+ +
+ + + + {% trans "Help" %} +
+