b79ffdbbcf
Shrink the enabled column, expand endpoint space, and slightly widen timeout numeric input to improve readability and alignment in the webhook integration controls. Made-with: Cursor
226 lines
4.1 KiB
Sass
226 lines
4.1 KiB
Sass
.add-url-box
|
|
max-width: 960px
|
|
margin: 4rem auto
|
|
|
|
.metube-section-header
|
|
font-size: 1.8rem
|
|
font-weight: 300
|
|
position: relative
|
|
background: var(--bs-secondary-bg)
|
|
padding: 0.5rem 0
|
|
margin-top: 3.5rem
|
|
|
|
.metube-section-header:before
|
|
content: ""
|
|
position: absolute
|
|
top: 0
|
|
bottom: 0
|
|
left: -9999px
|
|
right: 0
|
|
border-left: 9999px solid var(--bs-secondary-bg)
|
|
box-shadow: 9999px 0 0 var(--bs-secondary-bg)
|
|
|
|
button:hover
|
|
text-decoration: none
|
|
|
|
th
|
|
border-top: 0
|
|
border-bottom-width: 3px !important
|
|
vertical-align: middle !important
|
|
white-space: nowrap
|
|
|
|
td
|
|
vertical-align: middle
|
|
|
|
.disabled
|
|
opacity: 0.5
|
|
pointer-events: none
|
|
|
|
.form-switch
|
|
input
|
|
margin-top: 5px
|
|
|
|
.download-progressbar
|
|
width: 12rem
|
|
margin-left: auto
|
|
|
|
.modal.fade.show
|
|
background-color: rgba(0, 0, 0, 0.5)
|
|
|
|
.modal-header
|
|
border-bottom: 1px solid var(--bs-border-color)
|
|
|
|
.modal-body
|
|
textarea.form-control
|
|
resize: vertical
|
|
|
|
.add-url
|
|
display: inline-flex
|
|
align-items: center
|
|
justify-content: center
|
|
|
|
.spinner-border
|
|
margin-right: 0.5rem
|
|
|
|
.add-progress-btn
|
|
min-width: 9.5rem
|
|
cursor: default
|
|
|
|
.add-cancel-btn
|
|
min-width: 3.25rem
|
|
|
|
:host
|
|
display: flex
|
|
flex-direction: column
|
|
min-height: 100vh
|
|
|
|
main
|
|
flex-grow: 1
|
|
|
|
.footer
|
|
width: 100%
|
|
padding: 10px 0
|
|
background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.1))
|
|
|
|
.footer-content
|
|
display: flex
|
|
justify-content: center
|
|
align-items: center
|
|
gap: 20px
|
|
color: #fff
|
|
font-size: 0.9rem
|
|
|
|
.version-item
|
|
display: flex
|
|
align-items: center
|
|
gap: 8px
|
|
|
|
.version-label
|
|
font-size: 0.75rem
|
|
text-transform: uppercase
|
|
letter-spacing: 0.5px
|
|
opacity: 0.7
|
|
|
|
.version-value
|
|
font-family: monospace
|
|
font-size: 0.85rem
|
|
padding: 2px 6px
|
|
background: rgba(255,255,255,0.1)
|
|
border-radius: 4px
|
|
|
|
.version-separator
|
|
width: 1px
|
|
height: 16px
|
|
background: rgba(255,255,255,0.2)
|
|
margin: 0 4px
|
|
|
|
.github-link
|
|
display: flex
|
|
align-items: center
|
|
gap: 6px
|
|
color: #fff
|
|
text-decoration: none
|
|
font-size: 0.85rem
|
|
padding: 2px 8px
|
|
border-radius: 4px
|
|
transition: background-color 0.2s ease
|
|
|
|
&:hover
|
|
background: rgba(255,255,255,0.1)
|
|
color: #fff
|
|
text-decoration: none
|
|
|
|
i
|
|
font-size: 1rem
|
|
|
|
.download-metrics
|
|
display: flex
|
|
align-items: center
|
|
gap: 16px
|
|
margin-left: 24px
|
|
|
|
.metric
|
|
display: flex
|
|
align-items: center
|
|
gap: 6px
|
|
font-size: 0.9rem
|
|
color: #adb5bd
|
|
|
|
fa-icon
|
|
font-size: 1rem
|
|
|
|
span
|
|
white-space: nowrap
|
|
|
|
.cookie-btn
|
|
flex: 1 1 auto
|
|
background-color: var(--bs-secondary-bg)
|
|
border-color: var(--bs-border-color)
|
|
color: var(--bs-emphasis-color)
|
|
|
|
&:hover
|
|
background-color: var(--bs-tertiary-bg)
|
|
border-color: var(--bs-secondary)
|
|
color: var(--bs-emphasis-color)
|
|
|
|
&.disabled
|
|
opacity: 0.65
|
|
pointer-events: none
|
|
|
|
.cookie-active-btn
|
|
flex: 1 1 auto
|
|
background-color: var(--bs-success-bg-subtle)
|
|
border-color: var(--bs-success-border-subtle)
|
|
color: var(--bs-success-text-emphasis)
|
|
|
|
&:hover
|
|
background-color: var(--bs-success-bg-subtle)
|
|
border-color: var(--bs-success)
|
|
color: var(--bs-success-text-emphasis)
|
|
|
|
&.disabled
|
|
opacity: 0.65
|
|
pointer-events: none
|
|
|
|
.action-group-label
|
|
font-size: 0.7rem
|
|
text-transform: uppercase
|
|
letter-spacing: 0.05em
|
|
color: var(--bs-secondary-color)
|
|
margin-bottom: 0.4rem
|
|
|
|
.cookie-status
|
|
font-size: 0.8rem
|
|
margin-top: 0.35rem
|
|
color: var(--bs-secondary-color)
|
|
|
|
&.active
|
|
color: var(--bs-success-text-emphasis)
|
|
|
|
.webhook-integration
|
|
.input-group
|
|
margin-bottom: 0
|
|
|
|
.webhook-timeout-input
|
|
min-width: 66px
|
|
|
|
.webhook-action-row
|
|
display: flex
|
|
flex-wrap: wrap
|
|
gap: 0.5rem
|
|
|
|
.webhook-status-block
|
|
min-height: 2.5rem
|
|
display: flex
|
|
flex-direction: column
|
|
justify-content: center
|
|
text-align: left
|
|
|
|
.webhook-response-block
|
|
margin-top: 0.25rem
|
|
padding: 0.5rem 0.75rem
|
|
border: 1px solid var(--bs-border-color)
|
|
border-radius: 0.375rem
|
|
background: var(--bs-tertiary-bg)
|
|
white-space: pre-wrap
|
|
word-break: break-word
|