455 lines
11 KiB
CSS
455 lines
11 KiB
CSS
/* OPCUA GUI Stylesheet */
|
|
/* Place this in src/main/resources/styles/application.css */
|
|
|
|
/* ============================================================================
|
|
ROOT & GENERAL
|
|
============================================================================ */
|
|
.root {
|
|
-fx-font-family: "Segoe UI", Arial, sans-serif;
|
|
-fx-font-size: 13px;
|
|
-fx-base: #f4f4f4;
|
|
-fx-background: #ffffff;
|
|
}
|
|
|
|
/* ============================================================================
|
|
ACTION BUTTONS
|
|
============================================================================ */
|
|
.action-button {
|
|
-fx-background-color: linear-gradient(to bottom, #4CAF50, #45a049);
|
|
-fx-text-fill: white;
|
|
-fx-font-weight: bold;
|
|
-fx-padding: 5 15 5 15;
|
|
-fx-border-radius: 4;
|
|
-fx-background-radius: 4;
|
|
-fx-cursor: hand;
|
|
}
|
|
|
|
.action-button:hover {
|
|
-fx-background-color: linear-gradient(to bottom, #45a049, #3d8b40);
|
|
-fx-effect: dropshadow(gaussian, rgba(0,0,0,0.3), 4, 0, 0, 1);
|
|
}
|
|
|
|
.action-button:pressed {
|
|
-fx-background-color: #3d8b40;
|
|
-fx-effect: innershadow(gaussian, rgba(0,0,0,0.3), 4, 0, 0, 1);
|
|
}
|
|
|
|
.action-button:disabled {
|
|
-fx-opacity: 0.5;
|
|
-fx-cursor: default;
|
|
}
|
|
|
|
/* ============================================================================
|
|
TABLE VIEW
|
|
============================================================================ */
|
|
.table-view {
|
|
-fx-background-color: transparent;
|
|
-fx-table-cell-border-color: transparent;
|
|
}
|
|
|
|
.table-view .column-header {
|
|
-fx-background-color: linear-gradient(to bottom, #e0e0e0, #d0d0d0);
|
|
-fx-font-weight: bold;
|
|
-fx-padding: 5;
|
|
}
|
|
|
|
.table-view .column-header-background {
|
|
-fx-background-color: #e0e0e0;
|
|
}
|
|
|
|
.table-row-cell {
|
|
-fx-border-color: transparent;
|
|
-fx-border-width: 0;
|
|
}
|
|
|
|
.table-row-cell:selected {
|
|
-fx-background-color: #e3f2fd;
|
|
-fx-table-cell-border-color: #2196F3;
|
|
}
|
|
|
|
.table-row-cell:hover {
|
|
-fx-background-color: #f5f5f5;
|
|
}
|
|
|
|
.table-row-cell:selected:hover {
|
|
-fx-background-color: #bbdefb;
|
|
}
|
|
|
|
/* Checkbox column styling */
|
|
.check-box-table-cell .check-box {
|
|
-fx-cursor: hand;
|
|
}
|
|
|
|
/* ============================================================================
|
|
TREE VIEW
|
|
============================================================================ */
|
|
.tree-view {
|
|
-fx-background-color: white;
|
|
-fx-border-color: #d0d0d0;
|
|
-fx-border-width: 1;
|
|
}
|
|
|
|
.tree-cell {
|
|
-fx-padding: 2 5 2 5;
|
|
}
|
|
|
|
.tree-cell:selected {
|
|
-fx-background-color: #2196F3;
|
|
-fx-text-fill: white;
|
|
}
|
|
|
|
.tree-cell:hover {
|
|
-fx-background-color: #e3f2fd;
|
|
}
|
|
|
|
/* ============================================================================
|
|
BUTTONS
|
|
============================================================================ */
|
|
.button {
|
|
-fx-background-color: linear-gradient(to bottom, #f0f0f0, #d0d0d0);
|
|
-fx-border-color: #a0a0a0;
|
|
-fx-border-width: 1;
|
|
-fx-border-radius: 3;
|
|
-fx-background-radius: 3;
|
|
-fx-padding: 5 15 5 15;
|
|
-fx-cursor: hand;
|
|
}
|
|
|
|
.button:hover {
|
|
-fx-background-color: linear-gradient(to bottom, #e0e0e0, #c0c0c0);
|
|
-fx-border-color: #808080;
|
|
}
|
|
|
|
.button:pressed {
|
|
-fx-background-color: #c0c0c0;
|
|
}
|
|
|
|
.button:disabled {
|
|
-fx-opacity: 0.6;
|
|
-fx-cursor: default;
|
|
}
|
|
|
|
/* Primary button style */
|
|
.button-primary {
|
|
-fx-background-color: linear-gradient(to bottom, #2196F3, #1976D2);
|
|
-fx-text-fill: white;
|
|
-fx-font-weight: bold;
|
|
}
|
|
|
|
.button-primary:hover {
|
|
-fx-background-color: linear-gradient(to bottom, #1976D2, #1565C0);
|
|
}
|
|
|
|
/* Danger button style */
|
|
.button-danger {
|
|
-fx-background-color: linear-gradient(to bottom, #f44336, #d32f2f);
|
|
-fx-text-fill: white;
|
|
}
|
|
|
|
.button-danger:hover {
|
|
-fx-background-color: linear-gradient(to bottom, #d32f2f, #c62828);
|
|
}
|
|
|
|
/* Success button style */
|
|
.button-success {
|
|
-fx-background-color: linear-gradient(to bottom, #4CAF50, #388E3C);
|
|
-fx-text-fill: white;
|
|
}
|
|
|
|
.button-success:hover {
|
|
-fx-background-color: linear-gradient(to bottom, #388E3C, #2E7D32);
|
|
}
|
|
|
|
/* ============================================================================
|
|
TEXT FIELDS & AREAS
|
|
============================================================================ */
|
|
.text-field, .text-area {
|
|
-fx-background-color: white;
|
|
-fx-border-color: #c0c0c0;
|
|
-fx-border-width: 1;
|
|
-fx-border-radius: 3;
|
|
-fx-background-radius: 3;
|
|
-fx-padding: 5;
|
|
}
|
|
|
|
.text-field:focused, .text-area:focused {
|
|
-fx-border-color: #2196F3;
|
|
-fx-border-width: 2;
|
|
}
|
|
|
|
.text-area {
|
|
-fx-font-family: "Consolas", "Monaco", "Courier New", monospace;
|
|
-fx-font-size: 12px;
|
|
}
|
|
|
|
/* ============================================================================
|
|
DIALOGS
|
|
============================================================================ */
|
|
.dialog-pane {
|
|
-fx-background-color: white;
|
|
-fx-padding: 10;
|
|
}
|
|
|
|
.dialog-pane .header-panel {
|
|
-fx-background-color: linear-gradient(to bottom, #e0e0e0, #d0d0d0);
|
|
-fx-padding: 10;
|
|
}
|
|
|
|
.dialog-pane .content {
|
|
-fx-padding: 20;
|
|
}
|
|
|
|
.dialog-pane .button-bar .button {
|
|
-fx-min-width: 80;
|
|
}
|
|
|
|
/* ============================================================================
|
|
COMBO BOX
|
|
============================================================================ */
|
|
.combo-box {
|
|
-fx-background-color: white;
|
|
-fx-border-color: #c0c0c0;
|
|
-fx-border-width: 1;
|
|
-fx-border-radius: 3;
|
|
-fx-background-radius: 3;
|
|
}
|
|
|
|
.combo-box:focused {
|
|
-fx-border-color: #2196F3;
|
|
-fx-border-width: 2;
|
|
}
|
|
|
|
.combo-box-popup .list-view {
|
|
-fx-background-color: white;
|
|
-fx-border-color: #2196F3;
|
|
-fx-border-width: 1;
|
|
}
|
|
|
|
.combo-box-popup .list-cell {
|
|
-fx-padding: 5;
|
|
}
|
|
|
|
.combo-box-popup .list-cell:hover {
|
|
-fx-background-color: #e3f2fd;
|
|
}
|
|
|
|
/* ============================================================================
|
|
LIST VIEW
|
|
============================================================================ */
|
|
.list-view {
|
|
-fx-background-color: white;
|
|
-fx-border-color: #d0d0d0;
|
|
-fx-border-width: 1;
|
|
}
|
|
|
|
.list-cell {
|
|
-fx-padding: 5;
|
|
}
|
|
|
|
.list-cell:selected {
|
|
-fx-background-color: #2196F3;
|
|
-fx-text-fill: white;
|
|
}
|
|
|
|
.list-cell:hover {
|
|
-fx-background-color: #e3f2fd;
|
|
}
|
|
|
|
/* ============================================================================
|
|
CHECK BOX
|
|
============================================================================ */
|
|
.check-box {
|
|
-fx-cursor: hand;
|
|
}
|
|
|
|
.check-box:selected .box {
|
|
-fx-background-color: #2196F3;
|
|
-fx-border-color: #1976D2;
|
|
}
|
|
|
|
/* ============================================================================
|
|
LABELS
|
|
============================================================================ */
|
|
.label {
|
|
-fx-text-fill: #333333;
|
|
}
|
|
|
|
.label-header {
|
|
-fx-font-size: 16px;
|
|
-fx-font-weight: bold;
|
|
-fx-text-fill: #1976D2;
|
|
}
|
|
|
|
.label-error {
|
|
-fx-text-fill: #d32f2f;
|
|
-fx-font-weight: bold;
|
|
}
|
|
|
|
.label-success {
|
|
-fx-text-fill: #388E3C;
|
|
-fx-font-weight: bold;
|
|
}
|
|
|
|
.label-warning {
|
|
-fx-text-fill: #F57C00;
|
|
-fx-font-weight: bold;
|
|
}
|
|
|
|
/* ============================================================================
|
|
PROGRESS INDICATOR
|
|
============================================================================ */
|
|
.progress-indicator {
|
|
-fx-progress-color: #2196F3;
|
|
}
|
|
|
|
/* ============================================================================
|
|
SEPARATOR
|
|
============================================================================ */
|
|
.separator {
|
|
-fx-background-color: #d0d0d0;
|
|
}
|
|
|
|
/* ============================================================================
|
|
SCROLL BAR
|
|
============================================================================ */
|
|
.scroll-bar {
|
|
-fx-background-color: transparent;
|
|
}
|
|
|
|
.scroll-bar .thumb {
|
|
-fx-background-color: #c0c0c0;
|
|
-fx-background-radius: 5;
|
|
}
|
|
|
|
.scroll-bar .thumb:hover {
|
|
-fx-background-color: #a0a0a0;
|
|
}
|
|
|
|
.scroll-bar .increment-button,
|
|
.scroll-bar .decrement-button {
|
|
-fx-background-color: transparent;
|
|
}
|
|
|
|
/* ============================================================================
|
|
CUSTOM CLASSES
|
|
============================================================================ */
|
|
|
|
/* Action list item in dialog */
|
|
.action-list-item {
|
|
-fx-padding: 5;
|
|
-fx-border-color: #e0e0e0;
|
|
-fx-border-width: 0 0 1 0;
|
|
}
|
|
|
|
.action-list-item:hover {
|
|
-fx-background-color: #f5f5f5;
|
|
}
|
|
|
|
/* Script editor */
|
|
.script-editor {
|
|
-fx-font-family: "Consolas", "Monaco", "Courier New", monospace;
|
|
-fx-font-size: 12px;
|
|
-fx-background-color: #f8f8f8;
|
|
-fx-border-color: #2196F3;
|
|
-fx-border-width: 2;
|
|
-fx-padding: 10;
|
|
}
|
|
|
|
/* Status indicator */
|
|
.status-connected {
|
|
-fx-background-color: #4CAF50;
|
|
-fx-background-radius: 50%;
|
|
-fx-min-width: 12;
|
|
-fx-min-height: 12;
|
|
-fx-max-width: 12;
|
|
-fx-max-height: 12;
|
|
}
|
|
|
|
.status-disconnected {
|
|
-fx-background-color: #f44336;
|
|
-fx-background-radius: 50%;
|
|
-fx-min-width: 12;
|
|
-fx-min-height: 12;
|
|
-fx-max-width: 12;
|
|
-fx-max-height: 12;
|
|
}
|
|
|
|
/* Tooltip */
|
|
.tooltip {
|
|
-fx-background-color: #333333;
|
|
-fx-text-fill: white;
|
|
-fx-padding: 5 10 5 10;
|
|
-fx-background-radius: 4;
|
|
-fx-font-size: 12px;
|
|
}
|
|
|
|
/* Badge for action count */
|
|
.badge {
|
|
-fx-background-color: #2196F3;
|
|
-fx-text-fill: white;
|
|
-fx-background-radius: 10;
|
|
-fx-padding: 2 6 2 6;
|
|
-fx-font-size: 10px;
|
|
-fx-font-weight: bold;
|
|
}
|
|
|
|
/* Grid pane for forms */
|
|
.form-grid {
|
|
-fx-hgap: 10;
|
|
-fx-vgap: 10;
|
|
-fx-padding: 10;
|
|
}
|
|
|
|
/* ============================================================================
|
|
RESPONSIVE MAIN WINDOW
|
|
============================================================================ */
|
|
.top-bar {
|
|
-fx-background-color: linear-gradient(to bottom, #ffffff, #eef3f9);
|
|
-fx-border-color: #d0d7de;
|
|
-fx-border-width: 0 0 1 0;
|
|
}
|
|
|
|
.app-title {
|
|
-fx-font-size: 18px;
|
|
-fx-font-weight: bold;
|
|
-fx-text-fill: #17456b;
|
|
}
|
|
|
|
.script-bar {
|
|
-fx-padding: 4 0 0 0;
|
|
}
|
|
|
|
.split-pane {
|
|
-fx-background-color: #f7f9fb;
|
|
}
|
|
|
|
.split-pane-divider {
|
|
-fx-background-color: #d0d7de;
|
|
-fx-padding: 0 1 0 1;
|
|
}
|
|
|
|
.table-view {
|
|
-fx-column-resize-policy: constrained-resize;
|
|
}
|
|
|
|
/* JavaScript editor (RichTextFX) */
|
|
.js-editor-pane {
|
|
-fx-border-color: #d0d7de;
|
|
-fx-border-radius: 8;
|
|
-fx-background-radius: 8;
|
|
-fx-background-color: #ffffff;
|
|
}
|
|
.js-editor-header {
|
|
-fx-padding: 6 8 6 8;
|
|
-fx-background-color: #f6f8fa;
|
|
-fx-border-color: transparent transparent #d0d7de transparent;
|
|
}
|
|
.js-code-area {
|
|
-fx-font-family: "Cascadia Code", "JetBrains Mono", "Consolas", monospace;
|
|
-fx-font-size: 13px;
|
|
-fx-background-color: #ffffff;
|
|
}
|
|
.js-code-area .keyword { -fx-fill: #cf222e; -fx-font-weight: bold; }
|
|
.js-code-area .string { -fx-fill: #0a3069; }
|
|
.js-code-area .comment { -fx-fill: #6e7781; -fx-font-style: italic; }
|