leiyun
/
cytx_api
1
0
Fork 0
Koodi Ongelmat 0 Pull-pyynnöt 0 Julkaisut 0 Wiki Toiminta
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1 Commit
1 Haara
81 MiB
 
 
 
 
 
Puu: 13566b2aeb
Branchit Tagit
${ item.name }
Create branch ${ searchTerm }
from '13566b2aeb'
${ noResults }
cytx_api/www/static/css/web_768.css

236 rivejä
9.9 KiB
Raaka Blame Historia 

  1. /* ===== max-width: 768px ===== */

  2. 

  3. /* Footer */

  4. @media(max-width:768px){

  5.   .footer-component{padding:0;}

  6.   .footer-content{flex-direction:column;gap:24px;padding:0 20px;}

  7.   .footer-left{flex:none;width:100%;padding-right:0;}

  8.   .footer-mid{flex-direction:column;gap:20px;width:100%;}

  9.   .footer-qr-section{width:100%;}

  10.   .footer-bottom-content{flex-direction:column;gap:8px;padding:0 20px;text-align:center;}

  11.   .footer-main{padding:24px 0 16px;}

  12.   .footer-links-list{grid-template-columns:repeat(3,auto);}

  13.   .footer-links-list li,

  14.   .footer-links-list li:nth-child(2n){padding:0 10px;border-right:1px solid rgba(255,255,255,.4);padding-left:10px;}

  15.   .footer-links-list li:nth-child(3n+1){padding-left:0;}

  16.   .footer-links-list li:nth-child(3n){border-right:none;padding-right:0;}

  17. }

  18. 

  19. /* Swiper Fullpage & Slides */

  20. @media(max-width:768px){

  21.   .swiper-fullpage{height:auto!important;overflow:visible!important;}

  22.   .swiper-fullpage>.swiper-wrapper{flex-direction:column!important;transform:none!important;}

  23.   .swiper-fullpage>.swiper-wrapper>.swiper-slide{height:auto!important;overflow:visible!important;position:static!important;transform:none!important;z-index:auto!important;}

  24.   .swiper-fullpage .swiper-slide{height:auto!important;overflow:visible!important;}

  25.   .slide-labels{display:none!important;}

  26.   .slide-banner{height:100vh;}

  27.   .banner-swiper,.banner-swiper .swiper-slide{height:100vh!important;}

  28.   .slide-donation{height:auto;min-height:auto;padding:80px 0 40px;}

  29.   .slide-news{height:auto;min-height:auto;padding:80px 0 40px;}

  30.   .slide-projects{height:80vh;min-height:500px;}

  31.   .slide-section{height:auto;min-height:auto;padding:40px 16px 20px;}

  32.   .slide-footer{height:auto;min-height:auto;padding-top:60px;}

  33.   .slide-with-footer{overflow:visible;overflow-y:visible;}

  34.   .slide-with-footer>.footer-component{margin:0;width:100%;}

  35.   .slide-with-footer .section-wrap{padding-bottom:0;}

  36.   .slide-with-footer.slide-section{padding-bottom:0;}

  37.   .donation-wrap,.news-wrap{opacity:1;transform:none;max-height:none;overflow:visible;}

  38.   .partners-section{opacity:1;transform:none;}

  39.   .swiper-slide-active .donation-wrap,

  40.   .swiper-slide-active .news-wrap,

  41.   .swiper-slide-active .partners-section{opacity:1;transform:none;}

  42. 

  43.   /* Header & Mobile */

  44.   .header-nav{display:none;}

  45.   .mobile-menu-btn{display:flex;}

  46.   .header-search{display:none;}

  47.   .header-search-mobile{display:flex;}

  48. 

  49.   /* Banner */

  50.   .banner-slide-content{left:24px;right:24px;max-width:calc(100% - 48px);}

  51.   .banner-slide-content.pos-left{left:24px;right:auto;max-width:calc(100% - 48px);}

  52.   .banner-slide-content.pos-center{left:50%;right:auto;}

  53.   .banner-slide-content.pos-right{left:auto;right:24px;max-width:calc(100% - 48px);}

  54.   .banner-slide-content.glass-on{padding:24px 28px;background:rgba(0,0,0,.1);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);}

  55.   .banner-slide-content h1{font-size:26px;}

  56. 

  57.   /* Donation */

  58.   .donation-wrap,.news-wrap{padding:0 20px;}

  59.   .data-cards{grid-template-columns:1fr;gap:8px;}

  60.   .data-card{padding:12px 8px;}

  61.   .data-card .amount{font-size:18px;}

  62.   .data-card .label{font-size:12px;}

  63.   .data-card .note{font-size:11px;}

  64.   .donation-tables{grid-template-columns:1fr;gap:8px;}

  65.   .dtable-drug{grid-column:1/-1;}

  66.   .dtable-scroll-wrap{max-height:140px;}

  67.   .drug-scroll-wrap{max-height:140px;}

  68.   .dtable{padding:10px 12px;}

  69.   .dtable h3{font-size:13px;margin-bottom:4px;padding-bottom:4px;}

  70.   .dtable td,.dtable th{font-size:12px;padding:4px 6px;}

  71. 

  72.   /* Projects */

  73.   .proj-info-card{

  74.     position:relative;top:auto;right:auto;left:auto;bottom:auto;

  75.     transform:none;width:auto;margin:0 20px;padding:24px 20px;

  76.     opacity:1;max-height:none;overflow:visible;

  77.     background:rgba(232,117,26,.2);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);

  78.   }

  79.   .swiper-slide-active .proj-info-card{transform:none;opacity:1;}

  80.   .proj-info-card h3{font-size:20px;margin-bottom:10px;}

  81.   .proj-info-card p{font-size:14px;margin-bottom:16px;line-height:1.6;}

  82.   .slide-projects{display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:20px;}

  83.   .slide-projects .proj-bg{opacity:0;filter:brightness(.85);}

  84.   .slide-projects .proj-bg.active{opacity:1;}

  85.   .proj-tabs{display:none;}

  86.   .proj-mobile-nav{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;}

  87.   .proj-tab{padding:6px 12px;font-size:12px;flex-shrink:0;max-width:none;}

  88.   .proj-more-link{display:none;}

  89. 

  90.   /* News */

  91.   .news-grid{grid-template-columns:1fr;}

  92.   .news-featured img{height:200px;}

  93. 

  94.   /* Partners */

  95.   .partners-carousel-viewport{margin:0;}

  96.   .partners-carousel{display:grid;grid-template-rows:none;grid-auto-flow:unset;grid-template-columns:repeat(2,1fr);grid-auto-columns:unset;gap:12px;transform:none!important;padding-bottom:20px;}

  97.   .partner-item{min-height:auto;height:auto;}

  98.   .partners-nav{display:none!important;}

  99.   .partners-section{padding:24px 20px;}

  100.   .section-head{margin-bottom:1vh;}

  101. }

  102. 

  103. /* Column Page */

  104. @media(max-width:768px){

  105.   .col-banner{height:220px;}

  106.   .col-banner-content h1{font-size:28px;}

  107.   .col-tabs-wrap{top:56px;}

  108.   .col-tabs{overflow-x:auto;justify-content:flex-start;padding:0 16px;-webkit-overflow-scrolling:touch;}

  109.   .col-tab{padding:6px 20px;font-size:14px;white-space:nowrap;}

  110.   .col-content{padding:0 20px 24px;}

  111.   .col-breadcrumb{padding:16px 20px;}

  112.   .col-art-featured{height:280px;}

  113.   .col-art-featured-overlay{padding:20px;}

  114.   .col-art-featured-overlay h3{font-size:18px;}

  115.   .col-art-card-cover{width:180px;height:140px;}

  116.   .col-image-grid{grid-template-columns:1fr;gap:16px;}

  117.   .col-image-thumb{height:280px;}

  118.   .col-person-grid,.team-grid{grid-template-columns:repeat(2,1fr);gap:16px;row-gap:24px;}

  119.   .member-photo{width:120px;height:120px;}

  120.   .board-featured{flex-direction:column;padding:24px;gap:24px;}

  121.   .board-featured .featured-photo{width:100%;min-width:unset;height:260px;}

  122.   .job-layout{grid-template-columns:1fr;}

  123.   .job-nav{display:none;}

  124.   .job-hero-banner{flex-direction:column;gap:20px;text-align:center;padding:28px 20px;}

  125.   .job-hero-stats{gap:24px;}

  126.   .job-card-header{flex-direction:column;gap:12px;align-items:flex-start;}

  127.   .job-card-footer{flex-direction:column;gap:12px;align-items:flex-start;}

  128. }

  129. 

  130. /* Inline Form */

  131. @media(max-width:768px){

  132.   .col-inline-form-wrap{padding:24px 20px;border-radius:12px;margin-top:32px;}

  133.   .col-inline-form-header h3{font-size:18px;}

  134.   .col-ifield-options{gap:10px;}

  135.   .col-ifield-submit{padding:12px 48px;font-size:15px;}

  136. }

  137. 

  138. /* Article Detail */

  139. @media(max-width:768px){

  140.   .article-detail-wrap{grid-template-columns:1fr;padding:20px 16px 40px;gap:32px;}

  141.   .article-title{font-size:24px;}

  142.   .article-meta{flex-direction:column;align-items:flex-start;gap:8px;}

  143.   .article-share{margin-left:0;}

  144.   .article-nav{flex-direction:column;gap:12px;}

  145.   .article-nav-item.next{text-align:left;}

  146. }

  147. 

  148. /* Text Grid & Detail */

  149. @media(max-width:768px){

  150.   .col-text-grid{grid-template-columns:repeat(2,1fr);gap:16px;}

  151.   .doc-item{flex-direction:column;align-items:flex-start;gap:8px;}

  152.   .doc-item-left{flex-direction:column;align-items:flex-start;gap:8px;}

  153.   .doc-date{margin-left:0;}  .text-nav-next{text-align:left;}

  154. }

  155. 

  156. /* Home Generic Section */

  157. @media(max-width:768px){

  158.   .slide-section{height:auto;min-height:auto;padding:40px 16px 20px;}

  159.   .home-text-grid{grid-template-columns:repeat(2,1fr);gap:12px;}

  160.   .home-person-grid{grid-template-columns:repeat(2,1fr);gap:16px;}

  161.   .home-job-list{grid-template-columns:1fr;}

  162.   .home-form-wrap{max-width:100%;}

  163.   .slide-with-footer>.footer-component{margin:0 -16px;width:calc(100% + 32px);}

  164. }

  165. 

  166. /* About Intro */

  167. @media(max-width:768px){

  168.   .about-intro-hero{grid-template-columns:1fr;gap:24px;}

  169.   .about-stats{grid-template-columns:repeat(2,1fr);}

  170.   .about-values-grid{grid-template-columns:1fr;}

  171.   .about-strategy-row{grid-template-columns:1fr;}

  172.   .about-qual-grid{grid-template-columns:repeat(2,1fr);}

  173.   .about-compliance-banner{padding:24px 20px;}

  174.   .about-compliance-grid{grid-template-columns:1fr;}

  175.   .about-section-alt{padding:28px 20px;}

  176.   .about-section-header{margin-bottom:28px;flex-wrap:wrap;}

  177.   .about-section-header h2{font-size:20px;}

  178. }

  179. 

  180. /* Contact */

  181. @media(max-width:768px){

  182.   .ct-layout{grid-template-columns:1fr;gap:20px;}

  183.   .ct-brand-card{padding:20px 18px;}

  184.   .ct-map-body{min-height:260px;}

  185. }

  186. 

  187. /* Search */

  188. @media(max-width:768px){

  189.   .search-box{height:48px;padding:0 6px 0 20px;}

  190.   .search-box input{font-size:14px;}

  191.   .search-box-btn{width:36px;height:36px;}

  192.   .search-container{padding:24px 16px 40px;}

  193.   .result-item{padding:24px 20px;}

  194.   .result-title{font-size:18px;}

  195.   .result-desc{font-size:14px;}

  196.   .filter-tabs{gap:8px;}

  197.   .filter-tab{padding:6px 16px;font-size:13px;}

  198. }

  199. 

  200. /* Project List */

  201. @media(max-width:768px){

  202. .project-item { grid-template-columns: 1fr; gap: 0; }

  203. .project-cover { width: 100%; height: 220px; }

  204. .project-info { padding: 24px 20px; }

  205. .project-title { font-size: 18px; }

  206. .project-desc { font-size: 14px; -webkit-line-clamp: 2; }

  207. .project-footer { flex-direction: column; align-items: flex-start; gap: 16px; }

  208. .project-stats { width: 100%; justify-content: space-between; }

  209. }

  210. 

  211. /* Project Detail */

  212. @media(max-width:768px){

  213. .proj-detail-wrap { grid-template-columns: 1fr; padding: 30px 20px; gap: 0; }

  214. .proj-detail-sidebar { display: none; }

  215. .proj-detail-title { font-size: 24px; }

  216. .proj-detail-meta { flex-wrap: wrap; gap: 8px 16px; font-size: 13px; }

  217. .proj-detail-meta .article-share { width: 100%; margin-left: 0; }

  218. .proj-section-title { font-size: 20px; }

  219. .proj-timeline-item { display: block; margin-bottom: 20px; }

  220. .proj-timeline-item::before, .proj-timeline-item::after { display: none; }

  221. .proj-timeline-date { display: none; }

  222. .proj-timeline-year-mobile { display: block; }

  223. .proj-timeline-body { padding: 20px; }

  224. .proj-timeline-title { font-size: 18px; }

  225. .proj-timeline-period { font-size: 14px; }

  226. .proj-timeline-stats { grid-template-columns: 1fr; gap: 10px; }

  227. }

  228. 

  229. /* Side Toolbar */

  230. @media(max-width:768px){

  231. .side-toolbar { right: 12px; bottom: 80px; }

  232. .side-tool { width: 42px; height: 42px; }

  233. .side-tool-icon { width: 20px; height: 20px; }

  234. .side-tool-qr { display: none; }

  235. }