Fix search close btn and other css fixes as need after upgrading to ArchitectUI v4

This commit is contained in:
2025-03-04 14:05:19 +11:00
parent 4c09e767bc
commit 57b6b8c1f1
11 changed files with 52 additions and 94 deletions

View File

@@ -3,10 +3,23 @@
// If you want the anchor version, it requires `href="#"`.
// See https://developer.mozilla.org/en-US/docs/Web/Events/click#Safari_Mobile
.header-text-dark * .btn-close {
--#{$prefix}btn-close-color: #{$btn-close-color-dark};
--#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg-dark) };
}
.header-text-light *.btn-close {
--#{$prefix}btn-close-color: #{$btn-close-color-light};
--#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg-light) };
}
.btn-close {
// scss-docs-start close-css-vars
--#{$prefix}btn-close-color: #{$btn-close-color};
--#{$prefix}btn-close-bg: #{ escape-svg($btn-close-bg) };
--#{$prefix}btn-close-color-light: #{$btn-close-color-light};
--#{$prefix}btn-close-bg-light: #{ escape-svg($btn-close-bg-light) };
--#{$prefix}btn-close-color-dark: #{$btn-close-color-dark};
--#{$prefix}btn-close-bg-dark: #{ escape-svg($btn-close-bg-dark) };
--#{$prefix}btn-close-opacity: #{$btn-close-opacity};
--#{$prefix}btn-close-hover-opacity: #{$btn-close-hover-opacity};
--#{$prefix}btn-close-focus-shadow: #{$btn-close-focus-shadow};

View File

@@ -1705,6 +1705,10 @@ $btn-close-padding-x: .25em !default;
$btn-close-padding-y: $btn-close-padding-x !default;
$btn-close-color: $black !default;
$btn-close-bg: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
$btn-close-color-dark: $black !default;
$btn-close-color-light: $gray-100 !default;
$btn-close-bg-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color-dark}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
$btn-close-bg-light: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$btn-close-color-light}'><path d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/></svg>") !default;
$btn-close-focus-shadow: $focus-ring-box-shadow !default;
$btn-close-opacity: .5 !default;
$btn-close-hover-opacity: .75 !default;

View File

@@ -26,20 +26,6 @@
align-items: center;
}
.header-menu {
.nav-link {
color: $gray-600;
i {
color: $gray-500;
}
&:hover {
color: $gray-900;
}
}
}
.app-header-right {
align-items: center;
display: flex;

View File

@@ -114,14 +114,6 @@
}
}
.app-header__mobile-menu {
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
background: $gray-800;
}
}
}
}

View File

@@ -128,7 +128,7 @@
.hamburger-inner,
.hamburger-inner::before,
.hamburger-inner::after {
background: $gray-800;
background: rgba(0, 0, 0, .8);
}
}

View File

@@ -173,6 +173,7 @@
& > .btn {
background: rgba(255, 255, 255, .1);
border-color: rgba(255, 255, 255, .1);
color: rgba(0, 0, 0, .9);
}
}
@@ -448,4 +449,4 @@
}
}
}
}
}

View File

@@ -13,20 +13,20 @@
<div class="mx-auto app-login-box col-md-8">
<x-file-note file="login-note.html"/>
<div class="modal-dialog w-100 mx-auto">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form class="needs-validation" novalidate method="post">
{{ csrf_field() }}
<form class="form-control needs-validation p-0" novalidate method="post">
@csrf
<div class="modal-body">
<div class="modal-body p-3">
<div class="h5 modal-title text-center">
<h4 class="mt-2">
<div class="app-logo mx-auto mb-3"><img class="w-75" src="{{ url('images/logo-h-lg.png') }}"></div>
<small>@lang('Sign in to <strong>:server</strong>',['server'=>config('ldap.connections.default.name')])</small>
<small>@lang('Sign in to') <strong>{{ config('server')->name }}</strong></small>
</h4>
</div>
<div class="form-row">
<div class="row">
<div class="col-md-12 mt-3">
<label class="mb-1">{{ login_attr_description() }}</label>
<input name="{{ login_attr_name() }}" id="user" placeholder="" type="@if(in_array(login_attr_name(),['mail','email'])) email @else text @endif" class="form-control" required="">
@@ -34,7 +34,9 @@
@lang('Please enter your '.strtolower(login_attr_description()))
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 mt-2">
<label class="mb-1">@lang('Password')</label>
<input name="password" id="password" placeholder="" type="password" class="form-control" required>
@@ -43,21 +45,28 @@
</div>
</div>
</div>
</div>
<div class="modal-footer">
@if (count($errors) > 0)
<div class="alert alert-danger w-100">
<strong>Whoops!</strong> Something went wrong?<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
<div class="row">
<div class="col">
<div class="alert alert-danger m-3">
<strong>Whoops!</strong> Something went wrong?<br><br>
<ul>
@foreach ($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
</div>
</div>
</div>
@endif
<div class="float-end">
<button class="btn btn-lg btn-primary">Login</button>
</div>
<div class="modal-footer p-2 border-top">
<div class="row">
<div class="col float-end">
<button class="btn btn-lg btn-primary">Login</button>
</div>
</div>
</div>
</form>

View File

@@ -6,11 +6,10 @@
<i class="@yield('page_icon','')"></i>
</div>
@endif
<div>
@yield('page_title','Page Title')
<div class="page-title-subheading">
@yield('page_subtitle','')
</div>
@yield('page_title','Page Title')
<div class="page-title-subheading">
@yield('page_subtitle','')
</div>
</div>

View File

@@ -3,7 +3,7 @@
<td class="{{ ($x=$o->getObject('jpegphoto')) ? 'border' : '' }}" rowspan="2">
{!! $x ? $x->render(FALSE,TRUE) : sprintf('<div class="page-title-icon f32"><i class="%s"></i></div>',$o->icon() ?? "fas fa-info") !!}
</td>
<td class="text-end align-text-top p-0 {{ $x ? 'ps-5' : 'pt-2' }}"><strong>{{ $o->getDn() }}</strong></td>
<td class="text-end align-text-top p-0 pt-2 pe-3 {{ $x ? 'ps-5' : '' }}"><strong>{{ $o->getDn() }}</strong></td>
</tr>
<tr>
<td class="line-height-1" style="font-size: 55%;vertical-align: bottom;" colspan="2">