|
|
| Line 1: |
Line 1: |
| /**
| | body { |
| * ComputerScience.wiki - Main Page Styles
| | font-family: Arial, sans-serif; |
| * With fixed button width and single button
| | background-color: #f4f4f4; |
| */
| |
| | |
| /* Base container */
| |
| .cs-container {
| |
| max-width: 1200px;
| |
| margin: 0 auto;
| |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; | |
| }
| |
| | |
| /* Header */
| |
| .cs-header {
| |
| text-align: center;
| |
| padding: 30px 20px;
| |
| margin-bottom: 30px;
| |
| border-radius: 8px;
| |
| background-color: #f9f9f9; | |
| border: 1px solid #ddd;
| |
| }
| |
| | |
| .cs-title {
| |
| font-size: 2em;
| |
| font-weight: 700;
| |
| margin: 0; | | margin: 0; |
| color: #000; | | padding: 20px; |
| } | | } |
|
| |
|
| .cs-subtitle { | | .button-container { |
| font-size: 1.1em; | | display: flex; |
| font-weight: normal; | | flex-wrap: wrap; |
| margin: 10px 0 0; | | justify-content: center; |
| color: #444; | | gap: 15px; |
| } | | } |
|
| |
|
| /* Search */
| | .button { |
| .cs-search {
| | display: inline-block; |
| max-width: 800px;
| | padding: 15px 30px; |
| margin: 0 auto 40px;
| | font-size: 18px; |
| padding: 25px;
| | font-weight: bold; |
| border-radius: 8px;
| | text-align: center; |
| background-color: #f5f5f5;
| |
| border: 1px solid #ddd;
| |
| }
| |
| | |
| /* Search input - restore original background */
| |
| .cs-search input[type="search"],
| |
| .cs-search input[type="text"],
| |
| .cs-search .mw-searchInput,
| |
| .cs-search .cdx-text-input__input {
| |
| background-color: #ffffff !important;
| |
| border: 1px solid #ddd !important;
| |
| height: 40px !important;
| |
| padding: 5px 12px !important;
| |
| border-radius: 4px !important;
| |
| font-size: 16px !important;
| |
| color: #333 !important;
| |
| width: 100% !important;
| |
| }
| |
| | |
| /* Search button */
| |
| .cs-search input[name="go"], | |
| .cs-search button[name="go"],
| |
| .cs-search input[type="submit"],
| |
| .cs-search button[type="submit"],
| |
| .cs-search .oo-ui-buttonElement-button {
| |
| width: 80px !important;
| |
| max-width: 80px !important;
| |
| min-width: 80px !important;
| |
| background-color: #f0f0f0 !important;
| |
| border: 1px solid #ddd !important;
| |
| height: 40px !important;
| |
| padding: 5px 8px !important;
| |
| border-radius: 4px !important;
| |
| color: #333 !important;
| |
| font-weight: 600 !important;
| |
| cursor: pointer !important;
| |
| }
| |
| | |
| /* Hide the second (fulltext) button */
| |
| .cs-search input[name="fulltext"],
| |
| .cs-search button[name="fulltext"],
| |
| .cs-search input[value="Search full text"],
| |
| .cs-search button[value="Search full text"] {
| |
| display: none !important;
| |
| }
| |
| | |
| /* Grid Layout */
| |
| .cs-grid {
| |
| display: table; | |
| width: 100%;
| |
| border-spacing: 10px;
| |
| border-collapse: separate;
| |
| margin: 0 -10px;
| |
| }
| |
| | |
| .cs-row {
| |
| display: table-row;
| |
| }
| |
| | |
| .cs-cell {
| |
| display: table-cell;
| |
| width: 33.333%;
| |
| vertical-align: top;
| |
| }
| |
| | |
| /* Section styling */
| |
| .cs-section {
| |
| margin-bottom: 30px;
| |
| }
| |
| | |
| .cs-section-header {
| |
| padding: 12px 15px; | |
| margin-bottom: 20px;
| |
| border-radius: 6px;
| |
| }
| |
| | |
| .cs-section-title {
| |
| margin: 0;
| |
| font-size: 1.3em;
| |
| font-weight: 600;
| |
| }
| |
| | |
| /* Card Design */
| |
| .cs-card {
| |
| border-radius: 6px;
| |
| overflow: hidden;
| |
| height: 100%;
| |
| }
| |
| | |
| .cs-card-header {
| |
| padding: 12px 15px;
| |
| }
| |
| | |
| .cs-card-title {
| |
| margin: 0;
| |
| font-size: 1.1em; | |
| font-weight: 600; | |
| }
| |
| | |
| .cs-card-body {
| |
| padding: 15px;
| |
| }
| |
| | |
| .cs-card-list {
| |
| margin: 0;
| |
| padding: 0 0 0 20px;
| |
| }
| |
| | |
| .cs-card-list li {
| |
| margin-bottom: 10px;
| |
| }
| |
| | |
| /* Card footer with hover effects */
| |
| .cs-card-footer {
| |
| padding: 8px 15px;
| |
| text-align: right; | |
| }
| |
| | |
| /* Link hover effects */
| |
| .cs-card-footer a {
| |
| text-decoration: none; | | text-decoration: none; |
| position: relative; | | color: white; |
| padding-bottom: 2px; | | border-radius: 5px; |
| transition: all 0.2s ease-in-out; | | transition: background-color 0.3s; |
| }
| |
| | |
| .cs-card-footer a:hover {
| |
| opacity: 0.85;
| |
| }
| |
| | |
| .cs-card-footer a::after {
| |
| content: '';
| |
| position: absolute;
| |
| width: 0;
| |
| height: 1px;
| |
| bottom: 0;
| |
| left: 0;
| |
| background-color: currentColor;
| |
| transition: width 0.3s ease;
| |
| }
| |
| | |
| .cs-card-footer a:hover::after {
| |
| width: 100%;
| |
| }
| |
| | |
| /* Section color schemes */
| |
| /* Programming */
| |
| .cs-section:nth-child(3) .cs-section-header {
| |
| background-color: #cef2e0;
| |
| border: 1px solid #cef2e0;
| |
| }
| |
| | |
| .cs-section:nth-child(3) .cs-card {
| |
| background-color: #f5fffa;
| |
| border: 1px solid #cef2e0;
| |
| } | | } |
|
| |
|
| .cs-section:nth-child(3) .cs-card-header { | | .programming-languages { |
| background-color: #cef2e0; | | background-color: #4CAF50; /* Green */ |
| border-bottom: 1px solid #cef2e0;
| |
| } | | } |
|
| |
|
| .cs-section:nth-child(3) .cs-card-footer { | | .data-science { |
| background-color: #f5fffa; | | background-color: #2196F3; /* Blue */ |
| border-top: 1px solid #cef2e0;
| |
| } | | } |
|
| |
|
| .cs-section:nth-child(3) .cs-card-footer a { | | .machine-learning { |
| color: #2e8b57;
| | background-color: #FFC107; /* Amber */ |
| }
| |
| | |
| /* Data Science */
| |
| .cs-section:nth-child(4) .cs-section-header {
| |
| background-color: #cedff2;
| |
| border: 1px solid #cedff2;
| |
| }
| |
| | |
| .cs-section:nth-child(4) .cs-card {
| |
| background-color: #f5faff;
| |
| border: 1px solid #cedff2;
| |
| }
| |
| | |
| .cs-section:nth-child(4) .cs-card-header {
| |
| background-color: #cedff2;
| |
| border-bottom: 1px solid #cedff2;
| |
| }
| |
| | |
| .cs-section:nth-child(4) .cs-card-footer {
| |
| background-color: #f5faff;
| |
| border-top: 1px solid #cedff2;
| |
| }
| |
| | |
| .cs-section:nth-child(4) .cs-card-footer a {
| |
| color: #4169e1;
| |
| }
| |
| | |
| /* Databases */
| |
| .cs-section:nth-child(5) .cs-section-header {
| |
| background-color: #f2cedd;
| |
| border: 1px solid #f2cedd;
| |
| }
| |
| | |
| .cs-section:nth-child(5) .cs-card {
| |
| background-color: #fff5fa; | |
| border: 1px solid #f2cedd;
| |
| }
| |
| | |
| .cs-section:nth-child(5) .cs-card-header {
| |
| background-color: #f2cedd;
| |
| border-bottom: 1px solid #f2cedd;
| |
| }
| |
| | |
| .cs-section:nth-child(5) .cs-card-footer {
| |
| background-color: #fff5fa;
| |
| border-top: 1px solid #f2cedd;
| |
| }
| |
| | |
| .cs-section:nth-child(5) .cs-card-footer a {
| |
| color: #db7093;
| |
| }
| |
| | |
| /* Infrastructure */ | |
| .cs-section:nth-child(6) .cs-section-header {
| |
| background-color: #ddcef2;
| |
| border: 1px solid #ddcef2;
| |
| }
| |
| | |
| .cs-section:nth-child(6) .cs-card {
| |
| background-color: #faf5ff;
| |
| border: 1px solid #ddcef2;
| |
| }
| |
| | |
| .cs-section:nth-child(6) .cs-card-header {
| |
| background-color: #ddcef2;
| |
| border-bottom: 1px solid #ddcef2;
| |
| }
| |
| | |
| .cs-section:nth-child(6) .cs-card-footer {
| |
| background-color: #faf5ff;
| |
| border-top: 1px solid #ddcef2;
| |
| }
| |
| | |
| .cs-section:nth-child(6) .cs-card-footer a {
| |
| color: #8a2be2;
| |
| }
| |
| | |
| /* CS Fundamentals */
| |
| .cs-section:nth-child(7) .cs-section-header {
| |
| background-color: #f2e0ce;
| |
| border: 1px solid #f2e0ce;
| |
| }
| |
| | |
| .cs-section:nth-child(7) .cs-card {
| |
| background-color: #fffaf5;
| |
| border: 1px solid #f2e0ce;
| |
| }
| |
| | |
| .cs-section:nth-child(7) .cs-card-header {
| |
| background-color: #f2e0ce;
| |
| border-bottom: 1px solid #f2e0ce;
| |
| }
| |
| | |
| .cs-section:nth-child(7) .cs-card-footer {
| |
| background-color: #fffaf5;
| |
| border-top: 1px solid #f2e0ce;
| |
| }
| |
| | |
| .cs-section:nth-child(7) .cs-card-footer a {
| |
| color: #d2691e;
| |
| }
| |
| | |
| /* Community */
| |
| .cs-section:nth-child(8) .cs-section-header {
| |
| background-color: #eee;
| |
| border: 1px solid #eee;
| |
| }
| |
| | |
| .cs-section:nth-child(8) .cs-card {
| |
| background-color: #f9f9f9;
| |
| border: 1px solid #eee;
| |
| }
| |
| | |
| .cs-section:nth-child(8) .cs-card-header {
| |
| background-color: #eee;
| |
| border-bottom: 1px solid #eee;
| |
| }
| |
| | |
| .cs-section:nth-child(8) .cs-card-footer {
| |
| background-color: #f9f9f9;
| |
| border-top: 1px solid #eee;
| |
| }
| |
| | |
| .cs-section:nth-child(8) .cs-card-footer a {
| |
| color: #444;
| |
| }
| |
| | |
| /* Dark mode theme toggle */
| |
| @media screen {
| |
| /* Dark mode styles */
| |
| html.skin-theme-clientpref-night .cs-header,
| |
| html.skin-theme-clientpref-os .cs-header {
| |
| background-color: #171a1d;
| |
| border-color: #676767;
| |
| }
| |
| | |
| html.skin-theme-clientpref-night .cs-title,
| |
| html.skin-theme-clientpref-os .cs-title {
| |
| color: #fff;
| |
| }
| |
| | |
| html.skin-theme-clientpref-night .cs-subtitle,
| |
| html.skin-theme-clientpref-os .cs-subtitle {
| |
| color: #ccc;
| |
| }
| |
| | |
| html.skin-theme-clientpref-night .cs-search,
| |
| html.skin-theme-clientpref-os .cs-search {
| |
| background-color: #252525;
| |
| border-color: #676767;
| |
| }
| |
| | |
| html.skin-theme-clientpref-night .cs-search input[type="search"],
| |
| html.skin-theme-clientpref-night .cs-search input[type="text"],
| |
| html.skin-theme-clientpref-night .cs-search .mw-searchInput,
| |
| html.skin-theme-clientpref-night .cs-search .cdx-text-input__input,
| |
| html.skin-theme-clientpref-os .cs-search input[type="search"],
| |
| html.skin-theme-clientpref-os .cs-search input[type="text"],
| |
| html.skin-theme-clientpref-os .cs-search .mw-searchInput,
| |
| html.skin-theme-clientpref-os .cs-search .cdx-text-input__input {
| |
| background-color: #1f1f1f !important;
| |
| color: #fff !important;
| |
| border-color: #555 !important;
| |
| }
| |
| | |
| html.skin-theme-clientpref-night .cs-search input[type="submit"],
| |
| html.skin-theme-clientpref-night .cs-search button[type="submit"],
| |
| html.skin-theme-clientpref-os .cs-search input[type="submit"],
| |
| html.skin-theme-clientpref-os .cs-search button[type="submit"] {
| |
| background-color: #444 !important;
| |
| border-color: #555 !important;
| |
| color: #fff !important;
| |
| }
| |
| | |
| html.skin-theme-clientpref-night .cs-search input[type="submit"]:hover,
| |
| html.skin-theme-clientpref-night .cs-search button[type="submit"]:hover,
| |
| html.skin-theme-clientpref-os .cs-search input[type="submit"]:hover,
| |
| html.skin-theme-clientpref-os .cs-search button[type="submit"]:hover {
| |
| background-color: #555 !important;
| |
| }
| |
| | |
| /* Dark text colors */
| |
| html.skin-theme-clientpref-night .cs-section-title,
| |
| html.skin-theme-clientpref-night .cs-card-title,
| |
| html.skin-theme-clientpref-os .cs-section-title,
| |
| html.skin-theme-clientpref-os .cs-card-title {
| |
| color: #fff;
| |
| }
| |
| | |
| html.skin-theme-clientpref-night .cs-card-list li,
| |
| html.skin-theme-clientpref-os .cs-card-list li {
| |
| color: #ccc;
| |
| }
| |
| }
| |
| | |
| /* Dark mode section colors - condensed */
| |
| @media screen {
| |
| /* Programming section - dark */
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(3) .cs-section-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(3) .cs-section-header {
| |
| background-color: #104437;
| |
| border-color: #104437;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(3) .cs-card,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(3) .cs-card {
| |
| background-color: #0b1e1c;
| |
| border-color: #104437;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(3) .cs-card-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(3) .cs-card-header {
| |
| background-color: #104437;
| |
| border-color: #104437;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(3) .cs-card-footer,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(3) .cs-card-footer {
| |
| background-color: #0b1e1c;
| |
| border-color: #104437;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(3) .cs-card-footer a,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(3) .cs-card-footer a {
| |
| color: #8fbc8f;
| |
| }
| |
| | |
| /* Data Science section - dark */
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(4) .cs-section-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(4) .cs-section-header {
| |
| background-color: #082849;
| |
| border-color: #082849;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(4) .cs-card,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(4) .cs-card {
| |
| background-color: #0d1a27;
| |
| border-color: #082849;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(4) .cs-card-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(4) .cs-card-header {
| |
| background-color: #082849;
| |
| border-color: #082849;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(4) .cs-card-footer,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(4) .cs-card-footer {
| |
| background-color: #0d1a27;
| |
| border-color: #082849;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(4) .cs-card-footer a,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(4) .cs-card-footer a {
| |
| color: #87cefa;
| |
| }
| |
| | |
| /* Databases section - dark */
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(5) .cs-section-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(5) .cs-section-header {
| |
| background-color: #882c43;
| |
| border-color: #882c43;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(5) .cs-card,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(5) .cs-card {
| |
| background-color: #270e1a;
| |
| border-color: #882c43;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(5) .cs-card-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(5) .cs-card-header {
| |
| background-color: #882c43;
| |
| border-color: #882c43;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(5) .cs-card-footer,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(5) .cs-card-footer {
| |
| background-color: #270e1a;
| |
| border-color: #882c43;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(5) .cs-card-footer a,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(5) .cs-card-footer a {
| |
| color: #ffb6c1;
| |
| }
| |
| | |
| /* Infrastructure section - dark */
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(6) .cs-section-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(6) .cs-section-header {
| |
| background-color: #7545ab;
| |
| border-color: #7545ab;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(6) .cs-card,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(6) .cs-card {
| |
| background-color: #130e20;
| |
| border-color: #7545ab;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(6) .cs-card-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(6) .cs-card-header {
| |
| background-color: #7545ab;
| |
| border-color: #7545ab;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(6) .cs-card-footer,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(6) .cs-card-footer {
| |
| background-color: #130e20;
| |
| border-color: #7545ab;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(6) .cs-card-footer a,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(6) .cs-card-footer a {
| |
| color: #da70d6;
| |
| }
| |
| | |
| /* CS Fundamentals section - dark */
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(7) .cs-section-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(7) .cs-section-header {
| |
| background-color: #663428;
| |
| border-color: #663428;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(7) .cs-card,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(7) .cs-card {
| |
| background-color: #331a00;
| |
| border-color: #663428;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(7) .cs-card-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(7) .cs-card-header {
| |
| background-color: #663428;
| |
| border-color: #663428;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(7) .cs-card-footer,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(7) .cs-card-footer {
| |
| background-color: #331a00;
| |
| border-color: #663428;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(7) .cs-card-footer a,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(7) .cs-card-footer a {
| |
| color: #ffa500;
| |
| }
| |
| | |
| /* Community section - dark */
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(8) .cs-section-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(8) .cs-section-header {
| |
| background-color: #3d3d3d;
| |
| border-color: #3d3d3d;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(8) .cs-card,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(8) .cs-card {
| |
| background-color: #171a1d;
| |
| border-color: #3d3d3d;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(8) .cs-card-header,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(8) .cs-card-header {
| |
| background-color: #3d3d3d;
| |
| border-color: #3d3d3d;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(8) .cs-card-footer,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(8) .cs-card-footer {
| |
| background-color: #171a1d;
| |
| border-color: #3d3d3d;
| |
| }
| |
| html.skin-theme-clientpref-night .cs-section:nth-child(8) .cs-card-footer a,
| |
| html.skin-theme-clientpref-os .cs-section:nth-child(8) .cs-card-footer a {
| |
| color: #ccc;
| |
| }
| |
| } | | } |
|
| |
|
| /* OS dark mode detection through prefers-color-scheme */
| | .web-development { |
| @media (prefers-color-scheme: dark) {
| | background-color: #FF5722; /* Deep Orange */ |
| /* Dark mode handled through class combinations above */
| |
| } | | } |
|
| |
|
| /* Responsive layout */
| | .cloud-computing { |
| @media (max-width: 875px) {
| | background-color: #9C27B0; /* Purple */ |
| .cs-title {
| |
| font-size: 1.8em;
| |
| }
| |
|
| |
| .cs-subtitle {
| |
| font-size: 1em;
| |
| } | |
|
| |
| .cs-search {
| |
| padding: 15px;
| |
| }
| |
|
| |
| /* Convert grid table to blocks on mobile */
| |
| .cs-grid {
| |
| display: block;
| |
| width: 100%;
| |
| margin: 0;
| |
| padding: 0 10px;
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
| .cs-row {
| |
| display: block;
| |
| }
| |
|
| |
| .cs-cell {
| |
| display: block;
| |
| width: 100%;
| |
| margin-bottom: 15px;
| |
| }
| |
|
| |
| .cs-card {
| |
| width: 100%;
| |
| margin: 0 0 15px 0;
| |
| }
| |
|
| |
| .cs-section-header {
| |
| text-align: center;
| |
| padding: 10px;
| |
| }
| |
|
| |
| .cs-section-title {
| |
| font-size: 1.2em;
| |
| }
| |
| } | | } |
|
| |
|
| /* Extra small screens */
| | .button:hover { |
| @media (max-width: 480px) {
| | opacity: 0.9; |
| .cs-search {
| |
| padding: 10px;
| |
| }
| |
|
| |
| .cs-card-header,
| |
| .cs-card-body {
| |
| padding: 10px;
| |
| }
| |
| | |
| .cs-title {
| |
| font-size: 1.6em;
| |
| }
| |
| } | | } |
