metube/ui/src/app/app.component.sass

212 lines
3.9 KiB
Sass

.button-toggle-theme:focus, .button-toggle-theme:active
box-shadow: none
outline: 0px
.add-url-box
max-width: 960px
margin: 4rem auto
.add-url-component
margin: 0.5rem auto
.add-url-group
width: 100%
button.add-url
width: 100%
.folder-dropdown-menu
width: 500px
max-width: calc(100vw - 3rem)
.folder-dropdown-menu .input-group
display: flex
padding-left: 5px
padding-right: 5px
.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
.batch-panel
margin-top: 15px
border: 1px solid #ccc
border-radius: 8px
padding: 15px
background-color: #fff
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1)
.batch-panel-header
border-bottom: 1px solid #eee
padding-bottom: 8px
margin-bottom: 15px
h4
font-size: 1.5rem
margin: 0
.batch-panel-body
textarea.form-control
resize: vertical
.batch-status
font-size: 0.9rem
color: #555
.d-flex.my-3
margin-top: 1rem
margin-bottom: 1rem
.modal.fade.show
background-color: rgba(0, 0, 0, 0.5)
.modal-header
border-bottom: 1px solid #eee
.modal-body
textarea.form-control
resize: vertical
.add-url
display: inline-flex
align-items: center
justify-content: center
.spinner-border
margin-right: 0.5rem
::ng-deep .ng-select
flex: 1
.ng-select-container
min-height: 38px
.ng-value
white-space: nowrap
overflow: visible
.ng-dropdown-panel
.ng-dropdown-panel-items
max-height: 300px
.ng-option
white-space: nowrap
overflow: visible
text-overflow: ellipsis
: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