home/links
2
0
Fork 0
mirror of https://github.com/wahyd4/links.git synced 2026-08-09 05:06:16 +10:00
Code Issues Packages Projects Releases Wiki Activity

Update style

Browse Source
This commit is contained in:
junv
2024-11-13 23:02:56 +11:00
parent 94589acedb
commit 3925aec5bc
3 changed files with 155 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files
links/templates/links/page_detail.html
+27 -6
View File
@@ -24,18 +24,33 @@
<div class="flex justify-between items-center mb-6">
<h1 class="text-3xl font-bold text-gray-900">{{ page.title|default:"Untitled" }}</h1>
<div class="flex space-x-2">
<a href="{% url 'page-update' page.pk %}" class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 inline-flex rounded items-center text-blue-600 hover:text-blue-800">
<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
<a href="{% url 'page-update' page.pk %}"
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">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
</svg>
{% trans "Edit" %}
</a>
<a href="{{ page.url }}" target="_blank" rel="noopener noreferrer" class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 inline-flex rounded items-center text-green-600 hover:text-green-800">
<svg class="w-5 h-5 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
<a href="{{ page.url }}"
target="_blank"
rel="noopener noreferrer"
class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-green-500 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/>
</svg>
{% trans "Visit URL" %}
</a>
<button type="button"
onclick="deletePage({{ 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-red-600 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
</svg>
{% trans "Delete" %}
</button>
</div>
</div>
<!-- Page Status -->
@@ -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">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M3 9a2 2 0 012-2h.93a2 2 0 001.664-.89l.812-1.22A2 2 0 0110.07 4h3.86a2 2 0 011.664.89l.812 1.22A2 2 0 0018.07 7H19a2 2 0 012 2v9a2 2 0 01-2 2H5a2 2 0 01-2-2V9z"/>
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M15 13a3 3 0 11-6 0 3 3 0 016 0z"/>
</svg>
{% trans "Take Another Screenshot" %}
</button>
</div>
new_theme/static/css/dist/styles.css
Vendored
+119 -38
View File
@@ -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) {
templates/base.html
+9 -8
View File
@@ -102,14 +102,7 @@
{% trans "Tools" %}
</div>
</a>
<a href="{% url 'help' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<div class="flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
{% trans "Help" %}
</div>
</a>
<a href="{% url 'screenshot-gallery' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<div class="flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -119,6 +112,14 @@
{% trans "Screenshots" %}
</div>
</a>
<a href="{% url 'help' %}" class="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100">
<div class="flex items-center">
<svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
{% trans "Help" %}
</div>
</a>
</div>
</div>
<!-- 语言选择器 -->