API tools faq
paste
bal_gennady

yasb-styles-example

bal_gennady
Sep 29th, 2025
372
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 9.59 KB | Software | 0 0
raw download clone embed print report
  1. * {
  2.     font-size: 12px;
  3.     color: #cdd6f4;
  4.     font-weight: 500;
  5.     font-family: "JetBrainsMono NFP";
  6.     margin: 0;
  7.     padding: 0;
  8. }
  9. .yasb-bar {
  10.     padding: 0 8px;
  11.     margin: 0;
  12.     background-color: #1e1e2e;
  13.     border-radius: 16px;
  14. }
  15. .widget {
  16.     padding: 0 10px;
  17.     margin: 0;
  18. }
  19. .widget .label {
  20.     padding: 2px 2px 1px 2px;
  21.  
  22. }
  23. .widget .label.alt {
  24.     padding: 1px 8px 1px 8px;
  25. }
  26.  .clock-widget .label {
  27.     padding-left:8px;
  28. }
  29. .glazewm-workspaces {
  30.     margin: 0;
  31. }
  32.  
  33. .glazewm-workspaces .ws-btn {
  34.     font-size: 18px;
  35.     background-color: transparent;
  36.     border: none;
  37.     padding: 0 2px 0 2px;
  38.     margin: 0;
  39.     color: #95a0ad;
  40. }
  41.  
  42. .glazewm-workspaces .ws-btn.active_populated {
  43.     color: #89b4fa;
  44. }
  45.  
  46. .glazewm-workspaces .ws-btn.active_empty {
  47.     color: #89b4fa;
  48. }
  49.  
  50. .glazewm-workspaces .ws-btn.populated {
  51.     color: #74c7ec;
  52. }
  53.  
  54. .glazewm-workspaces .ws-btn.empty {
  55.     color: #95a0ad;
  56. }
  57.  
  58. .glazewm-workspaces .ws-btn:hover,
  59. .glazewm-workspaces .ws-btn.populated:hover,
  60. .glazewm-workspaces .ws-btn.empty:hover {
  61.     color: #89b4fa;
  62. }
  63.  
  64. .glazewm-tiling-direction {
  65.     background-color: transparent;
  66.     padding: 0;
  67.     margin: 0;
  68. }
  69.  
  70. .glazewm-tiling-direction .btn {
  71.     font-size: 18px;
  72.     width: 14px;
  73.     padding: 0 4px 0 4px;
  74.     color: #CDD6F4;
  75.     border: none;
  76. }
  77.  
  78. .glazewm-tiling-direction .btn:hover {
  79.     background-color: #727272;
  80. }
  81. /*POWER MENU WIDGET*/
  82. /* Uptime text */
  83. .uptime {
  84.     font-size: 14px;
  85.     margin-bottom: 10px;
  86.     color: rgba(191, 202, 219, 0.726);
  87.     font-weight: 600;
  88.     font-family: "JetBrainsMono NFP";
  89. }
  90. .power-menu-widget .label {
  91.     color: #eba0ac;
  92.     font-size: 16px;
  93. }
  94. .power-menu-popup .button {
  95.     padding: 0;
  96.     width: 160px;
  97.     height: 240px;
  98.     border-radius: 4px;
  99.     background-color: rgba(41, 42, 58, 0.75);
  100.     font-family: "JetBrainsMono NFP";
  101.     color: white;
  102.     border: 4px solid rgba(255, 255, 255, 0);
  103.  
  104. }
  105. .power-menu-popup .button.hover {
  106.     background-color: rgb(55, 56, 75);
  107.     border: 4px solid rgb(55, 56, 75);
  108. }
  109. .power-menu-popup .button .label {
  110.     margin-bottom: 8px;
  111.     font-size: 16px;
  112.     font-weight: 600;
  113.     color: rgba(255, 255, 255, 0.6);
  114.     font-family: "JetBrainsMono NFP";
  115. }
  116. .power-menu-popup .button .icon {
  117.     font-size: 64px;
  118.     padding-top: 54px;
  119.     color: rgba(255, 255, 255, 0.25);
  120. }
  121. .power-menu-popup .button.cancel {
  122.     height: 20px !important; /* Much thinner than the 240px of other buttons */
  123.     width: 100%; /* Full width to span across */
  124.     padding-top: 10px;
  125.     padding-bottom: 10px;
  126. }
  127.  
  128. .power-menu-popup .button.cancel .icon {
  129.     font-size: 24px !important; /* Smaller icon for the thinner button */
  130.     padding-top: 0px !important; /* Remove the large top padding */
  131.     color: rgba(243, 139, 168, 0.55);
  132. }
  133.  
  134. .power-menu-popup .button.cancel .label {
  135.     margin-bottom: 0px !important; /* Remove bottom margin */
  136.     color: rgba(243, 139, 168, 0.95);
  137. }
  138. /* ICONS */
  139. .icon {
  140.     font-size: 16px;
  141. }
  142. .volume-widget .icon {
  143.     color: #89b4fa;
  144.     margin: 1px 2px 0 0;
  145. }
  146. .start-menu .icon {
  147.     font-size: 18px;
  148.     color: #89b4fa
  149. }
  150. .clock-widget .icon {
  151.     color: #cba6f7;
  152.     font-size: 14px;
  153. }
  154. /* WEATHER WIDGET */
  155. .weather-card {
  156.     background-color: rgba(17, 17, 27, 0.5);
  157. }
  158. .weather-card-today {
  159.     border: 1px solid #282936;
  160.     border-radius: 8px;
  161.     background-color:  rgba(17, 17, 27, 0.2);
  162. }
  163. .weather-card-today .label {
  164.     font-size: 12px;
  165. }
  166. .weather-card-today .label.location {
  167.     font-size: 24px;
  168.     font-weight: 700;
  169. }
  170. .weather-card-today .label.alert {
  171.     font-size: 12px;
  172.     font-weight: 700;
  173.     background-color: rgba(247, 199, 42, 0.05);
  174.     border: 1px solid rgba(247, 209, 42, 0.1);
  175.     color: rgba(196, 181, 162, 0.85);
  176.     border-radius: 6px;
  177.     padding: 5px 0;
  178. }
  179. .weather-card-day {
  180.     border: 1px solid #45475a;
  181.     border-radius: 8px;
  182.     background-color:  rgba(17, 17, 27, 0.2);
  183. }
  184.  
  185. .weather-card-day.active {
  186.     background-color: rgba(40, 40, 60, 0.6);
  187.     border: 1px solid rgba(50, 50, 75, 1);
  188. }
  189.  
  190. .weather-card-day:hover {
  191.     background-color: rgba(40, 40, 60, 0.6);
  192. }
  193.  
  194. .weather-card-day .label {
  195.     font-size: 12px;
  196. }
  197.  
  198. .weather-card .hourly-container {
  199.     border: 1px solid #282936;
  200.     background-color: #3c5fa0;
  201.     border-radius: 8px;
  202.     min-height: 150px;
  203. }
  204.  
  205. .weather-card .hourly-data {
  206.     /* font-family: 'Segoe UI';*/
  207.     /* color: cyan;*/ /* <- Font color */
  208.     background-color: #FAE93F; /* <- Curve color */
  209.     font-size: 12px;
  210.     font-weight: bold;
  211. }
  212. .media-widget {
  213.     padding: 0;
  214.     margin: 0;
  215. }
  216. .media-widget .label {
  217.     color: #b4befe;
  218.     padding: 0px;
  219.     padding-right: 4px;
  220. }
  221. .media-menu {
  222.     min-width: 420px;
  223.     max-width: 420px;
  224.     background-color: rgba(31, 39, 49, 0.5);
  225. }
  226. .media-menu .title,
  227. .media-menu .artist,
  228. .media-menu .source {
  229.     font-size: 14px;
  230.     font-weight: 600;
  231.     margin-left: 10px;
  232.     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  233. }
  234. .media-menu .artist {
  235.     font-size: 13px;
  236.     color: #6c7086;
  237.     margin-top: 0px;
  238.     margin-bottom: 8px;
  239. }
  240. .media-menu .source {
  241.     font-size: 11px;
  242.     color: #000;
  243.     font-weight: normal;
  244.     border-radius: 3px;
  245.     background-color: #bac2de;
  246.     padding: 2px 4px;
  247.  
  248. }
  249. /* The source class name is the same as what you see in the media widget; just replace spaces with dashes and convert it to lowercase.
  250. Example: "Windows Media" becomes "windows-media" */
  251. .media-menu .source.firefox {
  252.     background-color: #ff583b;
  253.     color: #ffffff;
  254. }
  255. .media-menu .source.spotify {
  256.     background-color: #199143;
  257.     color: #ffffff;
  258. }
  259. .media-menu .source.edge {
  260.     background-color: #0078d4;
  261.     color: #ffffff;
  262. }
  263. .media-menu .source.windows-media {
  264.     background-color: #0078d4;
  265.     color: #ffffff;
  266. }
  267.  
  268. .media-menu .btn {
  269.     font-family: "Segoe Fluent Icons";
  270.     font-size: 14px;
  271.     font-weight: 400;
  272.     margin: 10px 2px 0px 2px;
  273.     min-width: 40px;
  274.     max-width: 40px;
  275.     min-height: 40px;
  276.     max-height: 40px;
  277.     border-radius: 20px;
  278. }
  279. .media-menu .btn.prev {
  280.     margin-left: 10px;
  281. }
  282. .media-menu .btn:hover {
  283.     color: white;
  284.     background-color: rgba(255, 255, 255, 0.1);
  285. }
  286. .media-menu .btn.play {
  287.     background-color: rgba(255, 255, 255, 0.1);
  288.     font-size: 20px
  289. }
  290. .media-menu .btn.disabled:hover,
  291. .media-menu .btn.disabled {
  292.     color: #4e525c;
  293.     background-color: rgba(0, 0, 0, 0);
  294. }
  295.  
  296. .media-menu .playback-time {
  297.     font-size: 13px;
  298.     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  299.     color: #7f849c;
  300.     margin-top: 20px;
  301.     min-width: 100px;
  302. }
  303. .media-menu .progress-slider {
  304.     height: 10px;
  305.     margin: 5px 4px;
  306.     border-radius: 3px;
  307. }
  308. .media-menu .progress-slider::groove {
  309.     background: transparent;
  310.     height: 2px;
  311.     border-radius: 3px;
  312.     background: rgba(255, 255, 255, 0.1);
  313.  
  314. }
  315. .media-menu .progress-slider::groove:hover {
  316.     background: transparent;
  317.     height: 6px;
  318.     border-radius: 3px;
  319.     background: rgba(255, 255, 255, 0.2);
  320. }
  321. .media-menu .progress-slider::sub-page {
  322.     background: white;
  323.     border-radius: 3px;
  324.     height: 4px;
  325. }
  326.  /* Hide media widget buttons */
  327. .media-widget .btn {
  328.     padding: 0;
  329.     margin: 0 -6px;
  330.     padding-left: 4px;
  331. }
  332. .pomodoro-widget {
  333.     padding: 0 0 0 0;
  334. }
  335. .pomodoro-widget .icon {
  336.     font-size: 12px;
  337.     padding-right: 4px;
  338. }
  339. .pomodoro-widget .label.paused,
  340. .pomodoro-widget .icon.paused {
  341.     color: #7d7e8b;
  342. }
  343. .pomodoro-widget .label.work,
  344. .pomodoro-widget .icon.work {
  345.     color: #a6e3a1;
  346. }
  347. .pomodoro-widget .label.break,
  348. .pomodoro-widget .icon.break {
  349.     color: #89b4fa;
  350. }
  351. /* Pomodoro menu styling */
  352. .pomodoro-menu {
  353.     background-color: rgba(17, 17, 27, 0.2);
  354.     border-radius: 8px;
  355. }
  356. .pomodoro-menu .header {
  357.     font-size: 16px;
  358.     font-weight: 600;
  359.     max-height: 0px;
  360.     color: #ffffff;
  361. }
  362. .pomodoro-menu .status {
  363.     font-size: 18px;
  364.     font-weight: 600;
  365.     color: #cdd6f4;
  366. }
  367. .pomodoro-menu .session {
  368.     font-size: 12px;
  369.     color: #a6adc8;
  370. }
  371. .pomodoro-menu .button {
  372.     background-color: #3f4053;
  373.     color: #cdd6f4;
  374.     border: none;
  375.     border-radius: 4px;
  376.     padding: 6px 12px;
  377. }
  378. .pomodoro-menu .button.start {
  379.     background-color: #3f4053;
  380. }
  381. .pomodoro-menu .button.reset {
  382.     background-color: #3f4053;
  383. }
  384. .pomodoro-menu .button:hover {
  385.     background-color: rgba(255, 255, 255, 0.158);
  386. }
  387. .pomodoro-menu .button.pause {
  388.     background-color: #a6e3a1;
  389.     color: #1e1e2e;
  390. }
  391. .pomodoro-menu .button:pressed {
  392.     background-color: #5a5b6e;
  393. }
  394.  
  395. .calendar {
  396.     background-color: rgba(17, 17, 27, 0.4);
  397. }
  398. .calendar .calendar-table,
  399. .calendar .calendar-table::item {
  400.     background-color: rgba(17, 17, 27, 0);
  401.     color: rgba(162, 177, 196, 0.85);
  402.     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  403.     margin: 0;
  404.     padding: 0;
  405.     border: none;
  406.     outline: none;  
  407. }
  408. .calendar .calendar-table::item:selected {
  409.     color: rgb(255, 255, 255);
  410.     background-color: #007acc;
  411.     border-radius: 10px;
  412. }
  413. .calendar .day-label {
  414.     margin-top: 20px;
  415. }
  416. .calendar .day-label,
  417. .calendar .month-label,
  418. .calendar .date-label,
  419. .calendar .week-label,
  420. .calendar .holiday-label {
  421.     font-family: 'Segoe UI';
  422.     font-size: 16px;
  423.     color: #fff;
  424.     font-weight: 700;
  425.     min-width: 180px;
  426.     max-width: 180px;
  427. }
  428. .calendar .week-label,
  429. .calendar .holiday-label {
  430.     font-size: 12px;
  431.     font-weight: 600;
  432.     color: rgba(162, 177, 196, 0.85);
  433. }
  434. .calendar .holiday-label {
  435.     color: rgba(162, 177, 196, 0.85);
  436.     font-weight: 700;
  437. }
  438. .calendar .month-label {
  439.     font-weight: normal;
  440. }
  441. .calendar .date-label {
  442.     font-size: 88px;
  443.     font-weight: 900;
  444.     color: rgb(255, 255, 255);
  445.     margin-top: -20px;
  446. }
Tags: dotfile
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!