diff --git a/src/main/resources/static/css/accounts.css b/src/main/resources/static/css/accounts.css index d9cd8ff2541de9588d51a7aee3beb89dd1f7f600..54fb15aa9bb810b969bb5fcb4fce8ca70857f627 100644 --- a/src/main/resources/static/css/accounts.css +++ b/src/main/resources/static/css/accounts.css @@ -1,53 +1,3 @@ -#account-icon { - margin-top: 3rem; - justify-content: center; -} - -#item-icon-preview { - text-align: center; - border: 2px solid var(--color-text); - padding: 1rem; - color: var(--color-text); -} - -.button-remove-icon-from-item { - margin-left: 1rem; -} - -.button-remove-icon-from-item i { - font-size: 1.8rem; -} - -.item-icon-option-column { - text-align: center; - margin-bottom: 1.5rem; -} - -.item-icon-option { - padding: 0.5rem; - border: 2px solid transparent; -} - -.item-icon-option:hover { - cursor: pointer; -} - -.item-icon-option.selected { - border: 2px solid var(--color-text); -} - -.item-icon-preview-icon { - height: 5rem; -} - -#item-icon-preview:hover { - cursor: pointer; -} - -.item-icon-preview { - height: 5rem; -} - .account-select-icon { height: 34px; width: 34px; @@ -57,19 +7,3 @@ border: 3px solid var(--color-blue); line-height: 28px !important; } - -.item-icon-option-delete span { - display: none; -} - -.item-icon-option-delete i.left { - margin-right: 0; -} - -.item-icon-option-delete-confirm { - color: var(--color-red) !important; -} - -.item-icon-option-delete-confirm span { - display: inline-block; -} diff --git a/src/main/resources/static/css/imageSelect.css b/src/main/resources/static/css/imageSelect.css new file mode 100644 index 0000000000000000000000000000000000000000..8d3d947f05d5b2863bf9b7cacd323fc0b07f8e35 --- /dev/null +++ b/src/main/resources/static/css/imageSelect.css @@ -0,0 +1,65 @@ +.item-icon { + margin-top: 3rem; + justify-content: center; +} + +#item-icon-preview { + text-align: center; + border: 2px solid var(--color-text); + padding: 1rem; + color: var(--color-text); +} + +.button-remove-icon-from-item { + margin-left: 1rem; +} + +.button-remove-icon-from-item i { + font-size: 1.8rem; +} + +.item-icon-option-column { + text-align: center; + margin-bottom: 1.5rem; +} + +.item-icon-option { + padding: 0.5rem; + border: 2px solid transparent; +} + +.item-icon-option:hover { + cursor: pointer; +} + +.item-icon-option.selected { + border: 2px solid var(--color-text); +} + +.item-icon-preview-icon { + height: 5rem; +} + +#item-icon-preview:hover { + cursor: pointer; +} + +.item-icon-preview { + height: 5rem; +} + +.item-icon-option-delete span { + display: none; +} + +.item-icon-option-delete i.left { + margin-right: 0; +} + +.item-icon-option-delete-confirm { + color: var(--color-red) !important; +} + +.item-icon-option-delete-confirm span { + display: inline-block; +} \ No newline at end of file diff --git a/src/main/resources/templates/accounts/newAccount.ftl b/src/main/resources/templates/accounts/newAccount.ftl index dfc06f125bb22fca30d765ae057e89d9a087e2ca..08ac33566ccdb7de1a0097b4cff390631aade2f1 100644 --- a/src/main/resources/templates/accounts/newAccount.ftl +++ b/src/main/resources/templates/accounts/newAccount.ftl @@ -10,6 +10,7 @@ </#if> <@header.header "BudgetMaster - ${title}"/> + <@header.style "imageSelect"/> <#import "/spring.ftl" as s> </head> <@header.body> diff --git a/src/main/resources/templates/helpers/imageSelect.ftl b/src/main/resources/templates/helpers/imageSelect.ftl index 7d7e4a5b27234f9d63f6e5ebd48d18608824da8d..bd608f279e0a0ba1579a21fc0f0b3894608a1b2c 100644 --- a/src/main/resources/templates/helpers/imageSelect.ftl +++ b/src/main/resources/templates/helpers/imageSelect.ftl @@ -7,7 +7,7 @@ <i class="fas fa-icons prefix"></i> <label class="input-label" for="${id}">${locale.getString("account.new.label.icon")}</label> - <div id="${id}" class="valign-wrapper"> + <div id="${id}" class="valign-wrapper item-icon"> <a id="item-icon-preview" data-url="<@s.url '/media/getAvailableImages'/>"> <img id="item-icon-preview-icon" src="<#if item.getIcon()??>${item.getIcon().getBase64EncodedImage()}</#if>" class="item-icon-preview <#if item.getIcon()?? == false>hidden</#if>"/> <div id="item-icon-placeholder" class="<#if item.getIcon()??>hidden</#if>">${locale.getString("account.new.icon.placeholder")}</div>