#524 avoid Tailwind or Quasar classes for default style which are hard to override

nicegui/client.py

@@ -35,10 +35,10 @@ class Client:
         self.environ: Optional[Dict[str, Any]] = None
         self.shared = shared
 
-        with Element('q-layout', _client=self).props('view="HHH LpR FFF"').classes('outline-none') as self.layout:
+        with Element('q-layout', _client=self).props('view="HHH LpR FFF"').classes('nicegui-layout') as self.layout:
             with Element('q-page-container'):
                 with Element('q-page'):
-                    self.content = Element('div').classes('q-pa-md column items-start gap-4')
+                    self.content = Element('div').classes('nicegui-content')
 
         self.waiting_javascript_commands: Dict[str, str] = {}
 

nicegui/elements/aggrid.py

@@ -23,7 +23,7 @@ class AgGrid(Element):
         super().__init__('aggrid')
         self._props['options'] = options
         self._props['html_columns'] = html_columns
-        self._classes = [f'ag-theme-{theme}', 'w-full', 'h-64']
+        self._classes = ['nicegui-aggrid', f'ag-theme-{theme}']
 
     @property
     def options(self) -> Dict:

nicegui/elements/card.py

@@ -9,7 +9,7 @@ class Card(Element):
         Provides a container with a dropped shadow.
         """
         super().__init__('q-card')
-        self.classes('column items-start q-pa-md gap-4')
+        self._classes = ['nicegui-card']
 
     def tight(self):
         self._classes.clear()

nicegui/elements/column.py

@@ -9,4 +9,4 @@ class Column(Element):
         Provides a container which arranges its child in a row.
         '''
         super().__init__('div')
-        self.classes('column items-start gap-4')
+        self._classes = ['nicegui-column']

nicegui/elements/log.py

@@ -19,8 +19,7 @@ class Log(Element):
         super().__init__('log')
         self._props['max_lines'] = max_lines
         self._props['lines'] = ''
-        self.classes('border whitespace-pre font-mono')
-        self.style('opacity: 1 !important; cursor: text !important')
+        self._classes = ['nicegui-log']
         self.lines: deque[str] = deque(maxlen=max_lines)
 
     def push(self, line: Any) -> None:

nicegui/elements/row.py

@@ -9,4 +9,4 @@ class Row(Element):
         Provides a container which arranges its child in a row.
         '''
         super().__init__('div')
-        self.classes('row items-start gap-4')
+        self._classes = ['nicegui-row']

nicegui/elements/separator.py

@@ -9,4 +9,4 @@ class Separator(Element):
         A separator for cards, menus and other component containers.
         """
         super().__init__('q-separator')
-        self._classes = ['w-full']
+        self._classes = ['nicegui-separator']

nicegui/page_layout.py

@@ -36,7 +36,7 @@ class Header(ValueElement):
         '''
         with globals.get_client().layout:
             super().__init__(tag='q-header', value=value, on_value_change=None)
-        self.classes('q-pa-md row items-start gap-4')
+        self._classes = ['nicegui-header']
         self._props['bordered'] = bordered
         self._props['elevated'] = elevated
         code = list(self.client.layout._props['view'])
@@ -85,7 +85,7 @@ class Drawer(Element):
         self._props['side'] = side
         self._props['bordered'] = bordered
         self._props['elevated'] = elevated
-        self._classes = ['q-pa-md']
+        self._classes = ['nicegui-drawer']
         code = list(self.client.layout._props['view'])
         code[0 if side == 'left' else 2] = side[0].lower() if top_corner else 'h'
         code[4 if side == 'left' else 6] = side[0].upper() if fixed else side[0].lower()
@@ -175,7 +175,7 @@ class Footer(ValueElement):
         '''
         with globals.get_client().layout:
             super().__init__(tag='q-footer', value=value, on_value_change=None)
-        self.classes('q-pa-md row items-start gap-4')
+        self.classes('nicegui-footer')
         self._props['bordered'] = bordered
         self._props['elevated'] = elevated
         code = list(self.client.layout._props['view'])

nicegui/static/nicegui.css

@@ -1,3 +1,59 @@
+.nicegui-layout {
+  outline: 2px solid transparent;
+  outline-offset: 2px;
+}
+.nicegui-header,
+.nicegui-footer {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 16px;
+}
+.nicegui-drawer {
+  padding: 16px;
+}
+.nicegui-content {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 16px;
+}
+.nicegui-row {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 1rem;
+}
+.nicegui-column {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+}
+.nicegui-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1rem;
+  padding: 16px;
+}
+.nicegui-separator {
+  width: 100%;
+}
+.nicegui-aggrid {
+  width: 100%;
+  height: 16rem;
+}
+.nicegui-log {
+  border-width: 1px;
+  white-space: pre;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  opacity: 1 !important;
+  cursor: text !important;
+}
+
 #popup {
   position: fixed;
   bottom: 0;