| 731 |
731 |
|
Add new opener selectors here as they appear. */
|
| 732 |
732 |
|
.context-menu-btn,
|
| 733 |
733 |
|
.discover-filter-toggle,
|
| 734 |
|
- |
.tip-toggle,
|
| 735 |
734 |
|
.bundle-toggle {
|
| 736 |
735 |
|
box-shadow: none;
|
| 737 |
736 |
|
}
|
| 738 |
737 |
|
|
| 739 |
738 |
|
.context-menu-btn:hover,
|
| 740 |
739 |
|
.discover-filter-toggle:hover,
|
| 741 |
|
- |
.tip-toggle:hover,
|
| 742 |
740 |
|
.bundle-toggle:hover {
|
| 743 |
741 |
|
box-shadow: none;
|
| 744 |
742 |
|
}
|
| 745 |
743 |
|
|
| 746 |
744 |
|
.context-menu-btn:active,
|
| 747 |
745 |
|
.discover-filter-toggle:active,
|
| 748 |
|
- |
.tip-toggle:active,
|
| 749 |
746 |
|
.bundle-toggle:active {
|
| 750 |
747 |
|
box-shadow: var(--shadow-inset);
|
| 751 |
748 |
|
}
|
| 1912 |
1909 |
|
|
| 1913 |
1910 |
|
/* ===========================================
|
| 1914 |
1911 |
|
PROJECT PAGE (store front)
|
| 1915 |
|
- |
=========================================== */
|
|
1912 |
+ |
===========================================
|
| 1916 |
1913 |
|
|
| 1917 |
|
- |
/* Project store-front page (templates/pages/project.html). Scoped under
|
| 1918 |
|
- |
.project-page body class, `.item-card`, `.item-title`, `.item-meta`,
|
| 1919 |
|
- |
`.item-price`, etc. here mean store-front item cards, distinct from
|
| 1920 |
|
- |
the item-detail-page versions scoped under .item-page above. */
|
| 1921 |
|
- |
.project-page .store-header { margin-bottom: var(--gap-page); }
|
| 1922 |
|
- |
.project-page .store-title { font-size: var(--text-hero); margin-bottom: var(--gap-peer); }
|
| 1923 |
|
- |
.project-page .store-meta {
|
| 1924 |
|
- |
font-size: var(--text-note);
|
| 1925 |
|
- |
opacity: 0.7;
|
| 1926 |
|
- |
margin-bottom: var(--gap-pane);
|
| 1927 |
|
- |
}
|
| 1928 |
|
- |
.project-page .store-meta a { color: var(--content); }
|
| 1929 |
|
- |
.project-page .store-description {
|
| 1930 |
|
- |
font-size: var(--text-lead);
|
| 1931 |
|
- |
max-width: 800px;
|
| 1932 |
|
- |
margin-bottom: var(--gap-page);
|
| 1933 |
|
- |
text-align: left;
|
| 1934 |
|
- |
}
|
| 1935 |
|
- |
.project-page .store-actions {
|
| 1936 |
|
- |
display: flex;
|
| 1937 |
|
- |
gap: var(--gap-section);
|
| 1938 |
|
- |
flex-wrap: wrap;
|
| 1939 |
|
- |
}
|
| 1940 |
|
- |
|
| 1941 |
|
- |
.project-page .items-section { margin-bottom: var(--gap-page); }
|
| 1942 |
|
- |
|
| 1943 |
|
- |
.project-page .items-grid {
|
| 1944 |
|
- |
display: grid;
|
| 1945 |
|
- |
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
| 1946 |
|
- |
gap: var(--gap-page);
|
| 1947 |
|
- |
}
|
| 1948 |
|
- |
|
| 1949 |
|
- |
.project-page .item-card {
|
| 1950 |
|
- |
background: var(--surface-overlay);
|
| 1951 |
|
- |
transition: background 0.2s ease;
|
| 1952 |
|
- |
cursor: pointer;
|
| 1953 |
|
- |
display: flex;
|
| 1954 |
|
- |
flex-direction: column;
|
| 1955 |
|
- |
height: 100%;
|
| 1956 |
|
- |
}
|
| 1957 |
|
- |
|
| 1958 |
|
- |
.project-page .item-card:hover { background: var(--surface-sunken); }
|
| 1959 |
|
- |
|
| 1960 |
|
- |
.project-page a.item-thumbnail {
|
| 1961 |
|
- |
width: 100%;
|
| 1962 |
|
- |
height: 300px;
|
| 1963 |
|
- |
background: var(--border);
|
| 1964 |
|
- |
display: flex;
|
| 1965 |
|
- |
align-items: center;
|
| 1966 |
|
- |
justify-content: center;
|
| 1967 |
|
- |
font-size: var(--text-hero);
|
| 1968 |
|
- |
text-decoration: none;
|
| 1969 |
|
- |
overflow: hidden;
|
| 1970 |
|
- |
}
|
| 1971 |
|
- |
|
| 1972 |
|
- |
.project-page a.item-thumbnail img {
|
| 1973 |
|
- |
width: 100%;
|
| 1974 |
|
- |
height: 100%;
|
| 1975 |
|
- |
object-fit: cover;
|
| 1976 |
|
- |
display: block;
|
| 1977 |
|
- |
}
|
| 1978 |
|
- |
|
| 1979 |
|
- |
/* The dimming belongs to the placeholder, not to the slot. It was on the slot,
|
| 1980 |
|
- |
so the day covers started rendering here they would have rendered at 30%. */
|
| 1981 |
|
- |
.project-page a.item-thumbnail-empty { opacity: 0.3; }
|
| 1982 |
|
- |
.project-page a.item-thumbnail-empty:hover { opacity: 0.5; }
|
| 1983 |
|
- |
|
| 1984 |
|
- |
.project-page .item-content {
|
| 1985 |
|
- |
padding: var(--gap-pane);
|
| 1986 |
|
- |
display: flex;
|
| 1987 |
|
- |
flex-direction: column;
|
| 1988 |
|
- |
flex-grow: 1;
|
| 1989 |
|
- |
}
|
| 1990 |
|
- |
|
| 1991 |
|
- |
.project-page .item-title {
|
| 1992 |
|
- |
font-size: var(--text-subhead);
|
| 1993 |
|
- |
margin-bottom: var(--gap-peer);
|
| 1994 |
|
- |
font-family: var(--font-display);
|
| 1995 |
|
- |
font-weight: bold;
|
| 1996 |
|
- |
}
|
| 1997 |
|
- |
|
| 1998 |
|
- |
.project-page .item-title a:hover { text-decoration: underline; }
|
| 1999 |
|
- |
|
| 2000 |
|
- |
.project-page .item-meta {
|
| 2001 |
|
- |
font-size: var(--text-note);
|
| 2002 |
|
- |
opacity: 0.7;
|
| 2003 |
|
- |
margin-bottom: var(--gap-section);
|
| 2004 |
|
- |
}
|
| 2005 |
|
- |
|
| 2006 |
|
- |
.project-page .item-tags { margin-bottom: var(--gap-section); }
|
| 2007 |
|
- |
|
| 2008 |
|
- |
.project-page .item-description {
|
| 2009 |
|
- |
font-size: var(--text-note);
|
| 2010 |
|
- |
margin-bottom: var(--gap-section);
|
| 2011 |
|
- |
opacity: 0.8;
|
| 2012 |
|
- |
text-align: left;
|
| 2013 |
|
- |
flex-grow: 1;
|
| 2014 |
|
- |
}
|
| 2015 |
|
- |
|
| 2016 |
|
- |
.project-page .item-footer {
|
| 2017 |
|
- |
display: flex;
|
| 2018 |
|
- |
justify-content: space-between;
|
| 2019 |
|
- |
align-items: center;
|
| 2020 |
|
- |
margin-top: auto;
|
| 2021 |
|
- |
}
|
| 2022 |
|
- |
|
| 2023 |
|
- |
.project-page .item-price { font-size: var(--text-subhead); }
|
| 2024 |
|
- |
.project-page .item-stats { font-size: var(--text-note); opacity: 0.6; }
|
| 2025 |
|
- |
|
| 2026 |
|
- |
.project-page .store-footer {
|
| 2027 |
|
- |
margin-top: var(--gap-page);
|
| 2028 |
|
- |
padding-top: var(--gap-page);
|
| 2029 |
|
- |
border-top: 1px solid var(--border);
|
| 2030 |
|
- |
opacity: 0.6;
|
| 2031 |
|
- |
}
|
| 2032 |
|
- |
|
| 2033 |
|
- |
.project-page .store-footer a { color: var(--content); }
|
| 2034 |
|
- |
|
| 2035 |
|
- |
.project-page .item-content .btn-primary,
|
| 2036 |
|
- |
.project-page .item-content .btn-secondary {
|
| 2037 |
|
- |
width: 100%;
|
| 2038 |
|
- |
margin-top: var(--gap-section);
|
| 2039 |
|
- |
}
|
| 2040 |
|
- |
|
| 2041 |
|
- |
/* project.html allows .section-tabs to wrap (other pages don't). */
|
| 2042 |
|
- |
.project-page .section-tabs { flex-wrap: wrap; }
|
| 2043 |
|
- |
|
| 2044 |
|
- |
.project-page .tiers-section { margin-bottom: var(--gap-page); }
|
| 2045 |
|
- |
|
| 2046 |
|
- |
.project-page .tiers-grid {
|
| 2047 |
|
- |
display: grid;
|
| 2048 |
|
- |
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
| 2049 |
|
- |
gap: var(--gap-pane);
|
| 2050 |
|
- |
}
|
| 2051 |
|
- |
|
| 2052 |
|
- |
.project-page .tier-card {
|
| 2053 |
|
- |
background: var(--surface-overlay);
|
| 2054 |
|
- |
padding: var(--gap-page);
|
| 2055 |
|
- |
display: flex;
|
| 2056 |
|
- |
flex-direction: column;
|
| 2057 |
|
- |
}
|
| 2058 |
|
- |
|
| 2059 |
|
- |
.project-page .tier-name {
|
| 2060 |
|
- |
font-family: var(--font-display);
|
| 2061 |
|
- |
font-weight: bold;
|
| 2062 |
|
- |
font-size: var(--text-subhead);
|
| 2063 |
|
- |
margin-bottom: var(--gap-peer);
|
| 2064 |
|
- |
}
|
| 2065 |
|
- |
|
| 2066 |
|
- |
.project-page .tier-price {
|
| 2067 |
|
- |
font-size: var(--text-head);
|
| 2068 |
|
- |
margin-bottom: var(--gap-section);
|
| 2069 |
|
- |
}
|
| 2070 |
|
- |
|
| 2071 |
|
- |
.project-page .tier-description {
|
| 2072 |
|
- |
font-size: var(--text-note);
|
| 2073 |
|
- |
opacity: 0.8;
|
| 2074 |
|
- |
margin-bottom: var(--gap-pane);
|
| 2075 |
|
- |
flex-grow: 1;
|
| 2076 |
|
- |
text-align: left;
|
| 2077 |
|
- |
}
|
| 2078 |
|
- |
|
| 2079 |
|
- |
.project-page .tier-card form { margin-top: auto; }
|
| 2080 |
|
- |
.project-page .tier-card button,
|
| 2081 |
|
- |
.project-page .tier-card .btn-primary { width: 100%; }
|
| 2082 |
|
- |
|
| 2083 |
|
- |
.project-page .tier-active-badge {
|
| 2084 |
|
- |
font-size: var(--text-note);
|
| 2085 |
|
- |
padding: var(--gap-peer) var(--gap-section);
|
| 2086 |
|
- |
background: var(--surface-sunken);
|
| 2087 |
|
- |
text-align: center;
|
| 2088 |
|
- |
opacity: 0.7;
|
| 2089 |
|
- |
}
|
| 2090 |
|
- |
|
| 2091 |
|
- |
@media (max-width: 599px) {
|
| 2092 |
|
- |
.project-page .store-title { font-size: var(--text-title); }
|
| 2093 |
|
- |
.project-page a.item-thumbnail { height: 200px; }
|
| 2094 |
|
- |
.project-page .store-description { font-size: var(--text-body); }
|
| 2095 |
|
- |
}
|
|
1914 |
+ |
The store front is described (`src/quasi/project.rs`), so the header, the
|
|
1915 |
+ |
item cards, the two view copies, the tab strip and the tier cards are all
|
|
1916 |
+ |
the design system's markup now: a rule restating one of them fails the
|
|
1917 |
+ |
drift check in build.rs. What is this page's rather than the system's is
|
|
1918 |
+ |
how wide it runs, which is the measure on the body, and nothing else was
|
|
1919 |
+ |
left. */
|
| 2096 |
1920 |
|
|
| 2097 |
1921 |
|
/* ===========================================
|
| 2098 |
1922 |
|
LIBRARY DOWNLOADS PAGE
|
| 4363 |
4187 |
|
.library-page .library-downloads,
|
| 4364 |
4188 |
|
.library-page .downloads-hero,
|
| 4365 |
4189 |
|
.receipt-page .receipt-box,
|
| 4366 |
|
- |
.stripe-disclaimer-page .disclaimer-box,
|
| 4367 |
|
- |
.project-page .project-sections {
|
|
4190 |
+ |
.stripe-disclaimer-page .disclaimer-box {
|
| 4368 |
4191 |
|
padding: var(--gap-page);
|
| 4369 |
4192 |
|
margin-bottom: var(--gap-page);
|
| 4370 |
4193 |
|
}
|
| 7691 |
7514 |
|
border-top: 1px solid var(--border);
|
| 7692 |
7515 |
|
}
|
| 7693 |
7516 |
|
|
| 7694 |
|
- |
/* ── Tips ── */
|
| 7695 |
|
- |
|
| 7696 |
|
- |
.tip-section {
|
| 7697 |
|
- |
margin-top: var(--gap-section);
|
| 7698 |
|
- |
text-align: center;
|
| 7699 |
|
- |
}
|
| 7700 |
|
- |
|
| 7701 |
|
- |
.tip-toggle {
|
| 7702 |
|
- |
font-family: var(--font-mono);
|
| 7703 |
|
- |
font-size: var(--text-note);
|
| 7704 |
|
- |
padding: var(--gap-peer) var(--gap-pane);
|
| 7705 |
|
- |
background: none;
|
| 7706 |
|
- |
border: 1px solid var(--content);
|
| 7707 |
|
- |
color: var(--content);
|
| 7708 |
|
- |
cursor: pointer;
|
| 7709 |
|
- |
text-decoration: none;
|
| 7710 |
|
- |
display: inline-block;
|
| 7711 |
|
- |
}
|
| 7712 |
|
- |
|
| 7713 |
|
- |
.tip-toggle:hover {
|
| 7714 |
|
- |
background: var(--content);
|
| 7715 |
|
- |
color: var(--surface-page);
|
| 7716 |
|
- |
}
|
| 7717 |
|
- |
|
| 7718 |
|
- |
.tip-form {
|
| 7719 |
|
- |
margin-top: var(--gap-section);
|
| 7720 |
|
- |
display: flex;
|
| 7721 |
|
- |
flex-direction: column;
|
| 7722 |
|
- |
gap: var(--gap-section);
|
| 7723 |
|
- |
max-width: 300px;
|
| 7724 |
|
- |
margin-left: auto;
|
| 7725 |
|
- |
margin-right: auto;
|
| 7726 |
|
- |
text-align: left;
|
| 7727 |
|
- |
}
|
| 7728 |
|
- |
|
| 7729 |
|
- |
.tip-form.hidden {
|
| 7730 |
|
- |
display: none;
|
| 7731 |
|
- |
}
|
| 7732 |
|
- |
|
| 7733 |
|
- |
.tip-amount-row {
|
| 7734 |
|
- |
display: flex;
|
| 7735 |
|
- |
align-items: center;
|
| 7736 |
|
- |
gap: var(--gap-bound);
|
| 7737 |
|
- |
}
|
| 7738 |
|
- |
|
| 7739 |
|
- |
.tip-amount-row .pricing-currency {
|
| 7740 |
|
- |
font-size: var(--text-subhead);
|
| 7741 |
|
- |
opacity: 0.7;
|
| 7742 |
|
- |
}
|
| 7743 |
|
- |
|
| 7744 |
|
- |
.tip-amount-input {
|
| 7745 |
|
- |
width: 80px;
|
| 7746 |
|
- |
font-size: var(--text-subhead);
|
| 7747 |
|
- |
padding: var(--gap-peer);
|
| 7748 |
|
- |
border: 1px solid var(--border);
|
| 7749 |
|
- |
background: var(--surface-overlay);
|
| 7750 |
|
- |
font-family: var(--font-mono);
|
| 7751 |
|
- |
}
|
| 7752 |
|
- |
|
| 7753 |
|
- |
.tip-message-input {
|
| 7754 |
|
- |
width: 100%;
|
| 7755 |
|
- |
font-size: var(--text-note);
|
| 7756 |
|
- |
padding: var(--gap-peer);
|
| 7757 |
|
- |
border: 1px solid var(--border);
|
| 7758 |
|
- |
background: var(--surface-overlay);
|
| 7759 |
|
- |
font-family: var(--font-sans);
|
| 7760 |
|
- |
resize: vertical;
|
| 7761 |
|
- |
}
|
| 7762 |
|
- |
|
| 7763 |
|
- |
.tip-submit {
|
| 7764 |
|
- |
font-family: var(--font-mono);
|
| 7765 |
|
- |
font-size: var(--text-note);
|
| 7766 |
|
- |
padding: var(--gap-peer) var(--gap-section);
|
| 7767 |
|
- |
background: var(--content);
|
| 7768 |
|
- |
color: var(--surface-page);
|
| 7769 |
|
- |
border: none;
|
| 7770 |
|
- |
cursor: pointer;
|
| 7771 |
|
- |
}
|
| 7772 |
|
- |
|
| 7773 |
|
- |
.tip-submit:hover {
|
| 7774 |
|
- |
opacity: 0.85;
|
| 7775 |
|
- |
}
|
|
7517 |
+ |
/* The tip offer is described (`src/quasi/tip.rs`), so its button, its
|
|
7518 |
+ |
disclosure, its two fields and its submit are the design system's. What was
|
|
7519 |
+ |
here restated them, and a restated rule fails the drift check. */
|
| 7776 |
7520 |
|
|
| 7777 |
7521 |
|
/* ===========================================
|
| 7778 |
7522 |
|
COLLECTION PICKER (shared dropdown)
|
| 9221 |
8965 |
|
margin-top: var(--gap-bound);
|
| 9222 |
8966 |
|
}
|
| 9223 |
8967 |
|
|
| 9224 |
|
- |
/* ===========================================
|
| 9225 |
|
- |
PROJECT PAGE (replaces inline styles in pages/project.html)
|
| 9226 |
|
- |
=========================================== */
|
| 9227 |
|
- |
|
| 9228 |
|
- |
.project-page .store-cover {
|
| 9229 |
|
- |
width: 120px;
|
| 9230 |
|
- |
height: 120px;
|
| 9231 |
|
- |
border-radius: var(--radius-panel);
|
| 9232 |
|
- |
object-fit: cover;
|
| 9233 |
|
- |
margin-bottom: var(--gap-pane);
|
| 9234 |
|
- |
}
|
| 9235 |
|
- |
.project-page .follow-btn.is-selected {
|
| 9236 |
|
- |
opacity: 0.7;
|
| 9237 |
|
- |
}
|
| 9238 |
|
- |
.project-page .follower-count-muted {
|
| 9239 |
|
- |
font-size: var(--text-note);
|
| 9240 |
|
- |
opacity: 0.7;
|
| 9241 |
|
- |
padding: var(--gap-peer) 0;
|
| 9242 |
|
- |
}
|
| 9243 |
|
- |
.project-page .promo-details {
|
| 9244 |
|
- |
font-size: var(--text-note);
|
| 9245 |
|
- |
margin-bottom: var(--gap-peer);
|
| 9246 |
|
- |
}
|
| 9247 |
|
- |
.project-page .promo-details summary {
|
| 9248 |
|
- |
cursor: pointer;
|
| 9249 |
|
- |
opacity: 0.7;
|
| 9250 |
|
- |
}
|
| 9251 |
|
- |
.project-page .promo-input {
|
| 9252 |
|
- |
width: 100%;
|
| 9253 |
|
- |
margin-top: var(--gap-peer);
|
| 9254 |
|
- |
padding: var(--gap-bound) var(--gap-peer);
|
| 9255 |
|
- |
font-size: var(--text-note);
|
| 9256 |
|
- |
text-transform: uppercase;
|
| 9257 |
|
- |
}
|
| 9258 |
|
- |
.project-page .store-footer-links {
|
| 9259 |
|
- |
margin-top: var(--gap-peer);
|
| 9260 |
|
- |
}
|
| 9261 |
|
- |
|
| 9262 |
8968 |
|
/* ===========================================
|
| 9263 |
8969 |
|
INSERTION LIST (replaces inline styles in partials/insertion_list.html)
|
| 9264 |
8970 |
|
=========================================== */
|