| blob | ce36bed05c024dbe593646c25b19d4b173d761b7 |
1 /* GTK3 WIDGET STYLING */
4 /*
5 * Keep in order of:
6 * General -> Specific
7 * Order of appearance in widget tree.
8 * See GtkInspector
9 * GTK_DEBUG=interactive ~/path_to_gtk3/bin/inkscape
10 *
11 * We need a standardized naming scheme.
12 *
13 * As of Gtk 3.20, you cannot use widget names.
14 */
17 /* Standard theme based colors. Prefer these.
18 *
19 * @theme_bg_color
20 * @theme_fg_color
21 * @theme_base_color
22 * @theme_text_color
23 * @theme_selected_bg_color
24 * @theme_selected_fg_color
25 * @theme_tooltip_bg_color
26 * @theme_tooltip_fg_color
27 *
28 */
30 /* Our own custom shades... better not to use.
31 * Lightest to darkest based on linear rgb.
32 */
34 /* White */
36 /* Slightly off white */
41 /* 50% Gray */
46 /* Black */
50 /* Inkscape CSS helper
51 * to add a class to a widget do some thing like
52 * widget->get_style_context()->add_class("mycoolclass");
53 * we define a bunch of helper CSS styles
54 * Each Inkscape desktop has some classes in top level window
55 * called "dark|bright" (syncked with dark or brighrt themes) and "symbolic|regular" (defined by the user in themes preferences)
56 * so you can style using this clases
57 * by this way you can always know if the UI is in dark mode or using symbolic icons
58 * Also added some helper clases:
59 * ".inverted" invert colors fon widhet and childs
60 * ".highlight-dark" highlights with red tint
61 * ".highlight-light" highlights with yellow tint
62 * ".symbolic" Force icon symbolic
63 * ".regular" Force colorful icons
64 * " .forcebright Force darlk even if the towp wingow has clas dark (happends when theme is dark)
65 * " .forcedark" Force darlk even if the towp wingow has clas bright
66 * :::::::: Combo box.
67 * "..combobright" Combo bright
68 */
70 *{
72 }
74 /* Make icons in treeview etc use theme fg_color, not the stronger text_color */
77 }
80 }
83 }
85 /* Select on both `image` for GtkImage and `.image` for GtkCellRendererPixbuf */
89 }
91 /* For these neednʼt be more specific, as this property only applies to icons */
95 }
99 }
103 }
107 }
117 }
126 }
130 }
132 /* blinking animation for dialogs reopen*/
137 }
142 }
147 }
151 }
155 }
159 }
163 .dark .forcebright :not(menuitem):not(.rawstyle):not(overshoot):not(undershoot):not(selection) {
167 }
175 }
178 }
182 }
185 /* atribute dialog popup size */
188 }
191 /* note: monospaced font is set by ThemeContext::adjust_global_font_scale() */
192 }
194 /*
195 *to get system default colors
196 * with Gdk::RGBA success =_symbolic_error_color.get_stseparatole_context()->get_color();
197 * _symbolic_error_color has one of this classes applied
198 */
203 }
207 }
211 }
215 }
222 }
226 }
232 }
236 }
241 }
247 }
251 }
255 }
258 background-color: @theme_base_color; /* some themes don't seem to have a background color for list rows defined and would end up transparent otherwise */
261 }
265 }
268 /* Selector dialog */
273 }
281 }
287 }
292 }
297 }
305 }
309 }
316 }
323 }
325 /* ink-ruler */
328 /* make size relative */
331 }
335 }
339 }
342 /* increase contrast between background and page area */
344 }
346 /* Ensure ui/themes.cpp excludes these classes on applying overridebasecolor: */
350 }
353 }
357 }
360 }
365 }
369 }
371 /* The actual canvas (Inkscape's drawing area). */
372 SPCanvas {
374 }
376 /* Those are three buttons in canvas corners; their size dictates how large scrollbars are */
385 }
386 /* Don't let images inside those buttons inflate their sizes */
389 }
392 }
394 /* Keep palette scrollbar from generating warnings. */
397 }
399 /* Override minimum size of container children for palette. */
403 }
405 /* Reduce width of Fill and Stroke dialog */
409 }
411 /* InkSpinScale */
414 }
421 }
423 /* Hide slider */
432 }
437 }
442 }
445 }
449 }
457 }
462 }
466 }
472 }
477 }
482 }
486 }
491 }
495 }
497 /* GtkTreeView: clarify drop locations (especially important for XML editor) */
501 }
505 }
509 }
515 }
525 }
530 }
532 /*
533 * Inkscape start dialog styles
534 */
538 /* opaque bg at bottom corners, rather than having gap, which in GTK3 glitches in transition */
540 }
545 }
548 }
553 }
557 }
561 }
565 }
568 }
573 }
576 /* small button in-line with spinbuttons, made small not to inflate height of spinbutton */
578 }
583 }
585 /* In some themes stack switcher buttons are extra wide forcing dialogs too wide */
586 stackswitcher button {
590 }
592 /* ColorPalette */
593 /* set style for small buttons; we need them reasonably small,
594 * since they impact min height of color palette strip */
599 }
607 }
608 /* remove padding/margins from FlowBoxChild widgets,
609 * so previews can be adjacent to each other */
616 }
617 /*removes dashed line (scrolling indicator) on color palette for all themes */
623 }
629 }
634 }
637 }
640 }
641 }
649 }
653 }
658 }
662 }
664 /* slider with tighter margins */
667 }
672 }
674 /* add .small-marks class to Gtk::Scale to have smaller font used, since markup didn't work there */
677 }
679 /* Square toolbar buttons: request square buttons for all toolbars. */
682 }
688 }
695 }
701 }
706 }
708 /* Give layer selector button label a highlight color */
709 #LayerSelector label
710 {
714 /* Color is set in src/ui/widget/layer-selector.cpp */
715 }
720 }
724 }
728 }
732 }
735 /* Extra height for text descenders (?) makes style swatch bounding box too tall enlarging toolbars;
736 counter combined height of two lines of text that not even line-height can defeat with negative margin. */
738 }
743 }
747 }
751 }
753 /* heading label in dialogs */
758 }
759 /* topmost heading in dialogs */
762 }
763 /* slightly smaller (sub)heading label in dialogs */
768 }
770 /* single-level indentation for labels in a dialog */
773 }
777 }
781 }
785 }
789 }
793 }
794 /* Revise for gtk4: There's no box in popover */
795 /*.inkscape-toolbar > popover > box {*/
796 /* margin: 4px 3px;*/
797 /*}*/
798 /*.inkscape-toolbar > popover > box > * {*/
799 /* margin-right: 3px;*/
800 /*}*/
801 /*.inkscape-toolbar > popover > box > *:last-child {*/
802 /* margin-right: 0;*/
803 /*}*/
805 /* for dialogs with "Apply" button (or equivalent) - larger hit target */
808 }
813 }
817 }
823 }
826 }
830 }
831 /*
832 * Inkscape Export Dialog
833 */
836 }
839 }
842 }
848 }
854 }
858 }
860 /* Defeat standard darker background color on views: use popoverʼs background */
864 }
868 /* background-color: @theme_fg_color; - this doesn't work for some themes (like MonoThemeDark) */
870 }
874 }
876 /* LPE Dialog add */
879 }
890 }
894 }
900 }
905 }
910 }
914 }
918 }
922 }
926 }
931 }
943 }
948 }
952 }
958 }
963 }
969 }
978 }
984 }
989 }
993 }
997 }
1001 }
1009 }
1019 }
1023 }
1029 }
1036 }
1040 }
1047 }
1057 }
1063 }
1068 }
1073 }
1077 }
1081 }
1088 }
1091 }
1098 }
1106 }
1110 }
1114 }
1118 }
1124 }
1136 }
1140 }
1145 }
1150 }
1154 }
1157 }
1160 }
1163 }
1167 }
1169 /* min size for an angle slider in gradient editor */
1172 }
1174 /* Gtk::PopoverMenu and Inkscape::UI::Widget::PopoverMenu */
1175 /* Make it look basically like GtkMenu; see comments @ original merge request */
1178 /* Rounded corners can glitch in GTK3 with submenus, and GtkMenu was square anyway = emulate */
1182 }
1185 }
1189 }
1193 }
1194 /* popover.menu modelbutton, */
1200 }
1204 }
1208 }
1211 }
1212 /* Defeat defaulting to having more spacing between RadioButtons than GtkMenu */
1215 }
1216 /* Emulate GtkMenu theming in absence of ability to change CSS node name, unlike our PopoverMenu */
1217 /* popover.menu modelbutton:focus,
1218 popover.menu modelbutton:hover {
1219 background-color: @theme_selected_bg_color;
1220 color: @theme_selected_fg_color;
1221 } */
1222 /* UGH! GtkMenuSectionBox has Widget:margin = 10px. Counteract to look like popover.popover-menu */
1225 }
1226 /* Detect submenu headings & replicate GTK .dim-label, looks nicer than leaving normal fg colour */
1228 {
1230 }
1232 /* regular popover that has no arrow and pretends to be a dropdown menu */
1235 }
1237 /* darker background for extensions gallery due to fixed-color thumbnails (white background + drop shadow) */
1240 }
1242 /* Add margins to tool toolbar: a) separators, so they don't touch buttons b) buttons, so they don't touch sides */
1246 }
1250 }
1252 margin: 1px; /* toolbar box itself, so it has some breathing space; other toolbars have much larger margins */
1253 }
1255 /* used @ ui/themes to get correct foreground color; get_color() can be wrong */
1256 /* Asterisks & stuff in the selectors are just to ensure sufficient priority. */
1260 {
1262 }
1264 /* As GTK4 only lets us get the fg color, use these to stash other colors there…
1265 by calling util:get_color_with_class(), *BUT* see its note re this technique.
1266 Asterisks & stuff in the selectors are just to ensure sufficient priority. */
1270 {
1272 }
1276 {
1278 }
1280 /* ColorSlider */
1284 }
1290 }
1294 }
1298 }
1300 /* ColorPreview */
1304 }
1308 }
1312 }
1314 /* GradientImage */
1318 }
1320 /* GradientWithStops */
1324 /* widget's height; it should take stop template's height into account
1325 * current value is fine-tuned to make stop handles overlap gradient image
1326 * just the right amount */
1328 }
1329 /* focus outline, emulates style of GTKʼs Adwaita/Default CSS themeʼs outline */
1334 }
1337 }
1339 /* Canvas */
1343 }
1346 /* symbol items should be tightly packed */
1348 }
1350 /* IconPreview */
1353 }
1358 }
1360 /* GtkFrames that formerly had :shadow-type == NONE */
1363 }
1365 /*we dont want higlight with tab order only want checked ones */
1369 }
1371 /* Adding some margins for popup dialogs, so the content is not touching the window borders */
1374 }
1376 /* Tabs widget */
1381 }
1386 }
1393 }
1396 }
1399 }
1400 }
1408 }
1410 /*helper info in popover menu*/
1414 }
1416 /* limit height of list view items */
1419 }
1421 /* gridview items with smaller margins */
1426 }
1428 /* list view with items based on labels need some extra vertical space */
1432 }
1436 }
1438 /* About screen slide show transitions >>>>>>>>>>>>>>>>>>>>>>>>> */
1442 }
1446 }
1449 }
1452 }
1456 }
1457 /* <<<<<<<<<<<<<<<<<<<<<<<< About screen slide show transitions */
1459 /* Grid definition panel/box in document properties dialog */
1462 }
1464 InkSpinButton {
1466 }
1470 }
1476 }
1480 }
1484 }
1487 }
1489 /* Shrink area of separator's influence or else it will interfere with ruler and multipaned handle. */
1493 }
1495 /* Simple decorators for resizing handles giving them borders */
1502 }
1509 }
1511 /* Adds an exception to StartScreen recent files tab
1512 which removes the frame in the bottom
1513 See share/ui/inkscape-start.glade:637 */
1516 }
1518 /* separators for DropDown widget's popup list */
1521 /* choose separator color that's going to be visible in a popup with both light and dark theme */
1523 }
1525 /* Eliminate mysterious blue frame that shows up in a list popup of the dropdownlist widget */
1528 }
1530 /* Giving dialog buttons sending responses min size to keep them wider */
1533 }
1535 /* Limit max size of rows in a stack sidebar to something more compact */
1538 }