setup electron app with boilerplate
This commit is contained in:
talksik
@@ -0,0 +1,533 @@
|
||||
/*
|
||||
* reMarkable E-Ink Aesthetic
|
||||
* Minimalist, paper-like design inspired by reMarkable tablet
|
||||
*/
|
||||
|
||||
/* Color Palette:
|
||||
* Paper: #FAFAF8 (warm off-white)
|
||||
* Ink: #1A1A1A (soft black)
|
||||
* Muted: #6B6B6B (gray for secondary text)
|
||||
* Border: #D4D4D4 (subtle gray)
|
||||
* Hover: #F0F0EE (slightly darker paper)
|
||||
* Pressed: #E5E5E3 (pressed state)
|
||||
*/
|
||||
|
||||
/* Base Widget - Paper background */
|
||||
QWidget {
|
||||
background-color: #FAFAF8;
|
||||
color: #1A1A1A;
|
||||
font-family: "Plus Jakarta Sans", "SF Pro Text", "Helvetica Neue", sans-serif;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
QMainWindow {
|
||||
background-color: #FAFAF8;
|
||||
}
|
||||
|
||||
/* Labels */
|
||||
QLabel {
|
||||
background-color: transparent;
|
||||
color: #1A1A1A;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
QLabel:disabled {
|
||||
color: #6B6B6B;
|
||||
}
|
||||
|
||||
/* Push Buttons - Minimalist ink style */
|
||||
QPushButton {
|
||||
background-color: #FAFAF8;
|
||||
color: #1A1A1A;
|
||||
border: 1px solid #1A1A1A;
|
||||
padding: 8px 16px;
|
||||
border-radius: 2px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
QPushButton:hover {
|
||||
background-color: #F0F0EE;
|
||||
}
|
||||
|
||||
QPushButton:pressed {
|
||||
background-color: #1A1A1A;
|
||||
color: #FAFAF8;
|
||||
}
|
||||
|
||||
QPushButton:disabled {
|
||||
background-color: #FAFAF8;
|
||||
color: #A0A0A0;
|
||||
border-color: #D4D4D4;
|
||||
}
|
||||
|
||||
QPushButton:flat {
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
QPushButton:flat:hover {
|
||||
background-color: #F0F0EE;
|
||||
}
|
||||
|
||||
/* Primary/Default Button - Filled ink style */
|
||||
QPushButton:default {
|
||||
background-color: #1A1A1A;
|
||||
color: #FAFAF8;
|
||||
}
|
||||
|
||||
QPushButton:default:hover {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
QPushButton:default:pressed {
|
||||
background-color: #000000;
|
||||
}
|
||||
|
||||
/* Line Edit - Clean input fields */
|
||||
QLineEdit {
|
||||
background-color: #FFFFFF;
|
||||
color: #1A1A1A;
|
||||
border: 1px solid #D4D4D4;
|
||||
border-bottom: 1px solid #1A1A1A;
|
||||
border-radius: 0px;
|
||||
|
||||
selection-background-color: #1A1A1A;
|
||||
selection-color: #FAFAF8;
|
||||
}
|
||||
|
||||
QLineEdit:focus {
|
||||
border: 1px solid #1A1A1A;
|
||||
}
|
||||
|
||||
QLineEdit:disabled {
|
||||
background-color: #F5F5F5;
|
||||
color: #A0A0A0;
|
||||
border-color: #E0E0E0;
|
||||
}
|
||||
|
||||
QLineEdit::placeholder {
|
||||
color: #A0A0A0;
|
||||
}
|
||||
|
||||
/* Text Edit / Plain Text Edit */
|
||||
QTextEdit, QPlainTextEdit {
|
||||
background-color: #FFFFFF;
|
||||
color: #1A1A1A;
|
||||
border: 1px solid #D4D4D4;
|
||||
border-radius: 2px;
|
||||
padding: 8px;
|
||||
selection-background-color: #1A1A1A;
|
||||
selection-color: #FAFAF8;
|
||||
}
|
||||
|
||||
QTextEdit:focus, QPlainTextEdit:focus {
|
||||
border-color: #1A1A1A;
|
||||
}
|
||||
|
||||
/* Tab Widget - Paper notebook style */
|
||||
QTabWidget::pane {
|
||||
background-color: #FAFAF8;
|
||||
border: 1px solid #D4D4D4;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
QTabBar::tab {
|
||||
background-color: #F0F0EE;
|
||||
color: #6B6B6B;
|
||||
border: 1px solid #D4D4D4;
|
||||
border-bottom: none;
|
||||
padding: 8px 16px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
QTabBar::tab:selected {
|
||||
background-color: #FAFAF8;
|
||||
color: #1A1A1A;
|
||||
border-bottom: 1px solid #FAFAF8;
|
||||
}
|
||||
|
||||
QTabBar::tab:hover:!selected {
|
||||
background-color: #E5E5E3;
|
||||
}
|
||||
|
||||
/* Scroll Bars - Thin and minimal */
|
||||
QScrollBar:vertical {
|
||||
background-color: #FAFAF8;
|
||||
width: 8px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
QScrollBar::handle:vertical {
|
||||
background-color: #C0C0C0;
|
||||
border-radius: 4px;
|
||||
min-height: 30px;
|
||||
}
|
||||
|
||||
QScrollBar::handle:vertical:hover {
|
||||
background-color: #A0A0A0;
|
||||
}
|
||||
|
||||
QScrollBar::handle:vertical:pressed {
|
||||
background-color: #6B6B6B;
|
||||
}
|
||||
|
||||
QScrollBar::add-line:vertical,
|
||||
QScrollBar::sub-line:vertical {
|
||||
height: 0px;
|
||||
}
|
||||
|
||||
QScrollBar::add-page:vertical,
|
||||
QScrollBar::sub-page:vertical {
|
||||
background: none;
|
||||
}
|
||||
|
||||
QScrollBar:horizontal {
|
||||
background-color: #FAFAF8;
|
||||
height: 8px;
|
||||
margin: 0px;
|
||||
}
|
||||
|
||||
QScrollBar::handle:horizontal {
|
||||
background-color: #C0C0C0;
|
||||
border-radius: 4px;
|
||||
min-width: 30px;
|
||||
}
|
||||
|
||||
QScrollBar::handle:horizontal:hover {
|
||||
background-color: #A0A0A0;
|
||||
}
|
||||
|
||||
QScrollBar::add-line:horizontal,
|
||||
QScrollBar::sub-line:horizontal {
|
||||
width: 0px;
|
||||
}
|
||||
|
||||
QScrollBar::add-page:horizontal,
|
||||
QScrollBar::sub-page:horizontal {
|
||||
background: none;
|
||||
}
|
||||
|
||||
/* Menu Bar */
|
||||
QMenuBar {
|
||||
background-color: #FAFAF8;
|
||||
color: #1A1A1A;
|
||||
border-bottom: 1px solid #D4D4D4;
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
QMenuBar::item {
|
||||
background-color: transparent;
|
||||
padding: 6px 12px;
|
||||
}
|
||||
|
||||
QMenuBar::item:selected {
|
||||
background-color: #F0F0EE;
|
||||
}
|
||||
|
||||
QMenuBar::item:pressed {
|
||||
background-color: #E5E5E3;
|
||||
}
|
||||
|
||||
/* Menus */
|
||||
QMenu {
|
||||
background-color: #FAFAF8;
|
||||
color: #1A1A1A;
|
||||
border: 1px solid #D4D4D4;
|
||||
padding: 4px 0px;
|
||||
}
|
||||
|
||||
QMenu::item {
|
||||
padding: 8px 32px 8px 16px;
|
||||
}
|
||||
|
||||
QMenu::item:selected {
|
||||
background-color: #1A1A1A;
|
||||
color: #FAFAF8;
|
||||
}
|
||||
|
||||
QMenu::item:disabled {
|
||||
color: #A0A0A0;
|
||||
}
|
||||
|
||||
QMenu::separator {
|
||||
height: 1px;
|
||||
background-color: #D4D4D4;
|
||||
margin: 4px 8px;
|
||||
}
|
||||
|
||||
/* Tool Bar */
|
||||
QToolBar {
|
||||
background-color: #FAFAF8;
|
||||
border: none;
|
||||
border-bottom: 1px solid #D4D4D4;
|
||||
padding: 4px;
|
||||
spacing: 4px;
|
||||
}
|
||||
|
||||
QToolBar::separator {
|
||||
width: 1px;
|
||||
background-color: #D4D4D4;
|
||||
margin: 4px 8px;
|
||||
}
|
||||
|
||||
QToolButton {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
padding: 6px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
QToolButton:hover {
|
||||
background-color: #F0F0EE;
|
||||
}
|
||||
|
||||
QToolButton:pressed {
|
||||
background-color: #E5E5E3;
|
||||
}
|
||||
|
||||
/* Combo Box */
|
||||
QComboBox {
|
||||
background-color: #FAFAF8;
|
||||
color: #1A1A1A;
|
||||
border: 1px solid #D4D4D4;
|
||||
border-radius: 2px;
|
||||
padding: 6px 12px;
|
||||
padding-right: 24px;
|
||||
}
|
||||
|
||||
QComboBox:hover {
|
||||
border-color: #1A1A1A;
|
||||
}
|
||||
|
||||
QComboBox::drop-down {
|
||||
border: none;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
QComboBox::down-arrow {
|
||||
image: none;
|
||||
border-left: 4px solid transparent;
|
||||
border-right: 4px solid transparent;
|
||||
border-top: 5px solid #1A1A1A;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
QComboBox QAbstractItemView {
|
||||
background-color: #FAFAF8;
|
||||
border: 1px solid #D4D4D4;
|
||||
selection-background-color: #1A1A1A;
|
||||
selection-color: #FAFAF8;
|
||||
}
|
||||
|
||||
/* Check Box */
|
||||
QCheckBox {
|
||||
spacing: 8px;
|
||||
}
|
||||
|
||||
QCheckBox::indicator {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #1A1A1A;
|
||||
border-radius: 2px;
|
||||
background-color: #FAFAF8;
|
||||
}
|
||||
|
||||
QCheckBox::indicator:hover {
|
||||
background-color: #F0F0EE;
|
||||
}
|
||||
|
||||
QCheckBox::indicator:checked {
|
||||
background-color: #1A1A1A;
|
||||
image: none;
|
||||
}
|
||||
|
||||
QCheckBox::indicator:checked:after {
|
||||
content: "";
|
||||
}
|
||||
|
||||
QCheckBox:disabled {
|
||||
color: #A0A0A0;
|
||||
}
|
||||
|
||||
QCheckBox::indicator:disabled {
|
||||
border-color: #D4D4D4;
|
||||
}
|
||||
|
||||
/* Radio Button */
|
||||
QRadioButton {
|
||||
spacing: 8px;
|
||||
}
|
||||
|
||||
QRadioButton::indicator {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #1A1A1A;
|
||||
border-radius: 8px;
|
||||
background-color: #FAFAF8;
|
||||
}
|
||||
|
||||
QRadioButton::indicator:hover {
|
||||
background-color: #F0F0EE;
|
||||
}
|
||||
|
||||
QRadioButton::indicator:checked {
|
||||
background-color: #FAFAF8;
|
||||
border: 5px solid #1A1A1A;
|
||||
}
|
||||
|
||||
/* Spin Box */
|
||||
QSpinBox, QDoubleSpinBox {
|
||||
background-color: #FAFAF8;
|
||||
color: #1A1A1A;
|
||||
border: 1px solid #D4D4D4;
|
||||
border-radius: 2px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
|
||||
QSpinBox:focus, QDoubleSpinBox:focus {
|
||||
border-color: #1A1A1A;
|
||||
}
|
||||
|
||||
QSpinBox::up-button, QDoubleSpinBox::up-button,
|
||||
QSpinBox::down-button, QDoubleSpinBox::down-button {
|
||||
background-color: transparent;
|
||||
border: none;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
QSpinBox::up-button:hover, QDoubleSpinBox::up-button:hover,
|
||||
QSpinBox::down-button:hover, QDoubleSpinBox::down-button:hover {
|
||||
background-color: #F0F0EE;
|
||||
}
|
||||
|
||||
/* Slider */
|
||||
QSlider::groove:horizontal {
|
||||
height: 2px;
|
||||
background-color: #D4D4D4;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
QSlider::handle:horizontal {
|
||||
background-color: #1A1A1A;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin: -6px 0px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
QSlider::handle:horizontal:hover {
|
||||
background-color: #333333;
|
||||
}
|
||||
|
||||
QSlider::groove:vertical {
|
||||
width: 2px;
|
||||
background-color: #D4D4D4;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
QSlider::handle:vertical {
|
||||
background-color: #1A1A1A;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
margin: 0px -6px;
|
||||
border-radius: 7px;
|
||||
}
|
||||
|
||||
/* Progress Bar */
|
||||
QProgressBar {
|
||||
background-color: #F0F0EE;
|
||||
border: 1px solid #D4D4D4;
|
||||
border-radius: 2px;
|
||||
height: 8px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
QProgressBar::chunk {
|
||||
background-color: #1A1A1A;
|
||||
border-radius: 1px;
|
||||
}
|
||||
|
||||
/* Group Box */
|
||||
QGroupBox {
|
||||
border: 1px solid #D4D4D4;
|
||||
border-radius: 2px;
|
||||
margin-top: 12px;
|
||||
padding-top: 8px;
|
||||
}
|
||||
|
||||
QGroupBox::title {
|
||||
subcontrol-origin: margin;
|
||||
subcontrol-position: top left;
|
||||
padding: 0px 8px;
|
||||
color: #6B6B6B;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* List/Tree/Table Views */
|
||||
QListView, QTreeView, QTableView {
|
||||
background-color: #FAFAF8;
|
||||
color: #1A1A1A;
|
||||
border: 1px solid #D4D4D4;
|
||||
border-radius: 2px;
|
||||
alternate-background-color: #F5F5F3;
|
||||
selection-background-color: #1A1A1A;
|
||||
selection-color: #FAFAF8;
|
||||
}
|
||||
|
||||
QListView::item, QTreeView::item, QTableView::item {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
QListView::item:hover, QTreeView::item:hover, QTableView::item:hover {
|
||||
background-color: #F0F0EE;
|
||||
}
|
||||
|
||||
QListView::item:selected, QTreeView::item:selected, QTableView::item:selected {
|
||||
background-color: #1A1A1A;
|
||||
color: #FAFAF8;
|
||||
}
|
||||
|
||||
QHeaderView::section {
|
||||
background-color: #F0F0EE;
|
||||
color: #1A1A1A;
|
||||
border: none;
|
||||
border-right: 1px solid #D4D4D4;
|
||||
border-bottom: 1px solid #D4D4D4;
|
||||
padding: 8px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Tooltip */
|
||||
QToolTip {
|
||||
background-color: #1A1A1A;
|
||||
color: #FAFAF8;
|
||||
border: none;
|
||||
padding: 6px 10px;
|
||||
}
|
||||
|
||||
/* Status Bar */
|
||||
QStatusBar {
|
||||
background-color: #FAFAF8;
|
||||
border-top: 1px solid #D4D4D4;
|
||||
color: #6B6B6B;
|
||||
}
|
||||
|
||||
/* Dialog */
|
||||
QDialog {
|
||||
background-color: #FAFAF8;
|
||||
}
|
||||
|
||||
/* Frame */
|
||||
QFrame {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
QFrame[frameShape="4"], /* HLine */
|
||||
QFrame[frameShape="5"] /* VLine */ {
|
||||
background-color: #D4D4D4;
|
||||
}
|
||||
|
||||
/* Stacked Widget */
|
||||
QStackedWidget {
|
||||
background-color: #FAFAF8;
|
||||
}
|
||||
Reference in New Issue
Block a user