ByteAndBook/style.css at main · TonyRusher/ByteAndBook · 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
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
.bg-purple{
	background-color: #6a1b9a;
}

.bg-white{
	background-color: #fff;
}

p {
	font-size: 20px;
}


input[type="date"], input[type="time"], input[type="number"] {
	width: 100%;
	background-color: rgb(248,248,248); /* Example background color */
	/* Additional styles */
	color: black; /* Text color */
	border: 1px solid #ccc; /* Border color and width */
	padding: 5px; /* Padding inside the input */
	border-radius: 4px; /* Rounded corners */
}


/* Container for the entire slider */
.slider-container {
    position: relative;
    overflow: hidden; /* Hide anything that goes outside the container */
    width: 100%; /* Set to 100% to fill the parent container */
}

/* The actual slider (flex container for items) */
.slider {
    display: flex;
    transition: transform 0.5s ease; /* Smooth sliding transition */
}

/* Each individual slide (mini-post) */
.mini-post {
    flex: 0 0 auto; /* Prevents the items from shrinking or growing */
    width: 300px; /* Set a fixed width for each slide */
    margin-right: 20px; /* Space between slides */
}

/* Optionally, add some styling to the content */
.mini-post img {
    width: 100%; /* Make the images fill their container */
}

/* Add arrows (if you want next/previous buttons) */
.slider-container .prev, .slider-container .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    padding: 10px;
    cursor: pointer;
    z-index: 10;
}

.slider-container .prev {
    left: 10px;
}

.slider-container .next {
    right: 10px;
}

.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 10001; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Black background with opacity */
    overflow: auto; /* Prevent the background from scrolling */
}

.modal-content {
    margin: 15% auto; /* Center the modal */
    background: white;
    width: 90%; /* Adjust the width */
    max-width: 600px; /* Optional max width */
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    max-height: calc(80vh - 50px); /* Reduce height by the fixed bar height */
    overflow-y: auto; /* Add vertical scrolling if content overflows */
}

.modal-content img {
    max-width: 100%;
    height: auto;
    margin-top: 20px;
}

.close {
    float: right;
    color: #aaa;
    font-size: 28px;
    font-weight: bold;
    right: 10px;
    top: 10px;
    cursor: pointer;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.card {
    border: 1px solid #ddd;
    border-radius: 10px;
    padding: 15px;
    margin-bottom: 15px;
}
th {
    text-align: center;
}

.modal-content form {
    margin-top: 20px;
}

.modal-content form label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.modal-content form input,
.modal-content form textarea {
    width: 100%;
    margin-bottom: 10px;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.modal-content form button {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.modal-content form button:hover {
    background-color: #0056b3;
}