Шаблон:JobPageHeader/styles.css

.ss13-job-header {

   background-color: rgba(20, 22, 23, 0.7) !important;
   border: 2px solid var(--border-color, #3f4348) !important;
   box-shadow: 0 0 15px rgba(0, 0, 0, 0.5) !important;
   border-radius: 6px !important;
   padding: 15px !important;
   margin-bottom: 20px !important;
   font-family: 'Courier New', Courier, monospace !important;
   color: var(--text-main, #e3e4e6) !important;
   text-align: left !important;
   box-sizing: border-box !important;
   width: 100% !important;
   position: relative !important;
   transition: box-shadow 0.3s ease !important;

}

/* Автоматическое неоновое свечение всей карточки под цвет активной ТГ-темы */ body:not(.theme-default) .ss13-job-header {

   box-shadow: 0 0 12px var(--accent) !important;

}

.job-header-top-row {

   display: grid !important;
   grid-template-columns: 1fr 86px !important;
   align-items: center !important;
   border-bottom: 1px solid var(--border-color, #3f4348) !important;
   padding-bottom: 12px !important;
   margin-bottom: 15px !important;
   min-height: 86px !important;
   width: 100% !important;
   box-sizing: border-box !important;

}

.job-header-main-title {

   font-size: 26px !important;
   font-weight: bold !important;
   color: #ffffff !important;
   text-shadow: 0 0 5px rgba(255, 255, 255, 0.2) !important;
   line-height: 1.2 !important;

}

.job-header-icon-box {

   width: 86px !important;
   height: 86px !important;
   display: flex !important;
   align-items: center !important;
   justify-content: center !important;
   background: rgba(255, 255, 255, 0.04) !important;
   border: 1px dashed var(--border-color, #3f4348) !important;
   border-radius: 4px !important;
   overflow: hidden !important;
   margin-left: auto !important;
   flex-shrink: 0 !important;

}

.job-header-pixel-image img {

   image-rendering: -moz-crisp-edges !important;
   image-rendering: -webkit-crisp-edges !important;
   image-rendering: pixelated !important;
   image-rendering: crisp-edges !important;

}

.job-header-grid {

   display: grid !important;
   grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
   gap: 12px !important;

}

.job-grid-tile {

   background-color: var(--bg-input, #161719) !important;
   padding: 8px 12px !important;
   border-radius: 0 4px 4px 0 !important;
   border-left: 3px solid var(--accent, #00adb5) !important;

}

.job-grid-tile .tile-label {

   font-size: 11px !important;
   color: var(--text-muted, #a8a095) !important;
   text-transform: uppercase !important;

}

.job-grid-tile .tile-value {

   font-size: 14px !important;
   font-weight: bold !important;
   color: var(--text-main, #e3e4e6) !important;
   margin-top: 2px !important;

}

.job-header-desc-block {

   margin-top: 15px !important;
   padding: 10px !important;
   background-color: var(--bg-card, #282a2d) !important;
   border: 1px dashed var(--border-color, #3f4348) !important;
   border-radius: 4px !important;
   font-size: 13px !important;
   line-height: 1.4 !important;

}

.desc-highlight {

   color: var(--accent, #00adb5) !important;
   font-weight: bold !important;

}

.dept-theme-Command .job-grid-tile { border-left-color: #1d72b8 !important; } .dept-theme-Security .job-grid-tile { border-left-color: #cc0000 !important; } .dept-theme-Engineering .job-grid-tile { border-left-color: #ffcc00 !important; } .dept-theme-Medical .job-grid-tile { border-left-color: #009933 !important; } .dept-theme-Science .job-grid-tile { border-left-color: #993399 !important; } .dept-theme-Supply .job-grid-tile { border-left-color: #8b5a2b !important; } .dept-theme-Service .job-grid-tile { border-left-color: #66ccff !important; } .dept-theme-Silicon .job-grid-tile { border-left-color: #00ffcc !important; }

.access-tile { border-left-color: #e8cd54 !important; } .supervisor-tile { border-left-color: #4946e3 !important; } .duty-tile { border-left-color: #238636 !important; }

.difficulty-tile[style*="--tile-custom-color: #"], .dept-tile[style*="--tile-custom-color: #"] {

   border-left-color: var(--tile-custom-color) !important;

}

.ss13-job-header.rgb {

   border-image: linear-gradient(to right, red, orange, yellow, green, cyan, blue, violet) 1 !important;
   border-radius: 0 !important;

} .rainbow-bar { display: none !important; } .ss13-job-header.rgb .rainbow-bar {

   display: block !important;
   position: absolute !important;
   bottom: 0 !important;
   left: 0 !important;
   height: 4px !important;
   width: 100% !important;
   background: linear-gradient(to right, red, orange, yellow, green, cyan, blue, violet) !important;

}