Base de code pour une application electron a base d'angular.

title-bar.component.scss 1.3KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
  1. #title-bar {
  2. user-select: none;
  3. -webkit-app-region: drag;
  4. cursor: default;
  5. display: flex;
  6. align-items: center;
  7. width: 100%;
  8. height: 31px;
  9. background-color: #191818;
  10. visibility: visible;
  11. &>.title {
  12. user-select: none;
  13. cursor: default;
  14. padding-left: 12px;
  15. font-family: "Segoe UI", Arial;
  16. font-size: 12px;
  17. color: rgb(255, 255, 255);
  18. flex: 1 1 0%;
  19. }
  20. &>.controls {
  21. user-select: none;
  22. cursor: default;
  23. display: flex;
  24. height: 32px;
  25. &>.minimize,
  26. &>.maximize,
  27. &>.close {
  28. user-select: none;
  29. -webkit-app-region: no-drag;
  30. cursor: default;
  31. width: 46px;
  32. height: 100%;
  33. line-height: 0;
  34. display: flex;
  35. justify-content: center;
  36. align-items: center;
  37. }
  38. &>.minimize:hover,
  39. &>.maximize:hover {
  40. transition: background-color 0.1s ease 0s;
  41. background-color: rgba(255, 255, 255, 0.13);
  42. }
  43. &>.minimize:active,
  44. &>.maximize:active {
  45. background-color: rgba(255, 255, 255, 0.23);
  46. }
  47. &>.close:hover {
  48. transition: background-color 0.1s ease 0s;
  49. background-color: rgb(232, 17, 35);
  50. }
  51. &>.close:active {
  52. background-color: rgb(241, 112, 122);
  53. }
  54. &>.close:active>svg>polygon {
  55. fill: rgb(0, 0, 0);
  56. }
  57. }
  58. }