API tools faq
paste
Advertisement
Guest User

styles.css

a guest
Feb 26th, 2025
33
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 10.84 KB | None | 0 0
raw download clone embed print report
  1. /*VARIABLES AND SOME DEFAULT SETTINGS*/
  2. :root {
  3.     --rosewater: #f5e0dc;
  4.     --flamingo: #f2cdcd;
  5.     --pink: #f5c2e7;
  6.     --mauve: #cba6f7;
  7.     --red: #f38ba8;
  8.     --maroon: #eba0ac;
  9.     --peach: #fab387;
  10.     --peachedit: #ecd093;
  11.     --peachedit2: #e9bb77;
  12.     --yellow: #f9e2af;
  13.     --green: #a6e3a1;
  14.     --teal: #94e2d5;
  15.     --sky: #89dceb;
  16.     --sapphire: #74c7ec;
  17.     --blue: #89b4fa;
  18.     --lavender: #b4befe;
  19.     --text: #cdd6f4;
  20.     --subtext1: #bac2de;
  21.     --subtext0: #a6adc8;
  22.     --overlay2: #9399b2;
  23.     --overlay1: #7f849c;
  24.     --overlay0: #6c7086;
  25.     --surface2: #585b70;
  26.     --surface1: #45475a;
  27.     --surface1: #282936;
  28.     --base: #1e1e2e;
  29.     --winbutton: #565178;
  30.     --icon: #b5c7d7;
  31.     --basetransparent: rgba(30, 30, 46, 0.6);
  32.     --mantle: rgba(24, 24, 37, 1);
  33.     --crust: rgba(17, 17, 27, 1);
  34. }
  35. *{
  36.     font-size: 12px;
  37.     color: var(--text);
  38.     font-weight: 600;
  39.     font-family: "JetBrainsMono NFP";
  40.     margin: 0;
  41.     padding: 0;
  42. }
  43. /*GENERAL CONFIGRATIONS*/
  44. .yasb-bar {
  45.     padding: 0;
  46.     margin: 0;
  47.     background-color: var(--mantle);
  48.     border-radius: 12px;
  49. }
  50. .widget {
  51.     padding: 0 4px;
  52.     margin: 0 4px;
  53.     border-radius: 8px;
  54.     border: 1px solid rgba(128, 128, 128, 0);
  55. }
  56. .widget .icon {
  57.     font-size: 18px;
  58. }
  59. .widget .label {
  60.     color: var(--text);
  61. }
  62. /*WIDGET*/
  63. .home-widget {
  64.     padding-right: 0px;
  65.     padding-bottom: 1px;
  66. }
  67. /*HOME WIDGET DROPDOWN*/
  68. .home-menu {
  69.     background-color: var(--mantle);
  70.     padding: 0;
  71.     margin-left: 0px;
  72. }
  73. .home-menu .menu-item {
  74.     padding: 6px 48px 7px 16px;
  75.     font-size: 12px;
  76.     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  77.     font-weight: 600;
  78. }
  79. .home-menu .menu-item:hover {
  80.     background-color:rgba(128, 130, 158, 0.15);
  81.     color: #fff;
  82. }
  83. .home-menu .separator {
  84.     max-height: 1px;
  85.     background-color:rgba(128, 130, 158, 0.3);
  86. }
  87. /*KOMOREBI WORKSPACES WIDGET*/
  88. .komorebi-workspaces {
  89.     padding: 0 0px;
  90. }
  91. .komorebi-workspaces .ws-btn {
  92.     font-size: 14px;
  93.     border: none;
  94.     color: #6c7086;
  95.     margin: 0 0px 0 0px;
  96.     height: 30px;
  97.     padding: 0 12px;
  98.     border-bottom: 1px solid rgba(128, 128, 128, 0);
  99. }
  100. .komorebi-workspaces .ws-btn:hover {
  101.     color: #7f849c;
  102.     border-bottom: 1px solid #7f849c;
  103. }
  104. .komorebi-workspaces .ws-btn.populated {
  105.     color: #b4befe;
  106. }
  107. .komorebi-workspaces .ws-btn.active {
  108.     color: #94e2d5;
  109.     font-weight: 900;
  110.     border-bottom-color: #94e2d5;
  111. }
  112. /*WEATHER WIDGET*/
  113. .weather-widget {
  114.     padding: 0;
  115.     padding-left: -5
  116. }
  117. .weather-widget .icon {
  118.     color: var(--yellow);
  119.     padding: 6px;
  120. }
  121. .weather-widget .label {
  122.     font-size: 14px;
  123.     font-family: Bahnschrift;
  124. }
  125. /*WEATHER WIDGET DROPDOWN*/
  126. .weather-card {
  127.     background-color: rgba(17, 17, 27, 0.5);
  128. }
  129. .weather-card-today {
  130.     border: 1px solid #282936;
  131.     border-radius: 8px;
  132.     background-color:  rgba(17, 17, 27, 0.2);
  133. }
  134. .weather-card-today .label {
  135.     font-size: 12px;
  136. }
  137. .weather-card-today .label.location {
  138.     font-size: 24px;
  139.     font-weight: 700;
  140. }
  141. .weather-card-today .label.arert {
  142.     font-size: 12px;
  143.     font-weight: 700;
  144.     background-color: rgba(247, 199, 42, 0.05);
  145.     border: 1px solid rgba(247, 209, 42, 0.1);
  146.     color: rgba(196, 181, 162, 0.85);
  147.     border-radius: 6px;
  148.     padding: 5px 0;
  149. }
  150. .weather-card-day {
  151.     border: 1px solid #45475a;
  152.     border-radius: 8px;
  153.     background-color:  rgba(17, 17, 27, 0.2);
  154. }
  155. .weather-card-day .label {
  156.     font-size: 12px;
  157. }
  158. /*ACTIVE WINDOW WIDGET*/
  159. .active-window-widget .label {
  160.     font-size: 14px;
  161.     font-family: Bahnschrift;
  162. }
  163. .active-window-widget .icon {
  164.     padding-right: 6px;
  165.     border: none;
  166. }
  167. /*CLOCK - CALENDAR WIDGET*/
  168. .clock-widget .label {
  169.     font-size: 14px;
  170.     font-family: Bahnschrift;
  171. }
  172. /*CLOCK - CALENDAR WIDGET DROPDOWN*/
  173. .calendar {
  174.     background-color: var(--mantle);
  175. }
  176. .calendar .calendar-table,
  177. .calendar .calendar-table::item {
  178.     background-color: rgba(17, 17, 27, 0);
  179.     color: rgba(162, 177, 196, 0.85);
  180.     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  181.     margin: 0;
  182.     padding: 0;
  183.     border: none;
  184.     outline: none;  
  185. }
  186. .calendar .calendar-table::item:selected {
  187.     color: rgb(255, 255, 255);
  188. }
  189. .calendar .day-label {
  190.     margin-top: 20px;
  191. }
  192. .calendar .day-label,
  193. .calendar .month-label,
  194. .calendar .date-label {
  195.     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  196.     font-size: 16px;
  197.     color: #fff;
  198.     font-weight: 700;
  199.     min-width: 180px;
  200.     max-width: 180px;
  201. }
  202. .calendar .month-label {
  203.     font-weight: normal;
  204. }
  205. .calendar .date-label {
  206.     font-size: 88px;
  207.     font-weight: 900;
  208.     color: rgb(255, 255, 255);
  209.     margin-top: -20px;
  210. }
  211. /*DISK WIDGET*/
  212. .disk-widget {
  213.     padding: 0;
  214. }
  215. /*DISK DROPDOWN*/
  216. .disk-group {
  217.     background-color: var(--mantle);    
  218. }
  219. .disk-group-row {
  220.     min-width: 220px;
  221.     max-width: 220px;
  222.     max-height: 40px;
  223.     margin: 0;
  224.     padding: 0;
  225.     border-radius: 6px;
  226.     border: 1px solid rgba(128, 128, 128, 0);
  227. }
  228. .disk-group-row:hover {
  229.     background-color:rgba(255, 255, 255, 0.05);
  230.     border: 1px solid rgba(255, 255, 255, 0.1);
  231. }
  232. .disk-group-label-bar{
  233.     max-height: 8px;
  234.     border:0px solid rgba(128, 128, 128, 0);
  235.     background-color: rgba(148, 226, 213, 0.3);
  236.     border-radius: 4px;
  237. }
  238. .disk-group-label-bar::chunk{
  239.     background-color: rgba(148, 226, 213, 1);
  240.     border-radius: 4px;
  241. }
  242. .disk-group-label {
  243.     font-size: 13px;
  244. }
  245. .disk-group-label-size {
  246.     font-size: 12px;
  247.     color: rgba(205, 214, 244, 0.5);
  248. }
  249. /*AUDIO WIDGET*/
  250. .volume-widget {
  251.     margin-left: 0;
  252.     padding: 0;
  253. }
  254. .volume-widget .icon {
  255.     padding: 0 6px;
  256.     color: var(--teal);
  257. }
  258. .volume-widget .label {
  259.     font-size: 14px;
  260.     font-family: Bahnschrift;
  261. }
  262. /*AUDIO DROPDOWN*/
  263. .audio-menu {
  264.     background-color: var(--mantle);
  265. }
  266. .audio-container .device {
  267.     font-family: Bahnschrift;
  268.     background-color: transparent;
  269.     border: none;
  270.     padding:6px 8px 6px 4px;
  271.     margin: 2px 0;
  272.     font-size: 14px;
  273.     border-radius: 4px;
  274. }
  275. .audio-container .device.selected {
  276.     background-color: rgba(255, 255, 255, 0.085);
  277. }
  278. .audio-container .device:hover {
  279.     background-color: rgba(255, 255, 255, 0.06);
  280. }
  281.  
  282. /*MEDIA WIDGET*/
  283. .media-widget {
  284.     padding: 0;
  285. }
  286. .media-widget .label {
  287.     font-family: Bahnschrift;
  288.     font-size: 14px;
  289.     padding: 0 0px;
  290. }
  291. .media-widget .btn {
  292.     color: var(--teal);
  293. }
  294. .media-widget .icon{
  295.     padding: 0 6px;
  296. }
  297. /*WALLPAPERS WIDGET*/
  298. .wallpapers-widget {
  299.     padding: 0;
  300. }
  301. /*WALLPAPERS GALLERY*/
  302. .wallpapers-gallery-window {
  303.     background-color: var(--mantle);
  304.     border: 0;
  305.     margin: 0;
  306. }
  307. .wallpapers-gallery-buttons {
  308.     font-size: 12px;
  309.     font-family: 'Bahnschrift', Tahoma, Geneva, Verdana, sans-serif;
  310.     background-color:rgba(255, 255, 255, 0);
  311.     color: white;
  312.     border: none;
  313.     font-size: 14px;
  314.     padding: 8px 0;
  315.     border-radius: 8px;
  316.     margin:0 8px 8px 8px;
  317.     width: 600px;
  318. }
  319. .wallpapers-gallery-buttons:hover {
  320.     background-color:rgba(255, 255, 255, 0.1)
  321. }
  322. .wallpapers-gallery-image {
  323.     border: 4px solid transparent;
  324.     border-radius: 10px;
  325. }
  326. .wallpapers-gallery-image:hover {
  327.     border: 4px solid rgb(66, 68, 83);
  328. }
  329. .wallpapers-gallery-image.focused {
  330.     border: 4px solid #89b4fa;
  331. }
  332. /*POWER WIDGET*/
  333. .power-menu-widget {
  334.     padding-left: 0;
  335. }
  336. .power-menu-widget .label {
  337.     color: var(--red);
  338.     font-size: 16px;
  339. }
  340. /*POWER MENU POPUP*/
  341. .uptime {
  342.     font-size: 14px;
  343.     margin-bottom: 10px;
  344.     color: rgba(191, 202, 219, 0.726);
  345.     font-weight: 600;
  346.     font-family: "Bahnschrift", Tahoma, Geneva, Verdana, sans-serif;
  347. }
  348. .power-menu-popup .button {
  349.     padding: 0;
  350.     width: 160px;
  351.     height: 240px;
  352.     border-radius: 4px;
  353.     background-color: rgba(41, 42, 58, 0.75);
  354.     font-family: "Bahnscrift", Tahoma, Geneva, Verdana, sans-serif;
  355.     color: white;
  356.     border: 4px solid rgba(255, 255, 255, 0);
  357.  
  358. }
  359. .power-menu-popup .button.hover {
  360.     background-color: rgb(55, 56, 75);
  361.     border: 4px solid rgb(55, 56, 75);
  362. }
  363. .power-menu-popup .button .label {
  364.     margin-bottom: 8px;
  365.     font-size: 16px;
  366.     font-weight: 600;
  367.     color: rgba(255, 255, 255, 0.6);
  368.     font-family: "Bahnschrift", Tahoma, Geneva, Verdana, sans-serif;
  369. }
  370. .power-menu-popup .button .icon {
  371.     font-size: 64px;
  372.     padding-top: 54px;
  373.     color: rgba(255, 255, 255, 0.25);
  374. }
  375. .power-menu-popup .button.cancel .icon {
  376.     color: rgba(243, 139, 168, 0.55);
  377. }
  378. .power-menu-popup .button.cancel .label {
  379.     color: rgba(243, 139, 168, 0.95);
  380. }
  381. .cava-widget {
  382.     padding: 0;
  383.     margin-right: 0;
  384. }
  385. /*GITHUB WIDGET*/
  386. .github-widget {
  387.     padding: 0;
  388. }
  389. .github-widget .icon {
  390.     font-size: 16px;
  391. }
  392. /*GITHUB DROPDOWN*/
  393. .github-menu    {
  394.     background-color:  rgba(17, 17, 27, 0.2);
  395.     max-height: 500px;
  396.     min-height: 500px;
  397.     min-width: 420px;
  398. }
  399. .github-menu .header {
  400.     border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  401.     font-size: 15px;
  402.     font-weight: 400;
  403.     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  404.     padding: 8px;
  405.     color: white;
  406.     background-color: rgba(17, 17, 27, 0.75);
  407. }
  408. .github-menu .footer {
  409.     border-top: 1px solid rgba(255, 255, 255, 0.1);
  410.     font-size: 12px;
  411.     padding: 4px 8px 6px 8px;
  412.     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  413.     color: #9399b2;
  414.     background-color: rgba(17, 17, 27, 0.75);
  415. }
  416. .github-menu .contents {
  417.     background-color:  rgba(17, 17, 27, 0.2);
  418. }
  419. .github-menu .contents .item {
  420.     min-height: 40px;
  421.     padding: 6px 0;
  422.     border-bottom: 1px solid rgba(255, 255, 255, 0.075);
  423. }
  424. .github-menu .contents .item:hover {
  425.     background-color: rgba(255, 255, 255, 0.05);
  426.     border-bottom: 1px solid rgba(255, 255, 255, 0);
  427. }
  428. .github-menu .contents .item .title,
  429. .github-menu .contents .item .description {
  430.     color: #9399b2;
  431.     font-family: Segoe UI;
  432. }
  433. .github-menu .contents .item .title {
  434.     font-size: 14px;
  435.     font-weight: 600;
  436. }
  437. .github-menu .contents .item .description {
  438.     font-size: 12px;
  439.     font-weight: 500
  440. }
  441. .github-menu .contents .item.new .title,
  442. .github-menu .contents .item.new .description {
  443.     color: #ffffff
  444. }
  445. .github-menu .contents .item .icon {
  446.     font-size: 16px;
  447.     padding-right: 0;
  448.     padding-left: 8px;
  449.     padding-right: 4px;
  450.     color: #9399b2;
  451. }
  452. .github-menu .contents .item.new .icon {
  453.     color: #3fb950;
  454. }
  455. /*TASKBAR*/
  456. .taskbar-widget {
  457.     background-color: var(--surface1);
  458.     margin-top: 3px;
  459.     margin-bottom: 3px;
  460.     border-radius: 10px;
  461. }
  462. .taskbar-widget .app-icon {
  463.     padding: 0 6px;
  464.     margin: 0px;
  465. }
  466. /*APPS WIDGET*/
  467. .apps-widget {
  468.     padding: 0;
  469.     padding-left: -4px;
  470.     padding-right: -2px;
  471. }
  472. .apps-widget .label {
  473.     font-size: 16px;
  474.     padding: 0 1px;
  475.     color: var(--subtext0);
  476. }
  477. .apps-widget .label:hover {
  478.     color: var(--text);
  479. }
  480. .apps-widget .widget-container {
  481.     margin: 4px 6 4px 6;
  482.     border-radius: 8px;
  483. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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!