/* WP Job Manager styles ----------------------------------------------------------------- */ @import "../../../../css/_mixins.scss"; @import "../../../../css/_theme-vars.scss"; @import "../../css/_skin-vars.scss"; /* Buttons --------------------------------------------- */ div.job_listings .load_more_job, .single_job_listing .job_application .button, #submit-job-form .fieldset-logged_in .button, #submit-job-form .fieldset-login_required .button { @include theme_button_filled; } /* Link */ .single_job_listing .company .job_application .button { @include theme_button_colors; &:hover, &:focus { @include theme_button_colors_hover; } } /* Link 2 */ div.job_listings .job_filters input[type="submit"] { @include theme_button_colors_style_link2; &:hover, &:focus { @include theme_button_colors_hover_style_link2; } } /* Link 4 */ .single_job_listing .job_application .button, #submit-job-form .fieldset-logged_in .button, #submit-job-form .fieldset-login_required .button { @include theme_button_colors_style_link4; &:hover, &:focus { @include theme_button_colors_hover_style_link4; } } /* Input & Form --------------------------------------------- */ form.apply_with_resume { @include theme_form_fields; & > p:first-child { margin-bottom: var(--theme-var-grid_gap) !important; } } /* Messages --------------------------------------------- */ .job-manager-message, .job-manager-info, .job-manager-error { @include theme_messages; &:before { content: '' !important; } a { text-decoration: underline; &:hover { text-decoration: none; } } } .job-manager-message.job-manager-error, .job-manager-error.job-manager-error, .job-manager-info.job-manager-error { @include theme_messages_error; } .job-manager-message.job-manager-info, .job-manager-error.job-manager-info, .job-manager-info.job-manager-info { @include theme_messages_info; } .job-manager-message.job-manager-message, .job-manager-error.job-manager-message, .job-manager-info.job-manager-message { @include theme_messages_success; } .blog_mode_wp-job-manager { &.sidebar_hide .alignwide { left: auto; width: auto; } } /* Jobs listings --------------------------------------------- */ div.job_listings, .wp-widget-widget_recent_jobs { margin-bottom: 0; /* Title */ &[data-title]:before { content: attr(data-title); display: block; margin-top: -0.2em; margin-bottom: calc( var(--theme-var-grid_gap) + ( var(--theme-var-grid_gap_koef) * 3px ) ); // replace 33px padding-bottom: 0.85em; border-bottom: 1px solid var(--theme-color-bd_color); color: var(--theme-color-text_dark); } /* Filters */ .job_filters { background-color: transparent; /* Search */ .search_jobs { padding: 15px; background-color: var(--theme-color-bg_color); @include border-radius(6px); display: flex; justify-content: space-between; &:before, &:after { display: none; } .search_keywords, .search_location, .search_submit, .search_categories { float: none; width: auto; padding: 0; margin: 0; } .search_keywords, .search_location, .search_categories { position: relative; width: 100%; padding-right: 15px; box-sizing: border-box; &:before { content: '\E9A1'; font-family: $theme_icons; font-size: 16px; @include abs-lc(17px); color: var(--theme-color-text_light); } input, .select2-selection { padding-left: 3.2em; } } .search_location { &:before { content: '\E9E0'; } } .search_remote_position { display: none; } .search_categories { padding-top: 0; &:before { content: '\E9D8'; } } & > div:not([class]) { display: none; } } /* Types */ .job_types { background: none; border: none; font-size: 12px; margin-top: calc( var(--theme-var-sm_grid_gap) + ( var(--theme-var-grid_gap_koef) * 3px ) ); // replace 23px li { padding: 0; border-right: none; margin-right: calc( var(--theme-var-sm_grid_gap) + ( var(--theme-var-grid_gap_koef) * 2px ) ); // replace 22px &:last-child { margin-right: 0; } } } /* Results */ .showing_jobs { padding: 5px 15px; @include font(12px, 18px); background: var(--theme-color-bg_color); @include border-radius(6px); border-top: none; margin-top: 11px; } } /* List */ ul.job_listings { border: none; padding: 0; &:not(:first-child) { margin-top: 15px; } /* Item */ li.job_listing { padding: 19px 0; border-color: var(--theme-color-bd_color); &:first-child { border-top: 1px solid var(--theme-color-bd_color); } &:before { display: none; } a, a > .content { line-height: inherit; padding: 0; display: flex; align-items: center; justify-content: flex-start; background-color: transparent; width: 100%; .company_logo, .position, .location, .meta, .meta .company, .meta .job-type { float: none; position: relative; left: auto; margin: 0; width: auto; padding-left: 0; &:before { display: none; } } /* Logo */ .company_logo { @include border-round; @include box(49px, 49px); max-width: unset; padding-top: 0 !important; /* lazyload fix */ } /* Position */ .company_logo + .position, .image + .content .position { padding-left: 12px; } .position { width: 55%; margin-top: 1px; padding-right: 20px; h3 { font-weight: 500; line-height: 1.333em; color: var(--theme-color-text_dark); @include transition-colors; } } /* Company */ .company { @include font(13px, 19px); color: var(--theme-color-text_light) !important; strong { font-weight: 400; margin-right: 7px; } .tagline { margin-left: 0; display: block; } } /* Location */ .location { @include font(13px, 19px); color: var(--theme-color-text_light); padding-right: 20px; } /* Meta */ .meta { margin-left: auto; .job-type { @include font(13px, 19px, 400); color: var(--theme-color-accent_link); } .date { @include font(12px, 18px, 400); color: var(--theme-color-text_light); } } } a:hover, a:hover > .content { /* Position */ .position { h3 { color: var(--theme-color-accent_hover); } } } } } /* Load more */ .load_more_jobs { font-size: var(--theme-font-button_font-size); font-weight: 600; line-height: 21px; text-transform: uppercase; letter-spacing: 0.1em; text-align: left; color: var(--theme-color-text_dark); background-color: transparent; border: none !important; padding: 0 2.1em 0 0 !important; margin-top: 20px; margin-bottom: -6px; position: relative; display: table; &:hover, &:focus { color: var(--theme-color-accent_hover); background-color: transparent; } strong { font-weight: inherit; } &:before, &:after { content: '\E9A7'; font-family: $theme_icons; font-style:normal; font-weight: normal; font-size: 1.25em; position: absolute; z-index: 1; top: 0; right: 0; transition: all 0.3s ease; } &:before { right: 20px; opacity: 0; } &:hover:before { opacity: 1; right: 0; } &:hover:after { opacity: 0; right: -20px; } } } /* Single Job --------------------------------------------- */ .single_job_listing { & > h1 { margin-top: 0; } /* Meta */ .job-listing-meta { margin-bottom: var(--theme-var-grid_gap); padding-bottom: var(--theme-var-grid_gap); border-bottom: 1px solid var(--theme-color-bd_color); li { margin-right: 19px; &:last-child { margin-right: 0; } } .job-type { @include font(10px, inherit, 500); letter-spacing: 0.1em; text-transform: uppercase; padding: 0 16px; @include border-radius(24px); color: var(--theme-color-extra_dark); background-color: var(--theme-color-extra_bg_color); } .location, .date-posted, .position-filled { @include font(13px, inherit, 500); padding: 0; color: var(--theme-color-text_light); &:before { font-family: $theme_icons !important; color: inherit; margin-right: 7px; @include box(auto, auto); } } .location { &:before { content: '\E9E0'; font-size: 17px; line-height: 0.9em; vertical-align: baseline; } a { color: inherit; &:hover, &:focus { color: var(--theme-color-accent_link); } } } .date-posted { &:before { content: '\E9E1'; } } .position-filled { &:before { content: '\e8e0'; } } } /* Company */ .company { padding: calc( var(--theme-var-grid_gap) + ( var(--theme-var-grid_gap_koef) * 15px ) ) calc( var(--theme-var-grid_gap) + ( var(--theme-var-grid_gap_koef) * 14px ) ); // replace 44px 45px margin: 0 0 var(--theme-var-grid_gap) var(--theme-var-grid_gap); float: right; text-align: center; min-height: auto; width: var(--theme-var-sidebar); box-sizing: border-box; box-shadow: none; border: 1px solid var(--theme-color-bd_color); @include border-radius(15px); img { @include border-round; position: relative; left: auto; float: none; @include box(130px, 130px); } .company_apply { margin-top: calc( var(--theme-var-sm_grid_gap) + ( var(--theme-var-grid_gap_koef) * 9px ) ); // replace 29px .job_application .button { width: 100%; } .application_details { padding: 15px; input[type="submit"] { width: 100%; padding-right: 0; padding-left: 0; } } } .company_contacts { text-align: left; margin-top: calc( var(--theme-var-sm_grid_gap) + ( var(--theme-var-grid_gap_koef) * 8px ) ); // replace 28px h5 { font-weight: 500; margin-top: 0; margin-bottom: 5px; } ul { padding: 0; margin: 0; font-size: 14px; li { margin: 0; padding: 0; color: inherit; line-height: inherit; font-style: normal; list-style-type: none; text-indent: 0; &:before, &:empty { display: none; } & + li { margin-top: 0px; } a { color: inherit; &:hover, &:focus { color: var(--theme-color-accent_hover); } } } .website a { color: var(--theme-color-accent_link2); &:hover, &:focus { color: var(--theme-color-accent_hover2); } } li + .website { margin-top: 15px; } } } } /* Description */ .job_description { margin-bottom: 0; & > h1, & > h2, & > h3, & > h4, & > h5, & > h6 { &:first-child { margin-top: 0; } } & > ul:last-child, & > p:last-child { margin-bottom: 0; } ul li::marker { color: var(--theme-color-accent_link2); } } /* Submit */ .job_application { margin: calc( var(--theme-var-grid_gap) + ( var(--theme-var-grid_gap_koef) * 4px ) ) 0 0; // replace 34px 0 0 overflow: visible; .application_details { text-align: left; padding: var(--theme-var-grid_gap); margin: var(--theme-var-grid_gap) 0 0; box-shadow: none; line-height: inherit; border: none; @include border-radius(6px); background-color: var(--theme-color-bg_color); &:before, &:after { display: none; } p { margin-bottom: 0; } } } } .single-job_listing.sidebar_hide { .page_content_wrap > [class*="content_wrap"]:first-child { width: var(--theme-var-content); overflow: visible !important; margin: 0; } /* Company */ .single_job_listing .company { @include abs-lt( calc(100% + var(--theme-var-grid_gap)) ); float: none; margin: 0; border: none; box-shadow: 0 3px 20px #1d26260d; background-color: var(--theme-color-content_bg); } &.menu_side_hide { .page_content_wrap > [class*="content_wrap"]:first-child { padding-right: calc( var(--theme-var-sidebar) + var(--theme-var-grid_gap) ); margin: 0 auto; } /* Company */ .single_job_listing .company { left: auto; right: 0; } } } .single-job_listing.sidebar_show { .single_job_listing .company { .company_apply { display: none; } .company_contacts { text-align: center; } } } /* Job summary --------------------------------------------- */ .widget .job_summary_shortcode { @include border-sharp(); border: none; padding: 2em 0 0; box-shadow: none; .job-type { top: 0; } } .job_summary_shortcode { padding: 3em 0 0; overflow: hidden; @include border-radius(8px); border-color: var(--theme-color-bd_color); background-color: var(--theme-color-content_bg); box-shadow: 0 5px 30px rgba(0, 0, 0, 0.04); .job-type { @include font(10px, inherit, 600); letter-spacing: 0.1em; text-transform: uppercase; color: var(--theme-color-accent_text); background-color: var(--theme-color-accent_link) !important; height: auto; padding: 0 16px; @include border-radius(24px); margin: 0; top: 15px; right: 15px; box-shadow: none; } img { @include border-round; @include box(130px, 130px); margin: auto; } .job_summary_content { padding: 0; .job_summary_title { margin-top: calc( var(--theme-var-sm_grid_gap) + ( var(--theme-var-grid_gap_koef) * 2px ) ); // replace 22px margin-bottom: 5px; } .meta { font-style: normal; color: inherit; font-size: 13px; margin-bottom: 0; &:before { content: '\E9E0'; font-family: $theme_icons; font-size: 17px; margin-right: 6px; } time { display: block; background-color: var(--theme-color-navigate_bg); margin-top: calc( var(--theme-var-sm_grid_gap) + ( var(--theme-var-grid_gap_koef) * 8px ) ); // replace 28px padding: 13px 0 14px; } } } } /* Job dashboard --------------------------------------------- */ #job-manager-job-dashboard { & > p { display: none; } table { width: 100%; color: var(--theme-color-text_light); th { padding: 15px 20px 16px 0; @include font(12px, inherit, 500); text-transform: uppercase; letter-spacing: 0.06em; text-align: left; } td { padding: calc( var(--theme-var-sm_grid_gap) + ( var(--theme-var-grid_gap_koef) * 3px ) ) 20px calc( var(--theme-var-sm_grid_gap) + ( var(--theme-var-grid_gap_koef) * 4px ) ) 0; // replace 23px 20px 24px 0 vertical-align: top; } th:first-child, td:first-child { padding-left: 20px; } th + td, td + th, td + td { border-left: none; } tfoot td { background-color: var(--theme-color-navigate_bg); padding: 15px 20px 16px; } /* Title */ .job_title { width: 33%; a { font-weight: 500; color: var(--theme-color-text_dark); &:hover, &:focus { color: var(--theme-color-accent_link); } } .job-dashboard-actions { visibility: visible; display: block; @include font(12px, inherit, 500); margin-top: 1px; margin-bottom: -6px; li { &:after { display: none; } & + li:before { content: ''; @include box(3px, 3px); display: inline-block; vertical-align: middle; margin: 0 9px 0 4px; @include border-round; background-color: var(--theme-color-text); } a { color: var(--theme-color-text); &:hover, &:focus { color: var(--theme-color-accent_link2); } } } } } /* Filled */ .filled { text-align: left; } /* Date & expires */ th.date, th.expires { text-align: left; } td.date, td.expires { font-size: 14px; text-align: left; } } .jm-dashboard__intro { @include flex-align-items(flex-start); .jm-form > div { position: relative; &:before { @include abs-lc(1.2em); content: '\E9A1'; font-family: $theme_icons; font-size: inherit; color: var(--theme-color-text_dark); @include transition(color .3s ease); } &:hover:before { color: var(--theme-color-accent_link); } } .jm-form input[type="search"] { @include theme_field_template; @include theme_field_colors; padding-left: 3em; &:focus, &:focus-visible, &:focus-within { @include theme_field_colors_hover; outline: none; } &.placeholder, &::placeholder { opacity: 1; } &.jm-ui-input--search-icon { background-image: none; } &:before { content: '\E9A1'; font-family: $theme_icons; font-size: inherit; color: var(--theme-color-text_dark); } } .jm-ui-button { @include theme_button_filled; padding: 11px var(--theme-var-btn_padding3); &:hover, &:focus { @include theme_button_colors_hover; } } } .job-manager-jobs { .jm-dashboard-header, .jm-dashboard-job { gap: 12px; } .jm-dashboard-header { .jm-dashboard-job-column-label { color: var(--theme-color-text_dark); @include font(12px, 15px, 500); text-transform: uppercase; letter-spacing: 0.06em; } } .jm-dashboard-rows { .jm-dashboard-job { font-size: 13px; border-color: var(--theme-color-bd_color); background-color: var(--theme-color-menu_bg); @include border-radius(6px); .jm-dashboard-job-column-label { @include font(11px, 15px, 500); text-transform: uppercase; letter-spacing: 0.06em; color: var(--theme-color-text_dark); } a.job-title { font-weight: 500; color: var(--theme-color-text_dark); &:hover { color: var(--theme-color-accent_link); } } img.company_logo { @include border-radius(50%); } .job-status { @include font(12px, 15px, 400); text-transform: none; letter-spacing: 0; color: var(--theme-color-text_light); .jm-separator { color: var(--theme-color-text_light); text-indent: -200px; overflow: hidden; position: relative; width: 6px; &:before { @include abs-cc; content: ''; width: 3px; height: 3px; display: inline-block; text-indent: 0; background-color: var(--theme-color-text_light); @include border-radius(50%); } } } .jm-ui-button--outline { padding: 6px 12px; @include font(12px, 15px, 400); letter-spacing: 0; color: var(--theme-color-text); border: 1px solid var(--theme-color-bd_color); background: none; @include border-radius(var(--theme-var-rad)); @include transition(color .3s ease, border-color .3s ease); &:hover { color: var(--theme-color-accent_link); border-color: var(--theme-color-accent_link); } } .jm-ui-button--icon { padding: 4px; @include border-radius(50%); &:hover, &:active { background: var(--theme-color-bg_color); } } .jm-ui-action-menu__content { border-color: var(--theme-color-bd_color); background: var(--theme-color-menu_bg); @include border-radius(6px); @include box-shadow(none); .jm-ui-button--link { background: none; &:hover, &:active { color: var(--theme-color-accent_link); background: none; } &.job-dashboard-action-delete { color: var(--theme-color-accent_link2); &:hover, &:active { color: var(--theme-color-accent_hover2); } } } } } } } } /* Job submit form --------------------------------------------- */ .job-manager-message, .job-manager-info, .job-manager-error { & + #submit-job-form, & + #submit-resume-form, & + .single_job_listing, & + #job-manager-job-dashboard { margin-top: var(--theme-var-grid_gap); } } .jm-notice { @include font(14px, 22px); padding: 15px 20px; color: var(--theme-color-text); border-color: var(--theme-color-bd_color); background: var(--theme-color-menu_bg); @include border-radius(6px); .jm-notice__message-wrap { gap: 5px; .jm-notice__message { font-weight: 400; } } } #submit-job-form { h2 { margin-top: calc( var(--theme-var-grid_gap) + ( var(--theme-var-grid_gap_koef) * 27px ) ); // replace 57px margin-bottom: calc( var(--theme-var-grid_gap) + ( var(--theme-var-grid_gap_koef) * 4px ) ); // replace 34px } fieldset { margin: 0 0 var(--theme-var-grid_gap) 0; padding: 0; border-bottom: none; display: flex; flex-direction: row; justify-content: space-between; &:before, &:after { display: none; } /* Label */ label:not(.full-line-checkbox-field label) { float: none; width: auto; font-weight: 500; margin-top: 9px; color: var(--theme-color-text_dark); small { opacity: 1; font-size: inherit; color: var(--theme-color-text_light); } } /* Field */ div.field:not(.full-line-checkbox-field) { width: 74.5%; float: none; } /* Description */ small.description { opacity: 1; font-size: 12px; margin: 1em 0 0 0; display: block; line-height: 1.5em; color: var(--theme-color-text_light); } /* Remove */ .job-manager-uploaded-files .job-manager-uploaded-file .job-manager-uploaded-file-preview a { font-style: normal; color: inherit; &:hover { color: var(--theme-color-text_dark); } } } /* Login & Logout */ .fieldset-logged_in, .fieldset-login_required { margin-bottom: calc( var(--theme-var-sm_grid_gap) + ( var(--theme-var-grid_gap_koef) * 5px ) ); // replace 25px label:not(.full-line-checkbox-field label) { margin-top: 3px; } strong { font-weight: inherit; } a.button { font-size: 11px; padding: 8px var(--theme-var-btn_padding3); line-height: 20px; vertical-align: middle; margin: 0 0 3px 19px; &:before { display: none; } } } .fieldset-login_required { a.button { margin: 0 19px 3px 0; } } /* File */ .fieldset-type-file { label:not(.full-line-checkbox-field label) { margin-top: 2px; } } /* Buttons */ p:last-child { width: 74.5%; margin-top: calc( var(--theme-var-grid_gap) + ( var(--theme-var-grid_gap_koef) * 8px ) ); // replace 38px margin-bottom: 0; margin-left: auto; .button + .button { margin-left: 11px; } } /* Checkbox */ .fieldset-type-checkbox .field { margin-top: 15px; input[type="checkbox"] { z-index: 2; clip: unset; opacity: 0; } small.description { margin-top: 0; } } } /* Job preview --------------------------------------------- */ #job_preview { /* Title */ .job_listing_preview_title { padding: 15px var(--theme-var-grid_gap) 10px; @include border-radius(8px 8px 0 0); background-color: var(--theme-color-bg_color); overflow: hidden; display: flex; justify-content: end; align-items: center; order: 1; h2 { margin-right: auto; } .button { float: none; margin: 0; order: 2; } .button + .button { margin-left: 15px; } } /* Preview */ .job_listing_preview { @include border-radius( 0 0 8px 8px); padding: var(--theme-var-grid_gap); border-color: var(--theme-color-bg_color); .single_job_listing { overflow: hidden; } .company .company_contacts { text-align: center; } } }