profile-pane 3.1.4 → 3.2.0

package/lib/styles/profileRDFFormsEnforced.css

@@ -1,427 +0,0 @@
-/* Delete pop up*/
-/* Make the Solid-UI delete confirmation popup appear near the last click position.
-   Keep the built-in Solid-UI styling (orange border, white background) so it looks like the original.
-*/
-.profile-grid div[style*="position: relative"] > div[style*="display: grid"] {
-/* only override positioning; keep styling (border/background/etc) from solid-ui */
-  position: absolute !important;
-  z-index: 9999 !important;
-  top: 0 !important;
-  right: 0 !important;
-  left: auto !important;
-  display: grid !important;
-  pointer-events: auto !important;
-  opacity: 1 !important;
-  visibility: visible !important;
-  padding: 0.7em !important;
-  min-width: 280px !important;
-  max-width: 90vw !important;
-  background: var(--color-background) !important;
-  border: 0.1em solid var(--color-primary) !important;
-  border-radius: var(--border-radius-base) !important;
-  box-shadow: 0 0.5em 0.9em rgba(0, 0, 0, 0.2) !important;
-  grid-template-columns: auto auto !important;
-  gap: 0.3em !important;
-}
-
-/* Ensure SVG icons and their buttons inside the Solid-UI delete popup have transparent backgrounds */
-.profile-grid div[style*="position: relative"] > div[style*="display: grid"] img[src$=".svg"],
-.profile-grid div[style*="position: relative"] > div[style*="display: grid"] button {
-  background: transparent !important;
-}
-
-.profile-form .individualPane {
-  box-shadow: none !important;
-}
-
-.profile-form p {
-  padding: 0 !important;
-}
-
-.profile-form .mb-md {
-  margin-bottom: 0 !important;
-}
-
-.profile-form h2 {
-  margin-bottom: 1em !important;
-}
-
-.profile-form h3 {
-  color: var(--color-primary) !important;
-  padding: 0 !important;
-  font-size: 1em !important;
-  font-weight: 600 !important;
-}
-
-/* Shared form layout rules are imported from rdfFormsCommon.css */
-/* Solid-UI form sizing fixes scoped to Edit CV section */
-.profile-form .hoverControl:not(:has(> img:first-child)) {
-  border: 0.1em solid rgb(136, 136, 136) !important;
-  flex-direction: column !important;
-}
-
-.profile-form .hoverControl:has(> img:first-child) {
-  background-color: transparent !important;
-  border: none !important;
-  margin: 0 !important;
-  border-radius: 0 !important;
-  padding: 0.7em !important;
-  min-height: var(--min-touch-target);
-  min-width: var(--min-touch-target);
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-
-/* Make sure the delete icon floats in the top-right corner of the full hoverControl wrapper */
-.profile-form .hoverControl,
-.profile-grid .hoverControl {
-  position: relative !important;
-}
-
-.hoverControl > img.hoverControlHide,
-.hoverControl > [data-testid="deleteButtonWithCheck"] {
-  position: absolute !important;
-  top: 0.2em !important;
-  right: 0.2em !important;
-  width: 1.5em !important;
-  height: 1.5em !important;
-  align-items: center;
-  justify-content: center;
-  margin: 0 !important;
-  float: none !important;
-  transform: none !important;
-}
-
-/* When icon is 2nd or 3rd child (i.e. sibling elements exist), align it vertically to the previous item */
-.hoverControl > img.hoverControlHide:nth-child(1),
-.hoverControl > img.hoverControlHide:nth-child(2),
-.hoverControl > [data-testid="deleteButtonWithCheck"]:nth-child(1),
-.hoverControl > [data-testid="deleteButtonWithCheck"]:nth-child(2) {
-  top: 50% !important;
-  transform: translateY(-50%) !important;
-  display: inline-flex !important;
-}
-
-/* Show the delete icon only when the container is hovered */
-.profile-grid .hoverControl:hover > img.hoverControlHide,
-.profile-grid .hoverControl:hover > [data-testid="deleteButtonWithCheck"] {
-  display: inline-flex !important;
-}
-
-/* Also show the delete icon when the entire row is hovered */
-.profile-grid .attachmentTable tr:hover .hoverControl > img.hoverControlHide,
-.profile-grid .attachmentTable tr:hover .hoverControl > [data-testid="deleteButtonWithCheck"] {
-  display: inline-flex !important;
-}
-
-/* Make the hover-control cell easier to hit */
-.profile-grid .hoverControl {
-  padding: 0.75em !important;
-  min-width: 2.5em !important;
-  min-height: 2.5em !important;
-}
-
-/* When the hoverControl only contains the hidden delete icon, keep it out of layout so it doesn't create empty space */
-.profile-form .formFieldValue .hoverControl:has(> img.hoverControlHide) {
-  min-width: 0 !important;
-  min-height: 0 !important;
-  width: 0 !important;
-  height: 0 !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  overflow: visible !important;
-}
-
-/* Hide delete icon only in autocomplete fields */
-.profile-grid .formFieldValue:has(input[data-testid="autocomplete-input"]) [data-testid="delete-button"] {
-  display: none !important;
-}
-
-/* Keep autocomplete cancel button hidden when the user is not interacting.
-   This avoids the cancel button remaining visible when focus moves away. */
-.profile-grid .formFieldValue:not(:focus-within) [data-testid="cancel-button"] {
-  display: none !important;
-}
-
-.profile-grid .hoverControl:has(> img:first-child) > span {
-  display: inline-flex;
-  align-items: center;
-  margin-left: 0.3em;
-}
-
-.profile-grid div[style*="padding: 0.5em"]:has(> img) > span {
-  margin-left: 0.3em;
-  vertical-align: super !important;
-}
-
-.profile-grid .hoverControl:has(> img:first-child):hover {
-  background-color: transparent !important;
-}
-
-.profile-grid button:has(> img[src$=".svg"]),
-.profile-grid .formFieldValue input[type ="color"] {
-  background-color: var(--color-section-bg) !important;
-  border: none !important;
-  margin: 0 !important;
-  border-radius: 0 !important;
-  box-shadow: none !important;
-  padding: 0.5em !important;
-  transition: background-color 0.2s ease, box-shadow 0.2s ease;
-  padding: 0 !important;
-}
-
-/* Specific icon button should have no extra padding */
-.profile-grid button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_1369241.svg"]) {
-  padding: 0 !important;
-}
-
-.profile-form button {
-  min-height: var(--min-touch-target);
-  min-width: var(--min-touch-target);
-}
-
-.profile-form input:not([type="color"]) {
-  width: 99%;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-.profile-form input:not([type="color"]),
-.profile-form textarea,
-.profile-form select {
-  max-width: 96%;
-  min-width: 0;
-  box-sizing: border-box ;
-  font: inherit;
-  color: var(--color-text);
-  background-color: var(--color-card-bg) !important;
-  border: 1px solid var(--color-border-pale);
-}
-
-.profile-form textarea {
-  border-color: var(--color-border-pale) !important;
-}
-
-.profile-form input[type="date"],
-.profile-form input[type="month"],
-.profile-form input[type="week"],
-.profile-form input[type="time"],
-.profile-form input[type="datetime-local"] {
-  min-height: var(--min-touch-target);
-}
-
-.profile-form .hoverControl:has(> img:first-child):focus-visible,
-.profile-form button:focus-visible,
-.profile-form input:not([type="color"]):focus-visible,
-.profile-form textarea:focus-visible,
-.profile-form select:focus-visible {
-  outline: var(--focus-ring-width) solid var(--color-primary) !important;
-  outline-offset: 2px;
-  box-shadow: 0 0 0 1px var(--color-background);
-}
-
-.profile-form input[type="url"] {
-  width: 100%;
-}
-
-.profile-form select#formSelect {
-  width: 100%;
-  max-width: 97%;
-  box-sizing: border-box;
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-/* Remove border/padding from the first wrapper div (and its first child wrapper). */
-.profile-form > div:first-of-type,
-.profile-form > div:first-of-type > div:first-of-type {
-  border: none !important;
-  padding: 0 !important;
-}
-
-/* Remove border/padding from the inner div of the first wrapper in the contact section. */
-section[aria-labelledby="edit-profile-contact-heading"] .profile-form > div:first-of-type > div:first-of-type {
-  border: none !important;
-  padding: 0 !important;
-}
-
-/* In contactPane, remove border/padding from all direct child divs. */
-.contactPane > div {
-  border: none !important;
-  padding: 0 !important;
-}
-
-/* Align schema.org, solid terms, FOAF, vCard, and org field labels with their input values. */
-.profile-form :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) {
-  display: flex;
-}
-
-/* for the Resume inside corporation choice */
-/* Add space between classifierBox label and select box */
-.profile-form .choiceBox .classifierBox-label {
-  /* Optional: ensure label doesn't have extra margin */
-  margin-right: 0;
-  padding-left: 0.3em;
-}
-.profile-form .choiceBox .choiceBox-selectBox select {
-  margin-left: 2.1em !important;
-}
-
-/* for the Resume orga details */
-/* Add space between classifierBox label and select box */
-.profile-form .classifierBox .classifierBox-label {
-  /* Match .formFieldName for alignment */
-  margin-right: 0;
-  padding-left: 0.3em;
-  width: 8em;
-  padding: 0.3em;
-  vertical-align: middle;
-}
-.profile-form .classifierBox .classifierBox-selectBox {
-  margin-left: 0 !important;
-}
-
-.profile-form .classifierBox .classifierBox-selectBox select {
-  margin-left: 0 !important;
-}
-
-/* for the social media */
-/* Add space between classifierBox label and select box */
-section[data-testid="edit-social-section"] .classifierBox-label {
-  /* Optional: ensure label doesn't have extra margin */
-  margin-right: 0;
-  padding-left: 0.3em;
-}
-section[data-testid="edit-social-section"] .classifierBox-selectBox select {
-  margin-left: 0.7em !important;
-}
-
-.profile-form :not(.choiceBox):has(> .formFieldName):has(> .formFieldValue) > .formFieldValue {
-  margin-bottom: 0;
-}
-
-.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://schema.org/"]),
-.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://www.w3.org/ns/solid/terms#"]),
-.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://xmlns.com/foaf/0.1/"]),
-.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://www.w3.org/2006/vcard/ns"]),
-.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://www.w3.org/ns/org#"]) {
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-}
-
-.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://schema.org/"]) + .formFieldValue,
-.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://www.w3.org/ns/solid/terms#"]) + .formFieldValue,
-.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://xmlns.com/foaf/0.1/"]) + .formFieldValue,
-.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://www.w3.org/2006/vcard/ns"]) + .formFieldValue,
-.profile-form :not(.choiceBox) > .formFieldName:has(a[href*="http://www.w3.org/ns/org#"]) + .formFieldValue {
-  display: inline-flex;
-  align-items: center;
-  vertical-align: middle;
-  flex: 1;
-  min-width: 0;
-}
-
-.profile-form textarea,
-.profile-form .formFieldValue textarea {
-  appearance: none;
-  -webkit-appearance: none;
-  border: .05em solid #88c !important;
-  border-style: solid !important;
-  border-width: .05em !important;
-  border-color: #88c !important;
-  border-radius: 0.2em !important;
-  width: 99%;
-  box-sizing: border-box;
-  margin-top: var(--spacing-xs);
-  margin-left: 0 !important;
-  margin-right: 0 !important;
-}
-
-/* Add horizontal gap between label and textarea for all label+textarea pairs. */
-.profile-form div:has(> a) + div:has(textarea) {
-  margin-left: var(--spacing-sm);
-}
-
-/* Center textarea label vertically in flex rows. */
-.profile-form div[style*="display: flex"][style*="flex-direction: row"]:has(textarea) {
-  align-items: flex-start;
-}
-
-.profile-form div[style*="display: flex"][style*="flex-direction: row"]:has(textarea) > div:has(> a) {
-  padding-left: var(--spacing-xs);
-  padding-top: var(--spacing-sm);
-}
-
-
-.profile-form :not(.choiceBox):has(> .formFieldValue input[data-testid="autocomplete-input"]) > .formFieldName {
-  padding-top: 0.55em !important;
-}
-
-
-.profile-form input:disabled,
-.profile-form textarea:disabled,
-.profile-form select:disabled,
-.profile-form input[readonly],
-.profile-form textarea[readonly],
-.profile-form input:read-only,
-.profile-form textarea:read-only {
-  background-color: var(--color-background) !important;
-  cursor: not-allowed;
-  opacity: 0.75;
-  border: 0.05em solid white !important;
-}
-
-.webidControl table td div.contactPane.namedPane {
-  border: none !important;
-}
-
-/* Hide the edit icon used by solid-ui (noun_253504.svg and noun_1180158.svg) when it appears as an <img> */
-img[src*="noun_253504.svg"],
-img[src*="noun_1180158.svg"] {
-  display: none !important;
-  width: 0 !important;
-  height: 0 !important;
-  margin: 0 !important;
-  padding: 0 !important;
-}
-
-/* Ensure the parent button for that icon doesn't add padding/margin or affect layout */
-button:has(> img[src*="noun_253504.svg"]),
-button:has(> img[src*="noun_1180158.svg"]) {
-  display: none !important;
-  padding: 0 !important;
-  margin: 0 !important;
-  border: none !important;
-  background: none !important;
-  width: 0 !important;
-  height: 0 !important;
-  overflow: hidden !important;
-}
-
-/* Exceptions: allow these icons (and their buttons) when they're part of the add-friend or add-community flows. */
-.profile-grid .profileSection .add-friend-button-container img[src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"],
-.profile-grid .profileSection .add-community-button-container img[src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"],
-.profile-grid .profileSection .add-friend-button-container button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"]),
-.profile-grid .profileSection .add-community-button-container button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_253504.svg"]) {
-  display: inline-flex !important;
-  width: auto !important;
-  height: auto !important;
-  overflow: visible !important;
-}
-
-
-/* Exception: allow “Continue” buttons inside add-friend and add-community button containers. */
-.profile-grid .profileSection .add-friend-button-container button:has(> img[title="Continue"]),
-.profile-grid .profileSection .add-community-button-container button:has(> img[title="Continue"]),
-.profile-grid .profileSection .add-friend-button-container button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"]),
-.profile-grid .profileSection .add-community-button-container button:has(> img[src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"]),
-.profile-grid .profileSection .add-friend-button-container img[src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"],
-.profile-grid .profileSection .add-community-button-container img[src="https://solidos.github.io/solid-ui/src/icons/noun_1180158.svg"] {
-  display: inline-flex !important;
-  width: 2em !important;
-  height: 2em !important;
-  overflow: visible !important;
-}