fwtoolkit 0.1.0-alpha.3 → 0.1.0-alpha.6

package/css/dialog_table.css

@@ -0,0 +1,125 @@
+.fw-dialog-table td {
+    padding-bottom: 7px;
+    position: relative;
+}
+
+.fw-tablerow-title {
+    display: table-cell;
+    padding-top: 10px;
+    font-size: 11px;
+    line-height: 15px;
+    font-weight: bold;
+}
+
+.fw-dialog-table tr > td .fa-minus-circle,
+.fw-dialog-table tr > td .fa-plus-circle {
+    cursor: pointer;
+}
+
+.input-list-wrapper > tbody > tr:last-child > td > .fa-minus-circle {
+    display: none;
+}
+
+.fw-tablerow-title.wtooltip {
+    position: relative;
+}
+
+.fw-tablerow-title.wtooltip::after {
+    display: inline-block;
+    vertical-align: baseline;
+    content: "?";
+    line-height: 1;
+    color: white;
+    background-color: rgb(var(--tooltip-background-color));
+    width: 12px;
+    height: 10px;
+    border-radius: 6px;
+    margin-left: 5px;
+    text-align: center;
+    padding-top: 2px;
+}
+
+.fw-tablerow-title .tooltip {
+    position: absolute;
+    min-width: 260px;
+    top: calc(100% + 2px);
+    left: calc(100% - 13px);
+    background-color: var(--cs-dark-background);
+    color: var(--cs-dark-text);
+    border-radius: 6px;
+    line-height: 1.5;
+    padding: 14px 18px;
+    font-size: 12px;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 1s;
+    z-index: 1;
+}
+
+.fw-tablerow-title:hover .tooltip {
+    visibility: visible;
+    opacity: 1;
+}
+
+.tooltip em {
+    font-style: italic;
+}
+
+/* Inline info tooltip (e.g. for dialog options) */
+.fw-info-tooltip {
+    position: relative;
+    display: inline-block;
+    margin-left: 4px;
+    color: var(--cs-2-background);
+    cursor: help;
+}
+
+.fw-info-tooltip .fw-info-tooltip-text {
+    position: absolute;
+    bottom: calc(100% + 6px);
+    left: 50%;
+    transform: translateX(-50%);
+    min-width: 280px;
+    max-width: 360px;
+    background-color: var(--cs-dark-background);
+    color: var(--cs-dark-text);
+    border-radius: 6px;
+    padding: 12px 16px;
+    font-size: 12px;
+    line-height: 1.5;
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.3s;
+    z-index: 100;
+    pointer-events: none;
+    text-align: left;
+    font-weight: normal;
+    font-style: normal;
+    white-space: normal;
+}
+
+.fw-info-tooltip:hover .fw-info-tooltip-text {
+    visibility: visible;
+    opacity: 1;
+}
+
+.fw-info-tooltip .fw-info-tooltip-text::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: var(--cs-dark-background) transparent transparent transparent;
+}
+
+.fw-info-tooltip .fw-info-tooltip-text ul {
+    margin: 6px 0 0 16px;
+    padding: 0;
+    list-style-type: disc;
+}
+
+.fw-info-tooltip .fw-info-tooltip-text li {
+    margin-bottom: 4px;
+}

package/css/faq_dialog.css

@@ -0,0 +1,16 @@
+div.faq {
+    line-height: 1.5em;
+}
+
+.faq-answer {
+    padding: 5px;
+    font-size: medium;
+}
+
+.faq-item {
+    padding: 10px;
+}
+
+.faq-question i {
+    padding: 3px;
+}

package/css/file_selector.css

@@ -0,0 +1,25 @@
+.fw-file-selector {
+    line-height: 1.2em;
+    padding: 10px 10px 10px 20px;
+}
+
+.fw-file-selector p.file {
+    text-indent: -10px;
+}
+
+.fw-file-selector .fa-plus-square,
+.fw-file-selector .fa-minus-square {
+    margin-left: -16px;
+}
+
+.fw-file-selector .fa-plus-square,
+.fw-file-selector .fa-minus-square,
+.fw-file-selector .file-name,
+.fw-file-selector .folder-name {
+    cursor: pointer;
+}
+
+.fw-file-selector .file-name.selected,
+.fw-file-selector .folder-name.selected {
+    text-decoration: underline;
+}

package/css/forms.css

