| @@ -23,9 +23,11 @@ | ||
| 23 | 23 | |
| 24 | 24 | /* Focus state for select fields */ |
| 25 | 25 | select:focus { |
| 26 | 26 | background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%234f46e5' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); |
| 27 | -} | |
| 27 | + background-repeat: no-repeat; | |
| 28 | + background-position:right; | |
| 29 | + } | |
| 28 | 30 | |
| 29 | 31 | /* Specific styling for select fields with pr-10 class (which already has right padding) */ |
| 30 | 32 | select.pr-10 { |
| 31 | 33 | background-position: right 0.75rem center; |
| @@ -403,9 +405,15 @@ | ||
| 403 | 405 | |
| 404 | 406 | #wpbody-content { |
| 405 | 407 | display: flex; |
| 406 | 408 | flex-direction: column; |
| 407 | - height: 100vh; | |
| 409 | + /* Was `height: 100vh` — that pinned the container to exactly the | |
| 410 | + viewport and clipped any page longer than the viewport. Using | |
| 411 | + `min-height: 100vh` instead lets the column grow when content | |
| 412 | + overflows, while still giving short pages a full-viewport base | |
| 413 | + so .easy-invoice-admin (with `flex: 1` below in main-template.php) | |
| 414 | + fills the page background to the bottom edge. */ | |
| 415 | + min-height: 100vh; | |
| 408 | 416 | } |
| 409 | 417 | |
| 410 | 418 | .invoice-item.collapsed-item .item-content { |
| 411 | 419 | display: none; |
| @@ -891,5 +899,156 @@ | ||
| 891 | 899 | .license-status-badge { |
| 892 | 900 | font-size: 0.625rem; |
| 893 | 901 | padding: 0.125rem 0.375rem; |
| 894 | 902 | } |
| 895 | -} | |
| 903 | +} | |
| 904 | + | |
| 905 | +/* Dashboard / settings: negative margins for full-bleed bar inside padded shell */ | |
| 906 | +.easy-invoice-admin-page-header { | |
| 907 | + margin-left: -2rem; | |
| 908 | + margin-top: -2rem; | |
| 909 | + margin-right: -2rem; | |
| 910 | + padding-left: 2rem; | |
| 911 | + padding-right: 2rem; | |
| 912 | +} | |
| 913 | + | |
| 914 | +/* All primary list/settings/dashboard headers: same strip height as sidebar + builder */ | |
| 915 | +body.easy-invoice-admin-body .ei-app-page-header { | |
| 916 | + box-sizing: border-box; | |
| 917 | + height: var(--ei-app-header-strip-height, 6.5rem); | |
| 918 | + min-height: var(--ei-app-header-strip-height, 6.5rem); | |
| 919 | + max-height: var(--ei-app-header-strip-height, 6.5rem); | |
| 920 | + display: flex; | |
| 921 | + flex-direction: column; | |
| 922 | + justify-content: center; | |
| 923 | + overflow: hidden; | |
| 924 | + padding-top: 0; | |
| 925 | + padding-bottom: 0; | |
| 926 | +} | |
| 927 | + | |
| 928 | +body.easy-invoice-admin-body .ei-app-page-header > div { | |
| 929 | + width: 100%; | |
| 930 | + min-height: 0; | |
| 931 | + flex: 0 1 auto; | |
| 932 | + display: flex; | |
| 933 | + align-items: center; | |
| 934 | + justify-content: space-between; | |
| 935 | + gap: 1rem; | |
| 936 | +} | |
| 937 | + | |
| 938 | +body.easy-invoice-admin-body .ei-app-page-header h1 { | |
| 939 | + font-size: 1.25rem; | |
| 940 | + line-height: 1.3; | |
| 941 | + font-weight: 700; | |
| 942 | +} | |
| 943 | + | |
| 944 | +body.easy-invoice-admin-body .ei-app-page-header p.text-sm, | |
| 945 | +body.easy-invoice-admin-body .ei-app-page-header .text-sm.text-gray-500 { | |
| 946 | + margin-top: 0.125rem; | |
| 947 | + font-size: 0.75rem; | |
| 948 | + line-height: 1.25; | |
| 949 | +} | |
| 950 | + | |
| 951 | +.easy-invoice-chart-wrap { | |
| 952 | + height: 300px; | |
| 953 | + position: relative; | |
| 954 | +} | |
| 955 | + | |
| 956 | +.easy-invoice-chart-canvas { | |
| 957 | + width: 100% !important; | |
| 958 | + height: 100% !important; | |
| 959 | +} | |
| 960 | + | |
| 961 | +/* Accessibility: skip link */ | |
| 962 | +.easy-invoice-admin .screen-reader-text { | |
| 963 | + border: 0; | |
| 964 | + clip: rect(1px, 1px, 1px, 1px); | |
| 965 | + clip-path: inset(50%); | |
| 966 | + height: 1px; | |
| 967 | + margin: -1px; | |
| 968 | + overflow: hidden; | |
| 969 | + padding: 0; | |
| 970 | + position: absolute !important; | |
| 971 | + width: 1px; | |
| 972 | + word-wrap: normal !important; | |
| 973 | +} | |
| 974 | + | |
| 975 | +.easy-invoice-admin .easy-invoice-skip-link:focus { | |
| 976 | + background: #fff; | |
| 977 | + border-radius: 0.375rem; | |
| 978 | + box-shadow: 0 0 0 2px #4f46e5, 0 4px 6px -1px rgba(0, 0, 0, 0.1); | |
| 979 | + clip: auto !important; | |
| 980 | + clip-path: none; | |
| 981 | + color: #1f2937; | |
| 982 | + display: block; | |
| 983 | + font-size: 0.875rem; | |
| 984 | + font-weight: 600; | |
| 985 | + height: auto; | |
| 986 | + left: 1rem; | |
| 987 | + line-height: 1.25; | |
| 988 | + padding: 0.75rem 1rem; | |
| 989 | + text-decoration: none; | |
| 990 | + top: 1rem; | |
| 991 | + width: auto; | |
| 992 | + z-index: 100000; | |
| 993 | +} | |
| 994 | + | |
| 995 | +.easy-invoice-admin nav a:focus-visible { | |
| 996 | + outline: 2px solid #4f46e5; | |
| 997 | + outline-offset: 2px; | |
| 998 | +} | |
| 999 | + | |
| 1000 | +/* | |
| 1001 | + * Sidebar branding strip + builder top bar: one shared height so the bottom borders line up. | |
| 1002 | + * Variable is on body (sidebar sits outside .easy-invoice-admin, so do not scope only there). | |
| 1003 | + * Uses px-friendly rem; max-height + overflow keep Pro toolbar from growing the bar. | |
| 1004 | + */ | |
| 1005 | +body.easy-invoice-admin-body { | |
| 1006 | + /* Shared by sidebar branding, builder bar, and list/dashboard page headers */ | |
| 1007 | + --ei-app-header-strip-height: 6.5rem; | |
| 1008 | +} | |
| 1009 | + | |
| 1010 | +body.easy-invoice-admin-body .ei-app-sidebar-top { | |
| 1011 | + box-sizing: border-box; | |
| 1012 | + flex-shrink: 0; | |
| 1013 | + height: var(--ei-app-header-strip-height); | |
| 1014 | + min-height: var(--ei-app-header-strip-height); | |
| 1015 | + max-height: var(--ei-app-header-strip-height); | |
| 1016 | + overflow: hidden; | |
| 1017 | +} | |
| 1018 | + | |
| 1019 | +@media (min-width: 1024px) { | |
| 1020 | + body.easy-invoice-admin-body .ei-invoice-builder-header.ei-app-header-sync, | |
| 1021 | + body.easy-invoice-admin-body .ei-quote-builder-header.ei-app-header-sync { | |
| 1022 | + box-sizing: border-box; | |
| 1023 | + flex-shrink: 0; | |
| 1024 | + height: var(--ei-app-header-strip-height); | |
| 1025 | + min-height: var(--ei-app-header-strip-height); | |
| 1026 | + max-height: var(--ei-app-header-strip-height); | |
| 1027 | + /* Allow dropdowns/popovers (e.g. Pro deposit info) to extend below the strip; clip tall content on the title column instead (.ei-app-header-leading). */ | |
| 1028 | + overflow: visible; | |
| 1029 | + } | |
| 1030 | + | |
| 1031 | + body.easy-invoice-admin-body .ei-app-header-sync .ei-app-header-leading { | |
| 1032 | + min-height: 0; | |
| 1033 | + min-width: 0; | |
| 1034 | + overflow: hidden; | |
| 1035 | + } | |
| 1036 | + | |
| 1037 | + body.easy-invoice-admin-body .ei-app-header-sync > .max-w-full { | |
| 1038 | + display: flex; | |
| 1039 | + align-items: center; | |
| 1040 | + height: 100%; | |
| 1041 | + min-height: 0; | |
| 1042 | + } | |
| 1043 | + | |
| 1044 | + body.easy-invoice-admin-body .ei-app-header-sync .ei-app-header-inner { | |
| 1045 | + align-items: center; | |
| 1046 | + width: 100%; | |
| 1047 | + min-height: 0; | |
| 1048 | + } | |
| 1049 | + | |
| 1050 | + body.easy-invoice-admin-body .ei-app-header-sync .ei-builder-header-actions, | |
| 1051 | + body.easy-invoice-admin-body .ei-app-header-sync .ei-builder-header-actions > * { | |
| 1052 | + max-height: 100%; | |
| 1053 | + } | |
| 1054 | +} | |
