source: jobvista-frontend/src/views/applications/Applications.css@ befb988

main
Last change on this file since befb988 was befb988, checked in by 223021 <daniel.ilievski.2@…>, 3 months ago

Added an edit profile page for both job seekers and recruiters, where they can upload profile pictures/company logos and edit their profile data. Added profile page specifically for recruiters. Refactored existing code.

  • Property mode set to 100644
File size: 3.3 KB
RevLine 
[befb988]1.custom-container {
[28b3398]2 width: 65% !important;
3 max-width: 1500px !important;
4 margin: auto;
5}
6
7.application-title {
[befb988]8 font-family: "Segoe UI";
9 margin-top: 40px;
10 margin-bottom: 20px;
[28b3398]11 display: flex;
[befb988]12 justify-content: start;
13 border-bottom: 1px solid #CFCFCF;
[28b3398]14}
[befb988]15.application-title h3 {
16 font-weight: 500;
[28b3398]17}
18
19/*.application-title span {*/
20/* font-weight: bold;*/
21/* */
22/*}*/
23
24.application-card {
25 font-family: Poppins;
26 border: 1px solid lightgray;
27 border-radius: 8px;
28 background-color: white;
29 transition: all 0.3s ease;
30 box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
31 height: auto;
32 padding: 20px 20px;
33 display: flex;
34 justify-content: center;
[befb988]35 gap: 20px;
[28b3398]36 margin: 15px 0;
[befb988]37 /*z-index: -1000;*/
38}
39.application-card .app-job-seeker-pic {
40 border: 1px solid gray;
41 border-radius: 50%
42}
43.application-card .app-job-seeker-pic img {
44 border-radius: 50%;
[28b3398]45}
46
[befb988]47.application-card .app-info {
48 width: 60%;
49 display: inline-flex;
50 flex-direction: column;
51 align-items: flex-start;
52 justify-content: center;
53 gap: 10px;
[28b3398]54}
55
[befb988]56.application-card .app-info .jobAd-title {
[28b3398]57 font-weight: 600;
58 /*text-transform: uppercase;*/
59 font-family: 'Segoe UI', sans-serif;
[befb988]60 /*font-size: 22px;*/
[28b3398]61}
[befb988]62.application-card .app-info .jobAd-title
[28b3398]63
[befb988]64.application-card .app-info .contact-info {
[28b3398]65 display: inline-flex;
[befb988]66 gap: 30px;
[28b3398]67}
[befb988]68.application-card .app-info .contact-info .contact-item {
[28b3398]69 display: inline-flex;
70 align-items: center;
71 gap: 5px;
[befb988]72 margin-right: 10px
[28b3398]73}
74
[befb988]75.application-card .app-info .contact-info .contact-item span {
76 color: darkgray;
77}
78
79.application-card .app-status {
80 width: 40%;
[28b3398]81 display: inline-flex;
82 justify-content: end;
83 align-items: center;
84 gap: 10px;
85}
86
[befb988]87.application-card .app-status .select {
88 width: 45%;
[28b3398]89 display: inline-block;
90}
91
[befb988]92.status {
93 color: white;
94 padding: 5px 10px;
95 border-radius: 5px;
96 width: 150px;
97 text-align: center;
98}
99
100
[28b3398]101.application-button {
102 border: 0;
103 border-radius: 8px;
104 width: auto;
[befb988]105 background-image: linear-gradient(to bottom, #dddddd, #f0f0f0);
106 background-color: #dddddd;
107 color: #333333;
108
109 font-weight: 700;
110 padding: 8px 13px;
[28b3398]111}
[befb988]112
[28b3398]113.application-button:hover {
[befb988]114 background: linear-gradient(to bottom, #bbbbbb, #dddddd);
115 color: #333333;
[28b3398]116}
117
118/*.application-card:hover {*/
119/* transform: translate(0, 8px);*/
120/* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);*/
121/*}*/
122
123.multi-button button{
124 /*font-size: 5vmin;*/
125 padding: .5em 1em;
126 background: #fff;
127 color: #4A5568;
128 border: 0px solid #A0AEC0;
129 //margin: .1em;
130 transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .2s ease;
131 box-shadow: 0 0 0 #BEE3F8;
132 transform: translateY(0);
133}
134.multi-button button:first-of-type{
135 border-radius: .5em 0 0 .5em;
136}
137.multi-button button:last-of-type{
138 border-radius: 0 .5em .5em 0;
139}
140.multi-button button i{
141 color: #A0AEC0;
142 margin-right: .3em;
143 transition: all .2s ease-out;
144}
145.multi-button:hover button{
146 color: #A0AEC0;
147}
148
149.multi-button:hover button:hover{
150 background: #D53F8C;
151 color: #fff;
152 box-shadow: 0 0 0.8em 0 rgba(213, 63, 140, .8);
153 transform: translateY(-.2em);
154}
155.multi-button:hover button i{
156 color: #CBD5E0;
157}
158.multi-button:hover button:hover i{
159 color: #FED7E2;
160 transform: rotate(-10deg);
161}
Note: See TracBrowser for help on using the repository browser.