@@ -0,0 +1,112 @@
+input,
+textarea,
+button {
+    font-family: Lato, sans-serif;
+    margin: 0;
+    outline-width: 0;
+}
+
+textarea {
+    padding: 2px;
+}
+
+input[type="text"]:not(.fw-inline),
+input[type="password"]:not(.fw-inline),
+input[type="search"]:not(.fw-inline),
+input[type="email"]:not(.fw-inline),
+input[type="number"]:not(.fw-inline),
+textarea {
+    box-sizing: border-box;
+    width: 100%;
+    height: 40px;
+    padding: 0 10px;
+    font-size: 14px;
+    line-height: 1.33em;
+    box-shadow: none;
+    border-radius: 0;
+    margin: 5px 0;
+    color: var(--cs-white-text);
+    background-color: var(--input-background-color);
+    border: 0 none;
+}
+
+input[type="text"]:focus,
+input[type="number"]:focus,
+input[type="password"]:focus,
+input[type="search"]:focus,
+input[type="email"]:focus,
+textarea:focus {
+    background-color: var(--input-focus-background-color);
+}
+
+.ui-dialog input[type="text"]:not(.fw-inline),
+.ui-dialog input[type="password"]:not(.fw-inline),
+.ui-dialog input[type="search"]:not(.fw-inline),
+.ui-dialog input[type="email"]:not(.fw-inline),
+.ui-dialog input[type="number"]:not(.fw-inline),
+.ui-dialog textarea,
+.ui-dialog div[contenteditable="true"],
+.ui-dialog select,
+.ui-dialog .entry-field select {
+    border: 1px solid var(--input-dialog-border-color);
+}
+
+/**
+ * Checkbox
+ */
+.fw-check {
+    position: absolute;
+    opacity: 0;
+}
+
+.fw-check + label {
+    position: relative;
+    display: block;
+    margin: 0;
+    padding: 0;
+}
+
+.fw-check + label::before {
+    content: "";
+    position: relative;
+    display: block;
+    width: 13px;
+    height: 13px;
+    border: 1px solid var(--overview-checkbox-border);
+    border-radius: 2px;
+    background: linear-gradient(
+        to bottom,
+        rgb(var(--overview-checkbox-background-color-from)) 0%,
+        rgb(var(--overview-checkbox-background-color-to)) 100%
+    );
+}
+
+.fw-check:checked + label::after {
+    content: "";
+    position: absolute;
+    left: 5px;
+    top: 2px;
+    display: block;
+    width: 3px;
+    height: 7px;
+    border-bottom: 2px solid var(--overview-checkbox-color);
+    border-right: 2px solid var(--overview-checkbox-color);
+    transform: rotate(45deg);
+}
+
+.fw-label-check + label {
+    line-height: 15px;
+}
+
+.fw-label-check + label::before {
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 6px;
+}
+
+/*
+ * checkbox in a fw-button
+ */
+.fw-button input[type="checkbox"] {
+    margin-right: 3px;
+}

package/css/loader.css

@@ -0,0 +1,38 @@
+#wait i {
+    display: none;
+}
+
+#wait.active {
+    position: fixed;
+    inset: 0;
+    background-color: rgb(var(--wait-active-background-color));
+    z-index: 1500;
+}
+
+#wait.active.full {
+    background-color: rgb(var(--wait-active-full-background-color));
+}
+
+#wait.active i {
+    display: block;
+    height: 1em;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    font-size: 24px;
+    margin-top: -0.5em;
+    margin-left: -0.5em;
+}
+
+#wait span {
+    display: none;
+}
+
+#wait.active span.message {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 105vh;
+    font-size: 15px;
+    margin-top: 20px;
+}

package/css/overview_menu.css

