Template:Infobox concept/styles.css

From No Subject
Jump to navigation Jump to search 
/* ========================================
   INFOBOX CONCEPT - ENHANCED SEMANTIC VERSION
   Version: 4.0 - Cargo Integration Edition
   Palette: Seuil Blue (#5B92C5)
   ======================================== */

.infobox-concept {
  float: right;
  clear: right;
  width: 22em;
  margin: 0 0 1em 1em;
  background-color: #ffffff;
  border: 1px solid #a2a9b1;
  font-size: 90%;
  line-height: 1.4;
  overflow: hidden;
  word-wrap: break-word;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* ========================================
   HEADERS
   ======================================== */

.concept-header {
  background: #5B92C5; /* Seuil Blue */
  color: #ffffff;
  font-weight: bold;
  font-size: 1.1em;
  padding: 0.5em;
  text-align: center;
  line-height: 1.2;
  border-bottom: 1px solid #4a7aa6;
}

.concept-name {
  font-size: inherit;
  font-weight: bold;
  margin: 0;
}

.concept-original-term {
  font-size: 0.85em;
  font-style: italic;
  opacity: 0.9;
  display: block;
  margin-top: 0.3em;
  font-weight: normal;
}

.concept-alternate-names {
  background: #E8F4F8; /* Light blue wash */
  color: #333;
  font-size: 0.85em;
  padding: 0.4em;
  text-align: center;
  border-bottom: 1px solid #a2a9b1;
  font-style: italic;
}

/* ========================================
   IMAGE
   ======================================== */

.concept-image {
  text-align: center;
  padding: 0.8em;
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.concept-image img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.concept-caption {
  font-size: 0.85em;
  color: #666;
  margin-top: 0.5em;
  line-height: 1.3;
}

/* ========================================
   SECTIONS & COLLAPSIBLE
   ======================================== */

.concept-section-header {
  background: #B8D4E8; /* Medium Blue */
  color: #000;
  font-weight: bold;
  font-size: 0.9em;
  padding: 0.4em 0.6em;
  border-top: 1px solid #a2a9b1;
  border-bottom: 1px solid #a2a9b1;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  cursor: pointer;
  position: relative;
}

/* Enhanced collapsible toggle */
.concept-section-header.mw-collapsible-toggle::after {
  content: '▼';
  float: right;
  font-size: 0.8em;
  transition: transform 0.2s ease;
}

.concept-section-header.mw-collapsed::after {
  transform: rotate(-90deg);
}

/* Collapsed content hidden smoothly */
.mw-collapsible-content {
  transition: max-height 0.3s ease, opacity 0.3s ease;
}

/* ========================================
   DATA GRID (Table Layout)
   ======================================== */

.concept-data-grid {
  background: #ffffff;
  width: 100%;
}

.concept-row {
  display: grid;
  grid-template-columns: minmax(85px, 35%) 1fr;
  border-bottom: 1px solid #e0e0e0;
}

.concept-row:last-child {
  border-bottom: none;
}

.concept-label {
  background: #F9F9F9;
  padding: 0.4em 0.5em;
  font-weight: 600;
  color: #444;
  font-size: 0.95em;
  text-align: right;
  border-right: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  line-height: 1.2;
}

.concept-data {
  padding: 0.4em 0.5em;
  color: #222;
  font-size: 0.95em;
}

/* ========================================
   BLOCKS (Full Width)
   ======================================== */

.concept-block {
  padding: 0.6em;
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}

.concept-label-block {
  font-weight: bold;
  color: #5B92C5;
  font-size: 0.9em;
  margin-bottom: 0.3em;
  text-transform: uppercase;
}

.concept-data-block {
  color: #222;
  line-height: 1.4;
}

/* Fix lists inside data blocks */
.concept-data ul, 
.concept-data-block ul {
  margin: 0.3em 0 0.3em 1.2em;
  padding: 0;
}

/* ========================================
   VALIDATION & ALERTS
   ======================================== */

.concept-validation-section {
  background: #FFF8DC;
  border: 1px solid #F0C050;
  padding: 0.5em;
  margin: 0.5em;
  border-radius: 3px;
}

.validation-warning {
  color: #856404;
  font-size: 0.85em;
  padding: 0.2em 0;
}

.validation-warning::before {
  content: '⚠ ';
  font-weight: bold;
}

.concept-alert {
  background: #FFF3CD;
  border-left: 4px solid #FFC107;
  padding: 0.5em;
  margin: 0.5em 0;
  color: #856404;
  font-size: 0.9em;
  font-weight: 500;
}

/* ========================================
   CONTENT BOXES (Schools, Contributors, Relations)
   ======================================== */

.school-box, 
.contributor-block, 
.relation-block {
  background: #F9FCFF; /* Very faint blue */
  padding: 0.6em;
  margin: 0.6em;
  border: 1px solid #B8D4E8;
  position: relative;
  border-left-width: 4px;
  border-left-style: solid;
  border-radius: 2px;
  transition: box-shadow 0.2s ease;
}

.school-box:hover,
.contributor-block:hover,
.relation-block:hover {
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* Headers inside boxes */
.school-header, 
.contributor-name, 
.relation-target {
  font-weight: bold;
  color: #2c3e50;
  font-size: 0.95em;
  margin-bottom: 0.3em;
  display: block;
}

.school-header {
   text-transform: uppercase;
   font-size: 0.85em;
   color: #5B92C5;
}

.contributor-name a, 
.relation-target a {
  color: #2c3e50;
  text-decoration: none;
}

.contributor-name a:hover, 
.relation-target a:hover {
  text-decoration: underline;
}

/* Content Text */
.school-content, 
.contributor-content, 
.relation-content {
  font-size: 0.95em;
  color: #333;
  line-height: 1.4;
}

/* Metadata Text */
.school-texts, 
.school-terms, 
.contributor-year {
  font-size: 0.85em;
  color: #666;
  margin-top: 0.3em;
}

/* Type Tags */
.contributor-type-tag, 
.relation-type-tag {
  float: right;
  font-size: 0.75em;
  text-transform: uppercase;
  background: #ffffff;
  border: 1px solid #B8D4E8;
  padding: 1px 4px;
  border-radius: 2px;
  color: #666;
  margin-left: 5px;
  font-weight: normal;
}

/* ========================================
   COLOR CODING
   ======================================== */

/* --- Schools --- */
.school-box { border-left-color: #5B92C5; } /* Default Blue */
.school-box.freudian { border-left-color: #C25B5B; } /* Muted Red */
.school-box.lacanian { border-left-color: #5B92C5; } /* Blue */
.school-box.kleinian { border-left-color: #C59B5B; } /* Muted Orange */
.school-box.laplanchian { border-left-color: #5BC5A8; } /* Teal */
.school-box.ego-psychology { border-left-color: #7BA8C5; } /* Light Blue */
.school-box.object-relations { border-left-color: #5BC59B; } /* Green */
.school-box.relational { border-left-color: #8E77B8; } /* Purple */
.school-box.contemporary { border-left-color: #C5A85B; } /* Gold */

/* --- Contributors --- */
.contributor-block.originator { border-left-color: #C25B5B; }
.contributor-block.reinterpretation { border-left-color: #5B92C5; }
.contributor-block.elaboration, 
.contributor-block.systematic-elaboration { border-left-color: #7BA8C5; }
.contributor-block.clinical, 
.contributor-block.clinical-extension { border-left-color: #5BC5A8; }
.contributor-block.interdisciplinary, 
.contributor-block.interdisciplinary-application { border-left-color: #C5A85B; }
.contributor-block.critique { border-left-color: #C27B7B; }

/* --- Relations --- */
/* Foundational (Blue) */
.relation-block.foundational, 
.relation-block.foundational-dependency, 
.relation-block.prerequisite {
   border-left-color: #5B92C5;
}

/* Elaborates (Green/Teal) */
.relation-block.elaborates, 
.relation-block.extension, 
.relation-block.elaborates-refines, 
.relation-block.clinical-manifestation {
   border-left-color: #5BC59B;
}

/* Clinical (Light Blue) */
.relation-block.clinical, 
.relation-block.clinical-application {
   border-left-color: #7BA8C5;
}

/* Opposition (Red) */
.relation-block.opposition, 
.relation-block.theoretical-opposition, 
.relation-block.contradicts, 
.relation-block.supersedes {
   border-left-color: #C25B5B;
}

/* Interdisciplinary (Gold) */
.relation-block.interdisciplinary, 
.relation-block.interdisciplinary-parallel, 
.relation-block.interdisciplinary-influence {
   border-left-color: #C5A85B;
}

/* Translation/History (Teal) */
.relation-block.translation, 
.relation-block.school-translation, 
.relation-block.lacanian-translation, 
.relation-block.theoretical-evolution {
   border-left-color: #5BC5A8;
}

/* New relationship types */
.relation-block.temporal-sequence { border-left-color: #9B8EC5; } /* Lavender */
.relation-block.mutual-constitution { border-left-color: #C55B8E; } /* Magenta */
.relation-block.clinical-alternative { border-left-color: #8EC55B; } /* Lime */
.relation-block.translational-equivalent { border-left-color: #5B8EC5; } /* Sky Blue */

/* ========================================
   UTILITIES & MOBILE
   ======================================== */

.small-text {
  font-size: 0.9em;
  line-height: 1.35;
}

/* Clinical examples formatting */
.clinical-examples {
  font-size: 0.9em;
}

@media (max-width: 720px) {
  .infobox-concept {
    float: none;
    width: 100%;
    margin: 0 0 1em 0;
  }
  
  .concept-row {
    grid-template-columns: 30% 70%;
  }
  
  .concept-label {
    font-size: 0.85em;
    padding: 0.3em;
  }
  
  .relation-type-tag, 
  .contributor-type-tag {
    float: none;
    display: inline-block;
    margin-bottom: 0.2em;
  }
  
  .school-box,
  .contributor-block,
  .relation-block {
    margin: 0.4em;
    padding: 0.5em;
  }
}

/* ========================================
   PRINT STYLES (ENHANCED)
   ======================================== */

@media print {
  .infobox-concept {
    border: 1px solid #000;
    width: 100%;
    float: none;
    box-shadow: none;
    page-break-inside: avoid;
  }
  
  .concept-header {
    background: none !important;
    color: #000 !important;
    border-bottom: 2px solid #000;
  }
  
  .concept-section-header {
    background: #f0f0f0 !important;
    color: #000 !important;
    border-color: #ccc;
    page-break-after: avoid;
  }
  
  /* Ensure collapsed sections print expanded */
  .mw-collapsed .mw-collapsible-content {
    display: block !important;
  }
  
  .school-box, 
  .contributor-block, 
  .relation-block {
    background: none !important;
    border: 1px solid #ccc !important;
    border-left-width: 4px !important;
    page-break-inside: avoid;
  }
  
  .validation-warning {
    display: none; /* Hide warnings in print */
  }
  
  a {
    text-decoration: underline;
    color: #000;
  }
  
  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
  }
}

/* ========================================
   DARK MODE SUPPORT (Optional)
   ======================================== */

@media (prefers-color-scheme: dark) {
  .infobox-concept {
    background-color: #1a1a1a;
    border-color: #444;
    color: #e0e0e0;
  }
  
  .concept-header {
    background: #2a4a6a;
    border-bottom-color: #1a3a5a;
  }
  
  .concept-section-header {
    background: #2a3a4a;
    color: #e0e0e0;
  }
  
  .concept-label {
    background: #2a2a2a;
    color: #c0c0c0;
    border-right-color: #444;
  }
  
  .concept-data,
  .concept-data-block {
    color: #e0e0e0;
  }
  
  .school-box,
  .contributor-block,
  .relation-block {
    background: #252525;
    border-color: #444;
  }
  
  .school-header,
  .contributor-name,
  .relation-target {
    color: #e0e0e0;
  }
  
  .concept-alert {
    background: #3a3020;
    border-left-color: #8a7040;
    color: #d0c0a0;
  }
}
Retrieved from "https://nosubject.com/index.php?title=Template:Infobox_concept/styles.css&oldid=67294"