API tools faq
paste
Guest User

custom.css

a guest
Jan 5th, 2025
41
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.65 KB | None | 0 0
raw download clone embed print report
  1. /* Hide Specific Elements */
  2. .widget-type-rss > div:first-child > div:first-child,
  3. .notice-icon,
  4. div.widget:nth-child(2) > div:first-child > div:first-child {
  5. display: none;
  6. }
  7.  
  8. /* Root Variables */
  9. :root {
  10. /* Base Settings */
  11. font-size: 10px;
  12. --scheme: ;
  13. --bgh: 240;
  14. --bgs: 8%;
  15. --bgl: 9%;
  16. --bghs: var(--bgh), var(--bgs);
  17. --cm: 1;
  18. --tsm: 1;
  19.  
  20. /* Layout Settings */
  21. --widget-gap: 25px;
  22. --widget-content-vertical-padding: 15px;
  23. --widget-content-horizontal-padding: 17px;
  24. --widget-content-padding: var(--widget-content-vertical-padding) var(--widget-content-horizontal-padding);
  25. --content-bounds-padding: 15px;
  26. --border-radius: 5px;
  27. --mobile-navigation-height: 50px;
  28.  
  29. /* Colors */
  30. --color-primary: hsl(152, 76%, 80%);
  31. --color-positive: var(--color-primary);
  32. --color-negative: hsl(0, 70%, 70%);
  33. --color-background: hsl(var(--bghs), var(--bgl));
  34. --color-widget-background-hsl-values: var(--bghs), calc(var(--bgl) + 1%);
  35. --color-widget-background: hsl(var(--color-widget-background-hsl-values));
  36. --color-separator: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 4% * var(--cm))));
  37. --color-widget-content-border: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 4%)));
  38. --color-widget-background-highlight: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 4%)));
  39. --color-popover-background: hsl(var(--bgh), calc(var(--bgs) + 3%), calc(var(--bgl) + 3%));
  40. --color-popover-border: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 12%)));
  41. --color-progress-border: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 10% * var(--cm))));
  42. --color-progress-value: hsl(var(--bgh), calc(var(--bgs) * var(--tsm)), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 27% * var(--cm))));
  43. --color-graph-gridlines: hsl(var(--bghs), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 6% * var(--cm))));
  44.  
  45. /* Text Colors */
  46. --ths: var(--bgh), calc(var(--bgs) * var(--tsm));
  47. --color-text-base: hsl(var(--ths), calc(var(--scheme) var(--cm) * 58%));
  48. --color-text-base-muted: hsl(var(--ths), calc(var(--scheme) var(--cm) * 52%));
  49. --color-text-highlight: hsl(var(--ths), calc(var(--scheme) var(--cm) * 85%));
  50. --color-text-subdue: hsl(var(--ths), calc(var(--scheme) var(--cm) * 35%));
  51.  
  52. /* Typography */
  53. --font-size-h1: 1.7rem;
  54. --font-size-h2: 1.6rem;
  55. --font-size-h3: 1.5rem;
  56. --font-size-h4: 1.4rem;
  57. --font-size-base: 1.3rem;
  58. --font-size-h5: 1.2rem;
  59. --font-size-h6: 1.1rem;
  60. }
  61.  
  62. /* Theme Variations */
  63. .light-scheme {
  64. --scheme: 100% -;
  65. }
  66.  
  67. /* Reset & Base Styles */
  68. *, *::before, *::after {
  69. box-sizing: border-box;
  70. padding: 0;
  71. margin: 0;
  72. }
  73.  
  74. /* Base Element Styles */
  75. html {
  76. scrollbar-color: var(--color-text-subdue) transparent;
  77. scroll-behavior: smooth;
  78. height: 100%;
  79. }
  80.  
  81. body {
  82. font-size: 1.3rem;
  83. font-family: 'Segoe UI Variable', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
  84. font-variant-ligatures: none;
  85. line-height: 1.6;
  86. color: var(--color-text-base);
  87. background-color: var(--color-background);
  88. overflow-y: scroll;
  89. height: 100%;
  90. }
  91.  
  92. a {
  93. text-decoration: none;
  94. color: inherit;
  95. overflow-wrap: break-word;
  96. }
  97.  
  98. ul {
  99. list-style: none;
  100. }
  101.  
  102. hr {
  103. border: 0;
  104. height: 1px;
  105. background-color: var(--color-separator);
  106. }
  107.  
  108. img, svg {
  109. display: block;
  110. max-width: 100%;
  111. }
  112.  
  113. /* Selection & Scrollbar Styles */
  114. ::selection {
  115. background-color: hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl) + 20%)));
  116. color: var(--color-text-highlight);
  117. }
  118.  
  119. ::-webkit-scrollbar {
  120. background: var(--color-background);
  121. height: 5px;
  122. width: 10px;
  123. }
  124.  
  125. ::-webkit-scrollbar-thumb {
  126. background: var(--color-text-subdue);
  127. border-radius: var(--border-radius);
  128. }
  129.  
  130. /* Page Layout */
  131. .page {
  132. height: 100%;
  133. padding-block: var(--widget-gap);
  134. }
  135.  
  136. .page-content,
  137. .page.content-ready .page-loading-container {
  138. display: none;
  139. }
  140.  
  141. .page.content-ready > .page-content {
  142. display: block;
  143. }
  144.  
  145. .page-columns {
  146. display: flex;
  147. gap: var(--widget-gap);
  148. animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards;
  149. }
  150.  
  151. .page-column-small {
  152. width: 300px;
  153. flex-shrink: 0;
  154. }
  155.  
  156. .page-column-full {
  157. width: 100%;
  158. min-width: 0;
  159. }
  160.  
  161. /* Dynamic Column Layouts */
  162. .dynamic-columns {
  163. --list-half-gap: 0.5rem;
  164. gap: var(--widget-content-vertical-padding) var(--widget-content-horizontal-padding);
  165. display: grid;
  166. grid-template-columns: repeat(var(--columns-per-row), 1fr);
  167. }
  168.  
  169. .dynamic-columns > * {
  170. padding-left: var(--widget-content-horizontal-padding);
  171. border-left: 1px solid var(--color-separator);
  172. min-width: 0;
  173. }
  174.  
  175. .dynamic-columns > *:first-child {
  176. padding-top: 0;
  177. border-top: none;
  178. border-left: none;
  179. }
  180.  
  181. /* Widget Styles */
  182. .widget-content {
  183. container-type: inline-size;
  184. container-name: widget;
  185. }
  186.  
  187. .widget-content:not(.widget-content-frameless) {
  188. padding: var(--widget-content-padding);
  189. background: var(--color-widget-background);
  190. border-radius: var(--border-radius);
  191. border: 1px solid var(--color-widget-content-border);
  192. box-shadow: 0px 3px 0px 0px hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl)) - 0.5%));
  193. }
  194.  
  195. .widget + .widget {
  196. margin-top: var(--widget-gap);
  197. }
  198.  
  199. /* Navigation Styles */
  200. .nav {
  201. height: 100%;
  202. gap: var(--header-items-gap);
  203. }
  204.  
  205. .nav-item {
  206. display: block;
  207. height: 100%;
  208. border-bottom: 2px solid transparent;
  209. transition: color .3s, border-color .3s;
  210. font-size: var(--font-size-h3);
  211. flex-shrink: 0;
  212. }
  213.  
  214. .nav-item:not(.nav-item-current):hover {
  215. border-bottom-color: var(--color-text-subdue);
  216. color: var(--color-text-highlight);
  217. }
  218.  
  219. .nav-item.nav-item-current {
  220. border-bottom-color: var(--color-primary);
  221. color: var(--color-text-highlight);
  222. }
  223.  
  224. /* Card Layouts */
  225. .cards-vertical {
  226. flex-direction: column;
  227. }
  228.  
  229. .cards-horizontal {
  230. --cards-per-row: 6.5;
  231. display: flex;
  232. --cards-gap: calc(var(--widget-content-vertical-padding) * 0.7);
  233. gap: var(--cards-gap);
  234. }
  235.  
  236. .card {
  237. display: flex;
  238. flex-direction: column;
  239. }
  240.  
  241. .cards-horizontal .card {
  242. flex-shrink: 0;
  243. width: calc(100% / var(--cards-per-row) - var(--cards-gap) * (var(--cards-per-row) - 1) / var(--cards-per-row));
  244. }
  245.  
  246. /* Popover Styles */
  247. .popover-container {
  248. --triangle-size: 10px;
  249. --triangle-offset: 50%;
  250. --triangle-margin: calc(var(--triangle-size) + 3px);
  251. --entrance-y-offset: 8px;
  252. --entrance-direction: calc(var(--entrance-y-offset) * -1);
  253. z-index: 20;
  254. position: absolute;
  255. padding-top: var(--triangle-margin);
  256. padding-inline: var(--content-bounds-padding);
  257. }
  258.  
  259. .popover-frame {
  260. --shadow-properties: 0 15px 20px -10px;
  261. --shadow-color: hsla(var(--bghs), calc(var(--bgl) * 0.2), 0.5);
  262. position: relative;
  263. padding: 10px;
  264. background: var(--color-popover-background);
  265. border: 1px solid var(--color-popover-border);
  266. border-radius: 5px;
  267. animation: popoverFrameEntrance 0.3s backwards cubic-bezier(0.16, 1, 0.3, 1);
  268. box-shadow: var(--shadow-properties) var(--shadow-color);
  269. }
  270.  
  271. /* Utility Classes */
  272. .size-h1 { font-size: var(--font-size-h1); }
  273. .size-h2 { font-size: var(--font-size-h2); }
  274. .size-h3 { font-size: var(--font-size-h3); }
  275. .size-h4 { font-size: var(--font-size-h4); }
  276. .size-base { font-size: var(--font-size-base); }
  277. .size-h5 { font-size: var(--font-size-h5); }
  278. .size-h6 { font-size: var(--font-size-h6); }
  279.  
  280. /* Color Utilities */
  281. .color-highlight { color: var(--color-text-highlight); }
  282. .color-base { color: var(--color-text-base); }
  283. .color-subdue { color: var(--color-text-subdue); }
  284. .color-negative { color: var(--color-negative); }
  285. .color-positive { color: var(--color-positive); }
  286. .color-primary { color: var(--color-primary); }
  287.  
  288. /* Layout Utilities */
  289. .cursor-help { cursor: help; }
  290. .break-all { word-break: break-all; }
  291. .text-left { text-align: left; }
  292. .text-right { text-align: right; }
  293. .text-center { text-align: center; }
  294. .text-elevate { margin-top: -0.2em; }
  295. .text-compact { word-spacing: -0.18em; }
  296. .rtl { direction: rtl; }
  297. .shrink { flex-shrink: 1; }
  298. .shrink-0 { flex-shrink: 0; }
  299. .min-width-0 { min-width: 0; }
  300. .max-width-100 { max-width: 100%; }
  301. .height-100 { height: 100%; }
  302.  
  303. /* Spacing Utilities */
  304. .gap-5 { gap: 0.5rem; }
  305. .gap-7 { gap: 0.7rem; }
  306. .gap-10 { gap: 1rem; }
  307. .gap-15 { gap: 1.5rem; }
  308. .gap-20 { gap: 2rem; }
  309. .gap-25 { gap: 2.5rem; }
  310. .gap-35 { gap: 3.5rem; }
  311. .gap-45 { gap: 4.5rem; }
  312. .gap-55 { gap: 5.5rem; }
  313.  
  314. .margin-top-3 { margin-top: 0.3rem; }
  315. .margin-top-5 { margin-top: 0.5rem; }
  316. .margin-top-7 { margin-top: 0.7rem; }
  317. .margin-top-10 { margin-top: 1rem; }
  318. .margin-top-15 { margin-top: 1.5rem; }
  319. .margin-top-20 { margin-top: 2rem; }
  320. .margin-top-25 { margin-top: 2.5rem; }
  321. .margin-top-35 { margin-top: 3.5rem; }
  322. .margin-top-40 { margin-top: 4rem; }
  323. .margin-top-auto { margin-top: auto; }
  324.  
  325. /* Animations */
  326. @keyframes pageColumnsEntrance {
  327. from {
  328. opacity: 0;
  329. transform: translateY(10px);
  330. }
  331. }
  332.  
  333. @keyframes popoverFrameEntrance {
  334. from {
  335. opacity: 0;
  336. transform: translateY(var(--entrance-direction));
  337. }
  338. }
  339.  
  340. @keyframes loadingIconSpin {
  341. to {
  342. transform: rotate(360deg);
  343. }
  344. }
  345.  
  346. /* Media Queries */
  347. @media (max-width: 1190px) {
  348. .header-container {
  349. display: none;
  350. }
  351.  
  352. .page-column-small {
  353. width: 100%;
  354. flex-shrink: 1;
  355. }
  356.  
  357. .page-column {
  358. display: none;
  359. animation: columnEntrance .0s cubic-bezier(0.25, 1, 0.5, 1) backwards;
  360. }
  361.  
  362. .mobile-navigation {
  363. display: block;
  364. position: fixed;
  365. bottom: 0;
  366. transform: translateY(calc(100% - var(--mobile-navigation-height)));
  367. left: var(--content-bounds-padding);
  368. right: var(--content-bounds-padding);
  369. z-index: 10;
  370. background-color: var(--color-widget-background);
  371. border: 1px solid var(--color-widget-content-border);
  372. border-bottom: 0;
  373. border-radius: var(--border-radius) var(--border-radius) 0 0;
  374. transition: transform .3s;
  375. }
  376.  
  377. .mobile-navigation-offset {
  378. height: var(--mobile-navigation-height);
  379. flex-shrink: 0;
  380. }
  381.  
  382. .mobile-navigation-page-links {
  383. border-top: 1px solid var(--color-widget-content-border);
  384. padding: 15px var(--content-bounds-padding);
  385. display: flex;
  386. align-items: center;
  387. overflow-x: auto;
  388. scrollbar-width: thin;
  389. gap: 2.5rem;
  390. }
  391.  
  392. .mobile-navigation-icons {
  393. display: flex;
  394. justify-content: space-around;
  395. align-items: center;
  396. }
  397.  
  398. .mobile-navigation-label {
  399. display: flex;
  400. flex: 1;
  401. max-width: 50px;
  402. height: var(--mobile-navigation-height);
  403. justify-content: center;
  404. align-items: center;
  405. cursor: pointer;
  406. font-size: 15px;
  407. line-height: var(--mobile-navigation-height);
  408. }
  409.  
  410. .cards-grid + .expand-toggle-button.container-expanded {
  411. box-shadow: 0 var(--border-radius) 0 0 var(--color-background);
  412. }
  413. }
  414.  
  415. @media (max-width: 1190px) and (display-mode: standalone) {
  416. :root {
  417. --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
  418. }
  419.  
  420. .list-collapsible-label:has(.list-collapsible-input:checked) {
  421. bottom: calc(var(--mobile-navigation-height) + var(--safe-area-inset-bottom));
  422. }
  423.  
  424. .mobile-navigation {
  425. transform: translateY(calc(100% - var(--mobile-navigation-height) - var(--safe-area-inset-bottom)));
  426. padding-bottom: var(--safe-area-inset-bottom);
  427. }
  428.  
  429. .mobile-navigation-icons {
  430. padding-bottom: var(--safe-area-inset-bottom);
  431. transition: padding-bottom .3s;
  432. }
  433.  
  434. .mobile-navigation-icons:has(.mobile-navigation-page-links-input:checked) {
  435. padding-bottom: 0;
  436. }
  437. }
  438.  
  439. @media (max-width: 550px) {
  440. :root {
  441. font-size: 9px;
  442. --widget-gap: 15px;
  443. --widget-content-vertical-padding: 10px;
  444. --widget-content-horizontal-padding: 10px;
  445. --content-bounds-padding: 10px;
  446. }
  447.  
  448. .dynamic-columns:has(> :nth-child(1)) {
  449. --columns-per-row: 1;
  450. }
  451.  
  452. .row-reverse-on-mobile {
  453. flex-direction: row-reverse;
  454. }
  455.  
  456. .hide-on-mobile,
  457. .thumbnail-container:has(> .hide-on-mobile) {
  458. display: none;
  459. }
  460.  
  461. .mobile-reachability-header {
  462. display: block;
  463. font-size: 3rem;
  464. padding: 10vh 1rem;
  465. text-align: center;
  466. color: var(--color-text-highlight);
  467. animation: pageColumnsEntrance .3s cubic-bezier(0.25, 1, 0.5, 1) backwards;
  468. }
  469.  
  470. .rss-detailed-thumbnail > * {
  471. height: 6rem;
  472. }
  473.  
  474. .rss-detailed-description {
  475. line-clamp: 3;
  476. -webkit-line-clamp: 3;
  477. }
  478. }
  479.  
  480. /* RSS Card Styles */
  481. .rss-card-image {
  482. height: var(--rss-thumbnail-height, 10rem);
  483. object-fit: cover;
  484. border-radius: var(--border-radius) var(--border-radius) 0 0;
  485. }
  486.  
  487. .rss-card-2 {
  488. position: relative;
  489. height: var(--rss-card-height, 27rem);
  490. overflow: hidden;
  491. }
  492.  
  493. .rss-card-2::before {
  494. content: '';
  495. position: absolute;
  496. inset: 0;
  497. pointer-events: none;
  498. background-image: linear-gradient(
  499. 0deg,
  500. var(--color-widget-background),
  501. hsla(var(--color-widget-background-hsl-values), 0.8) 6rem,
  502. transparent 14rem
  503. );
  504. z-index: 2;
  505. }
  506.  
  507. /* Weather Widget Styles */
  508. .weather-column {
  509. position: relative;
  510. display: flex;
  511. align-items: center;
  512. justify-content: end;
  513. flex-direction: column;
  514. width: calc(100% / 12);
  515. padding-top: 3px;
  516. }
  517.  
  518. .weather-bar {
  519. height: calc(20px + var(--weather-bar-height) * 40px);
  520. width: 6px;
  521. background-color: hsl(var(--ths), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 18%)));
  522. border: 1px solid hsl(var(--ths), calc(var(--scheme) ((var(--scheme) var(--bgl)) + 24%)));
  523. border-bottom: 0;
  524. border-radius: 6px 6px 0 0;
  525. mask-image: linear-gradient(0deg, transparent 0, #000 10px);
  526. -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 10px);
  527. transition: background-color .2s, border-color .2s, width .2s;
  528. }
  529.  
  530. /* Additional Container Queries */
  531. @container widget (max-width: 1300px) { .cards-horizontal { --cards-per-row: 5.5; } }
  532. @container widget (max-width: 1100px) { .cards-horizontal { --cards-per-row: 4.5; } }
  533. @container widget (max-width: 850px) { .cards-horizontal { --cards-per-row: 3.5; } }
  534. @container widget (max-width: 750px) { .cards-horizontal { --cards-per-row: 3.5; } }
  535. @container widget (max-width: 650px) { .cards-horizontal { --cards-per-row: 2.5; } }
  536. @container widget (max-width: 450px) { .cards-horizontal { --cards-per-row: 2.3; } }
  537.  
  538. @container widget (max-width: 1300px) { .cards-grid { --cards-per-row: 5; } }
  539. @container widget (max-width: 1100px) { .cards-grid { --cards-per-row: 4; } }
  540. @container widget (max-width: 850px) { .cards-grid { --cards-per-row: 3; } }
  541. @container widget (max-width: 750px) { .cards-grid { --cards-per-row: 3; } }
  542. @container widget (max-width: 650px) { .cards-grid { --cards-per-row: 2; } }
  543.  
  544. /* List Spacing Classes */
  545. .list { --list-half-gap: 0rem; }
  546. .list-gap-2 { --list-half-gap: 0.1rem; }
  547. .list-gap-4 { --list-half-gap: 0.2rem; }
  548. .list-gap-10 { --list-half-gap: 0.5rem; }
  549. .list-gap-14 { --list-half-gap: 0.7rem; }
  550. .list-gap-20 { --list-half-gap: 1rem; }
  551. .list-gap-24 { --list-half-gap: 1.2rem; }
  552. .list-gap-34 { --list-half-gap: 1.7rem; }
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!