API tools faq
paste
Advertisement
horozov86

style.css

horozov86
Jun 10th, 2025
531
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 23.49 KB | None | 0 0
raw download clone embed print report
  1. * {
  2.     padding: 0;
  3.     margin: 0;
  4. }
  5.  
  6. html {
  7.     box-sizing: border-box;
  8. }
  9.  
  10. *, *::before, *::after {
  11.     box-sizing: inherit;
  12. }
  13.  
  14. html {
  15.     font: 14px/1.5 Verdana, sans-serif;
  16. }
  17.  
  18. body, input, table, button, form {
  19.     font: inherit;
  20. }
  21.  
  22. body {
  23.     font-family: Arial, sans-serif;
  24.     color: #333;
  25.     line-height: 1.6;
  26.     display: flex;
  27.     flex-direction: column;
  28.     background-color: #f0f0f0;
  29.     min-height: 100vh; /* Минимална височина на екрана */
  30.     padding-top: 50px;      /* Добавяне на място под хедъра (според височината на хедъра) */
  31.     padding-bottom: 50px;   /* Добавяне на място над футъра (според височината на футъра) */
  32.     box-sizing: border-box; /* Включване на падинга в размера на body */
  33. }
  34.  
  35. /* Стилизация на header */
  36. header {
  37.     position: fixed;       /* Фиксиране на хедъра */
  38.     top: 0;                /* Разположение в горната част на страницата */
  39.     left: 0;               /* Започва от лявата страна */
  40.     width: 100%;           /* Ширина 100% от екрана */
  41.     max-width: 100vw;      /* Гарантира, че хедърът няма да надвиши ширината на екрана */
  42.     box-sizing: border-box; /* Включва вътрешните отстъпи в размера на хедъра */
  43.     background-color: #fff; /* Цвят на фона */
  44.     color: #fff;            /* Цвят на текста */
  45.     padding: 5px 20px;     /* Разстояние около елементите в хедъра */
  46.     font-size: 1rem;        /* Размер на шрифта */
  47.     z-index: 1000;          /* Поставя хедъра над останалото съдържание */
  48.     display: flex;          /* Използваме flexbox */
  49.     justify-content: space-between; /* За да разположим елементите по краищата */
  50.     align-items: center;    /* Центриране по вертикала */
  51.     box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 60px -12px, rgba(0, 0, 0, 0.3) 0px 18px 36px -18px;
  52. }
  53.  
  54. /* Лого */
  55. header .logo {
  56.     text-decoration: none;
  57.     color: black;
  58.     font-weight: bold;
  59.     transition: color 0.3s;
  60.     margin-left: 0; /* Премахва допълнителен ляв отстъп */
  61.     font-style: italic;
  62.     box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  63.     padding: 0.2em;
  64.     background-color:#fff;
  65.     border-radius: 0.2em;
  66. }
  67.  
  68. header h1 {
  69.     margin: 0;
  70.     font-size: 1.8rem;
  71. }
  72.  
  73.  
  74. nav {
  75.     display: flex;
  76. }
  77.  
  78. nav a {
  79.     text-decoration: none;
  80.     color: black;
  81.     margin-right: 10px;
  82.     font-size: 1rem;
  83.     padding: 10px;
  84.     transition: color 0.3s, border-bottom 0.3s;
  85. }
  86.  
  87. nav a:last-child {
  88.     margin-right: 0;
  89. }
  90.  
  91. nav a:hover {
  92.     color: #ffcc00;
  93.     border-bottom: 2px solid #ffcc00;
  94. }
  95.  
  96. /* Footer стилове */
  97. footer {
  98.     position: fixed;      /* Фиксиране на футера */
  99.     bottom: 0;            /* Разположение в долната част на страницата */
  100.     left: 0;              /* Започва от лявата страна */
  101.     width: 100%;          /* Задайте ширината на 100% от екрана */
  102.     max-width: 100vw;     /* Гарантирайте, че футерът не надвишава ширината на екрана */
  103.     box-sizing: border-box; /* Включете вътрешните отстъпи в размера на футера */
  104.     background-color: #fff;
  105.     color: black;          /* Цвят на текста */
  106.     text-align: center;    /* Центриране на текста */
  107.     padding: 10px 0;       /* Разстояние около текста */
  108.     font-size: 1rem;       /* Размер на шрифта */
  109.     z-index: 1000;         /* Поставяне на футера над останалото съдържание */
  110.     box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
  111. }
  112.  
  113. /*login css*/
  114. html {
  115.     height: 100%;
  116.   }
  117.   body {
  118.     margin: 0;
  119.     padding: 0;
  120.     font-family: Arial, sans-serif;
  121.     background: linear-gradient(#141e30, #243b55);
  122.   }
  123.  
  124.   .login-box {
  125.     position: absolute;
  126.     top: 50%;
  127.     left: 50%;
  128.     width: 400px;
  129.     padding: 40px;
  130.     transform: translate(-50%, -50%);
  131.     background: rgba(0, 0, 0, 0.5);
  132.     box-sizing: border-box;
  133.     box-shadow: 0 15px 25px rgba(0, 0, 0, 0.6);
  134.     border-radius: 10px;
  135.   }
  136.  
  137.   .login-box h2 {
  138.     margin: 0 0 30px;
  139.     padding: 0;
  140.     color: #fff;
  141.     text-align: center;
  142.     font-size: 1.8em;
  143.   }
  144.  
  145.   .login-box .user-box {
  146.     position: relative;
  147.   }
  148.  
  149.   .login-box .user-box input {
  150.     width: 100%;
  151.     padding: 10px 0;
  152.     font-size: 16px;
  153.     color: #fff;
  154.     margin-bottom: 30px;
  155.     border: none;
  156.     border-bottom: 1px solid #fff;
  157.     outline: none;
  158.     background: transparent;
  159.   }
  160.  
  161.   .login-box .user-box label {
  162.     position: absolute;
  163.     top: 0;
  164.     left: 0;
  165.     padding: 10px 0;
  166.     font-size: 16px;
  167.     color: #fff;
  168.     pointer-events: none;
  169.     transition: 0.5s;
  170.   }
  171.  
  172.   .login-box .user-box input:focus ~ label,
  173.   .login-box .user-box input:valid ~ label {
  174.     top: -20px;
  175.     left: 0;
  176.     color: #ffea00;
  177.     font-size: 12px;
  178.   }
  179.  
  180.   /* СТИЛ ЗА BUTTON */
  181.   .login-button {
  182.     position: relative;
  183.     display: inline-block;
  184.     padding: 10px 20px;
  185.     color: #e80909;
  186.     font-size: 16px;
  187.     background: none;
  188.     border: none;
  189.     text-transform: uppercase;
  190.     overflow: hidden;
  191.     transition: 0.5s;
  192.     margin-top: 40px;
  193.     letter-spacing: 4px;
  194.     cursor: pointer;
  195.   }
  196.   .login-button:hover {
  197.     background: #e80909;
  198.     color: #fff;
  199.     border-radius: 5px;
  200.     box-shadow: 0 0 5px #f1a0a0,
  201.                 0 0 25px #e80909,
  202.                 0 0 50px #e80909,
  203.                 0 0 100px #f1a0a0;
  204.   }
  205.   .login-button span {
  206.     position: absolute;
  207.     display: block;
  208.   }
  209.  
  210.   .login-button span:nth-child(1) {
  211.     top: 0;
  212.     left: -100%;
  213.     width: 100%;
  214.     height: 2px;
  215.     background: linear-gradient(90deg, transparent, #e80909);
  216.     animation: btn-anim1 1s linear infinite;
  217.   }
  218.  
  219.   @keyframes btn-anim1 {
  220.     0% {
  221.       left: -100%;
  222.     }
  223.     50%, 100% {
  224.       left: 100%;
  225.     }
  226.   }
  227.  
  228.   .login-button span:nth-child(2) {
  229.     top: -100%;
  230.     right: 0;
  231.     width: 2px;
  232.     height: 100%;
  233.     background: linear-gradient(180deg, transparent, #e80909);
  234.     animation: btn-anim2 1s linear infinite;
  235.     animation-delay: 0.25s;
  236.   }
  237.  
  238.   @keyframes btn-anim2 {
  239.     0% {
  240.       top: -100%;
  241.     }
  242.     50%, 100% {
  243.       top: 100%;
  244.     }
  245.   }
  246.  
  247.   .login-button span:nth-child(3) {
  248.     bottom: 0;
  249.     right: -100%;
  250.     width: 100%;
  251.     height: 2px;
  252.     background: linear-gradient(270deg, transparent, #e80909);
  253.     animation: btn-anim3 1s linear infinite;
  254.     animation-delay: 0.5s;
  255.   }
  256.  
  257.   @keyframes btn-anim3 {
  258.     0% {
  259.       right: -100%;
  260.     }
  261.     50%, 100% {
  262.       right: 100%;
  263.     }
  264.   }
  265.  
  266.   .login-button span:nth-child(4) {
  267.     bottom: -100%;
  268.     left: 0;
  269.     width: 2px;
  270.     height: 100%;
  271.     background: linear-gradient(360deg, transparent, #e80909);
  272.     animation: btn-anim4 1s linear infinite;
  273.     animation-delay: 0.75s;
  274.   }
  275.  
  276.   @keyframes btn-anim4 {
  277.     0% {
  278.       bottom: -100%;
  279.     }
  280.     50%, 100% {
  281.       bottom: 100%;
  282.     }
  283.   }
  284.  
  285. /*register css*/
  286. html {
  287.     height: 100%;
  288.   }
  289.  
  290.   body {
  291.     margin: 0;
  292.     padding: 0;
  293.     font-family: sans-serif;
  294.     background: linear-gradient(#141e30, #243b55);
  295.   }
  296.  
  297.   .login-register-div {
  298.     position: absolute;
  299.     top: 50%;
  300.     left: 50%;
  301.     width: 400px;
  302.     padding: 40px;
  303.     transform: translate(-50%, -50%);
  304.     background: rgba(0,0,0,0.5);
  305.     box-sizing: border-box;
  306.     box-shadow: 0 15px 25px rgba(0,0,0,0.6);
  307.     border-radius: 10px;
  308.     color: #fff;
  309.   }
  310.  
  311.   .login-register-box h1 {
  312.     margin: 0 0 30px;
  313.     padding: 0;
  314.     color: #fff;
  315.     text-align: center;
  316.     font-size: 1.8em;
  317.   }
  318.  
  319.   .form-group {
  320.     position: relative;
  321.   }
  322.  
  323.   .form-group input {
  324.     width: 100%;
  325.     padding: 10px 0;
  326.     font-size: 16px;
  327.     color: #fff;
  328.     margin-bottom: 30px;
  329.     border: none;
  330.     border-bottom: 1px solid #fff;
  331.     outline: none;
  332.     background: transparent;
  333.   }
  334.  
  335.   .form-group label {
  336.     position: absolute;
  337.     top: 0;
  338.     left: 0;
  339.     padding: 10px 0;
  340.     font-size: 16px;
  341.     color: #fff;
  342.     pointer-events: none;
  343.     transition: 0.5s;
  344.   }
  345.  
  346.   .form-group input:focus ~ label,
  347.   .form-group input:valid ~ label {
  348.     top: -20px;
  349.     left: 0;
  350.     color: #ffea00;
  351.     font-size: 12px;
  352.   }
  353.  
  354.   /* Animated button styling */
  355.   .animated-button {
  356.     position: relative;
  357.     display: inline-block;
  358.     padding: 10px 20px;
  359.     color: #e80909;
  360.     font-size: 16px;
  361.     text-decoration: none;
  362.     text-transform: uppercase;
  363.     overflow: hidden;
  364.     transition: 0.5s;
  365.     margin-top: 40px;
  366.     letter-spacing: 4px;
  367.     border: none;
  368.     background: none;
  369.     cursor: pointer;
  370.   }
  371.  
  372.   .animated-button:hover {
  373.     background: #e80909;
  374.     color: #fff;
  375.     border-radius: 5px;
  376.     box-shadow: 0 0 5px #f1a0a0,
  377.                 0 0 25px #e80909,
  378.                 0 0 50px #e80909,
  379.                 0 0 100px #f1a0a0;
  380.   }
  381.  
  382.   .animated-button span {
  383.     position: absolute;
  384.     display: block;
  385.   }
  386.  
  387.   .animated-button span:nth-child(1) {
  388.     top: 0;
  389.     left: -100%;
  390.     width: 100%;
  391.     height: 2px;
  392.     background: linear-gradient(90deg, transparent, #e80909);
  393.     animation: btn-anim1 1s linear infinite;
  394.   }
  395.  
  396.   .animated-button span:nth-child(2) {
  397.     top: -100%;
  398.     right: 0;
  399.     width: 2px;
  400.     height: 100%;
  401.     background: linear-gradient(180deg, transparent, #e80909);
  402.     animation: btn-anim2 1s linear infinite;
  403.     animation-delay: 0.25s;
  404.   }
  405.  
  406.   .animated-button span:nth-child(3) {
  407.     bottom: 0;
  408.     right: -100%;
  409.     width: 100%;
  410.     height: 2px;
  411.     background: linear-gradient(270deg, transparent, #e80909);
  412.     animation: btn-anim3 1s linear infinite;
  413.     animation-delay: 0.5s;
  414.   }
  415.  
  416.   .animated-button span:nth-child(4) {
  417.     bottom: -100%;
  418.     left: 0;
  419.     width: 2px;
  420.     height: 100%;
  421.     background: linear-gradient(360deg, transparent, #e80909);
  422.     animation: btn-anim4 1s linear infinite;
  423.     animation-delay: 0.75s;
  424.   }
  425.  
  426.   @keyframes btn-anim1 {
  427.     0% { left: -100%; }
  428.     50%, 100% { left: 100%; }
  429.   }
  430.  
  431.   @keyframes btn-anim2 {
  432.     0% { top: -100%; }
  433.     50%, 100% { top: 100%; }
  434.   }
  435.  
  436.   @keyframes btn-anim3 {
  437.     0% { right: -100%; }
  438.     50%, 100% { right: 100%; }
  439.   }
  440.  
  441.   @keyframes btn-anim4 {
  442.     0% { bottom: -100%; }
  443.     50%, 100% { bottom: 100%; }
  444.   }
  445.  
  446.   .second-option {
  447.     margin-top: 20px;
  448.     text-align: center;
  449.   }
  450.  
  451.   .second-option a {
  452.     color: #e80909;
  453.     text-decoration: none;
  454.   }
  455.  
  456.   .second-option a:hover {
  457.     text-decoration: underline;
  458.   }
  459. .form-control {
  460.   width: 100%;
  461.   padding: 10px 0;
  462.   font-size: 16px;
  463.   color: #fff;
  464.   margin-bottom: 30px;
  465.   border: none;
  466.   border-bottom: 1px solid #fff;
  467.   outline: none;
  468.   background: transparent;
  469. }
  470. input:-webkit-autofill {
  471.     -webkit-box-shadow: 0 0 0px 1000px #0e131d inset !important; /* черен фон */
  472.     -webkit-text-fill-color: #fff !important; /* цвят на текста */
  473.     transition: background-color 5000s ease-in-out 0s;
  474. }
  475.  
  476. /*Profile Details*/
  477. .info-section {
  478.   background: #fff;
  479.   padding: 30px;
  480.   border-radius: 10px;
  481.   box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px;
  482.   max-width: 600px;
  483.   width: 100%;
  484.   margin: 0 auto;
  485.   text-align: left;
  486.  
  487. }
  488.  
  489. .info-section h1 {
  490.   font-size: 20px;
  491.   margin-bottom: 20px;
  492.   text-align: center;
  493.   color: #222;
  494. }
  495.  
  496. .profile-photo {
  497.     margin-bottom: 20px;
  498.     text-align: center;
  499. }
  500.  
  501. .profile-photo img {
  502.     width: 150px;
  503.     height: 150px;
  504.     object-fit: cover;
  505.     border-radius: 50%;
  506.     box-shadow: rgba(0, 0, 0, 0.1) 0 0 10px;
  507. }
  508.  
  509. .description {
  510.   font-size: 16px;
  511.   margin-bottom: 10px;
  512.   text-align: center;
  513. }
  514.  
  515. /* Submit-style Buttons (Edit/Delete) */
  516. .edit-del-buttons {
  517.   margin-top: 20px;
  518.   display: flex;
  519.   gap: 1em;
  520.   justify-content: flex-end;
  521.   font-style: normal;
  522. }
  523.  
  524. .submit-btn {
  525.   background-color: #4c86af;
  526.   color: white;
  527.   padding: 7px 15px;
  528.   font-weight: bold;
  529.   border: none;
  530.   border-radius: 5px;
  531.   cursor: pointer;
  532.   transition: background-color 0.3s ease;
  533.   text-decoration: none;
  534.   box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  535. }
  536.  
  537. .submit-btn:hover {
  538.   background-color: #2d4e67;
  539. }
  540.  
  541. .center-wrapper {
  542.   display: flex;
  543.   justify-content: center;
  544.   align-items: center;
  545.   height: calc(100vh - 100px); /* - header (50px) - footer (50px) */
  546.   padding: 10px; /* предотвратява залепване при малки екрани */
  547. }
  548. /*END OF Profile Details*/
  549.  
  550. /*Profile Update*/
  551.  
  552. .edit-delete {
  553.     background-color: #fff;
  554.     padding: 10px 5px;
  555.     border-radius: 8px;
  556.     box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  557.     width: 80%;
  558.     max-width: 400px;
  559.     text-align: center;
  560.     max-height: 80vh; /* Ограничаване на височината на контейнера */
  561.     overflow-y: auto;
  562.     margin: 0 auto; /* Центриране и отстояние от header и footer */
  563.     margin-top: 70px;
  564.  
  565. }
  566. /* Заглавие на секцията */
  567. .edit-delete h2 {
  568.     font-size: 15px;
  569.     color: #333;
  570.     margin-bottom: 15px;
  571. }
  572. /* Стилове за формата */
  573. .update-form {
  574.     display: flex;
  575.     flex-direction: column;
  576.     align-items: center;
  577. }
  578.  
  579. /* Полета във формата */
  580. form p {
  581.     font-size: 12px;
  582.     color: black;
  583.     width: 80%;
  584.     margin-bottom: 2px;
  585. }
  586.  
  587. .update-form input[type="text"],
  588. .update-form input[type="email"],
  589. .update-form input[type="file"] {
  590.     width: 100%;
  591.     padding: 4px;
  592.     margin-bottom: 10px;
  593.     border: 1px solid #ccc;
  594.     border-radius: 4px;
  595.     font-size: 12px;
  596.     color: black;
  597. }
  598.  
  599. /* Бутон за редактиране */
  600. .edit-btn {
  601.     background-color: #4c86af;
  602.     color: white;
  603.     border: none;
  604.     padding: 7px 15px;
  605.     border-radius: 5px;
  606.     cursor: pointer;
  607.     font-weight: bold;
  608.     transition: background-color 0.3s ease;
  609.     box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  610. }
  611.  
  612. .edit-btn:hover {
  613.     background-color: #2d4e67;
  614. }
  615.  
  616. /* Стил за бутона за връщане назад */
  617. .back-btn {
  618.     background-color: #4c86af;
  619.     color: white; /* Белият текст */
  620.     padding: 7px 12px; /* Padding за създаване на "бутон" */
  621.     border: none;
  622.     border-radius: 5px;
  623.     text-decoration: none; /* Премахва подчертаването на линка */
  624.     font-weight: bold;
  625.     display: inline-block; /* Прави линка да се държи като бутон */
  626.     cursor: pointer;
  627.     transition: background-color 0.3s ease;
  628.     box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  629. }
  630.  
  631. .back-btn:hover {
  632.     background-color: #2d4e67; /* По-светъл нюанс на черното при задържане */
  633.     color: white; /* Запазва текста бял при задържане */
  634. }
  635.  
  636. .profile-update-btn {
  637.     margin: 2em;
  638.     display: flex;
  639.     justify-content: flex-end;
  640.     align-items: center;
  641.     gap: 1em;
  642. }
  643.  
  644. /* Скриване на CSRF токена */
  645. form input[name="csrfmiddlewaretoken"] {
  646.     display: none;
  647. }
  648.  
  649. /* PROFILE DELETE*/
  650.  
  651.  .profile-delete {
  652.     display: flex;
  653.     justify-content: center;
  654.     align-items: center;
  655.     height: calc(100vh - 100px);
  656.     box-sizing: border-box;
  657.     padding: 0;
  658.  
  659. }
  660.  
  661. .container {
  662.     background-color: white;
  663.     padding: 10px; /* Вътрешно разстояние в контейнера */
  664.     border-radius: 8px;
  665.     box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  666.     text-align: center;
  667.     width: 100%;
  668.     max-width: 600px;
  669.     max-height: calc(100vh - 40px); /* Ограничаване на височината до 100% от прозореца, минус малко пространство */
  670.     overflow-y: auto; /* Скрол вътре в контейнера само ако съдържанието го изисква */
  671.     box-sizing: border-box; /* Включване на padding в размера */
  672. }
  673.  
  674. .container h1 {
  675.     color: red;
  676.     font-style: italic;
  677. }
  678.  
  679. .container img {
  680.     width: 100%;
  681.     max-width: 350px; /* Намален размер на изображението */
  682.     margin-top: 20px; /* Намален маргин */
  683.     margin-bottom: 20px;
  684.     border-radius: 8px;
  685. }
  686.  
  687. .profile-delete-btn {
  688.     display: flex;
  689.     justify-content: flex-end;
  690.     gap: 1em;
  691. }
  692.  
  693. .profile-delete-yes {
  694.     background-color: #007bff;
  695.     color: white;
  696.     border: none;
  697.     padding: 6px 12px;
  698.     border-radius: 5px;
  699.     cursor: pointer;
  700.     font-size: 14px;
  701.     transition: background-color 0.3s ease;
  702. }
  703.  
  704. .back-delete-btn {
  705.     background-color: #007bff;
  706.     color: white;
  707.     border: none;
  708.     padding: 6px 12px;
  709.     border-radius: 5px;
  710.     cursor: pointer;
  711.     font-size: 12px;
  712.     transition: background-color 0.3s ease;
  713.     text-decoration: none;
  714. }
  715.  
  716. .profile-delete-yes:hover {
  717.     background-color: #0056b3;
  718. }
  719.  
  720. .back-delete-btn:hover {
  721.     background-color: #0056b3;
  722. }
  723.  
  724. /* Основна секция */
  725. .create-publication, .update-publication {
  726.     max-width: 500px;
  727.     margin: 40px auto;
  728.     padding: 20px 24px;
  729.     background-color: #ffffff;
  730.     border-radius: 12px;
  731.     box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  732.     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  733.     min-height: 400px;
  734. }
  735.  
  736. /* Заглавие */
  737. .create-publication h1, .update-publication h1 {
  738.     text-align: center;
  739.     font-size: 24px;
  740.     margin-bottom: 20px;
  741.     color: #222;
  742. }
  743.  
  744. /* Форма */
  745. #create-publication-form {
  746.     display: flex;
  747.     flex-direction: column;
  748. }
  749.  
  750. #update-publication-form {
  751.     display: flex;
  752.     flex-direction: column;
  753. }
  754.  
  755. .publication-container {
  756.     display: flex;
  757.     flex-direction: column;
  758.     gap: 8px;
  759. }
  760.  
  761. /* Полета на формата */
  762. .publication-container input[type="text"],
  763. .publication-container input[type="file"],
  764. .publication-container textarea,
  765. .publication-container select {
  766.     width: 100%;
  767.     padding: 8px 10px;
  768.     font-size: 14px;
  769.     border: 1px solid #ccc;
  770.     border-radius: 8px;
  771.     background-color: #f9f9f9;
  772.     transition: border-color 0.2s ease-in-out;
  773. }
  774.  
  775. .publication-container input[type="text"]:focus,
  776. .publication-container input[type="file"]:focus,
  777. .publication-container textarea:focus,
  778. .publication-container select:focus {
  779.     border-color: #007bff;
  780.     outline: none;
  781. }
  782.  
  783. /* Текстова област */
  784. .publication-container textarea {
  785.     resize: vertical;
  786.     min-height: 80px;
  787. }
  788.  
  789. /* Бутон за създаване */
  790. .publication-create-btn, .publication-update-btn {
  791.     background-color: #007bff;
  792.     color: white;
  793.     font-size: 15px;
  794.     font-weight: 500;
  795.     padding: 10px 14px;
  796.     border: none;
  797.     border-radius: 8px;
  798.     cursor: pointer;
  799.     transition: background-color 0.3s ease;
  800.     margin-top: 6px;
  801. }
  802.  
  803. .publication-create-btn:hover, .publication-update-btn {
  804.     background-color: #0056b3;
  805. }
  806.  
  807. /*feed.css*/
  808.  
  809. /*.feed-wrapper {*/
  810. /*  !*display: flex;*!*/
  811. /*  !*flex-direction: column;*!*/
  812. /*  !*align-items: center;*!*/
  813. /*  margin-top: 3em;*/
  814. /*  margin-bottom: 3em;*/
  815. /*}*/
  816.  
  817. .feed-wrapper {
  818.     padding: 2em;
  819.     display: flex;
  820.     flex-direction: column;
  821.     /*gap: 10px;*/
  822.     margin-top: 2em;
  823.     margin-bottom: 1em;
  824. }
  825.  
  826. .post-container {
  827.   max-width:650px;
  828.   margin: 0 auto 40px auto;
  829.   background: #ffffff;
  830.   border-radius: 2px;
  831.   box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  832.   overflow: hidden;
  833. }
  834.  
  835. .post-header {
  836.   display: flex;
  837.   align-items: center;
  838.   padding: 15px;
  839.   border-bottom: 1px solid #ddd;
  840. }
  841.  
  842. .post-footer {
  843.     padding: 15px;
  844. }
  845.  
  846. .avatar {
  847.   width: 40px;
  848.   height: 40px;
  849.   border-radius: 50%;
  850.   background: #ccc;
  851.   margin-right: 10px;
  852.     overflow: hidden;
  853. }
  854.  
  855. .avatar img {
  856.   width: 100%;
  857.   height: 100%;
  858.   object-fit: cover;
  859.   display: block;
  860. }
  861.  
  862. .post-user-info {
  863.   flex-grow: 1;
  864. }
  865.  
  866. .user-address {
  867.     font-size: 0.8em;
  868. }
  869.  
  870. .post-user-info strong {
  871.   display: block;
  872. }
  873.  
  874. .post-image img {
  875.   width: 100%;
  876.   display: block;
  877. }
  878.  
  879. .media {
  880.     display: flex;
  881.     justify-content: space-between;
  882.     gap: 10px;
  883.     padding: 10px;
  884. }
  885.  
  886. .post-image,
  887. .video-wrap {
  888.   flex: 1;
  889.   max-width: 50%;
  890. }
  891.  
  892. .media:only-child .post-image,
  893. .media:only-child .video-wrap,
  894. .media > div:only-child {
  895.   max-width: 100%;
  896. }
  897.  
  898. .post-image img,
  899. .video-wrap video {
  900.   width: 100%;
  901.   height: auto;
  902.   display: block;
  903.   object-fit: cover;
  904.   border-radius: 2px;
  905. }
  906.  
  907. .post-content {
  908.   padding: 10px;
  909. }
  910.  
  911. .likes {
  912.   font-weight: bold;
  913. }
  914.  
  915. .caption {
  916.   margin: 1em 0;
  917. }
  918.  
  919. .comment {
  920.   border-top: 1px solid #eee;
  921.   padding: 10px 15px;
  922.   font-size: 14px;
  923. }
  924.  
  925. .comment strong {
  926.   font-weight: bold;
  927. }
  928.  
  929. .comment-input {
  930.   display: flex;
  931.   border-top: 1px solid #ddd;
  932.   padding: 10px 15px;
  933. }
  934.  
  935. .comment-input input {
  936.   flex-grow: 1;
  937.   padding: 8px;
  938.   border: 1px solid #ccc;
  939.   border-radius: 20px;
  940. }
  941.  
  942. .comment-input button {
  943.   margin-left: 10px;
  944.   background-color: #1877f2;
  945.   color: white;
  946.   border: none;
  947.   padding: 8px 12px;
  948.   border-radius: 20px;
  949.   cursor: pointer;
  950. }
  951.  
  952. .post-edit-delete {
  953.     display: flex;
  954.     margin: 0.2em;
  955. }
  956.  
  957. .post-edit-delete img {
  958.     width: 1.3em;
  959.     height: 1em;
  960.     object-fit: contain;
  961.     display: block;
  962. }
  963.  
  964. .post-edit-delete button {
  965.     border: none;
  966.     background: none;
  967.     padding: 0;
  968.     cursor: pointer;
  969. }
  970.  
  971. .post-delete-wrapper {
  972.     display: flex;
  973.     justify-content: center;
  974.     align-items: center;
  975.     min-height: 70vh;
  976. }
  977.  
  978. .post-delete-container {
  979.     max-width: 500px;
  980.     width: 100%;
  981.     padding: 20px;
  982.     background: #ffffff;
  983.     border-radius: 2px;
  984.     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  985.     text-align: center;
  986. }
  987.  
  988. .delete-post-btn,
  989. .go-back-btn {
  990.     padding: 10px 16px;
  991.     border: none;
  992.     border-radius: 2px;
  993.     font-weight: bold;
  994.     cursor: pointer;
  995.     font-size: 1rem;
  996. }
  997.  
  998. .delete-buttons {
  999.     margin-top: 20px;
  1000.     display: flex;
  1001.     justify-content: center;
  1002.     gap: 15px;
  1003. }
  1004.  
  1005. .delete-post-btn {
  1006.     background-color: #e74c3c;
  1007.     color: white;
  1008. }
  1009.  
  1010. .go-back-btn {
  1011.     background-color: #bdc3c7;
  1012.     color: #2c3e50;
  1013. }
  1014.  
  1015. .delete-post-img {
  1016.     display: flex;
  1017.     flex-direction: column;
  1018. }
  1019.  
  1020. .delete-post-img img {
  1021.     max-height: 200px;
  1022.     width: auto;
  1023. }
  1024.  
  1025. /*comment*/
  1026. .comment-form .form-group {
  1027.     display: flex;
  1028.     align-items: center;
  1029.     gap: 10px;
  1030.     margin-top: 10px;
  1031. }
  1032.  
  1033. .comment-form textarea {
  1034.     flex: 1;
  1035.     resize: none;
  1036.     padding: 8px;
  1037.     font-size: 14px;
  1038.     border-radius: 6px;
  1039.     border: 1px solid #ccc;
  1040.     margin-left: 5px;
  1041. }
  1042.  
  1043. .comment-button, .likes_logic button {
  1044.     background-color: #3498db;
  1045.     color: white;
  1046.     border: none;
  1047.     padding: 4px 12px;
  1048.     border-radius: 6px;
  1049.     font-weight: bold;
  1050.     cursor: pointer;
  1051.     transition: background-color 0.3s ease;
  1052.     margin-right: 5px;
  1053. }
  1054.  
  1055. .comment-button:hover {
  1056.     background-color: #2980b9;
  1057. }
  1058.  
  1059. .likes_logic {
  1060.     display: flex;
  1061.     flex-direction: column;
  1062.     padding-left: 15px;
  1063. }
  1064.  
  1065. .all-comments .comment-info {
  1066.     color: white;
  1067. }
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!