diff --git a/src/renderer/src/pages/downloads/download-group.scss b/src/renderer/src/pages/downloads/download-group.scss index 504ec73a..ad4dc0b2 100644 --- a/src/renderer/src/pages/downloads/download-group.scss +++ b/src/renderer/src/pages/downloads/download-group.scss @@ -1,140 +1,136 @@ @use "../../scss/globals.scss"; .download-group { - display: flex; - flex-direction: column; - gap: calc(globals.$spacing-unit * 2); - - &__header { - display: flex; - align-items: center; - justify-content: space-between; - gap: calc(globals.$spacing-unit * 2); - - &-divider { - flex: 1; - background-color: globals.$color-border; - height: 1px; - } - - &-count { - font-weight: 400; - } - } - - &__title-wrapper { - display: flex; - align-items: center; - margin-bottom: globals.$spacing-unit; - gap: globals.$spacing-unit; - } - - &__title { - font-weight: bold; - cursor: pointer; - color: globals.$color-body; - text-align: left; - font-size: 16px; - display: block; - - &:hover { - text-decoration: underline; - } - } - - &__downloads { - width: 100%; - gap: calc(globals.$spacing-unit * 2); display: flex; flex-direction: column; - margin: 0; - padding: 0; - margin-top: globals.$spacing-unit; - } + gap: calc(globals.$spacing-unit * 2); - &__item { - width: 100%; - background-color: globals.$color-background; - display: flex; - border-radius: 8px; - border: solid 1px globals.$color-border; - overflow: hidden; - box-shadow: 0px 0px 5px 0px #000000; - transition: all ease 0.2s; - height: 140px; - min-height: 140px; - max-height: 140px; - position: relative; - } + &__header { + display: flex; + align-items: center; + justify-content: space-between; + gap: calc(globals.$spacing-unit * 2); - &__cover { - width: 280px; - min-width: 280px; - height: auto; - border-right: solid 1px globals.$color-border; - position: relative; - z-index: 1; + &-divider { + flex: 1; + background-color: globals.$color-border; + height: 1px; + } - &-content { - width: 100%; - height: 100%; - padding: globals.$spacing-unit; - display: flex; - align-items: flex-end; - justify-content: flex-end; + &-count { + font-weight: 400; + } } - &-backdrop { - width: 100%; - height: 100%; - background: linear-gradient( - 0deg, - rgba(0, 0, 0, 0.8) 5%, - transparent 100% - ); - display: flex; - overflow: hidden; - z-index: 1; + &__title-wrapper { + display: flex; + align-items: center; + margin-bottom: globals.$spacing-unit; + gap: globals.$spacing-unit; } - &-image { - width: 100%; - height: 100%; - position: absolute; - z-index: -1; + &__title { + font-weight: bold; + cursor: pointer; + color: var(--color-body); + text-align: left; + font-size: 16px; + display: block; + + &:hover { + text-decoration: underline; + } } - } - &__right-content { - display: flex; - padding: calc(globals.$spacing-unit * 2); - flex: 1; - gap: globals.$spacing-unit; - background: linear-gradient(90deg, transparent 20%, rgb(0 0 0 / 20%) 100%); - } + &__downloads { + width: 100%; + gap: calc(globals.$spacing-unit * 2); + display: flex; + flex-direction: column; + margin: 0; + padding: 0; + margin-top: globals.$spacing-unit; + } - &__details { - display: flex; - flex-direction: column; - flex: 1; - justify-content: center; - gap: calc(globals.$spacing-unit / 2); - font-size: 14px; - } + &__item { + width: 100%; + background-color: globals.$color-background; + display: flex; + border-radius: 8px; + border: solid 1px globals.$color-border; + overflow: hidden; + box-shadow: 0px 0px 5px 0px #000000; + transition: all ease 0.2s; + height: 140px; + min-height: 140px; + max-height: 140px; + position: relative; + } - &__actions { - display: flex; - align-items: center; - gap: globals.$spacing-unit; - } + &__cover { + width: 280px; + min-width: 280px; + height: auto; + border-right: solid 1px globals.$color-border; + position: relative; + z-index: 1; - &__menu-button { - position: absolute; - top: 12px; - right: 12px; - border-radius: 50%; - border: none; - padding: 8px; - min-height: unset; - } + &-content { + width: 100%; + height: 100%; + padding: globals.$spacing-unit; + display: flex; + align-items: flex-end; + justify-content: flex-end; + } + + &-backdrop { + width: 100%; + height: 100%; + background: linear-gradient(0deg, rgba(0, 0, 0, 0.8) 5%, transparent 100%); + display: flex; + overflow: hidden; + z-index: 1; + } + + &-image { + width: 100%; + height: 100%; + position: absolute; + z-index: -1; + } + } + + &__right-content { + display: flex; + padding: calc(globals.$spacing-unit * 2); + flex: 1; + gap: globals.$spacing-unit; + background: linear-gradient(90deg, transparent 20%, rgb(0 0 0 / 20%) 100%); + } + + &__details { + display: flex; + flex-direction: column; + flex: 1; + justify-content: center; + gap: calc(globals.$spacing-unit / 2); + font-size: 14px; + } + + &__actions { + display: flex; + align-items: center; + gap: globals.$spacing-unit; + } + + &__menu-button { + position: absolute; + top: 12px; + right: 12px; + border-radius: 50%; + border: none; + padding: 8px; + min-height: unset; + } }