Addon/styles-pages.css at main · Balax0/Addon · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
/* General Styles for Body */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f9; /* Light background color */
    color: #333;  /* Text color */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Full page height */
}
nav {
    position: sticky;
    top: 0;
    background-color: rgba(255, 255, 255, 0.8);  /* Semi-transparent white */
    padding: 10px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 1000; /* Ensure nav is always on top */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);  /* Shadow for depth */
}

/* Logo styling in the nav */
nav .logo a {
    font-size: 1.8em;
    font-weight: bold;
    color: #007bff;
    text-decoration: none;
}

/* Navigation links list style */
nav .nav-links {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
}

/* Navigation link styling */
nav .nav-links li {
    margin-right: 20px;
}

nav .nav-links a {
    text-decoration: none;
    color: #343a40;
    font-size: 1.1em;
    padding: 8px 15px;
    transition: background-color 0.3s ease, color 0.3s ease;
    border-radius: 4px;
}

/* Hover effects for nav links */
nav .nav-links a:hover {
    background-color: #007bff;
    color: white;
}
/* Header Styles */
header {
    background-color: rgba(0, 123, 255, 0.8); /* Semi-transparent blue */
    color: white;
    text-align: center;
    padding: 40px 20px;
    flex-shrink: 0; /* Prevent header from shrinking */
}

header h1 {
    font-size: 2.5em;
    margin: 0;
}

header p {
    font-size: 1.2em;
    margin-top: 10px;
}

/* Section for Donation Form */
.donate {
    background-color: white;
    padding: 30px;
    margin: 20px auto;
    max-width: 500px;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.donate h2 {
    font-size: 2em;
    color: #007bff; /* Matching color to header */
    margin-bottom: 20px;
    text-align: center;
}

.donate form {
    display: flex;
    flex-direction: column;
}

.donate label {
    font-size: 1em;
    margin-bottom: 8px;
}

.donate input[type="number"] {
    padding: 10px;
    font-size: 1.2em;
    margin-bottom: 20px;
    border: 2px solid #ddd;
    border-radius: 5px;
    outline: none;
}

.donate input[type="number"]:focus {
    border-color: #007bff; /* Highlight border on focus */
}

.donate button {
    padding: 12px;
    font-size: 1.2em;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}
/* Footer Styles */
footer {
    background-color: #343a40; /* Dark footer background */
    color: white;
    text-align: center;
    padding: 20px;
    margin-top: auto; /* Push footer to the bottom */
}

footer p {
    font-size: 1em;
    margin: 0;
}