NoteGuesser/style.css at main · thkinh/NoteGuesser · 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
body {
    font-family: Arial, sans-serif;
    margin: 0;
    height: 100em; /* Ensure the body takes up the full viewport height */
    width: 100%;
    text-align: center;
    background: linear-gradient(60deg, #7d0505, #130329); /* Dark blue gradient */
    background-repeat: no-repeat; /* Prevent background from repeating */
    background-size: cover; /* Ensure the background covers the entire viewport */
    background-attachment: fixed; /* Optional: Keeps background fixed during scrolling */
    color: #FCC737; /* Ensure text is visible on the dark background */
}


.horizontal-layout {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin: 10px;
}
.horizontal-layout > * {
    margin: 0 5px;
}
button {
    width: 200px;
    padding: 10px 20px;
    cursor: pointer;
    margin: 3px 0;
}

footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

.vertical-layout{
    display:flex;
    flex-direction: column;
    align-items: flex-start;
}
.vertical-layout label {
    display: flex;
    align-items: center; /* Align checkbox and text vertically */
}

.vertical-layout label span {
    min-width: 70px; /* Adjust width to ensure consistent alignment */
    display: flex;/* Makes the span behave like a block to ensure alignment */
}
.note-checkbox{

}

.list-choice{
    width:200px;
    position: relative;
    cursor: pointer;
    display: flex;
    flex-direction: column;
}
.list-choice input[type="radio"]{
    position:absolute;
    left:-9999px;
}

.list-choice-title {
    width: 100%;
    display: block;
    background: #2A004E;
    text-align: center;
    padding: 0.55em 1em;
    box-sizing: border-box;
    color: #FFF;
    text-shadow: 0 1px 0 #CACACA;
    border-radius: 0.2em;
}
.list-choice:hover .list-choice-title {
    border-radius:0.2em 0.2em 0 0;
}
.list-choice-objects label:nth-last-of-type(1) span{
    border-radius:0 0 0.2em 0.2em;
}
.list-choice input[type="radio"] + span {
    color: #FFF;
    background: #16C47F;
    padding: 0.55em 1em;
    display: block;
    text-align: center;
    box-sizing: border-box;
    cursor: pointer;
    width: 100%;
}
.list-choice-objects {
    position: absolute;
    top: 0;
    padding-top: 2.1em;
    box-sizing: border-box;
    width: 100%;
    overflow: hidden;
    max-height: 0;
    transition: all 250ms ease;
}
.list-choice:hover .list-choice-objects  input[type="radio"] + span {
    position: relative;
    top: 0;
    transition: all 250ms ease-in-out;
}
.list-choice:hover input[type="radio"] + span:hover {
    background:#500073;
}
.list-choice:hover input[type="radio"]:checked + span:hover {
    background:#2A004E;
}
.list-choice input[type="radio"]:checked + span {
    background: #2A004E;
    position: absolute;
    top: 0em;
    border-radius: 0.2em;
}
.list-choice:hover input[type="radio"]:checked + span {
    border-radius: 0;
}
.list-choice:hover .list-choice-objects label:nth-last-of-type(1) input[type="radio"]:checked + span{
    border-radius:0 0 0.2em 0.2em;
}

.list-choice:hover .list-choice-objects {
    max-height: 540px;
}

#note-image {
    max-width: 100%; /* Ensure the image doesn't exceed the container or viewport width */
    height: auto; /* Maintain the aspect ratio */
    object-fit: cover;
    border: 2px solid #ccc;
    border-radius: 5px;
}