Template:RidgeRun Linux Camera Drivers/styles.css: Difference between revisions
No edit summary |
Efernandez (talk | contribs) No edit summary Tag: Manual revert |
||
(6 intermediate revisions by 2 users not shown) | |||
Line 6: | Line 6: | ||
justify-content: space-between; | justify-content: space-between; | ||
align-items: center; | align-items: center; | ||
/*background-color: #000c5e;*/ | |||
/*background-color: # | background-color: #232E3C; | ||
background- | |||
border-radius: 4px; | border-radius: 4px; | ||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | ||
Line 73: | Line 72: | ||
height: 2.5rem; | height: 2.5rem; | ||
border-radius: 50%; | border-radius: 50%; | ||
font-size: | font-size: 20px; | ||
cursor: pointer; | cursor: pointer; | ||
transition: background-color 0.3s ease; | transition: background-color 0.3s ease; | ||
Line 278: | Line 277: | ||
/*color: #232e3c;*/ | /*color: #232e3c;*/ | ||
background-color: transparent; | background-color: transparent; | ||
} | |||
} | |||
/* Hide element when the screen width is less than or equal to 768px (common for mobile devices) */ | |||
@media only screen and (max-width: 768px) { | |||
.hide-on-mobile { | |||
display: none; | |||
} | } | ||
} | } |
Latest revision as of 19:18, 11 September 2024
.header-container { display: flex; flex-direction: row; max-width: 1200px; margin: 0 auto; justify-content: space-between; align-items: center; /*background-color: #000c5e;*/ background-color: #232E3C; border-radius: 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .header { font-family: 'Arial', sans-serif; color: #ffffff; padding: 2rem 1rem; text-align: center; align-items: center; flex-grow: 1; } .header h1 { color: #ffffff; font-family: 'Arial', sans-serif; font-size: 2.5em; margin: 0; text-align: center; border: none; /* Ensure no border is applied */ } .header p { font-family: 'Arial', sans-serif; font-size: 1.2em; margin: 0.5em 0 0; } .arrow { font-size: 60px; background-color: transparent; border: none; color: white; cursor: pointer; } .nav-bar { display: flex; justify-content: space-between; align-items: center; background-color: transparent; color: white; width: 100%; height: 50px; box-sizing: border-box; border-radius: 5px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border: 1px solid #cccccc; } .nav-bar a { width: 100%; height: 50px; } .nav-bar-logo { height: 50px; } .nav-bar-buttons { display: flex; align-items: center; } .nav-bar-button { background-color: #98CEFF; border: none; color: white; padding: 0px; margin: 5px 5px; width: 2.5rem; height: 2.5rem; border-radius: 50%; font-size: 20px; cursor: pointer; transition: background-color 0.3s ease; } .nav-bar-button:hover { background-color: #232E3C; } .nav-bar-button:disabled { background-color: #999; cursor: not-allowed; } .wiki-toc { font-family: 'Arial', sans-serif; margin: 0 0 1rem 20px; padding: 10px; background-color: #ffffff; /*background: linear-gradient(to bottom, #021FE2, #98CEFF);*/ border: 1px solid #dee2e6; border-radius: 4px; float: right; width: 250px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .sticky { /*position: -webkit-sticky; */ position: sticky; top: 10px; right: 10px; float: right; } .wiki-toc-logo { display: flex; justify-content: center; } .wiki-toc-logo img { max-width: 70%; height: auto; } .wiki-toc-header { font-size: 16px; font-weight: bold; margin-bottom: 10px; color: #232e3c; border-bottom: 1px solid #dee2e6; padding-bottom: 5px; display: flex; justify-content: space-between; align-items: center; } .wiki-toc-title { text-align: center; font-size: 22px; font-weight: bold; margin-bottom: 10px; color: #007bff; } .toc-toggle { font-size: 14px; color: #555555; cursor: pointer; } .toc-toggle:hover { text-decoration: underline; } .collapse-all { font-size: 14px; color: #555555; cursor: pointer; margin-left: 10px; } .collapse-all i { margin-left: 5px; } .collapse-all:hover { text-decoration: underline; } .wiki-toc-list { list-style: none; padding-left: 0; } .wiki-toc-list > li { margin-bottom: 5px; list-style-type: none; } .wiki-toc-list li a { text-decoration: none; list-style-type: none; font-size: 14px; display: flex; align-items: center; justify-content: space-between; /* Align items with space between */ } .wiki-toc-list li a:hover { text-decoration: underline; } .toc-sub-list { list-style: none; padding-left: 15px; } .icon-toggle { cursor: pointer; transition: transform 0.3s ease; } .icon-toggle.collapsed { transform: rotate(0deg); /* Right arrow */ } .icon-toggle.expanded { transform: rotate(90deg); /* Down arrow */ } .current-page { background-color: #dddddd; /* Highlight color */ font-weight: bold; } .current-section { background-color: #dddddd; /* Highlight color for parent section */ font-weight: bold; } .wiki-search-bar { display: flex; justify-content: center; margin-bottom: 10px; } .wiki-search-input { width: 200px; padding: 5px; border: 1px solid #dee2e6; border-radius: 4px; } .highlight { background-color: #ffff99; } .main-contents-container { display: flex; flex-direction: column; max-width: 1200px; margin: 0 auto; } .main-content { font-family: 'Arial', sans-serif; display: flex; margin-top: 1rem; gap: 1rem; /* Space between sidebar and content */ align-items: stretch; /* Ensures both child elements stretch to the same height */ } .main-content .content { font-family: 'Arial', sans-serif; display: flex; flex-direction: column; } .content { font-family: 'Arial', sans-serif; flex: 3; background-color: #ffffff; } .block { font-family: 'Arial', sans-serif; background-color: #ffffff; padding: 2rem; border-radius: 4px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); border: 1px solid #dee2e6; margin-bottom: 1rem; } .image-container { text-align: center; /* Center the image within the div */ } .image-container img { max-width: 80%; height: auto; } .preferred-partner-banner { background-color: transparent; padding: 5px 0; text-align: right; margin: 0; /*box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);*/ /*border: 1px solid #dee2e6;*/ /*margin-bottom: 10px;*/ } .preferred-partner-banner-content img { margin: 0; height: 70px; vertical-align: middle; } .preferred-partner-banner img:hover { transform: scale(1.05); transition: transform 0.3s ease; } .highlight-animated { /*animation: colorChange 2s infinite;*/ animation: colorChange 2s 10; } @keyframes colorChange { 0% { /*color: #232e3c;*/ background-color: transparent; } 50% { /*color: #ffffff;*/ /*background-color: #232e3c;*/ background-color: #98CEFF; } 100% { /*color: #232e3c;*/ background-color: transparent; } } /* Hide element when the screen width is less than or equal to 768px (common for mobile devices) */ @media only screen and (max-width: 768px) { .hide-on-mobile { display: none; } }