truncgit/citrus-cms
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: implement authentication login view and initialize admin-specific CSS styles

Browse Source
This commit is contained in:
Ümit Tunç
2026-04-28 22:49:12 +03:00
parent 77b20cfc6e
commit feaa6c7043
2 changed files with 269 additions and 251 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/admin/css/citrus.css
+266 -246
View File
@@ -1,246 +1,266 @@
.table-sm td, .table-sm td,
.table-sm th { .table-sm th {
padding: 2px; padding: 2px;
text-align: left; text-align: left;
white-space: nowrap; white-space: nowrap;
/*overflow: hidden;*/ /*overflow: hidden;*/
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.table-sm input, .table-sm input,
.table-sm select, .table-sm select,
.table-sm .select2-selection { .table-sm .select2-selection {
padding: 0px 10px; padding: 0px 10px;
height: 30px; height: 30px;
border: none; border: none;
background: transparent; background: transparent;
} }
.table-sm .select2 { .table-sm .select2 {
min-width: 200px; min-width: 200px;
} }
.table-sm td { .table-sm td {
min-width: 10%; min-width: 10%;
} }
.sidebar-inverse #sidebar img { .sidebar-inverse #sidebar img {
filter: contrast(0) brightness(2); filter: contrast(0) brightness(2);
} }
.sidebar-inverse #sidebar input { .sidebar-inverse #sidebar input {
background: transparent; background: transparent;
margin-bottom: 10px; margin-bottom: 10px;
color: white; color: white;
} }
.sidebar-inverse i img { .sidebar-inverse i img {
filter: invert(1) !important; filter: invert(1) !important;
width: 33px; width: 33px;
} }
.table-sm td:hover { .table-sm td:hover {
/*min-width: 200px;*/ /*min-width: 200px;*/
overflow: none !important; overflow: none !important;
} }
.rc-handle:hover { .rc-handle:hover {
background: #e0e0e0; background: #e0e0e0;
width: 5px; width: 5px;
margin-left: -2px; margin-left: -2px;
} }
.table-responsive { .table-responsive {
min-height: 500px min-height: 500px
} }
.table-sm .dropdown-item input { .table-sm .dropdown-item input {
height: initial; height: initial;
} }
.table-sm .dropdown-item { .table-sm .dropdown-item {
font-size: 11px; font-size: 11px;
padding: 3px padding: 3px
} }
.table-sm .dropdown-toggle { .table-sm .dropdown-toggle {
background: none; background: none;
} }
.table-sm .dropdown-menu { .table-sm .dropdown-menu {
max-height: 226px; max-height: 226px;
overflow: auto; overflow: auto;
} }
.data-tables input, .data-tables input,
.data-tables select, .data-tables select,
.data-tables .select2-selection { .data-tables .select2-selection {
padding: 0px 10px; padding: 0px 10px;
height: 30px; height: 30px;
border: none; border: none;
background: transparent; background: transparent;
} }
.data-tables td, .data-tables td,
.data-tables th { .data-tables th {
padding: 2px; padding: 2px;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.new-form td, .new-form td,
.new-form th { .new-form th {
padding: 2px; padding: 2px;
text-align: center; text-align: center;
white-space: nowrap; white-space: nowrap;
/*overflow: hidden;*/ /*overflow: hidden;*/
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.new-form input, .new-form input,
.new-form select, .new-form select,
.new-form .select2-selection { .new-form .select2-selection {
padding: 0px 10px; padding: 0px 10px;
height: 30px; height: 30px;
} }
.new-form .select2 { .new-form .select2 {
min-width: 200px; min-width: 200px;
} }
.new-form td { .new-form td {
min-width: 10%; min-width: 10%;
} }
.new-form td:hover { .new-form td:hover {
/*min-width: 200px;*/ /*min-width: 200px;*/
overflow: none !important; overflow: none !important;
} }
.new-form .dropdown-item input { .new-form .dropdown-item input {
height: initial; height: initial;
} }
.new-form .dropdown-item { .new-form .dropdown-item {
font-size: 11px; font-size: 11px;
padding: 3px padding: 3px
} }
.new-form .dropdown-menu { .new-form .dropdown-menu {
max-height: 200px; max-height: 200px;
overflow: auto; overflow: auto;
} }
.new-form .btn-sm { .new-form .btn-sm {
height: 30px; height: 30px;
} }
table .filter-list>button { table .filter-list>button {
padding: 3px; padding: 3px;
height: 12px; height: 12px;
} }
table .filter-list>button:after { table .filter-list>button:after {
margin: 0px; margin: 0px;
vertical-align: text-top; vertical-align: text-top;
margin-top: 1px; margin-top: 1px;
} }
.dropdown-sublist { .dropdown-sublist {
height: 150px; height: 150px;
overflow: auto; overflow: auto;
} }
.filter-list { .filter-list {
position: absolute; position: absolute;
top: 3px; top: 3px;
right: 3px; right: 3px;
z-index: 1000; z-index: 1000;
} }
.filter-list>button { .filter-list>button {
background: white !important; background: white !important;
} }
.table-sm thead th { .table-sm thead th {
position: relative; position: relative;
} }
.dx-datagrid td, .dx-datagrid td,
.table-bordered, .table-bordered,
.table-bordered td, .table-bordered td,
.table-bordered th { .table-bordered th {
border-color: #a4a3a3 !important; border-color: #a4a3a3 !important;
} }
.sub-menu-text { .sub-menu-text {
position: relative; position: relative;
left: 40px; left: 40px;
} }
.sub-menu-icon { .sub-menu-icon {
width: 22px !important; width: 22px !important;
} }
.tab-pane { .tab-pane {
display: none; display: none;
} }
.tab-pane.active { .tab-pane.active {
display: block; display: block;
} }
.tab-pane.active .select2-container { .tab-pane.active .select2-container {
width: 100% !important; width: 100% !important;
} }
.modal-content { .modal-content {
border-radius: 15px; border-radius: 15px;
border: none; border: none;
/* Optional: Cleaner look */ /* Optional: Cleaner look */
} }
.modal-header { .modal-header {
border-radius: 15px 15px 0 0; border-radius: 15px 15px 0 0;
} }
/* Button Styling Best Practices */ /* Button Styling Best Practices */
.btn { .btn {
border-radius: 15px; border-radius: 15px;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
gap: 0.5rem; gap: 0.5rem;
/* Space between icon and text */ /* Space between icon and text */
vertical-align: middle; vertical-align: middle;
} }
.btn i, .btn i,
.btn .material-icons, .btn .material-icons,
.btn .material-symbols-outlined, .btn .material-symbols-outlined,
.btn svg { .btn svg {
font-size: 1.1em; font-size: 1.1em;
/* Slightly larger icons usually look better */ /* Slightly larger icons usually look better */
line-height: 1; line-height: 1;
margin: 0; margin: 0;
/* Reset margins */ /* Reset margins */
} }
/* Reset existing specific fix to rely on flexbox */ /* Reset existing specific fix to rely on flexbox */
.btn .material-symbols-outlined { .btn .material-symbols-outlined {
top: 0; top: 0;
} }
.content-header .btn { .content-header .btn {
color: white; color: white;
} }
.content-header .btn:hover { .content-header .btn:hover {
color: black; color: black;
} }
/* Auth Pages Styling */
.auth-background {
background-color: #f8f9fa;
background-position: center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.auth-card {
background-color: rgba(255, 255, 255, 0.9) !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.auth-card:hover {
background-color: rgba(255, 255, 255, 0.95) !important;
}
resources/views/auth/login.blade.php
+3 -5
View File
@@ -8,9 +8,7 @@
<main id="main-container" style="min-height: 969px;"> <main id="main-container" style="min-height: 969px;">
<!-- Page Content --> <!-- Page Content -->
<div class="bg-image" style="background-image: url('{{url("assets/back.jpg")}}'); background-color: #f8f9fa; <div class="bg-image auth-background" style="background-image: url('{{ asset('assets/back.jpg') }}');">
background-position: center;
background-size: cover; ">
<div class="row mx-0 bg-black-op"> <div class="row mx-0 bg-black-op">
<div class="hero-static col-md-6 col-xl-8 d-none d-md-flex align-items-md-end" > <div class="hero-static col-md-6 col-xl-8 d-none d-md-flex align-items-md-end" >
<div class="p-30 js-appear-enabled animated fadeIn" data-toggle="appear"> <div class="p-30 js-appear-enabled animated fadeIn" data-toggle="appear">
@@ -22,12 +20,12 @@
</p> </p>
</div> </div>
</div> </div>
<div style="background-color:#ffffffe6 !important;" class="hero-static text-center col-md-6 col-xl-4 d-flex align-items-center bg-white js-appear-enabled animated fadeInRight" data-toggle="appear" data-class="animated fadeInRight"> <div class="hero-static text-center col-md-6 col-xl-4 d-flex align-items-center bg-white js-appear-enabled animated fadeInRight auth-card" data-toggle="appear" data-class="animated fadeInRight">
<div class="content content-full"> <div class="content content-full">
<!-- Header --> <!-- Header -->
<div class="px-30 py-10"> <div class="px-30 py-10">
<a class="link-effect font-w700" href="#"> <a class="link-effect font-w700" href="#">
<img src="{{url("assets/citrus-logos/citrus-yatay.svg")}}" style="width:70%" class="img-fluid" alt="" /> <img src="{{ asset('assets/citrus-logos/citrus-yatay.svg') }}" style="width:70%" class="img-fluid" alt="" />
</a> </a>
<h1 class="h3 font-w700 mt-30 mb-10">{{e2(setting("login_welcome",true,"Welcome"))}}</h1> <h1 class="h3 font-w700 mt-30 mb-10">{{e2(setting("login_welcome",true,"Welcome"))}}</h1>
<h2 class="h5 font-w400 text-muted mb-0">{{e2(setting("login_description",true,"Please sign in"))}}</h2> <h2 class="h5 font-w400 text-muted mb-0">{{e2(setting("login_description",true,"Please sign in"))}}</h2>