mirror of https://github.com/zulip/zulip.git
348 lines
10 KiB
CSS
348 lines
10 KiB
CSS
.showing-cloud .zulip-plans-comparison {
|
|
display: none;
|
|
}
|
|
|
|
.zulip-plans-comparison {
|
|
--color-heading-text: hsl(0deg 0% 100%);
|
|
--color-table-text: hsl(223deg 40% 25%);
|
|
--color-table-background: hsl(0deg 0% 100% / 80%);
|
|
--color-table-link: hsl(210deg 94% 30%);
|
|
--color-table-link-hover: hsl(210deg 100% 45%);
|
|
--color-table-link-active: hsl(210deg 100% 40%);
|
|
--color-table-link-decoration: hsl(210deg 94% 30% / 20%);
|
|
--color-table-link-decoration-hover: hsl(210deg 100% 45% / 70%);
|
|
--color-table-link-decoration-active: hsl(210deg 100% 40%);
|
|
--border-radius-table: 11px;
|
|
|
|
.icon-infinity {
|
|
--icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e%3cpath fill='black' fill-rule='evenodd' d='M2.464 8.464A5 5 0 0 1 6 7c2.16 0 4.155 1.251 6 3.4C13.845 8.251 15.84 7 18 7a5 5 0 1 1 0 10c-2.16 0-4.155-1.251-6-3.4-1.845 2.149-3.84 3.4-6 3.4a5 5 0 0 1-3.536-8.536ZM10.731 12C8.983 9.857 7.4 9 6 9a3 3 0 1 0 0 6c1.4 0 2.983-.857 4.731-3Zm2.538 0c1.748 2.143 3.331 3 4.731 3a3 3 0 0 0 0-6c-1.4 0-2.983.857-4.731 3Z' clip-rule='evenodd'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
.icon-check {
|
|
--icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e%3cpath fill='black' fill-rule='evenodd' d='M20.707 5.793a1 1 0 0 1 0 1.414l-11 11a1 1 0 0 1-1.414 0l-5-5a1 1 0 1 1 1.414-1.414L9 16.086 19.293 5.793a1 1 0 0 1 1.414 0Z' clip-rule='evenodd'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
.icon-x {
|
|
--icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e%3cpath fill='black' d='M18.707 6.707a1 1 0 0 0-1.414-1.414L12 10.586 6.707 5.293a1 1 0 0 0-1.414 1.414L10.586 12l-5.293 5.293a1 1 0 1 0 1.414 1.414L12 13.414l5.293 5.293a1 1 0 0 0 1.414-1.414L13.414 12l5.293-5.293Z'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
.icon-wrench {
|
|
--icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' viewBox='0 0 24 24'%3e%3cpath fill='black' fill-rule='evenodd' d='M16.578 3.36a5.25 5.25 0 0 0-5.866 7.302.75.75 0 0 1-.153.84l-6.91 6.91a1.371 1.371 0 0 0 1.94 1.94l6.91-6.91a.75.75 0 0 1 .839-.154 5.25 5.25 0 0 0 7.301-5.866l-2.915 2.915a1.75 1.75 0 0 1-2.45 0l-.006-.005-1.605-1.606a1.75 1.75 0 0 1 0-2.45l.005-.005 2.91-2.91Zm-2.293-1.503a6.75 6.75 0 0 1 3.993.491.75.75 0 0 1 .22 1.214l-3.766 3.766a.25.25 0 0 0 0 .347l1.593 1.593a.25.25 0 0 0 .347 0L20.438 5.5a.75.75 0 0 1 1.214.221 6.75 6.75 0 0 1-8.445 9.131l-6.557 6.56a2.871 2.871 0 1 1-4.06-4.06l6.558-6.56a6.75 6.75 0 0 1 5.138-8.935Z' clip-rule='evenodd'/%3e%3c/svg%3e");
|
|
}
|
|
|
|
.icon {
|
|
vertical-align: middle;
|
|
display: inline-block;
|
|
flex-shrink: 0;
|
|
background-color: currentcolor;
|
|
mask-position: center;
|
|
mask-repeat: no-repeat;
|
|
mask-image: var(--icon);
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.icon-with-copy {
|
|
/* Treat copy and a nearby icon as
|
|
a unit when reflowing text for narrower
|
|
viewports. */
|
|
display: inline-block;
|
|
}
|
|
|
|
h2 {
|
|
font-family: var(--font-ss3);
|
|
font-weight: 450;
|
|
font-size: 44px;
|
|
line-height: 120%;
|
|
text-align: center;
|
|
margin: 64px 0 10px;
|
|
color: var(--color-heading-text);
|
|
}
|
|
|
|
.h2-subheader {
|
|
font-family: var(--font-ops);
|
|
font-weight: 400;
|
|
font-size: 16px;
|
|
line-height: 145%;
|
|
text-align: center;
|
|
color: var(--color-heading-text);
|
|
/* Let subheader text fill the same area as
|
|
text in the comparison table below. */
|
|
padding: 0 14px;
|
|
|
|
a {
|
|
color: inherit;
|
|
border-bottom: 1px solid hsl(0deg 0% 100% / 50%) !important;
|
|
transition: border 0.4s ease-out;
|
|
|
|
&:hover {
|
|
border-bottom: 2px solid hsl(0deg 0% 100%) !important;
|
|
transition: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.comparison-table {
|
|
font-family: var(--font-ss3);
|
|
font-size: 16px;
|
|
line-height: 18px;
|
|
text-align: center;
|
|
border-collapse: collapse;
|
|
margin: 24px auto 48px;
|
|
border-radius: var(--border-radius-table);
|
|
color: var(--color-table-text);
|
|
background: var(--color-table-background);
|
|
}
|
|
|
|
.comparison-table a {
|
|
color: var(--color-table-link);
|
|
text-decoration: underline !important;
|
|
text-underline-offset: 4px;
|
|
text-decoration-thickness: 1px;
|
|
text-decoration-color: var(--color-table-link-decoration);
|
|
}
|
|
|
|
.comparison-table a:hover {
|
|
text-decoration: underline !important;
|
|
color: var(--color-table-link-hover);
|
|
text-decoration-color: var(--color-table-link-decoration-hover);
|
|
}
|
|
|
|
.comparison-table a:active {
|
|
text-decoration: underline !important;
|
|
color: !important;
|
|
text-decoration-color: var(--color-table-link-decoration-active);
|
|
}
|
|
|
|
.comparison-table tr {
|
|
transition: all 200ms ease-out;
|
|
}
|
|
|
|
.comparison-table tr:hover {
|
|
background-color: hsl(0deg 0% 100% / 30%);
|
|
}
|
|
|
|
.comparison-table th:first-child {
|
|
border-top-left-radius: var(--border-radius-table);
|
|
}
|
|
|
|
.comparison-table th:last-child {
|
|
border-top-right-radius: var(--border-radius-table);
|
|
}
|
|
|
|
.comparison-table th,
|
|
.comparison-table .subheader {
|
|
position: sticky;
|
|
font-weight: 700;
|
|
color: hsl(223deg 40% 30% / 100%);
|
|
background: hsl(209deg 41% 94%);
|
|
transition: all 200ms ease-out;
|
|
}
|
|
|
|
.subheader-filler {
|
|
background: hsl(209deg 41% 94%);
|
|
}
|
|
|
|
.comparison-table th {
|
|
padding: 12px 2px 10px;
|
|
top: 60px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.comparison-table td.subheader.comparison-table-feature {
|
|
font-weight: 600;
|
|
color: hsl(223deg 40% 30% / 80%);
|
|
top: 60px;
|
|
z-index: 2;
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
text-transform: uppercase;
|
|
font-size: 15px;
|
|
letter-spacing: 0.1ch;
|
|
}
|
|
|
|
.comparison-table th.sticky {
|
|
padding: 8px 2px;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.comparison-table td {
|
|
padding: 8px;
|
|
border-top: 1px solid hsl(209deg 40% 40% / 30%);
|
|
line-height: 18px;
|
|
}
|
|
|
|
.comparison-table colgroup col:first-child {
|
|
width: 340px;
|
|
}
|
|
|
|
.comparison-table colgroup col {
|
|
width: 112px;
|
|
}
|
|
|
|
.comparison-table th.comparison-table-feature,
|
|
.comparison-table td.comparison-table-feature {
|
|
text-align: left;
|
|
padding-left: 14px;
|
|
}
|
|
|
|
.comparison-table td.comparison-table-feature {
|
|
color: hsl(223deg 40% 16%);
|
|
}
|
|
|
|
.comparison-table-feature-desc {
|
|
font-size: 14px;
|
|
opacity: 0.7;
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.comparison-value-positive {
|
|
color: hsl(147deg 80% 29% / 100%);
|
|
position: relative;
|
|
}
|
|
|
|
.comparison-value-warning {
|
|
color: hsl(42deg 85% 35% / 100%);
|
|
position: relative;
|
|
}
|
|
|
|
.comparison-value-negative {
|
|
color: hsl(224deg 8% 50% / 100%);
|
|
position: relative;
|
|
}
|
|
|
|
.comparison-value-positive::after,
|
|
.comparison-value-warning::after,
|
|
.comparison-value-negative::after {
|
|
content: attr(data-title);
|
|
white-space: nowrap;
|
|
font-size: 14px;
|
|
line-height: 14px;
|
|
font-weight: 400;
|
|
display: block;
|
|
padding: 2px 4px;
|
|
border-radius: 5px;
|
|
background-color: hsl(208deg 43% 93%);
|
|
/* the color of mixed hover row with bg */
|
|
position: absolute;
|
|
top: calc(50% + 11px);
|
|
left: 50%;
|
|
/* Keep tooltips over top of other elements,
|
|
including the headers within the table. */
|
|
z-index: 3;
|
|
transform: translateX(-50%);
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition:
|
|
visibility 301s linear,
|
|
opacity 250ms ease-out;
|
|
}
|
|
|
|
.comparison-value-positive:hover::after,
|
|
.comparison-value-warning:hover::after,
|
|
.comparison-value-negative:hover::after {
|
|
transition:
|
|
visibility 0s linear,
|
|
opacity 250ms ease-out;
|
|
transition-delay: 200ms;
|
|
visibility: visible;
|
|
opacity: 1;
|
|
}
|
|
|
|
@media (width <= 940px) {
|
|
h1 {
|
|
font-size: 40px;
|
|
}
|
|
|
|
.h1-subheader {
|
|
font-size: 16px;
|
|
}
|
|
|
|
h2 {
|
|
font-size: 32px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.h2-subheader {
|
|
font-size: 14px;
|
|
}
|
|
}
|
|
|
|
@media (width <= 730px) {
|
|
.comparison-table th,
|
|
.comparison-table th.sticky {
|
|
font-size: 14px;
|
|
line-height: 16px;
|
|
box-sizing: border-box;
|
|
height: 44px;
|
|
padding: 4px 2px;
|
|
}
|
|
|
|
.comparison-table td {
|
|
font-size: 14px;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.comparison-table td.subheader.comparison-table-feature {
|
|
font-size: 13px;
|
|
line-height: 16px;
|
|
box-sizing: border-box;
|
|
height: 44px;
|
|
padding-bottom: 4px;
|
|
padding-top: 4px;
|
|
}
|
|
|
|
.comparison-table td.comparison-table-feature {
|
|
font-size: 14px;
|
|
}
|
|
|
|
.comparison-table-feature-desc {
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
}
|
|
}
|
|
|
|
@media (width <= 500px) {
|
|
.comparison-table th,
|
|
.comparison-table th.sticky {
|
|
font-size: 13px;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.comparison-table th.comparison-table-feature,
|
|
.comparison-table td.comparison-table-feature {
|
|
padding-left: 8px;
|
|
}
|
|
|
|
.comparison-table td {
|
|
padding: 4px 2px;
|
|
border-top: 1px solid hsl(209deg 40% 40% / 30%);
|
|
line-height: 18px;
|
|
}
|
|
|
|
.comparison-table td.comparison-value-positive,
|
|
.comparison-table td.comparison-value-warning,
|
|
.comparison-table td.comparison-value-negative {
|
|
font-size: 13px;
|
|
line-height: 14px;
|
|
}
|
|
|
|
.comparison-value-positive::after,
|
|
.comparison-value-warning::after,
|
|
.comparison-value-negative::after {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* No header to accommodate on self-hosted realms,
|
|
so keep sticky headers at the top of the viewport. */
|
|
.zulip-plans-comparison.is-self-hosted-realm {
|
|
.comparison-table {
|
|
th,
|
|
td.subheader.comparison-table-feature {
|
|
top: 0;
|
|
}
|
|
}
|
|
}
|