Gitlab@Informatics
Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
M
MelonCloudDeploy
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Container registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
GitLab community forum
Contribute to GitLab
Provide feedback
Terms and privacy
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
65160392
MelonCloudDeploy
Commits
230b7b66
Commit
230b7b66
authored
3 months ago
by
65160392
Browse files
Options
Downloads
Patches
Plain Diff
Edit style.css
parent
288f7f67
No related branches found
No related tags found
No related merge requests found
Changes
1
Show whitespace changes
Inline
Side-by-side
Showing
1 changed file
public/css/style.css
+161
-55
161 additions, 55 deletions
public/css/style.css
with
161 additions
and
55 deletions
public/css/style.css
+
161
−
55
View file @
230b7b66
:root
{
--primary-color
:
#2c3e50
;
/* น้ำเงินเข้ม */
--secondary-color
:
#34495e
;
/* เทาเข้ม */
--accent-color
:
#3498db
;
/* น้ำเงินสดใส */
--light-color
:
#ecf0f1
;
/* เทาอ่อน */
--dark-color
:
#2c3e50
;
/* น้ำเงินเข้ม */
--success-color
:
#2ecc71
;
/* เขียว */
--danger-color
:
#e74c3c
;
/* แดง */
--warning-color
:
#f1c40f
;
/* เหลือง */
--info-color
:
#3498db
;
/* น้ำเงิน */
--text-color
:
#2c3e50
;
/* น้ำเงินเข้ม */
--border-color
:
#bdc3c7
;
/* เทา */
--primary-color
:
#1a237e
;
/* น้ำเงินเข้ม */
--secondary-color
:
#3949ab
;
/* น้ำเงินกลาง */
--accent-color
:
#5c6bc0
;
/* น้ำเงินอ่อน */
--light-color
:
#f5f5f5
;
/* เทาอ่อนมาก */
--dark-color
:
#0d47a1
;
/* น้ำเงินเข้มมาก */
--success-color
:
#00c853
;
/* เขียวสด */
--danger-color
:
#d50000
;
/* แดงสด */
--warning-color
:
#ffd600
;
/* เหลืองสด */
--info-color
:
#00b0ff
;
/* น้ำเงินสด */
--text-color
:
#212121
;
/* ดำ */
--border-color
:
#e0e0e0
;
/* เทาอ่อน */
--card-shadow
:
0
4px
6px
rgba
(
0
,
0
,
0
,
0.1
);
--hover-shadow
:
0
8px
15px
rgba
(
0
,
0
,
0
,
0.1
);
}
body
{
font-family
:
'
Segoe UI'
,
Tahoma
,
Geneva
,
Verdana
,
sans-serif
;
font-family
:
'
Poppins'
,
sans-serif
;
background-color
:
var
(
--light-color
);
color
:
var
(
--text-color
);
line-height
:
1.6
;
}
/* Navbar */
.navbar
{
background-color
:
var
(
--primary-color
);
box-shadow
:
0
2px
4px
rgba
(
0
,
0
,
0
,
0.1
);
background
:
linear-gradient
(
135deg
,
var
(
--primary-color
),
var
(
--secondary-color
));
box-shadow
:
var
(
--card-shadow
);
padding
:
1rem
2rem
;
}
.navbar-brand
{
color
:
white
!important
;
font-weight
:
bold
;
font-weight
:
700
;
font-size
:
1.5rem
;
letter-spacing
:
1px
;
}
.nav-link
{
color
:
rgba
(
255
,
255
,
255
,
0.8
)
!important
;
transition
:
color
0.3s
ease
;
color
:
rgba
(
255
,
255
,
255
,
0.9
)
!important
;
font-weight
:
500
;
padding
:
0.5rem
1rem
;
margin
:
0
0.2rem
;
border-radius
:
5px
;
transition
:
all
0.3s
ease
;
}
.nav-link
:hover
{
color
:
white
!important
;
background-color
:
rgba
(
255
,
255
,
255
,
0.1
);
transform
:
translateY
(
-2px
);
}
/* Cards */
.card
{
border
:
none
;
border-radius
:
8
px
;
box-shadow
:
0
2px
4px
rgba
(
0
,
0
,
0
,
0.1
);
transition
:
transform
0.3s
ease
;
border-radius
:
15
px
;
box-shadow
:
var
(
--card-shadow
);
transition
:
all
0.3s
ease
;
background-color
:
white
;
overflow
:
hidden
;
margin-bottom
:
1.5rem
;
}
.card
:hover
{
transform
:
translateY
(
-5px
);
box-shadow
:
var
(
--hover-shadow
);
}
.card-header
{
background-color
:
var
(
--
prim
ary-color
);
background
:
linear-gradient
(
135deg
,
var
(
--primary
-color
),
var
(
--
second
ary-color
)
)
;
color
:
white
;
border-radius
:
8px
8px
0
0
!important
;
border-radius
:
15px
15px
0
0
!important
;
padding
:
1.2rem
;
font-weight
:
600
;
}
.card-body
{
padding
:
1.5rem
;
}
/* Buttons */
.btn
{
padding
:
0.8rem
1.5rem
;
border-radius
:
8px
;
font-weight
:
500
;
text-transform
:
uppercase
;
letter-spacing
:
0.5px
;
transition
:
all
0.3s
ease
;
}
.btn-primary
{
background-color
:
var
(
--accent-color
);
border-color
:
var
(
--accent-color
);
background
:
linear-gradient
(
135deg
,
var
(
--primary-color
),
var
(
--secondary-color
));
border
:
none
;
box-shadow
:
0
2px
4px
rgba
(
0
,
0
,
0
,
0.1
);
}
.btn-primary
:hover
{
background-col
or
:
#2980b9
;
bo
rder-color
:
#2980b9
;
transf
or
m
:
translateY
(
-2px
)
;
bo
x-shadow
:
0
4px
8px
rgba
(
0
,
0
,
0
,
0.2
)
;
}
.btn-secondary
{
background-color
:
var
(
--secondary-color
);
border-color
:
var
(
--secondary-color
);
background
:
linear-gradient
(
135deg
,
var
(
--secondary-color
),
var
(
--accent-color
));
border
:
none
;
box-shadow
:
0
2px
4px
rgba
(
0
,
0
,
0
,
0.1
);
}
.btn-secondary
:hover
{
background-col
or
:
#2c3e50
;
bo
rder-color
:
#2c3e50
;
transf
or
m
:
translateY
(
-2px
)
;
bo
x-shadow
:
0
4px
8px
rgba
(
0
,
0
,
0
,
0.2
)
;
}
/* Forms */
.form-control
{
border
:
1px
solid
var
(
--border-color
);
border-radius
:
4px
;
border
:
2px
solid
var
(
--border-color
);
border-radius
:
8px
;
padding
:
0.8rem
1rem
;
transition
:
all
0.3s
ease
;
}
.form-control
:focus
{
border-color
:
var
(
--accent-color
);
box-shadow
:
0
0
0
0.2rem
rgba
(
5
2
,
1
52
,
2
19
,
0.
25
);
box-shadow
:
0
0
0
3px
rgba
(
9
2
,
1
07
,
19
2
,
0.
1
);
}
/* Tables */
.table
{
background-color
:
white
;
border-radius
:
8
px
;
border-radius
:
15
px
;
overflow
:
hidden
;
box-shadow
:
var
(
--card-shadow
);
}
.table
thead
th
{
background-color
:
var
(
--
prim
ary-color
);
background
:
linear-gradient
(
135deg
,
var
(
--primary
-color
),
var
(
--
second
ary-color
)
)
;
color
:
white
;
border
:
none
;
padding
:
1rem
;
font-weight
:
600
;
}
.table-hover
tbody
tr
:hover
{
background-color
:
rgba
(
52
,
152
,
219
,
0.1
);
background-color
:
rgba
(
92
,
107
,
192
,
0.05
);
transition
:
all
0.3s
ease
;
}
/* Status Badges */
.badge
{
padding
:
0.
5
em
0.8
em
;
padding
:
0.
6
em
1
em
;
font-weight
:
500
;
border-radius
:
6px
;
text-transform
:
uppercase
;
letter-spacing
:
0.5px
;
}
.badge-success
{
background-color
:
var
(
--success-color
);
color
:
white
;
}
.badge-danger
{
background-color
:
var
(
--danger-color
);
color
:
white
;
}
.badge-warning
{
background-color
:
var
(
--warning-color
);
color
:
var
(
--text-color
);
}
.badge-info
{
background-color
:
var
(
--info-color
);
color
:
white
;
}
/* Project Cards */
.project-card
{
border-left
:
4px
solid
var
(
--accent-color
);
border-left
:
5px
solid
var
(
--accent-color
);
background
:
linear-gradient
(
to
right
,
white
,
rgba
(
92
,
107
,
192
,
0.05
));
}
.project-card
.card-header
{
background
-color
:
var
(
--secondary-color
);
background
:
linear-gradient
(
135deg
,
var
(
--secondary-color
),
var
(
--accent-color
)
);
}
/* Task Items */
.task-item
{
border-left
:
3
px
solid
var
(
--accent-color
);
margin-bottom
:
0.5
rem
;
padding
:
0.5
rem
;
border-left
:
4
px
solid
var
(
--accent-color
);
margin-bottom
:
1
rem
;
padding
:
1
rem
;
background-color
:
white
;
border-radius
:
4px
;
border-radius
:
8px
;
box-shadow
:
var
(
--card-shadow
);
transition
:
all
0.3s
ease
;
}
.task-item
:hover
{
transform
:
translateX
(
5px
);
box-shadow
:
var
(
--hover-shadow
);
}
/* Search Bar */
.search-bar
{
background-color
:
white
;
border-radius
:
20px
;
padding
:
0.5rem
1rem
;
box-shadow
:
0
2px
4px
rgba
(
0
,
0
,
0
,
0.1
);
border-radius
:
25px
;
padding
:
0.8rem
1.5rem
;
box-shadow
:
var
(
--card-shadow
);
display
:
flex
;
align-items
:
center
;
transition
:
all
0.3s
ease
;
}
.search-bar
:focus-within
{
box-shadow
:
var
(
--hover-shadow
);
transform
:
translateY
(
-2px
);
}
.search-bar
input
{
...
...
@@ -159,35 +220,80 @@ body {
background
:
none
;
outline
:
none
;
width
:
100%
;
padding
:
0.5rem
;
font-size
:
1rem
;
}
/* Dashboard Stats */
.stat-card
{
background
:
linear-gradient
(
135deg
,
var
(
--primary-color
),
var
(
--
accent
-color
));
background
:
linear-gradient
(
135deg
,
var
(
--primary-color
),
var
(
--
secondary
-color
));
color
:
white
;
border-radius
:
8px
;
padding
:
1.5rem
;
border-radius
:
15px
;
padding
:
2rem
;
box-shadow
:
var
(
--card-shadow
);
transition
:
all
0.3s
ease
;
}
.stat-card
:hover
{
transform
:
translateY
(
-5px
);
box-shadow
:
var
(
--hover-shadow
);
}
.stat-card
.stat-value
{
font-size
:
2rem
;
font-weight
:
bold
;
font-size
:
2.5rem
;
font-weight
:
700
;
margin-bottom
:
0.5rem
;
}
.stat-card
.stat-label
{
font-size
:
1.1rem
;
opacity
:
0.9
;
}
/* Custom Scrollbar */
::-webkit-scrollbar
{
width
:
8
px
;
width
:
10
px
;
}
::-webkit-scrollbar-track
{
background
:
var
(
--light-color
);
border-radius
:
5px
;
}
::-webkit-scrollbar-thumb
{
background
:
var
(
--accent
-color
);
border-radius
:
4
px
;
background
:
linear-gradient
(
135deg
,
var
(
--primary-color
),
var
(
--secondary
-color
)
)
;
border-radius
:
5
px
;
}
::-webkit-scrollbar-thumb:hover
{
background
:
var
(
--primary-color
);
background
:
linear-gradient
(
135deg
,
var
(
--secondary-color
),
var
(
--accent-color
));
}
/* Animations */
@keyframes
fadeIn
{
from
{
opacity
:
0
;
transform
:
translateY
(
20px
);
}
to
{
opacity
:
1
;
transform
:
translateY
(
0
);
}
}
.fade-in
{
animation
:
fadeIn
0.5s
ease
forwards
;
}
/* Responsive Design */
@media
(
max-width
:
768px
)
{
.navbar
{
padding
:
0.8rem
1rem
;
}
.card
{
margin-bottom
:
1rem
;
}
.stat-card
{
padding
:
1.5rem
;
}
.btn
{
padding
:
0.6rem
1.2rem
;
}
}
\ No newline at end of file
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment