diff --git a/less/input.less b/less/input.less index cddde85..e78ffe0 100644 --- a/less/input.less +++ b/less/input.less @@ -74,8 +74,8 @@ & > .placeholder { position: absolute; - left: 0; top: 0; + left: 0; bottom: 0; right: 0; overflow: hidden; @@ -122,6 +122,7 @@ &:disabled { background: transparent; color: var(--input-color-disabled); + -webkit-text-fill-color: var(--input-color-disabled); } } diff --git a/less/navbar.less b/less/navbar.less index ca73b76..486e0b0 100644 --- a/less/navbar.less +++ b/less/navbar.less @@ -6,6 +6,7 @@ @navbar-nav-item-font-size: @global-small-font-size; @navbar-nav-item-font-weight: 600; @navbar-nav-item-height: @global-header-height; +@navbar-nav-logo-max-width: @width-xsmall-width; @navbar-nav-item-color: @global-color; @navbar-nav-item-before-background: @global-secondary-background; @navbar-nav-item-hover-color: @navbar-nav-item-before-background; @@ -52,9 +53,16 @@ /* Navbar */ .hook-navbar() { + & .uk-logo { + & > img { height: @navbar-nav-item-height - 20px; + object-fit: contain; + } + + &.small > img { + max-width: @navbar-nav-logo-max-width !important; } } } diff --git a/less/progress.less b/less/progress.less index ae4bd00..341d11c 100644 --- a/less/progress.less +++ b/less/progress.less @@ -1,9 +1,12 @@ @progress-height: 16px; -@progress-background: transparent; +@progress-background: fade(@progress-bar-background, 30%); @progress-border-radius: 500px; -@progress-box-shadow: @global-inset-shadow; -@progress-bar-background: @global-secondary-background; +@progress-box-shadow: none; +@progress-bar-background: @global-primary-background; +@progress-circle-size: 100px; +@progress-circle-text-font-weight: @text-bold-weight; +@progress-circle-text-font-size: @global-large-font-size; .hook-progress() { border-radius: @progress-border-radius; @@ -13,3 +16,24 @@ .hook-progress-bar() { border-radius: @progress-border-radius; } + +.hook-progress-misc() { + .uk-progress-circle[percentage] { + display: flex; + justify-content: center; + align-items: center; + width: @progress-circle-size; + height: @progress-circle-size; + border-radius: 50%; + background: + radial-gradient(closest-side, @table-color 70%, @global-inverse-color 70% 80%, transparent 80% 100%), + conic-gradient(@progress-bar-background calc(var(--percentage) * 1%), @progress-background 0); + + &::before { + color: @progress-bar-background; + font-weight: @progress-circle-text-font-weight; + font-size: @progress-circle-text-font-size; + content: attr(percentage) '%'; + } + } +}