gala.css 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. /*******
  2. * Gala *
  3. *******/
  4. .gala-notification {
  5. border: none;
  6. border-radius: 4px;
  7. background-color: transparent;
  8. background-image:
  9. linear-gradient(
  10. to bottom,
  11. @bg_color,
  12. @bg_color 80%,
  13. shade (
  14. @bg_color,
  15. 0.94
  16. )
  17. );
  18. box-shadow:
  19. inset 0 0 0 1px alpha (@bg_highlight_color, 0.1),
  20. inset 0 1px 0 0 alpha (@bg_highlight_color, 0.9),
  21. inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.3),
  22. 0 0 0 1px alpha (#000, 0.2),
  23. 0 3px 6px alpha (#000, 0.16),
  24. 0 5px 5px -3px alpha (#000, 0.4);
  25. }
  26. .gala-notification .title,
  27. .gala-notification .label {
  28. color: @text_color;
  29. }
  30. .gala-notification GtkImage {
  31. color: alpha (@text_color, 0.8);
  32. }
  33. .gala-button {
  34. padding: 3px;
  35. color: #fff;
  36. border: none;
  37. border-radius: 100px;
  38. background-image:
  39. linear-gradient(
  40. to bottom,
  41. #7e7e7e,
  42. #3e3e3e
  43. );
  44. box-shadow:
  45. inset 0 0 0 1px alpha (#fff, 0.02),
  46. inset 0 1px 0 0 alpha (#fff, 0.07),
  47. inset 0 -1px 0 0 alpha (#fff, 0.01),
  48. 0 0 0 1px alpha (#000, 0.4),
  49. 0 3px 6px alpha (#000, 0.16),
  50. 0 3px 6px alpha (#000, 0.23);
  51. text-shadow: 0 1px 1px alpha (#000, 0.6);
  52. }
  53. /*********
  54. * Panel *
  55. ********/
  56. .panel {
  57. background-color: transparent;
  58. transition: all 100ms ease-in-out;
  59. }
  60. .panel.maximized {
  61. background-color: alpha(#000, 0);
  62. }
  63. .panel.translucent {
  64. background-color: alpha(#000, 0);
  65. }
  66. .composited-indicator > revealer label,
  67. .composited-indicator > revealer image,
  68. .composited-indicator > GtkRevealer {
  69. color: #fff;
  70. font-weight: bold;
  71. text-shadow:
  72. 0 0 2px alpha (#000, 0.3),
  73. 0 1px 2px alpha (#000, 0.6);
  74. icon-shadow:
  75. 0 0 2px alpha (#000, 0.3),
  76. 0 1px 2px alpha (#000, 0.6);
  77. transition: all 200ms ease-in-out;
  78. }
  79. .composited-indicator .keyboard {
  80. background-color: #fff;
  81. border-radius: 2px;
  82. box-shadow:
  83. 0 0 2px alpha (#000, 0.3),
  84. 0 1px 2px alpha (#000, 0.6);
  85. color: #333;
  86. font-weight: 600;
  87. padding: 0 3px;
  88. text-shadow: none;
  89. }
  90. .panel.color-light .composited-indicator > revealer label,
  91. .panel.color-light .composited-indicator > revealer image,
  92. .panel.color-light .composited-indicator > GtkRevealer {
  93. color: alpha (#000, 0.65);
  94. text-shadow:
  95. 0 0 2px alpha (#fff, 0.3),
  96. 0 1px 0 alpha (#fff, 0.25);
  97. icon-shadow:
  98. 0 0 2px alpha (#fff, 0.3),
  99. 0 1px 0 alpha (#fff, 0.25);
  100. }
  101. .panel.color-light .composited-indicator .keyboard {
  102. background-color: alpha (#000, 0);
  103. box-shadow:
  104. 0 0 2px alpha (#fff, 0.3),
  105. 0 1px 0 alpha (#fff, 0.25);
  106. color: #fff;
  107. text-shadow: none;
  108. }
  109. .panel .popover {
  110. box-shadow:
  111. inset 0 -1px 0 0 alpha (@bg_highlight_color, 0.5),
  112. 0 3px 4px alpha (#000, 0.15),
  113. 0 3px 3px -3px alpha (#000, 0.35);
  114. }