@@ -0,0 +1,187 @@
+.fw-overview-menu-wrapper {
+    position: relative;
+    background-color: var(--cs-white-background);
+    padding: 11px 8px;
+}
+
+#fw-overview-menu {
+    position: relative;
+    margin: 0 213px;
+}
+
+#fw-overview-menu::after {
+    content: "";
+    display: table;
+    clear: both;
+}
+
+@media (width <= 1429px) {
+    #fw-overview-menu {
+        margin: 0 auto;
+        max-width: 1004px;
+    }
+}
+
+.fw-overview-menu-item {
+    position: relative;
+    float: left;
+    margin-right: 14px;
+}
+
+.fw-search-field-container {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+}
+
+.fw-search-field-container .fw-search-label {
+    position: absolute;
+    left: 20px;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    pointer-events: none; /* Makes the label non-interactive */
+    user-select: none;
+    z-index: 1;
+}
+
+.fw-search-field-container input.fw-search-field[type="search"] {
+    position: relative;
+    z-index: 2;
+    background: transparent; /* Makes input background transparent to show label */
+}
+
+.fw-search-field-container:has(
+        input.fw-search-field[type="search"]:not(:placeholder-shown)
+    )
+    label.fw-search-label {
+    display: none;
+}
+
+.fw-search-field-container i.fa {
+    position: relative;
+    z-index: 3;
+    margin-left: 8px;
+}
+
+.fw-overview-menu-item.search {
+    float: right;
+    margin-right: 0;
+}
+
+.fw-overview-menu-item.search div.fw-button.disabled {
+    background-color: var(--input-background-color);
+}
+
+.fw-overview-menu-item.search div.fw-button.disabled:focus-within {
+    background-color: var(--input-focus-background-color);
+}
+
+.fw-button .fw-search-label {
+    margin-right: 8px;
+    display: inline-block;
+}
+
+/* Hide label visually while keeping it accessible for screen readers
+   when the search box is narrow */
+@media (width <= 600px) {
+    .fw-button .fw-search-label {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        padding: 0;
+        margin: -1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        border: 0;
+    }
+}
+
+.fw-button input[type="text"] {
+    border: 1px solid #cccccc;
+    padding: 4px 8px;
+    border-radius: 4px;
+    width: calc(100% - 30px);
+    height: 30px;
+}
+
+.fw-button input[type="text"]:focus {
+    outline: 2px solid #007bff;
+    border-color: #007bff;
+}
+
+.fw-text-menu {
+    height: 40px;
+    color: var(--cs-white-text-secondary);
+    padding: 0;
+    border: 0 none;
+    background-color: transparent;
+    font-size: 14px;
+    cursor: pointer;
+    position: relative;
+    padding-left: 5px;
+}
+
+.fw-text-menu:focus::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 3px; /* Width of the border */
+    background-color: var(--menu-cursor-border-color); /* Color of the border */
+}
+
+.fw-text-menu:hover {
+    color: var(--cs-white-text);
+}
+
+.fw-dropdown-menu {
+    padding-top: 14px;
+    font-size: 14px;
+    color: var(--cs-white-text-secondary);
+    cursor: pointer;
+    height: 40px;
+    box-sizing: border-box;
+}
+
+.fw-dropdown-menu:hover {
+    color: var(--cs-white-text);
+}
+
+.fw-dropdown-menu label {
+    cursor: pointer;
+}
+
+div.select-action {
+    cursor: pointer;
+    min-width: 38px;
+}
+
+div.select-action input[type="checkbox"] {
+    cursor: default;
+}
+
+span.select-action-dropdown {
+    margin-left: 5px;
+}
+
+.fw-button.fw-white input[type="text"] {
+    color: var(--cs-light-text);
+    background-color: var(--cs-light-background);
+}
+
+.fw-button.fw-white:focus-within {
+    background-color: var(--input-focus-background-color);
+}
+
+.fw-button.fw-white input[type="text"]:focus,
+.fw-white.fw-input:hover {
+    background-color: var(--input-focus-background-color);
+}
+
+.fw-pulldown-item.selected {
+    background-color: #f0f0f0;
+}

package/css/pulldown.css

@@ -0,0 +1,114 @@
+/* pulldown menu box */
+.fw-pulldown {
+    position: absolute;
+    display: none;
+    z-index: 101;
+    box-shadow: 0 0 20px rgb(var(--pulldown-box-shadow-color));
+    background-color: var(--cs-white-background);
+    border-radius: 6px;
+    color: var(--cs-white-text);
+}
+
+.fw-pulldown.fw-open {
+    display: block;
+}
+
+.fw-pulldown.fw-left,
+.fw-pulldown.fw-center {
+    left: -10px;
+}
+
+.fw-pulldown.fw-right {
+    right: 0;
+}
+
+/* sub menu */
+.fw-pulldown .fw-pulldown {
+    top: 0;
+    left: 100%;
+    margin-top: 0;
+}
+
+.marginbox-options.fw-pulldown .fw-pulldown {
+    right: 100%;
+    left: auto;
+}
+
+.fw-pulldown.fw-right .fw-pulldown {
+    left: auto;
+    right: 100%;
+}
+
+.fw-pulldown > ul {
+    position: relative;
+    padding: 12px 0;
+    border: 0 none;
+}
+
+.fw-pulldown-item {
+    position: relative;
+    display: block;
+    width: auto;
+    height: auto;
+    min-width: 110px;
+    padding: 16px 30px;
+    font-size: 13px;
+    font-weight: 400;
+    line-height: 1;
+    text-align: left;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+}
+
+.disabled .fw-pulldown-item {
+    color: var(--cs-disabled);
+}
+
+.fw-pulldown-item.selected {
+    color: var(--cs-white-selected);
+    background-color: var(--cs-white-background-selected);
+}
+
+.fw-pulldown-item:hover,
+.fw-pulldown-item.selected:hover {
+    color: var(--cs-white-hover);
+    background-color: var(--cs-white-background-hover);
+}
+
+.fw-pulldown li:last-child .fw-pulldown-item {
+    border-bottom: 0 none;
+}
+
+.fw-pulldown-item .fw-icon-right {
+    position: absolute;
+    right: 10px;
+}
+
+.fw-pulldown li {
+    position: relative;
+}
+
+.fw-pulldown hr {
+    width: 80%;
+    display: block;
+    height: 1px;
+    border: 0;
+    background-color: var(--pulldown-separator-color);
+}
+
+.fw-pulldown .delete-comment::after {
+    font-family: "Font Awesome 7 Free", monospace;
+    content: "\f2ed";
+    opacity: 0.4;
+    float: right;
+    display: block;
+}
+
+.fw-pulldown-icon {
+    margin-left: 0;
+}
+
+.fw-pulldown input[type="radio"] {
+    display: none;
+}