API tools faq
paste
Advertisement
xoxodaymxo

style.css

xoxodaymxo
Jan 11th, 2025
20
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 22.30 KB | None | 0 0
raw download clone embed print report
  1. /* Base styles */
  2. :root {
  3.     --primary-color: #01875f;
  4.     --primary-hover: #017453;
  5.     --background-color: #f8f9fa;
  6.     --text-color: #202124;
  7.     --border-color: #dadce0;
  8.     --hover-color: #f1f3f4;
  9.     --rating-color: #01875f;
  10.     --install-color: #01875f;
  11.     --footer-bg: #fff;
  12.     --footer-text: #5f6368;
  13.     --search-bg: #f1f3f4;
  14.     --modal-bg: rgba(0, 0, 0, 0.6);
  15. }
  16.  
  17. * {
  18.     margin: 0;
  19.     padding: 0;
  20.     box-sizing: border-box;
  21.     font-family: 'Roboto', sans-serif;
  22. }
  23.  
  24. body {
  25.     background-color: var(--background-color);
  26.     color: var(--text-color);
  27. }
  28.  
  29. /* Loading Screen */
  30. .loading-screen {
  31.     position: fixed;
  32.     top: 0;
  33.     left: 0;
  34.     width: 100%;
  35.     height: 100%;
  36.     background: white;
  37.     display: flex;
  38.     justify-content: center;
  39.     align-items: center;
  40.     z-index: 9999;
  41.     transition: opacity 0.3s;
  42. }
  43.  
  44. .loading-screen.hidden {
  45.     opacity: 0;
  46.     pointer-events: none;
  47. }
  48.  
  49. .loading-content {
  50.     text-align: center;
  51. }
  52.  
  53. .loading-logo {
  54.     width: 200px;
  55.     margin-bottom: 2rem;
  56. }
  57.  
  58. .loading-spinner {
  59.     width: 40px;
  60.     height: 40px;
  61.     border: 3px solid #f3f3f3;
  62.     border-top: 3px solid var(--primary-color);
  63.     border-radius: 50%;
  64.     animation: spin 1s linear infinite;
  65.     margin: 0 auto;
  66. }
  67.  
  68. @keyframes spin {
  69.     0% {
  70.         transform: rotate(0deg);
  71.     }
  72.  
  73.     100% {
  74.         transform: rotate(360deg);
  75.     }
  76. }
  77.  
  78. /* Enhanced Header */
  79. header {
  80.     background: white;
  81.     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  82.     position: sticky;
  83.     top: 0;
  84.     z-index: 100;
  85. }
  86.  
  87. nav {
  88.     display: flex;
  89.     align-items: center;
  90.     padding: 0.5rem 1rem;
  91.     gap: 1rem;
  92.     max-width: 1366px;
  93.     margin: 0 auto;
  94. }
  95.  
  96. .nav-left {
  97.     display: flex;
  98.     align-items: center;
  99.     gap: 1rem;
  100. }
  101.  
  102. .menu-btn,
  103. .help-btn {
  104.     background: none;
  105.     border: none;
  106.     padding: 0.5rem;
  107.     border-radius: 50%;
  108.     cursor: pointer;
  109.     color: #5f6368;
  110. }
  111.  
  112. .menu-btn:hover,
  113. .help-btn:hover {
  114.     background: var(--hover-color);
  115. }
  116.  
  117. .play-logo {
  118.     height: 24px;
  119. }
  120.  
  121. .profile-btn {
  122.     background: none;
  123.     border: none;
  124.     cursor: pointer;
  125.     padding: 0;
  126. }
  127.  
  128. .profile-img {
  129.     width: 32px;
  130.     height: 32px;
  131.     border-radius: 50%;
  132. }
  133.  
  134. /* Enhanced Search Bar */
  135. .search-container {
  136.     flex: 1;
  137.     max-width: 720px;
  138.     position: relative;
  139. }
  140.  
  141. .search-bar {
  142.     display: flex;
  143.     align-items: center;
  144.     background: var(--search-bg);
  145.     border-radius: 24px;
  146.     padding: 0.5rem 1rem;
  147.     gap: 0.5rem;
  148.     transition: background 0.2s, box-shadow 0.2s;
  149. }
  150.  
  151. .search-bar:focus-within {
  152.     background: white;
  153.     box-shadow: 0 1px 6px rgba(32, 33, 36, .28);
  154. }
  155.  
  156. .search-bar input {
  157.     border: none;
  158.     background: none;
  159.     outline: none;
  160.     width: 100%;
  161.     font-size: 1rem;
  162.     color: var(--text-color);
  163. }
  164.  
  165. .search-suggestions {
  166.     position: absolute;
  167.     top: 100%;
  168.     left: 0;
  169.     right: 0;
  170.     background: white;
  171.     border-radius: 8px;
  172.     margin-top: 0.5rem;
  173.     box-shadow: 0 2px 6px rgba(32, 33, 36, .28);
  174.     display: none;
  175.     z-index: 1000;
  176.     padding: 0.5rem 0;
  177. }
  178.  
  179. .search-suggestions.active {
  180.     display: block;
  181. }
  182.  
  183. /* Add these styles to your style.css file */
  184.  
  185. .no-results {
  186.     padding: 16px;
  187. }
  188.  
  189. .no-results-message {
  190.     display: flex;
  191.     align-items: center;
  192.     gap: 12px;
  193.     color: #5f6368;
  194.     margin-bottom: 16px;
  195.     padding: 8px;
  196. }
  197.  
  198. .no-results-message .material-icons {
  199.     font-size: 24px;
  200.     color: #5f6368;
  201. }
  202.  
  203. .no-results-message p {
  204.     margin: 0;
  205.     font-size: 14px;
  206. }
  207.  
  208. .search-redirect {
  209.     display: flex;
  210.     align-items: center;
  211.     gap: 12px;
  212.     padding: 12px;
  213.     background-color: #f8f9fa;
  214.     border-radius: 8px;
  215.     color: var(--primary-color);
  216.     text-decoration: none;
  217.     font-size: 14px;
  218.     transition: background-color 0.2s;
  219. }
  220.  
  221. .search-redirect:hover {
  222.     background-color: #f1f3f4;
  223. }
  224.  
  225. .search-redirect .material-icons {
  226.     font-size: 20px;
  227. }
  228.  
  229. .suggestion-item {
  230.     display: flex;
  231.     align-items: center;
  232.     padding: 0.75rem 1rem;
  233.     gap: 1rem;
  234.     cursor: pointer;
  235. }
  236.  
  237. .suggestion-item:hover {
  238.     background: var(--hover-color);
  239. }
  240.  
  241. .suggestion-item .material-icons {
  242.     color: #5f6368;
  243. }
  244.  
  245. /* Categories */
  246. .categories {
  247.     display: flex;
  248.     gap: 1rem;
  249.     padding: 0.5rem 1rem;
  250.     border-bottom: 1px solid var(--border-color);
  251.     overflow-x: auto;
  252.     scrollbar-width: none;
  253.     max-width: 1366px;
  254.     margin: 0 auto;
  255. }
  256.  
  257. .categories::-webkit-scrollbar {
  258.     display: none;
  259. }
  260.  
  261. .categories button {
  262.     border: none;
  263.     background: none;
  264.     padding: 0.5rem 1rem;
  265.     cursor: pointer;
  266.     border-radius: 24px;
  267.     font-weight: 500;
  268.     white-space: nowrap;
  269.     transition: background 0.2s, color 0.2s;
  270.     color: #5f6368;
  271. }
  272.  
  273. .categories button:hover {
  274.     background: var(--hover-color);
  275. }
  276.  
  277. .categories button.active {
  278.     background: var(--primary-color);
  279.     color: white;
  280. }
  281.  
  282. /* Main Content */
  283. main {
  284.     padding: 2rem;
  285.     max-width: 1366px;
  286.     margin: 0 auto;
  287. }
  288.  
  289. section {
  290.     margin-bottom: 3rem;
  291. }
  292.  
  293. .section-header {
  294.     display: flex;
  295.     justify-content: space-between;
  296.     align-items: center;
  297.     margin-bottom: 1rem;
  298. }
  299.  
  300. h2 {
  301.     font-size: 1.5rem;
  302.     font-weight: 500;
  303. }
  304.  
  305. .see-more {
  306.     color: var(--primary-color);
  307.     text-decoration: none;
  308.     font-weight: 500;
  309. }
  310.  
  311. /* Carousel */
  312. .carousel-container {
  313.     position: relative;
  314.     margin: 1rem 0;
  315. }
  316.  
  317. .carousel-content {
  318.     display: flex;
  319.     overflow-x: auto;
  320.     scroll-snap-type: x mandatory;
  321.     gap: 1rem;
  322.     padding: 1rem;
  323.     scrollbar-width: none;
  324. }
  325.  
  326. .carousel-content::-webkit-scrollbar {
  327.     display: none;
  328. }
  329.  
  330. .carousel-item {
  331.     flex: 0 0 auto;
  332.     width: 100%;
  333.     max-width: 600px;
  334.     scroll-snap-align: start;
  335.     border-radius: 8px;
  336.     overflow: hidden;
  337.     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  338.     cursor: pointer;
  339.     transition: transform 0.2s;
  340. }
  341.  
  342. .carousel-item:hover {
  343.     transform: translateY(-2px);
  344. }
  345.  
  346. .carousel-item img {
  347.     width: 100%;
  348.     height: 280px;
  349.     object-fit: cover;
  350. }
  351.  
  352. .carousel-nav {
  353.     position: absolute;
  354.     top: 50%;
  355.     transform: translateY(-50%);
  356.     background: white;
  357.     border: none;
  358.     width: 40px;
  359.     height: 40px;
  360.     border-radius: 50%;
  361.     cursor: pointer;
  362.     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  363.     display: flex;
  364.     align-items: center;
  365.     justify-content: center;
  366.     z-index: 1;
  367. }
  368.  
  369. .carousel-nav.prev {
  370.     left: 1rem;
  371. }
  372.  
  373. .carousel-nav.next {
  374.     right: 1rem;
  375. }
  376.  
  377. /* App Cards */
  378. .horizontal-scroll {
  379.     display: flex;
  380.     overflow-x: auto;
  381.     gap: 1rem;
  382.     padding: 1rem;
  383.     scroll-snap-type: x mandatory;
  384.     scrollbar-width: none;
  385. }
  386.  
  387. .horizontal-scroll::-webkit-scrollbar {
  388.     display: none;
  389. }
  390.  
  391. .app-card {
  392.     flex: 0 0 auto;
  393.     width: 180px;
  394.     background: white;
  395.     border-radius: 8px;
  396.     padding: 1rem;
  397.     cursor: pointer;
  398.     transition: transform 0.2s, box-shadow 0.2s;
  399.     border: 1px solid var(--border-color);
  400. }
  401.  
  402. .app-card:hover {
  403.     transform: translateY(-2px);
  404.     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  405. }
  406.  
  407. .app-icon {
  408.     width: 64px;
  409.     height: 64px;
  410.     border-radius: 12px;
  411.     margin-bottom: 0.75rem;
  412. }
  413.  
  414. .app-name {
  415.     font-weight: 500;
  416.     margin-bottom: 0.25rem;
  417.     display: -webkit-box;
  418.     -webkit-line-clamp: 2;
  419.     -webkit-box-orient: vertical;
  420.     overflow: hidden;
  421. }
  422.  
  423. .app-developer {
  424.     color: #5f6368;
  425.     font-size: 0.9rem;
  426.     margin-bottom: 0.5rem;
  427. }
  428.  
  429. .app-meta {
  430.     display: flex;
  431.     justify-content: space-between;
  432.     align-items: center;
  433. }
  434.  
  435. .app-rating {
  436.     display: flex;
  437.     align-items: center;
  438.     gap: 0.25rem;
  439.     color: #5f6368;
  440.     font-size: 0.9rem;
  441. }
  442.  
  443. .app-size {
  444.     color: #5f6368;
  445.     font-size: 0.9rem;
  446. }
  447.  
  448. .app-modal {
  449.     position: fixed;
  450.     top: 0;
  451.     left: 0;
  452.     width: 100%;
  453.     height: 100%;
  454.     z-index: 1000;
  455.     display: flex;
  456.     justify-content: center;
  457.     align-items: center;
  458. }
  459.  
  460. .modal-overlay {
  461.     position: absolute;
  462.     top: 0;
  463.     left: 0;
  464.     width: 100%;
  465.     height: 100%;
  466.     background-color: rgba(0, 0, 0, 0.6);
  467.     backdrop-filter: blur(4px);
  468. }
  469.  
  470. .modal-container {
  471.     position: relative;
  472.     width: 90%;
  473.     max-width: 1000px;
  474.     max-height: 90vh;
  475.     background: white;
  476.     border-radius: 16px;
  477.     box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
  478.     overflow: hidden;
  479.     animation: modalSlideIn 0.3s ease-out;
  480. }
  481.  
  482. @keyframes modalSlideIn {
  483.     from {
  484.         opacity: 0;
  485.         transform: translateY(20px);
  486.     }
  487.  
  488.     to {
  489.         opacity: 1;
  490.         transform: translateY(0);
  491.     }
  492. }
  493.  
  494. .modal-content {
  495.     max-height: 90vh;
  496.     overflow-y: auto;
  497.     padding: 24px;
  498.     position: relative;
  499. }
  500.  
  501. .back-btn {
  502.     position: relative;
  503.     margin-bottom: 16px;
  504.     background: none;
  505.     border: none;
  506.     width: 40px;
  507.     height: 40px;
  508.     border-radius: 50%;
  509.     display: flex;
  510.     align-items: center;
  511.     justify-content: center;
  512.     cursor: pointer;
  513.     color: #5f6368;
  514.     z-index: 1;
  515. }
  516.  
  517. .back-btn:hover {
  518.     background-color: rgba(0, 0, 0, 0.05);
  519. }
  520.  
  521. .app-header {
  522.     display: flex;
  523.     justify-content: space-between;
  524.     align-items: flex-start;
  525.     margin-bottom: 24px;
  526. }
  527.  
  528. .app-basic-info {
  529.     display: flex;
  530.     gap: 16px;
  531. }
  532.  
  533. .app-icon {
  534.     width: 84px;
  535.     height: 84px;
  536.     border-radius: 16px;
  537. }
  538.  
  539. .app-text h2 {
  540.     margin: 0 0 4px 0;
  541.     font-size: 24px;
  542. }
  543.  
  544. .developer {
  545.     color: var(--primary-color);
  546.     font-size: 14px;
  547.     display: block;
  548.     margin-bottom: 8px;
  549. }
  550.  
  551. .meta-info {
  552.     display: flex;
  553.     gap: 8px;
  554. }
  555.  
  556. .category,
  557. .contains-ads {
  558.     font-size: 0.9rem;
  559.     color: var(--primary-color);
  560.     background: #e8f0fe;
  561.     padding: 0.25rem 0.75rem;
  562.     border-radius: 16px;
  563. }
  564.  
  565. .screenshot-gallery {
  566.     display: grid;
  567.     grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  568.     gap: 16px;
  569.     padding: 16px;
  570.     margin-top: 16px;
  571. }
  572.  
  573. .screenshot-item {
  574.     display: flex;
  575.     justify-content: center;
  576.     align-items: center;
  577. }
  578.  
  579. .screenshot-container {
  580.     position: relative;
  581.     cursor: pointer;
  582.     overflow: hidden;
  583.     border-radius: 8px;
  584.     transition: transform 0.3s, box-shadow 0.3s;
  585.     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  586. }
  587.  
  588. .screenshot-container:hover {
  589.     transform: scale(1.05);
  590.     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  591. }
  592.  
  593. .screenshot-image {
  594.     width: 100%;
  595.     height: auto;
  596.     border-radius: 8px;
  597.     object-fit: cover;
  598. }
  599.  
  600. .fullscreen-modal {
  601.     position: fixed;
  602.     top: 0;
  603.     left: 0;
  604.     width: 100%;
  605.     height: 100%;
  606.     background: rgba(0, 0, 0, 0.8);
  607.     display: flex;
  608.     justify-content: center;
  609.     align-items: center;
  610.     z-index: 1000;
  611. }
  612.  
  613. .modal-content {
  614.     position: relative;
  615. }
  616.  
  617. .fullscreen-image {
  618.     max-width: 90%;
  619.     max-height: 90%;
  620.     border-radius: 8px;
  621. }
  622.  
  623. .close-btn {
  624.     position: absolute;
  625.     top: 16px;
  626.     right: 16px;
  627.     background: none;
  628.     border: none;
  629.     color: white;
  630.     font-size: 24px;
  631.     cursor: pointer;
  632. }
  633.  
  634. .app-description,
  635. .whats-new,
  636. .reviews {
  637.     margin-top: 32px;
  638. }
  639.  
  640. h3 {
  641.     font-size: 20px;
  642.     margin-bottom: 16px;
  643. }
  644.  
  645. .version-info {
  646.     color: #5f6368;
  647.     font-size: 14px;
  648.     margin-bottom: 12px;
  649. }
  650.  
  651. .whats-new ul {
  652.     list-style: none;
  653.     padding: 0;
  654. }
  655.  
  656. .whats-new li {
  657.     margin-bottom: 8px;
  658.     padding-left: 16px;
  659.     position: relative;
  660. }
  661.  
  662. .whats-new li::before {
  663.     content: "•";
  664.     position: absolute;
  665.     left: 0;
  666.     color: var(--primary-color);
  667. }
  668.  
  669. .ratings-overview {
  670.     display: flex;
  671.     gap: 48px;
  672.     margin-bottom: 24px;
  673. }
  674.  
  675. .rating-big {
  676.     text-align: center;
  677.     min-width: 150px;
  678. }
  679.  
  680. .rating-number {
  681.     font-size: 48px;
  682.     font-weight: 500;
  683.     color: var(--rating-color);
  684. }
  685.  
  686. .rating-stars {
  687.     color: #ffd700;
  688.     display: flex;
  689.     justify-content: center;
  690.     gap: 4px;
  691.     margin: 8px 0;
  692. }
  693.  
  694. .total-ratings {
  695.     color: #5f6368;
  696.     font-size: 14px;
  697. }
  698.  
  699. .rating-bars {
  700.     flex: 1;
  701.     max-width: 400px;
  702. }
  703.  
  704. .rating-bar {
  705.     display: flex;
  706.     align-items: center;
  707.     gap: 8px;
  708.     margin-bottom: 8px;
  709. }
  710.  
  711. .bar-container {
  712.     flex: 1;
  713.     height: 8px;
  714.     background: #f1f3f4;
  715.     border-radius: 4px;
  716.     overflow: hidden;
  717. }
  718.  
  719. .bar {
  720.     height: 100%;
  721.     background: var(--rating-color);
  722. }
  723.  
  724. .reviews-list {
  725.     display: grid;
  726.     gap: 24px;
  727. }
  728.  
  729. .review {
  730.     display: flex;
  731.     gap: 16px;
  732. }
  733.  
  734. .reviewer-avatar {
  735.     width: 40px;
  736.     height: 40px;
  737.     border-radius: 50%;
  738. }
  739.  
  740. .review-content {
  741.     flex: 1;
  742. }
  743.  
  744. .review-header {
  745.     display: flex;
  746.     justify-content: space-between;
  747.     align-items: center;
  748.     margin-bottom: 4px;
  749. }
  750.  
  751. .reviewer-name {
  752.     font-weight: 500;
  753. }
  754.  
  755. .review-rating {
  756.     display: flex;
  757.     gap: 2px;
  758.     color: #ffd700;
  759. }
  760.  
  761. .review-date {
  762.     color: #5f6368;
  763.     font-size: 14px;
  764.     display: block;
  765.     margin-bottom: 8px;
  766. }
  767.  
  768. .like-button {
  769.     background: none;
  770.     border: none;
  771.     color: #5f6368;
  772.     display: flex;
  773.     align-items: center;
  774.     gap: 4px;
  775.     padding: 8px;
  776.     border-radius: 16px;
  777.     cursor: pointer;
  778.     margin-top: 8px;
  779. }
  780.  
  781. .like-button:hover {
  782.     background-color: #f1f3f4;
  783. }
  784.  
  785. /* Make modal responsive */
  786. @media (max-width: 768px) {
  787.     .modal-container {
  788.         width: 100%;
  789.         height: 100%;
  790.         max-height: 100vh;
  791.         border-radius: 0;
  792.     }
  793.  
  794.     .app-header {
  795.         flex-direction: column;
  796.         gap: 16px;
  797.     }
  798.  
  799.     .ratings-overview {
  800.         flex-direction: column;
  801.         gap: 24px;
  802.     }
  803.  
  804.     .screenshot-gallery {
  805.         grid-auto-columns: 200px;
  806.     }
  807.  
  808.     .screenshot img {
  809.         height: 360px;
  810.     }
  811. }
  812.  
  813. .install-btn {
  814.     background: var(--install-color);
  815.     color: white;
  816.     border: none;
  817.     padding: 0.75rem 2rem;
  818.     border-radius: 24px;
  819.     font-weight: 500;
  820.     cursor: pointer;
  821.     transition: background 0.2s;
  822. }
  823.  
  824. .install-btn:hover {
  825.     background: var(--primary-hover);
  826. }
  827.  
  828. .button-group {
  829.     display: flex;
  830.     gap: 8px;
  831. }
  832.  
  833. .share-btn{
  834.     border: none;
  835.     background: none;
  836.     padding: 0.5rem 1rem;
  837.     border-radius: 24px;
  838.     font-weight: 500;
  839.     cursor: pointer;
  840.     transition: background 0.2s;
  841. }
  842.  
  843. .share-icon {
  844.     width: 20px;
  845.     height: 20px;
  846.     margin-right: 4px;
  847. }
  848.  
  849. .data-safety {
  850.     margin-top: 32px;
  851.     padding: 24px;
  852.     border-top: 1px solid var(--border-color);
  853.     font-size: 14px;
  854.     line-height: 1.5;
  855.     color: #5f6368;
  856. }
  857.  
  858. .data-safety p {
  859.     margin-bottom: 16px;
  860. }
  861.  
  862. .data-safety-details {
  863.     display: flex;
  864.     flex-direction: column;
  865.     gap: 16px;
  866.     border: 1px solid var(--border-color);
  867.     padding: 16px;
  868.     border-radius: 8px;
  869.     margin-bottom: 16px;
  870. }
  871.  
  872. .data-item {
  873.     display: flex;
  874.     gap: 16px;
  875.     align-items: flex-start;
  876. }
  877.  
  878. .data-item img {
  879.     width: 20px;
  880.     height: 20px;
  881.     flex-shrink: 0;
  882. }
  883.  
  884. .data-item h4 {
  885.     font-size: 14px;
  886.     font-weight: 500;
  887.     margin-bottom: 4px;
  888.     color: var(--text-color);
  889. }
  890.  
  891. .data-item p {
  892.     margin: 0;
  893.     color: #5f6368;
  894. }
  895.  
  896. .see-details {
  897.     margin-top: 16px;
  898. }
  899.  
  900. .see-details a {
  901.     color: var(--primary-color);
  902.     text-decoration: none;
  903.     font-weight: 500;
  904.     font-size: 14px;
  905. }
  906.  
  907. .see-details a:hover {
  908.     text-decoration: underline;
  909. }
  910.  
  911. /* App Stats */
  912. .app-stats {
  913.     display: flex;
  914.     margin-top: 1rem;
  915.     margin-left: 1rem;
  916.     margin-right: 1rem;
  917.     padding: 1rem;
  918.     background: var(--background-color);
  919.     border-radius: 8px;
  920.     box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  921. }
  922.  
  923. .stat-item {
  924.     flex: 1;
  925.     text-align: center;
  926. }
  927.  
  928. .stat-item:not(:last-child) {
  929.     border-right: 2px solid var(--border-color);
  930. }
  931.  
  932. .stat-value {
  933.     font-size: 1.25rem;
  934.     font-weight: bold;
  935.     color: var(--text-color);
  936.     display: flex;
  937.     align-items: center;
  938.     justify-content: center;
  939.     gap: 0.25rem;
  940. }
  941.  
  942. .stat-label {
  943.     font-size: 0.9rem;
  944.     color: #5f6368;
  945.     margin-top: 0.5rem;
  946. }
  947.  
  948. .star-icon {
  949.     font-size: 1rem;
  950.     vertical-align: middle;
  951. }
  952.  
  953. /* Screenshots */
  954. .screenshots {
  955.     display: grid;
  956.     grid-auto-flow: column;
  957.     grid-auto-columns: 200px;
  958.     gap: 1rem;
  959.     overflow-x: auto;
  960.     padding: 1rem 2rem;
  961.     scroll-snap-type: x mandatory;
  962.     scrollbar-width: none;
  963. }
  964.  
  965. .screenshots::-webkit-scrollbar {
  966.     display: none;
  967. }
  968.  
  969. .screenshot-item {
  970.     scroll-snap-align: start;
  971.     border-radius: 12px;
  972.     overflow: hidden;
  973.     border: 1px solid var(--border-color);
  974. }
  975.  
  976. .screenshot-item img {
  977.     width: 100%;
  978.     height: 360px;
  979.     object-fit: cover;
  980. }
  981.  
  982. /* What's New Section */
  983. .whats-new {
  984.     padding: 2rem;
  985.     border-top: 1px solid var(--border-color);
  986. }
  987.  
  988. .update-info {
  989.     display: grid;
  990.     gap: 1rem;
  991. }
  992.  
  993. .update-meta {
  994.     display: flex;
  995.     justify-content: space-between;
  996.     color: #5f6368;
  997.     font-size: 0.9rem;
  998. }
  999.  
  1000. .update-info ul {
  1001.     list-style: none;
  1002.     padding-left: 1rem;
  1003. }
  1004.  
  1005. .update-info li {
  1006.     margin-bottom: 0.5rem;
  1007.     position: relative;
  1008. }
  1009.  
  1010. .update-info li::before {
  1011.     content: "•";
  1012.     color: var(--primary-color);
  1013.     position: absolute;
  1014.     left: -1rem;
  1015. }
  1016.  
  1017. /* Reviews Section */
  1018. .reviews-section {
  1019.     padding: 2rem;
  1020.     border-top: 1px solid var(--border-color);
  1021. }
  1022.  
  1023. .review-stats {
  1024.     display: flex;
  1025.     gap: 2rem;
  1026.     margin: 2rem 0;
  1027. }
  1028.  
  1029. .rating-summary {
  1030.     text-align: center;
  1031.     min-width: 150px;
  1032. }
  1033.  
  1034. .average-rating {
  1035.     font-size: 3rem;
  1036.     font-weight: 500;
  1037.     color: var(--rating-color);
  1038.     margin-bottom: 0.5rem;
  1039. }
  1040.  
  1041. .rating-stars {
  1042.     color: #ffd700;
  1043.     display: flex;
  1044.     justify-content: center;
  1045.     gap: 0.25rem;
  1046.     margin-bottom: 0.5rem;
  1047. }
  1048.  
  1049. .total-ratings {
  1050.     color: #5f6368;
  1051.     font-size: 0.9rem;
  1052. }
  1053.  
  1054. .rating-distribution {
  1055.     flex: 1;
  1056.     max-width: 400px;
  1057. }
  1058.  
  1059. .rating-bar {
  1060.     display: flex;
  1061.     align-items: center;
  1062.     gap: 1rem;
  1063.     margin-bottom: 0.5rem;
  1064. }
  1065.  
  1066. .rating-label {
  1067.     width: 30px;
  1068. }
  1069.  
  1070. .rating-progress {
  1071.     flex: 1;
  1072.     height: 8px;
  1073.     background: var(--border-color);
  1074.     border-radius: 4px;
  1075.     overflow: hidden;
  1076. }
  1077.  
  1078. .rating-fill {
  1079.     height: 100%;
  1080.     background: var(--rating-color);
  1081. }
  1082.  
  1083. .review-list {
  1084.     display: grid;
  1085.     gap: 1.5rem;
  1086.     padding: 1rem 0;
  1087. }
  1088.  
  1089. .review-item {
  1090.     padding: 1rem;
  1091.     border-radius: 8px;
  1092.     background: var(--background-color);
  1093. }
  1094.  
  1095. .review-header {
  1096.     display: flex;
  1097.     align-items: center;
  1098.     gap: 1rem;
  1099.     margin-bottom: 1rem;
  1100. }
  1101.  
  1102. .reviewer-avatar {
  1103.     width: 40px;
  1104.     height: 40px;
  1105.     border-radius: 50%;
  1106. }
  1107.  
  1108. .review-meta {
  1109.     flex: 1;
  1110. }
  1111.  
  1112. .reviewer-name {
  1113.     font-weight: 500;
  1114.     margin-bottom: 0.25rem;
  1115. }
  1116.  
  1117. .review-date {
  1118.     color: #5f6368;
  1119.     font-size: 0.9rem;
  1120. }
  1121.  
  1122. .review-rating {
  1123.     display: flex;
  1124.     gap: 0.25rem;
  1125.     color: #ffd700;
  1126. }
  1127.  
  1128. .review-text {
  1129.     color: var(--text-color);
  1130.     line-height: 1.5;
  1131.     margin-bottom: 1rem;
  1132. }
  1133.  
  1134. .review-actions {
  1135.     display: flex;
  1136.     gap: 1rem;
  1137. }
  1138.  
  1139. .like-btn {
  1140.     display: flex;
  1141.     align-items: center;
  1142.     gap: 0.5rem;
  1143.     background: none;
  1144.     border: none;
  1145.     color: #5f6368;
  1146.     cursor: pointer;
  1147.     padding: 0.5rem;
  1148.     border-radius: 16px;
  1149. }
  1150.  
  1151. .like-btn:hover {
  1152.     background: var(--hover-color);
  1153. } */
  1154.  
  1155. .AJTPZc {
  1156.     font-size: 0.9rem;
  1157.     color: #5f6368;
  1158.     margin-top: 8px;
  1159. }
  1160.  
  1161. .Anb3we {
  1162.     display: flex;
  1163.     align-items: center;
  1164.     gap: 16px;
  1165.     margin-top: 8px;
  1166. }
  1167.  
  1168. .NC0Ppb {
  1169.     font-size: 0.9rem;
  1170.     color: #5f6368;
  1171. }
  1172.  
  1173. .b6SkTb {
  1174.     display: flex;
  1175.     gap: 8px;
  1176. }
  1177.  
  1178. .D3Qfie {
  1179.     display: flex;
  1180.     align-items: center;
  1181.     justify-content: center;
  1182.     padding: 4px 12px;
  1183.     border: 1px solid var(--border-color);
  1184.     border-radius: 16px;
  1185.     cursor: pointer;
  1186.     font-size: 0.85rem;
  1187.     color: var(--text-color);
  1188.     background: var(--background-color);
  1189. }
  1190.  
  1191. .D3Qfie:hover {
  1192.     background: var(--hover-color);
  1193. }
  1194.  
  1195. .D3Qfie[aria-pressed="true"] {
  1196.     background: var(--primary-color);
  1197.     color: white;
  1198.     border-color: var(--primary-color);
  1199. }
  1200.  
  1201. /* Footer */
  1202. footer {
  1203.     background: var(--footer-bg);
  1204.     color: var(--footer-text);
  1205.     padding: 3rem 2rem;
  1206.     margin-top: 4rem;
  1207.     border-top: 1px solid var(--border-color);
  1208. }
  1209.  
  1210. .footer-content {
  1211.     max-width: 1366px;
  1212.     margin: 0 auto;
  1213.     display: grid;
  1214.     grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  1215.     gap: 2rem;
  1216. }
  1217.  
  1218. .footer-section h3 {
  1219.     color: var(--text-color);
  1220.     margin-bottom: 1rem;
  1221.     font-size: 1rem;
  1222. }
  1223.  
  1224. .footer-section ul {
  1225.     list-style: none;
  1226. }
  1227.  
  1228. .footer-section ul li {
  1229.     margin-bottom: 0.75rem;
  1230. }
  1231.  
  1232. .footer-section ul li a {
  1233.     color: var(--footer-text);
  1234.     text-decoration: none;
  1235.     font-size: 0.9rem;
  1236. }
  1237.  
  1238. .footer-section ul li a:hover {
  1239.     color: var(--primary-color);
  1240. }
  1241.  
  1242. .footer-bottom {
  1243.     grid-column: 1 / -1;
  1244.     display: flex;
  1245.     justify-content: space-between;
  1246.     align-items: center;
  1247.     margin-top: 2rem;
  1248.     padding-top: 2rem;
  1249.     border-top: 1px solid var(--border-color);
  1250. }
  1251.  
  1252. .footer-links {
  1253.     display: flex;
  1254.     gap: 2rem;
  1255. }
  1256.  
  1257. .footer-links a {
  1258.     color: var(--footer-text);
  1259.     text-decoration: none;
  1260.     font-size: 0.9rem;
  1261. }
  1262.  
  1263. .location-btn {
  1264.     display: flex;
  1265.     align-items: center;
  1266.     gap: 0.5rem;
  1267.     background: none;
  1268.     border: none;
  1269.     color: var(--footer-text);
  1270.     cursor: pointer;
  1271.     font-size: 0.9rem;
  1272. }
  1273.  
  1274. .location-btn .material-icons {
  1275.     font-size: 1.2rem;
  1276. }
  1277.  
  1278. /* Responsive Design */
  1279. @media (max-width: 768px) {
  1280.     .nav-left .menu-btn {
  1281.         display: none;
  1282.     }
  1283.  
  1284.     .carousel-item {
  1285.         max-width: 100%;
  1286.     }
  1287.  
  1288.     .app-stats {
  1289.         grid-template-columns: repeat(2, 1fr);
  1290.     }
  1291.  
  1292.     .review-stats {
  1293.         flex-direction: column;
  1294.     }
  1295.  
  1296.     .rating-distribution {
  1297.         max-width: 100%;
  1298.     }
  1299.  
  1300.     .footer-content {
  1301.         grid-template-columns: 1fr;
  1302.     }
  1303.  
  1304.     .footer-bottom {
  1305.         flex-direction: column;
  1306.         gap: 1rem;
  1307.         text-align: center;
  1308.     }
  1309.  
  1310.     .footer-links {
  1311.         flex-wrap: wrap;
  1312.         justify-content: center;
  1313.     }
  1314. }
  1315.  
  1316. /* Loading States */
  1317. .skeleton {
  1318.     background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  1319.     background-size: 200% 100%;
  1320.     animation: loading 1.5s infinite;
  1321. }
  1322.  
  1323. @keyframes loading {
  1324.     0% {
  1325.         background-position: 200% 0;
  1326.     }
  1327.  
  1328.     100% {
  1329.         background-position: -200% 0;
  1330.     }
  1331. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!