|
|
| (24 intermediate revisions by the same user not shown) |
| Line 1: |
Line 1: |
| /* Roovet Data main page design */
| |
| .rd-main {
| |
| --rd-red: #d71920;
| |
| --rd-red-dark: #a90f16;
| |
| --rd-blue: #3156a3;
| |
| --rd-green: #2f7d4f;
| |
| --rd-ink: #1f2937;
| |
| --rd-muted: #5f6b7a;
| |
| --rd-line: #d8dee8;
| |
| --rd-soft: #f6f8fb;
| |
| --rd-white: #fff;
| |
| max-width: 1160px;
| |
| margin: 0 auto;
| |
| padding: 12px 0 32px;
| |
| color: var(--rd-ink);
| |
| }
| |
|
| |
|
| .rd-main * {
| |
| box-sizing: border-box;
| |
| }
| |
|
| |
| .rd-hero {
| |
| position: relative;
| |
| overflow: hidden;
| |
| padding: 42px;
| |
| border: 1px solid var(--rd-line);
| |
| border-radius: 8px;
| |
| background:
| |
| radial-gradient(circle at top right, rgba(215, 25, 32, .14), transparent 34%),
| |
| linear-gradient(135deg, #ffffff 0%, #f5f7fb 58%, #eef2f8 100%);
| |
| box-shadow: 0 14px 40px rgba(31, 41, 55, .08);
| |
| }
| |
|
| |
| .rd-hero:before {
| |
| content: "";
| |
| position: absolute;
| |
| inset: auto -80px -130px auto;
| |
| width: 340px;
| |
| height: 340px;
| |
| border-radius: 999px;
| |
| background: rgba(49, 86, 163, .11);
| |
| }
| |
|
| |
| .rd-hero-kicker {
| |
| display: inline-flex;
| |
| align-items: center;
| |
| gap: 8px;
| |
| margin-bottom: 12px;
| |
| padding: 7px 12px;
| |
| border: 1px solid rgba(215, 25, 32, .24);
| |
| border-radius: 999px;
| |
| background: rgba(255, 255, 255, .82);
| |
| color: var(--rd-red-dark);
| |
| font-size: 13px;
| |
| font-weight: 700;
| |
| letter-spacing: .04em;
| |
| text-transform: uppercase;
| |
| }
| |
|
| |
| .rd-hero h1 {
| |
| margin: 0;
| |
| font-size: clamp(32px, 5vw, 58px);
| |
| line-height: 1.02;
| |
| letter-spacing: -.04em;
| |
| color: #111827;
| |
| border: 0;
| |
| }
| |
|
| |
| .rd-hero-lede {
| |
| max-width: 820px;
| |
| margin: 18px 0 24px;
| |
| color: var(--rd-muted);
| |
| font-size: 18px;
| |
| line-height: 1.62;
| |
| }
| |
|
| |
| .rd-search-card {
| |
| position: relative;
| |
| max-width: 760px;
| |
| padding: 10px;
| |
| border: 1px solid var(--rd-line);
| |
| border-radius: 8px;
| |
| background: rgba(255, 255, 255, .94);
| |
| box-shadow: 0 10px 30px rgba(31, 41, 55, .08);
| |
| }
| |
|
| |
| .rd-search-form {
| |
| display: flex;
| |
| gap: 10px;
| |
| }
| |
|
| |
| .rd-search-form input[type="search"] {
| |
| min-width: 0;
| |
| flex: 1;
| |
| padding: 14px 16px;
| |
| border: 1px solid #ccd4df;
| |
| border-radius: 6px;
| |
| color: #111827;
| |
| font-size: 16px;
| |
| background: #fff;
| |
| }
| |
|
| |
| .rd-search-form button {
| |
| padding: 13px 18px;
| |
| border: 0;
| |
| border-radius: 6px;
| |
| background: var(--rd-red);
| |
| color: #fff;
| |
| font-weight: 700;
| |
| cursor: pointer;
| |
| }
| |
|
| |
| .rd-search-form button:hover {
| |
| background: var(--rd-red-dark);
| |
| }
| |
|
| |
| .rd-hero-actions {
| |
| display: flex;
| |
| flex-wrap: wrap;
| |
| gap: 8px;
| |
| margin-top: 18px;
| |
| }
| |
|
| |
| .rd-chip {
| |
| display: inline-flex;
| |
| padding: 7px 10px;
| |
| border: 1px solid var(--rd-line);
| |
| border-radius: 999px;
| |
| background: rgba(255, 255, 255, .78);
| |
| color: #334155;
| |
| font-size: 13px;
| |
| font-weight: 600;
| |
| }
| |
|
| |
| .rd-stat-row {
| |
| display: grid;
| |
| grid-template-columns: repeat(4, minmax(0, 1fr));
| |
| gap: 12px;
| |
| margin: 16px 0;
| |
| }
| |
|
| |
| .rd-stat {
| |
| padding: 20px;
| |
| border: 1px solid var(--rd-line);
| |
| border-radius: 8px;
| |
| background: var(--rd-white);
| |
| }
| |
|
| |
| .rd-stat strong {
| |
| display: block;
| |
| color: #111827;
| |
| font-size: 26px;
| |
| line-height: 1;
| |
| }
| |
|
| |
| .rd-stat span {
| |
| display: block;
| |
| margin-top: 7px;
| |
| color: var(--rd-muted);
| |
| font-size: 13px;
| |
| font-weight: 700;
| |
| text-transform: uppercase;
| |
| letter-spacing: .04em;
| |
| }
| |
|
| |
| .rd-grid {
| |
| display: grid;
| |
| gap: 16px;
| |
| margin-top: 16px;
| |
| }
| |
|
| |
| .rd-grid-3 {
| |
| grid-template-columns: repeat(3, minmax(0, 1fr));
| |
| }
| |
|
| |
| .rd-grid-2 {
| |
| grid-template-columns: repeat(2, minmax(0, 1fr));
| |
| }
| |
|
| |
| .rd-card,
| |
| .rd-panel,
| |
| .rd-bottom {
| |
| border: 1px solid var(--rd-line);
| |
| border-radius: 8px;
| |
| background: var(--rd-white);
| |
| box-shadow: 0 8px 24px rgba(31, 41, 55, .05);
| |
| }
| |
|
| |
| .rd-card {
| |
| padding: 24px;
| |
| border-top: 5px solid var(--rd-blue);
| |
| }
| |
|
| |
| .rd-card-red {
| |
| border-top-color: var(--rd-red);
| |
| }
| |
|
| |
| .rd-card-green {
| |
| border-top-color: var(--rd-green);
| |
| }
| |
|
| |
| .rd-card h2,
| |
| .rd-panel h3,
| |
| .rd-bottom h2,
| |
| .rd-section-title h2 {
| |
| margin-top: 0;
| |
| color: #111827;
| |
| border: 0;
| |
| }
| |
|
| |
| .rd-card p,
| |
| .rd-panel p,
| |
| .rd-bottom p,
| |
| .rd-section-title p {
| |
| color: var(--rd-muted);
| |
| line-height: 1.58;
| |
| }
| |
|
| |
| .rd-card ul {
| |
| margin: 18px 0 0;
| |
| padding: 0;
| |
| list-style: none;
| |
| }
| |
|
| |
| .rd-card li {
| |
| margin: 9px 0;
| |
| padding-left: 18px;
| |
| position: relative;
| |
| }
| |
|
| |
| .rd-card li:before {
| |
| content: "›";
| |
| position: absolute;
| |
| left: 0;
| |
| color: var(--rd-red);
| |
| font-weight: 800;
| |
| }
| |
|
| |
| .rd-main a {
| |
| color: #214f99;
| |
| font-weight: 650;
| |
| text-decoration: none;
| |
| }
| |
|
| |
| .rd-main a:hover {
| |
| text-decoration: underline;
| |
| }
| |
|
| |
| .rd-section-title {
| |
| margin: 30px 0 12px;
| |
| padding: 0 4px;
| |
| }
| |
|
| |
| .rd-section-title h2 {
| |
| font-size: 28px;
| |
| }
| |
|
| |
| .rd-panel {
| |
| padding: 22px;
| |
| background: linear-gradient(180deg, #fff, #fafbfe);
| |
| }
| |
|
| |
| .rd-bottom {
| |
| display: grid;
| |
| grid-template-columns: 1.3fr .7fr;
| |
| gap: 20px;
| |
| align-items: center;
| |
| margin-top: 18px;
| |
| padding: 26px;
| |
| background:
| |
| linear-gradient(135deg, rgba(215, 25, 32, .08), rgba(49, 86, 163, .08)),
| |
| #fff;
| |
| }
| |
|
| |
| .rd-bottom-links {
| |
| display: grid;
| |
| gap: 10px;
| |
| }
| |
|
| |
| .rd-bottom-links a {
| |
| display: block;
| |
| padding: 12px 14px;
| |
| border: 1px solid var(--rd-line);
| |
| border-radius: 6px;
| |
| background: #fff;
| |
| }
| |
|
| |
| @media (max-width: 900px) {
| |
| .rd-hero {
| |
| padding: 28px;
| |
| }
| |
|
| |
| .rd-stat-row,
| |
| .rd-grid-3,
| |
| .rd-grid-2,
| |
| .rd-bottom {
| |
| grid-template-columns: 1fr;
| |
| }
| |
|
| |
| .rd-search-form {
| |
| flex-direction: column;
| |
| }
| |
|
| |
| .rd-search-form button {
| |
| width: 100%;
| |
| }
| |
| }
| |
|
| |
| /* Roovet Data Vector UI fixes START */
| |
| /* Fix top-right account links, overflow menu spacing, and Vector 2022 Tools dropdown layout. */
| |
|
| |
| .skin-vector-2022 .vector-user-links,
| |
| .skin-vector-2022 .vector-user-links .vector-menu-content,
| |
| .skin-vector-2022 .vector-user-links .vector-menu-content-list {
| |
| display: flex !important;
| |
| align-items: center !important;
| |
| gap: 12px !important;
| |
| white-space: nowrap !important;
| |
| }
| |
|
| |
| .skin-vector-2022 .vector-user-links .mw-list-item,
| |
| .skin-vector-2022 #p-personal .mw-list-item,
| |
| .skin-vector-2022 #p-personal-more .mw-list-item {
| |
| display: inline-flex !important;
| |
| align-items: center !important;
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| }
| |
|
| |
| .skin-vector-2022 .vector-user-links .mw-list-item a,
| |
| .skin-vector-2022 #p-personal .mw-list-item a,
| |
| .skin-vector-2022 #p-personal-more .mw-list-item a {
| |
| display: inline-flex !important;
| |
| align-items: center !important;
| |
| min-height: 32px !important;
| |
| padding: 0 4px !important;
| |
| line-height: 1.4 !important;
| |
| text-decoration: none;
| |
| }
| |
|
| |
| .skin-vector-2022 #pt-createaccount a {
| |
| margin-right: 8px !important;
| |
| }
| |
|
| |
| .skin-vector-2022 #pt-login a {
| |
| margin-left: 4px !important;
| |
| }
| |
|
| |
| /* Prevent decorative/user icons from sitting on top of account links. */
| |
| .skin-vector-2022 .vector-user-links .vector-icon,
| |
| .skin-vector-2022 #p-personal .vector-icon {
| |
| flex: 0 0 auto !important;
| |
| margin-right: 6px !important;
| |
| }
| |
|
| |
| /* Keep the three-dot menu separated from Log in. */
| |
| .skin-vector-2022 #p-personal-more,
| |
| .skin-vector-2022 #p-personal-more-checkbox,
| |
| .skin-vector-2022 .vector-user-menu-more {
| |
| margin-left: 10px !important;
| |
| }
| |
|
| |
| /* Tools dropdown: restore normal dropdown stacking and prevent overlap with page content. */
| |
| .skin-vector-2022 .vector-dropdown .vector-dropdown-content,
| |
| .skin-vector-2022 .vector-page-tools-landmark .vector-dropdown-content,
| |
| .skin-vector-2022 #p-cactions .vector-dropdown-content,
| |
| .skin-vector-2022 #p-tb .vector-dropdown-content,
| |
| .skin-vector-2022 #p-associated-pages .vector-dropdown-content {
| |
| position: absolute !important;
| |
| top: 100% !important;
| |
| right: 0 !important;
| |
| left: auto !important;
| |
| z-index: 99999 !important;
| |
| width: 320px !important;
| |
| min-width: 320px !important;
| |
| max-width: 92vw !important;
| |
| height: auto !important;
| |
| min-height: 0 !important;
| |
| max-height: none !important;
| |
| overflow: visible !important;
| |
| padding: 18px 0 !important;
| |
| background: #fff !important;
| |
| border: 1px solid #a2a9b1 !important;
| |
| box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16) !important;
| |
| }
| |
|
| |
| /* Remove collapsed/floating behavior inside dropdown panels. */
| |
| .skin-vector-2022 .vector-dropdown-content *,
| |
| .skin-vector-2022 #p-cactions .vector-dropdown-content *,
| |
| .skin-vector-2022 #p-tb .vector-dropdown-content * {
| |
| float: none !important;
| |
| position: static;
| |
| transform: none !important;
| |
| }
| |
|
| |
| /* Dropdown section headings like Tools, Actions, General. */
| |
| .skin-vector-2022 .vector-dropdown-content .vector-menu-heading,
| |
| .skin-vector-2022 .vector-dropdown-content h3,
| |
| .skin-vector-2022 .vector-dropdown-content .vector-menu-heading-label {
| |
| display: block !important;
| |
| clear: both !important;
| |
| margin: 10px 22px 8px !important;
| |
| padding: 0 0 8px !important;
| |
| border-bottom: 1px solid #eaecf0 !important;
| |
| color: #202122 !important;
| |
| font-size: 18px !important;
| |
| font-weight: 700 !important;
| |
| line-height: 1.25 !important;
| |
| }
| |
|
| |
| /* Dropdown lists should stack vertically. */
| |
| .skin-vector-2022 .vector-dropdown-content .vector-menu-content,
| |
| .skin-vector-2022 .vector-dropdown-content .vector-menu-content-list,
| |
| .skin-vector-2022 .vector-dropdown-content ul {
| |
| display: block !important;
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| height: auto !important;
| |
| overflow: visible !important;
| |
| }
| |
|
| |
| .skin-vector-2022 .vector-dropdown-content .mw-list-item,
| |
| .skin-vector-2022 .vector-dropdown-content li {
| |
| display: block !important;
| |
| clear: both !important;
| |
| width: 100% !important;
| |
| margin: 0 !important;
| |
| padding: 0 !important;
| |
| line-height: normal !important;
| |
| }
| |
|
| |
| .skin-vector-2022 .vector-dropdown-content .mw-list-item a,
| |
| .skin-vector-2022 .vector-dropdown-content li a {
| |
| display: block !important;
| |
| width: auto !important;
| |
| min-height: 0 !important;
| |
| padding: 9px 22px !important;
| |
| color: #36c !important;
| |
| font-size: 16px !important;
| |
| line-height: 1.35 !important;
| |
| white-space: normal !important;
| |
| text-decoration: none !important;
| |
| }
| |
|
| |
| .skin-vector-2022 .vector-dropdown-content .mw-list-item a:hover,
| |
| .skin-vector-2022 .vector-dropdown-content li a:hover {
| |
| background: #f8f9fa !important;
| |
| text-decoration: underline !important;
| |
| }
| |
|
| |
| /* Keep page tabs above content but below dropdowns. */
| |
| .skin-vector-2022 .vector-page-toolbar,
| |
| .skin-vector-2022 .vector-page-titlebar-toc,
| |
| .skin-vector-2022 .vector-page-titlebar {
| |
| z-index: 50 !important;
| |
| }
| |
|
| |
| /* Roovet Data Vector UI fixes END */
| |
|
| |
| /* Roovet Data CSS cache refresh: 1778360196 */
| |
