diff options
| -rw-r--r-- | templates/user/notification/notification_div.tmpl | 2 | ||||
| -rw-r--r-- | web_src/css/base.css | 12 | ||||
| -rw-r--r-- | web_src/css/modules/flexcontainer.css | 3 |
3 files changed, 11 insertions, 6 deletions
diff --git a/templates/user/notification/notification_div.tmpl b/templates/user/notification/notification_div.tmpl index 04e79ba749..bf3b51ee3b 100644 --- a/templates/user/notification/notification_div.tmpl +++ b/templates/user/notification/notification_div.tmpl @@ -1,7 +1,7 @@ <div role="main" aria-label="{{.Title}}" class="page-content user notification" id="notification_div" data-sequence-number="{{.SequenceNumber}}"> <div class="ui container"> {{$notificationUnreadCount := call .NotificationUnreadCount}} - <div class="tw-flex tw-items-center tw-justify-between tw-mb-4"> + <div class="tw-flex tw-items-center tw-justify-between tw-mb-[--page-spacing]"> <div class="small-menu-items ui compact tiny menu"> <a class="{{if eq .Status 1}}active {{end}}item" href="{{AppSubUrl}}/notifications?q=unread"> {{ctx.Locale.Tr "notification.unread"}} diff --git a/web_src/css/base.css b/web_src/css/base.css index 096b67058e..44dc83e6f3 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -24,6 +24,7 @@ --min-height-textarea: 132px; /* padding + 6 lines + border = calc(1.57142em + 6lh + 2px), but lh is not fully supported */ --tab-size: 4; --checkbox-size: 16px; /* height and width of checkbox and radio inputs */ + --page-spacing: 16px; /* space between page elements */ } :root * { @@ -582,11 +583,14 @@ img.ui.avatar, margin-bottom: 14px; } -/* add padding to all content when there is no .secondary.nav. this uses padding instead of - margin because with the negative margin on .ui.grid we would have to set margin-top: 0, - but that does not work universally for all pages */ +/* add margin to all pages when there is no .secondary.nav */ .page-content > :first-child:not(.secondary-nav) { - padding-top: 14px; + margin-top: var(--page-spacing); +} +/* if .ui.grid is the first child the first grid-column has 'padding-top: 1rem' which we need + to compensate here */ +.page-content > :first-child.ui.grid { + margin-top: calc(var(--page-spacing) - 1rem); } .ui.pagination.menu .active.item { diff --git a/web_src/css/modules/flexcontainer.css b/web_src/css/modules/flexcontainer.css index 0b559f1e7d..1ca513687f 100644 --- a/web_src/css/modules/flexcontainer.css +++ b/web_src/css/modules/flexcontainer.css @@ -2,7 +2,8 @@ .flex-container { display: flex !important; - gap: 16px; + gap: var(--page-spacing); + margin-top: var(--page-spacing); } .flex-container-nav { |