API tools faq
paste
Advertisement
Mashtii

style.css

Mashtii
Jun 28th, 2025 (edited)
290
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 12.75 KB | None | 0 0
raw download clone embed print report
  1. body {
  2.     background-color: #1c1c1c;
  3.     background-size: cover;
  4.     background-position: center center;
  5.     background-attachment: fixed;
  6.     background-repeat: no-repeat;
  7.     margin: 0;
  8.     padding: 0;
  9.     font-family: 'Georgia', serif;
  10.     color: #e0dccc;
  11.     transition: background-image 0.5s ease-in-out;
  12. }
  13.  
  14. .container {
  15.     max-width: 800px;
  16.     margin: 20px auto;
  17.     background-color: rgba(20, 20, 20, 0.85);
  18.     padding: 25px; /* Lekko zmniejszony padding */
  19.     border: 4px solid #bfa76f;
  20.     border-radius: 12px;
  21.     box-shadow: 0 0 20px #000;
  22. }
  23. .container:first-of-type {
  24.     margin-top: 70px; /* Większy margines dla pierwszego kontenera, aby nie nachodził na przyciski */
  25. }
  26.  
  27.  
  28. h1, h2, h3 {
  29.     text-align: center;
  30.     color: #e9d8a6;
  31.     text-shadow: 1px 1px 3px #000;
  32. }
  33. h2 { margin-top: 30px; margin-bottom: 15px;}
  34. h3 { margin-top: 20px; margin-bottom: 10px;}
  35.  
  36. .form-group {
  37.     margin-bottom: 15px; /* Zmniejszony margines */
  38. }
  39.  
  40. label {
  41.     display: block;
  42.     margin-bottom: 5px;
  43.     font-weight: bold;
  44.     color: #d2c8b3;
  45. }
  46.  
  47. select,
  48. input[type="text"],
  49. input[type="email"],
  50. input[type="password"] {
  51.     width: 100%;
  52.     padding: 10px;
  53.     border: 2px solid #5c4a1c;
  54.     border-radius: 6px;
  55.     background-color: #2e2e2e;
  56.     color: #e0dccc;
  57.     box-sizing: border-box;
  58. }
  59. input[type="checkbox"] {
  60.     margin-right: 5px;
  61.     vertical-align: middle;
  62. }
  63.  
  64. select option[disabled] {
  65.     font-weight: bold;
  66.     color: #a99886;
  67.     background-color: #1a1a1a;
  68. }
  69.  
  70. .form-tip {
  71.     font-size: 13px;
  72.     color: #d2c8b3;
  73.     text-align: center;
  74.     margin-top: -5px;
  75.     margin-bottom: 15px;
  76.     background-color: rgba(0, 0, 0, 0.2);
  77.     padding: 8px;
  78.     border-radius: 6px;
  79. }
  80.  
  81. .group-item-header {
  82.     display: flex;
  83.     justify-content: space-between;
  84.     align-items: center;
  85.     width: 100%;
  86.     margin-bottom: 15px;
  87. }
  88.  
  89. .group-invite-info {
  90.     position: relative; /* Kluczowe dla działania tooltipa */
  91.     display: inline-flex;
  92.     align-items: center;
  93.     cursor: help;
  94.     margin-left: 15px;
  95. }
  96.  
  97. .group-invite-info .tooltip-text {
  98.     visibility: hidden;
  99.     width: 160px;
  100.     background-color: #1c1c1c;
  101.     color: #e9d8a6;
  102.     text-align: center;
  103.     border-radius: 6px;
  104.     padding: 5px 0;
  105.     border: 1px solid #bfa76f;
  106.  
  107.     /* Pozycjonowanie tooltipa */
  108.     position: absolute;
  109.     z-index: 1;
  110.     bottom: 125%; /* U góry ikony */
  111.     left: 50%;
  112.     margin-left: -80px; /* Wyśrodkowanie */
  113.  
  114.     /* Efekt pojawiania */
  115.     opacity: 0;
  116.     transition: opacity 0.3s;
  117. }
  118.  
  119. .group-name-display {
  120.     font-size: 1.2em; /* Lekko powiększamy nazwę grupy */
  121.     font-weight: bold;
  122.     color: #e9d8a6;
  123. }
  124.  
  125. .group-members-section {
  126.     width: 100%;
  127.     margin-bottom: 20px; /* Odstęp między listą członków a przyciskami */
  128. }
  129.  
  130. .group-members-list {
  131.     list-style: none;
  132.     padding: 0;
  133.     margin: 0;
  134. }
  135.  
  136. .group-members-list li {
  137.     padding: 4px 0;
  138.     border-bottom: 1px solid #3a3a3a;
  139.     display: flex;
  140.     justify-content: space-between;
  141.     align-items: center;
  142. }
  143. .group-members-list li:last-child {
  144.     border-bottom: none;
  145. }
  146.  
  147. .group-actions {
  148.     width: 100%;
  149.     justify-content: flex-end; /* Przyciski będą po prawej stronie */
  150. }
  151.  
  152. .remove-member-btn {
  153.     background-color: #8a3a3a;
  154.     color: #f0e6d2;
  155.     border: none;
  156.     border-radius: 4px;
  157.     padding: 3px 8px;
  158.     font-size: 12px;
  159.     margin-left: 10px;
  160.     cursor: pointer;
  161. }
  162. .remove-member-btn:hover {
  163.     background-color: #a54e4e;
  164. }
  165.  
  166. .group-invite-info:hover .tooltip-text {
  167.     visibility: visible;
  168.     opacity: 1;
  169. }
  170.  
  171. button {
  172.     padding: 10px 20px; /* Lekko zmniejszony padding */
  173.     background-color: #bfa76f;
  174.     border: none;
  175.     border-radius: 6px;
  176.     cursor: pointer;
  177.     color: #1c1c1c;
  178.     font-weight: bold;
  179.     font-size: 14px;
  180.     box-shadow: 0 2px 4px #000;
  181.     transition: background-color 0.2s;
  182.     display: inline-flex;
  183.     align-items: center;
  184.     gap: 8px;
  185. }
  186. button:hover {
  187.     background-color: #e9d8a6;
  188. }
  189. button img { /* Dla ikon w przyciskach */
  190.     filter: brightness(0.8);
  191. }
  192.  
  193. .button-center {
  194.     display: flex;
  195.     justify-content: center;
  196.     align-items: center; /* Wyśrodkowanie w pionie */
  197.     margin-top: 20px;
  198.     gap: 10px;
  199. }
  200.  
  201. /* TIMERY */
  202. .timer-item {
  203.     background: linear-gradient(145deg, #2d2a25, #1a1a1a);
  204.     border: 1px solid #8a714e;
  205.     border-radius: 10px;
  206.     color: #f0e6d2;
  207.     text-shadow: 0 1px 2px #000;
  208.     margin: 10px 0;
  209.     padding: 12px;
  210.     font-size: 16px;
  211.     box-shadow: inset 0 0 6px #000;
  212.     position: relative;
  213.     transition: background-color 0.3s, border-color 0.3s;
  214.     display: flex;
  215.     justify-content: space-between;
  216.     align-items: center;
  217. }
  218. .timer-item.with-icon {
  219.     padding-left: 65px;
  220. }
  221. .timer-item-content { /* Kontener na tekst timera */
  222.     flex-grow: 1; /* Aby zajął dostępną przestrzeń */
  223. }
  224. .timer-item.window-open {
  225.     background: linear-gradient(145deg, #263a2a, #0f1d12);
  226.     border-color: #6aae71;
  227. }
  228. .timer-icon {
  229.     position: absolute;
  230.     top: 50%;
  231.     left: 12px;
  232.     transform: translateY(-50%);
  233.     width: 40px;
  234.     height: 40px;
  235.     object-fit: cover;
  236.     border-radius: 4px;
  237.     background-color: rgba(0, 0, 0, 0.3);
  238. }
  239. .timer-item button.delete-btn { /* Specyficzny styl dla przycisku usuwania timera */
  240.     padding: 6px 10px;
  241.     font-size: 12px;
  242.     margin-left: 10px;
  243.     flex-shrink: 0;
  244.     background-color: #8a3a3a; /* Ciemnoczerwony */
  245.     color: #f0e6d2;
  246. }
  247. .timer-item button.delete-btn:hover {
  248.     background-color: #a54e4e;
  249. }
  250.  
  251.  
  252. /* PRZYCISKI USTAWIEŃ W ROGACH */
  253. .settings-buttons-left, .settings-buttons-right {
  254.     position: fixed;
  255.     z-index: 999;
  256.     top: 15px; /* Lekko wyżej */
  257.     display: flex;
  258.     gap: 10px;
  259. }
  260. .settings-buttons-left { left: 15px; }
  261. .settings-buttons-right { right: 15px; }
  262.  
  263. /* MENU ROZWIJANE UŻYTKOWNIKA */
  264. #userMenuContainer {
  265.     position: relative;
  266. }
  267. .dropdown-content {
  268.     display: none;
  269.     position: absolute;
  270.     top: calc(100% + 5px); /* Lekki odstęp od przycisku */
  271.     right: 0;
  272.     background-color: #2a2a2a; /* Ciemniejsze tło dropdownu */
  273.     min-width: 220px;
  274.     box-shadow: 0px 8px 16px rgba(0,0,0,0.3);
  275.     z-index: 1001;
  276.     border: 2px solid #bfa76f; /* Grubsza ramka */
  277.     border-radius: 8px; /* Większe zaokrąglenie */
  278.     padding: 10px;
  279. }
  280. .dropdown-content button {
  281.     width: 100%;
  282.     margin-bottom: 8px;
  283.     background-color: #5c4a1c; /* Ciemniejszy przycisk w dropdownie */
  284.     color: #e9d8a6;
  285.     font-weight: bold;
  286.     text-align: left;
  287.     padding: 10px 15px;
  288.     border-radius: 4px;
  289.     border: 1px solid #bfa76f;
  290. }
  291. .dropdown-content button:last-child { margin-bottom: 0; }
  292. .dropdown-content button:hover {
  293.     background-color: #bfa76f;
  294.     color: #1c1c1c;
  295. }
  296.  
  297. /* --- STYLE DLA ZWIJANYCH PANELI GRUP --- */
  298.  
  299. .collapsible .collapsible-header {
  300.     display: flex;
  301.     justify-content: space-between;
  302.     align-items: center;
  303.     cursor: pointer;
  304.     width: 100%;
  305.     padding: 10px 0;
  306. }
  307.  
  308. .collapsible .header-controls {
  309.     display: flex;
  310.     align-items: center;
  311.     gap: 15px; /* Odstęp między ikoną 'i' a strzałką */
  312. }
  313.  
  314. .collapsible .toggle-collapse-btn {
  315.     background: none;
  316.     border: none;
  317.     color: #bfa76f;
  318.     font-size: 20px;
  319.     cursor: pointer;
  320.     padding: 0 5px;
  321.     transition: transform 0.3s ease; /* Płynna animacja obrotu strzałki */
  322. }
  323.  
  324. .collapsible .collapsible-content {
  325.     max-height: 0;
  326.     overflow: hidden;
  327.     transition: max-height 0.4s ease-out;
  328.     border-top: 1px solid #5c4a1c; /* Linia oddzielająca nagłówek od treści */
  329.     margin: 0 -20px -20px -20px; /* Dopasowanie do paddingu .group-item */
  330.     padding: 0 20px;
  331. }
  332.  
  333. /* Stan po rozwinięciu */
  334. .collapsible.expanded .collapsible-content {
  335.     max-height: 1000px;
  336.     transition: max-height 0.5s ease-in;
  337.     padding: 15px 20px; /* Przywracamy padding po rozwinięciu */
  338. }
  339.  
  340. .collapsible.expanded .toggle-collapse-btn {
  341.     transform: rotate(180deg); /* Obracamy strzałkę */
  342. }
  343.  
  344. /* MODALE */
  345. .modal {
  346.     display: none;
  347.     position: fixed;
  348.     top: 50%;
  349.     left: 50%;
  350.     transform: translate(-50%, -50%);
  351.     background: rgba(30, 30, 30, 0.97); /* Bardziej nieprzezroczyste tło modala */
  352.     color: #eee;
  353.     padding: 25px;
  354.     border: 4px solid #bfa76f; /* Grubsza ramka modala */
  355.     border-radius: 12px;
  356.     z-index: 1000;
  357.     box-shadow: 0 8px 30px rgba(0,0,0,0.5); /* Mocniejszy cień */
  358.     width: 90%;
  359.     max-width: 500px;
  360. }
  361. .modal-buttons {
  362.     margin-top: 25px; /* Większy margines */
  363.     text-align: right;
  364.     display: flex;
  365.     justify-content: flex-end;
  366.     gap: 10px;
  367. }
  368.  
  369. /* TŁA */
  370. #background-options-container {
  371.     display: flex;
  372.     flex-wrap: wrap;
  373.     gap: 15px;
  374.     justify-content: center;
  375.     margin: 20px 0;
  376.     max-height: 40vh;
  377.     overflow-y: auto;
  378.     padding: 10px;
  379.     background: rgba(0,0,0,0.2);
  380.     border-radius: 8px;
  381.     border: 1px solid #5c4a1c;
  382. }
  383. .background-thumbnail {
  384.     width: 150px;
  385.     height: 85px;
  386.     background-size: cover;
  387.     background-position: center;
  388.     border: 3px solid #5c4a1c;
  389.     border-radius: 6px;
  390.     cursor: pointer;
  391.     transition: all 0.3s;
  392. }
  393. .background-thumbnail:hover { transform: scale(1.05); border-color: #e9d8a6; }
  394. .background-thumbnail.selected { border-color: #6aae71; box-shadow: 0 0 15px #6aae71; transform: scale(1.05); }
  395.  
  396. /* ZAKŁADKI ZARZĄDZANIA GRUPAMI */
  397. .tab-content {
  398.     padding: 20px;
  399.     border: 2px dashed #5c4a1c; /* Zmieniona ramka zakładek */
  400.     border-radius: 8px;
  401.     margin-top: 20px;
  402.     background-color: rgba(0,0,0,0.1); /* Lekkie tło dla zakładek */
  403. }
  404. .invite-code-display {
  405.     margin-top: 15px;
  406.     padding: 10px;
  407.     background-color: rgba(0,0,0,0.3);
  408.     border-radius: 6px;
  409.     text-align: center;
  410.     font-size: 1.1em;
  411.     border: 1px solid #8a714e;
  412. }
  413. .invite-code-display code {
  414.     margin-left: 5%;
  415.     background-color: #333;
  416.     padding: 3px 6px;
  417.     border-radius: 4px;
  418.     font-family: 'Courier New', Courier, monospace;
  419.     font-weight: bold;
  420. }
  421.  
  422. /* LISTA GRUP */
  423. #groupListContainer .group-item {
  424.     flex-direction: column;
  425.     align-items: stretch;
  426.     padding: 10px 20px;
  427. }
  428.  
  429. .collapsible .collapsible-header {
  430.     display: flex;
  431.     justify-content: space-between;
  432.     align-items: center;
  433.     cursor: pointer;
  434.     width: 100%;
  435. }
  436. .collapsible .header-controls {
  437.     display: flex;
  438.     align-items: center;
  439.     gap: 15px;
  440. }
  441. .collapsible .toggle-collapse-btn {
  442.     background: none;
  443.     border: none;
  444.     color: #bfa76f;
  445.     font-size: 20px;
  446.     cursor: pointer;
  447.     padding: 0 5px;
  448.     transition: transform 0.3s ease;
  449. }
  450. .collapsible .collapsible-content {
  451.     max-height: 0;
  452.     overflow: hidden;
  453.     transition: max-height 0.4s ease-out;
  454.     border-top: 1px solid #5c4a1c;
  455.     margin-top: 10px;
  456.     padding-top: 0;
  457. }
  458. .collapsible.expanded .collapsible-content {
  459.     max-height: 1000px;
  460.     transition: max-height 0.5s ease-in;
  461.     padding-top: 15px;
  462. }
  463. .collapsible.expanded .toggle-collapse-btn {
  464.     transform: rotate(180deg);
  465. }
  466. .group-members-list {
  467.     list-style: none;
  468.     padding: 0;
  469. }
  470. .remove-member-btn {
  471.     background-color: transparent;
  472.     padding: 2px 6px;
  473.     font-size: 14px;
  474.     box-shadow: none;
  475.     color: #e74c3c;
  476. }
  477.  
  478. /* Stopka */
  479. .footer {
  480.     text-align: center;
  481.     margin-top: 40px;
  482.     font-size: 14px;
  483.     color: #aaa;
  484.     padding-bottom: 20px;
  485. }
  486.  
  487. /* Kontekst timera */
  488. #currentTimerContext {
  489.     font-style: italic;
  490.     color: #bfa76f;
  491. }
  492.  
  493. /* --- NOWE STYLE DLA ZAKŁADEK GRUP --- */
  494. .group-tabs-container {
  495.     display: flex;
  496.     justify-content: center;
  497.     align-items: center;
  498.     gap: 5px;
  499.     margin-bottom: -2px; /* Lekkie nasunięcie na kontener treści */
  500.     flex-wrap: wrap; /* Pozwala zakładkom zawijać się na mniejszych ekranach */
  501. }
  502.  
  503. .group-tab-scarf {
  504.     background: linear-gradient(160deg, #5c4a1c, #4a3a0c);
  505.     color: #e0dccc;
  506.     font-family: 'Georgia', serif;
  507.     font-size: 16px;
  508.     font-weight: bold;
  509.     padding: 10px 30px 25px 30px;
  510.     cursor: pointer;
  511.     border: 2px solid #bfa76f;
  512.     border-bottom: none;
  513.     clip-path: polygon(0 0, 100% 0, 100% 85%, 50% 100%, 0 85%);
  514.     transition: all 0.2s ease-in-out;
  515.     position: relative;
  516.     top: 0;
  517. }
  518.  
  519. .group-tab-scarf:hover {
  520.     background: linear-gradient(160deg, #7a6a3c, #6a5a2c);
  521.     top: -3px; /* Lekkie uniesienie przy najechaniu */
  522. }
  523.  
  524. .group-tab-scarf.active {
  525.     background: linear-gradient(160deg, #bfa76f, #8a714e);
  526.     color: #1c1c1c;
  527.     border-color: #e9d8a6;
  528.     top: -5px; /* Aktywna zakładka jest bardziej wysunięta */
  529. }
  530.  
  531. .tab-content-container {
  532.     border: 4px solid #bfa76f;
  533.     border-radius: 12px;
  534.     padding: 25px;
  535.     background-color: rgba(20, 20, 20, 0.7); /* Lekko inne tło dla odróżnienia */
  536. }
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!