Files
adsPRO/layout/style-old.scss
Jacek Pyziak 4635cefcbb feat: update font to Roboto across templates and add campaign/ad group filters in product views
- Changed font from Open Sans to Roboto in layout files.
- Added campaign and ad group filters in products main view.
- Enhanced product history to include campaign and ad group IDs.
- Updated migrations to support new campaign and ad group dimensions in product statistics.
- Introduced new migration files for managing campaign types and dropping obsolete columns.
2026-02-18 01:21:22 +01:00

1410 lines
24 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
$cBlue: #6690F4;
$cRed: #aa0505;
$cGreen: #43833f;
$cGreenLight: #57b951;
$cBlack: #4e5e6a;
.animate {
animation: mymove 3s infinite;
}
.text-right {
text-align: right;
}
.text-bold {
font-weight: 900 !important;
}
.nowrap {
white-space: nowrap;
}
table {
border-collapse: collapse;
}
small {
font-size: .75em;
}
table {
font-size: 13px;
}
@keyframes mymove {
50% {
opacity: .33;
}
}
/* motion */
@keyframes gradient-animation {
0% {
background-position: 15% 0%;
}
50% {
background-position: 85% 100%;
}
100% {
background-position: 15% 0%;
}
}
@keyframes frame-enter {
0% {
clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), 3px calc(100% - 3px), 3px 100%, 100% 100%, 100% 0%, 0% 0%);
}
25% {
clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) calc(100% - 3px), calc(100% - 3px) 100%, 100% 100%, 100% 0%, 0% 0%);
}
50% {
clip-path: polygon(0% 100%, 3px 100%, 3px 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) 3px, 100% 0%, 0% 0%);
}
75% {
-webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 3px, 3px 0%, 0% 0%);
}
100% {
-webkit-clip-path: polygon(0% 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 3px 100%, 0% 100%);
}
}
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
margin: 0;
padding: 0;
font-size: 15px;
color: #4e5e6a;
}
.btn {
padding: 12px 25px;
transition: all 0.3s ease;
color: #FFF;
border: 0;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
text-decoration: none;
gap: 5px;
justify-content: center;
align-items: center;
&.btn_small,
&.btn-xs {
padding: 5px 7px;
font-size: 13px;
i {
font-size: 12px;
}
}
&.btn-success {
background: #57b951;
&:hover {
background: #4a9c3b;
}
}
&.btn-primary {
background: $cBlue;
&:hover {
background: #3164db;
}
}
&.btn-danger {
background: #cc0000;
&:hover {
background: #b30000;
}
}
}
.hide {
display: none;
}
.form-error {
color: #cc0000;
font-size: 13px;
}
.input-group {
margin-bottom: 10px;
}
input[type="checkbox"] {
border: 1px solid #eee;
}
.form-control {
border: 1px solid #eee;
border-radius: 3px;
height: 35px;
width: 100%;
padding: 5px;
font-family: "Roboto", sans-serif;
option {
padding: 5px;
}
&:focus {
border: 1px solid $cBlue;
outline: none;
}
}
.unlogged {
background: #EEF1F9;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
.box-login {
background: #FFF;
padding: 25px;
border-radius: 6px;
width: 400px;
.title {
text-align: center;
padding: 10px 10px 25px;
border-bottom: 1px solid #eee;
font-size: 20px;
margin-bottom: 25px;
}
}
}
body>.top {
background: #FFF;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
.logo {
a {
display: inline-flex;
color: $cBlue;
padding: 10px;
text-decoration: none;
span {
font-weight: 600;
}
}
}
.user-nav {
position: relative;
font-size: 14px;
padding: 10px;
.trigger {
cursor: pointer;
i {
color: $cBlue;
}
}
ul {
position: absolute;
top: 100%;
left: 0;
background: #FFF;
margin: 0;
padding: 0;
width: 100%;
list-style-type: none;
border: 1px solid #eee;
display: none;
li {
cursor: pointer;
&:hover {
background: #F8F9FA;
}
a {
color: #333;
display: block;
text-decoration: none;
padding: 10px;
}
}
}
&:hover {
ul {
display: block;
}
}
}
}
.main-menu {
display: flex;
box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .075) !important;
ul {
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
font-size: 14px;
li {
cursor: pointer;
a {
color: #333;
text-decoration: none;
display: inline-flex;
padding: 10px 15px;
}
&:hover {
a {
background: $cBlue;
color: #FFF;
}
}
ul {
display: none;
}
}
}
}
.main {
padding: 25px;
background: #D9DEE2;
min-height: calc(100vh - 80px);
}
.tasks_container {
display: flex;
flex-wrap: wrap;
gap: 20px;
.column {
width: 350px;
h2 {
display: flex;
padding: 10px;
background: #FFF;
margin-bottom: 10px;
font-size: 15px;
font-weight: 300;
border-radius: 3px 3px 0 0;
justify-content: space-between;
align-items: center;
i {
cursor: pointer;
}
}
&.tasks_suspended {
h2 {
border-bottom: 5px solid #cc0000;
}
}
&.tasks_new {
h2 {
border-bottom: 5px solid #ccc;
}
}
&.tasks_bulk {
h2 {
border-bottom: 5px solid #ff8c00;
}
}
&.tasks_to_do {
h2 {
border-bottom: 5px solid #2aaf47;
}
}
&.tasks_to_review {
h2 {
border-bottom: 5px solid #2535c9;
}
}
&.tasks_closed {
h2 {
border-bottom: 5px solid #000;
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
.task {
margin-bottom: 5px;
background: #FFF;
padding: 10px;
border-radius: 0;
display: flex;
position: relative;
&.notopened {
border: 2px solid #cc0000;
}
.left {
width: 30px;
.users {
display: flex;
gap: 5px;
flex-wrap: wrap;
.user {
display: flex;
width: 20px;
height: 20px;
border-radius: 50%;
justify-content: center;
align-items: center;
color: #FFF;
font-size: 13px;
}
}
}
.middle {
width: calc(100% - 60px);
}
.right {
width: 30px;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
.recursively {
color: #ccc;
border-radius: 3px;
cursor: pointer;
margin-bottom: 5px;
width: 22px;
height: 22px;
text-align: center;
i {
font-size: 15px;
}
}
.task_start {
background: #57b951;
color: #FFF;
border-radius: 3px;
cursor: pointer;
margin-bottom: 5px;
width: 22px;
height: 22px;
text-align: center;
&.hidden {
display: none;
}
i {
font-size: 12px;
}
}
.task_end {
background: #cc0000;
color: #FFF;
border-radius: 3px;
cursor: pointer;
margin-bottom: 5px;
width: 22px;
height: 22px;
text-align: center;
&.hidden {
display: none;
}
i {
font-size: 12px;
}
}
}
.name {
font-size: 14px;
color: #333;
text-decoration: none;
display: block;
margin-bottom: 5px;
}
.bottom {
display: flex;
justify-content: space-between;
}
.client_info,
.current_status {
font-size: 12px;
font-weight: 400;
strong {
font-weight: 600;
}
}
.current_status {
position: relative;
cursor: pointer;
.status_change {
position: absolute;
left: 0;
top: 20px;
background: #fff;
padding: 15px;
border: 1px solid #dfdfdf;
border-radius: 3px;
cursor: pointer;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
z-index: 99;
display: none;
select {
width: 250px;
padding: 10px;
border: 1px solid #eee;
border-radius: 3px;
option {
font-size: 15px;
padding: 3px;
}
}
}
}
.dates {
margin-bottom: 5px;
display: flex;
justify-content: space-between;
font-size: 12px;
.danger {
color: #cc0000;
font-weight: 600;
}
.warning {
color: #ff8c00;
}
i {
font-size: 12px;
color: #C9CED4;
margin-right: 5px;
}
}
}
}
}
}
.action_menu {
display: flex;
margin-bottom: 25px;
gap: 20px;
.btn {
display: inline-flex;
padding: 7px 15px;
color: #FFF;
border-radius: 3px;
text-decoration: none;
align-items: center;
justify-content: center;
gap: 5px;
&.btn_add {
background: #57b951;
&:hover {
background: #4a9c3b;
}
}
&.btn_cancel {
background: #cc0000;
&:hover {
background: #b30000;
}
}
&.disabled {
opacity: .5;
}
}
}
.form_container {
background: #FFF;
padding: 25px;
max-width: 1300px;
&.full {
max-width: 100%;
}
.form_group {
margin-bottom: 10px;
display: flex;
>.label {
width: 300px;
display: inline-flex;
align-items: flex-start;
justify-content: right;
padding-right: 10px;
}
.input {
width: calc(100% - 300px);
}
}
}
.task_popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: none;
.task_details {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #FFF;
padding: 25px;
border-radius: 6px;
max-width: 1140px;
width: 100%;
.title {
font-size: 20px;
margin-bottom: 25px;
a {
color: #333;
text-decoration: none;
margin-right: 10px;
&.task-delete {
color: #cc0000;
}
}
}
.close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
.content {
display: flex;
font-size: 14px;
h3 {
width: 100%;
margin-top: 0;
margin-bottom: 5px;
font-weight: 500;
color: #000;
font-size: 17px;
}
.left {
width: 70%;
max-height: 700px;
overflow-y: auto;
.users {
display: flex;
gap: 20px;
.user {
display: flex;
gap: 10px;
align-items: center;
margin-bottom: 10px;
.avatar {
height: 30px;
width: 30px;
border-radius: 50%;
background: #ccc;
display: flex;
justify-content: center;
align-items: center;
color: #FFF;
}
}
}
.comments {
border-radius: 3px;
padding: 0 15px 15px 0;
margin-bottom: 15px;
border-bottom: 1px solid #eee;
.new_comment {
margin-bottom: 15px;
textarea {
height: 75px;
}
.add_comment {
background: #57b951;
color: #FFF;
padding: 10px;
border-radius: 6px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
width: 200px;
text-decoration: none;
&:hover {
background: #4a9c3b;
}
}
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
li {
background: #eee;
margin-bottom: 5px;
padding: 15px;
border-radius: 6px;
position: relative;
.delete_comment {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
color: #cc0000;
}
.author {
font-weight: 600;
margin-bottom: 5px;
display: inline-flex;
margin-right: 10px;
}
.date {
font-size: 12px;
margin-bottom: 5px;
display: inline-flex;
}
.text {
margin-bottom: 15px;
font-size: 13px;
}
}
}
}
.checklist {
border-radius: 3px;
padding: 0 15px 15px 0;
margin-bottom: 15px;
border-bottom: 1px solid #eee;
.new_element {
display: flex;
margin-bottom: 15px;
a {
display: flex;
align-items: center;
justify-content: center;
padding: 10px;
border-radius: 0 6px 6px 0;
text-decoration: none;
width: 35px;
background: #57b951;
color: #FFF;
}
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
li {
display: flex;
gap: 10px;
margin-bottom: 5px;
background: #FFF;
border-radius: 3px;
padding: 5px;
border: 1px solid #eee;
font-size: 13px;
align-items: center;
i {
margin-left: auto;
margin-right: 0;
cursor: pointer;
color: #cc0000;
}
}
}
}
.description {
padding: 15px;
border-radius: 3px;
background: #F6F8F9;
margin-bottom: 15px;
}
}
.right {
width: 30%;
padding: 0 15px 15px;
.box {
margin-bottom: 15px;
}
.time {
a {
display: block;
padding: 10px;
border-radius: 6px;
margin-top: 10px;
text-decoration: none;
text-align: center;
width: 100%;
&.task_start {
background: #57b951;
color: #FFF;
}
&.task_end {
background: #cc0000;
color: #FFF;
}
&.hidden {
display: none;
}
}
}
.dates {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
.danger {
color: #cc0000;
font-weight: 600;
}
.warning {
color: #ff8c00;
}
i {
color: #C9CED4;
margin-right: 5px;
}
}
}
}
}
}
.table {
width: 100%;
th,
td {
border: 1px solid #eee;
padding: 5px;
}
td.center {
text-align: center;
}
td.left {
text-align: left;
}
&.table-sm {
td {
padding: 5px !important;
}
}
input.form-control {
font-size: 13px;
}
}
.projects_container {
background: #FFF;
padding: 15px;
border-radius: 6px;
display: flex;
gap: 20px;
.left {
display: flex;
gap: 20px;
flex-wrap: wrap;
width: calc(100% - 250px);
}
.right {
width: 250px;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
gap: 20px;
border-left: 1px solid #eee;
padding-left: 15px;
select {
width: 200px;
}
}
}
.default_popup {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: none;
.popup_content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: #FFF;
padding: 25px;
border-radius: 6px;
max-width: 1140px;
width: 100%;
.close {
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
}
}
#fg-cron {
margin: 10px 0;
.countdown {
background: #57b951;
color: #FFF;
padding: 10px;
}
#cron-container {
max-height: 300px;
overflow-x: hidden;
overflow-y: auto;
.msg {
font-size: 13px;
padding: 5px;
border-bottom: 1px solid #e8e8e8;
}
}
}
.card {
background: #FFF;
padding: 25px;
border-radius: 6px;
color: #000;
font-size: 15px;
max-width: 1280px;
&.mb25 {
margin-bottom: 25px;
}
.card-header {
font-weight: 600;
}
.card-body {
padding-top: 10px;
table {
border-collapse: collapse;
th,
td {
font-size: 14px;
&.bold {
font-weight: 600;
}
&.text-right {
text-align: right;
}
&.text-center {
text-align: center;
}
.close-task {
text-decoration: none;
color: $cBlue;
&:hover {
color: #cc0000;
}
}
}
}
}
}
.finance-summary {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
gap: 10px;
.panel {
background: #FFF;
border-radius: 6px;
padding: 15px;
h1 {
font-size: 20px;
margin: 0;
}
span {
font-size: 0.85em;
}
}
}
.finance-manager {
display: grid;
gap: 10px;
grid-template-columns: 200px 1fr 500px;
padding-top: 25px;
.manage-menu {
display: inline-block;
margin-right: 10px;
a {
color: #333333;
text-decoration: none;
font-weight: 300;
display: block;
}
}
.actions {
width: 100px;
text-align: center;
a {
display: inline-flex;
margin: 0 2px;
height: 25px;
width: 25px;
align-items: center;
justify-content: center;
text-decoration: none;
color: #000;
border: 1px solid #e7e7e7;
font-size: 11px;
border-radius: 3px;
transition: all 0.3s ease;
&:hover {
border: 1px solid $cBlue;
}
}
}
}
.bootstrap-tagsinput {
.tag {
background: $cBlue;
font-size: 13px;
padding: 5px 10px;
border-radius: 12px;
[data-role="remove"] {
color: #FFF !important;
&:hover {
box-shadow: none !important;
color: #000 !important
}
}
}
}
.finance-tags {
display: flex;
flex-wrap: wrap;
gap: 5px;
a:not(.btn) {
display: flex;
width: 100%;
text-decoration: none;
color: $cBlack;
&.zoom-100 {
font-size: 130%;
}
&.zoom-90 {
font-size: 120%;
}
&.zoom-80 {
font-size: 110%;
}
&.zoom-70 {
font-size: 100%;
}
&.zoom-60 {
font-size: 95%;
}
&.zoom-50 {
font-size: 85%;
}
&.zoom-40 {
font-size: 80%;
}
&.zoom-30 {
font-size: 75%;
}
&.zoom-20 {
font-size: 75%;
}
&.zoom-10 {
font-size: 70%;
}
&.zoom-0 {
font-size: 70%;
}
}
}
.manage-menu {
position: relative;
.context-menu {
border-left: 4px dotted #000;
width: 1px;
height: 100%;
}
.context-menu-container {
position: absolute;
display: none;
background: #FFF;
box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.1);
top: 2px;
left: 2px;
ul {
list-style-type: none;
margin: 0;
padding: 0;
li {
a {
display: block;
padding: 7px 15px;
white-space: nowrap;
&:hover {
background: #f8f8f8;
}
}
}
}
}
&:hover {
.context-menu-container {
display: block;
}
}
}
.dt-layout-table {
margin-bottom: 25px;
}
.pagination {
button {
border: 1px solid #eee;
background: #FFF;
display: inline-flex;
height: 30px;
width: 30px;
align-items: center;
justify-content: center;
margin: 0 2px;
transition: all 0.3s ease;
&:hover {
background: #eee;
}
}
}
table {
&#products {
.table-product-title {
display: flex;
justify-content: space-between;
}
.edit-product-title {
display: flex;
height: 25px;
align-items: center;
justify-content: center;
width: 25px;
cursor: pointer;
background: #fff;
border: 1px solid #9b9b9b;
color: #9b9b9b;
&:hover {
background: #9b9b9b;
color: #fff;
}
}
a {
&.custom_name {
color: $cGreenLight !important;
}
}
}
}
.chart-with-form {
display: flex;
gap: 20px;
align-items: flex-start;
}
.chart-area {
flex: 1 1 auto;
min-width: 0;
}
.comment-form {
width: 360px;
/* stała, wygodna szerokość prawej kolumny */
flex: 0 0 360px;
}
.comment-form .form-group {
margin-bottom: 12px;
}
.comment-form label {
display: block;
font-weight: 600;
margin-bottom: 6px;
}
.comment-form input[type="date"],
.comment-form textarea {
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0 8px;
font-size: 14px;
}
.comment-form textarea {
min-height: 120px;
resize: vertical;
}
.comment-form .btn {
display: inline-block;
padding: 8px 14px;
border-radius: 4px;
border: 0;
background: #337ab7;
color: #fff;
font-weight: 600;
cursor: pointer;
}
.comment-form .btn[disabled] {
opacity: .6;
cursor: not-allowed;
}
.comment-form .hint {
font-size: 12px;
color: #666;
}
/* === Select2 w modalu "Edytuj produkt" === */
/* pełna szerokość i taki sam odstęp jak inne pola */
.jconfirm-box .form-group .select2-container {
width: 100% !important;
margin-top: 8px;
}
/* wygląd "inputa" */
.jconfirm-box .select2-container--default .select2-selection--single {
background-color: #fff;
border: 1px solid #ced4da;
/* jak bootstrapowe inputy */
border-radius: 3px;
min-height: 42px;
/* wysokość podobna do pola tytułu/opisu */
display: flex;
align-items: center;
padding: 4px 12px;
box-shadow: none;
transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
font-size: 14px;
}
/* tekst w środku */
.jconfirm-box .select2-container--default .select2-selection--single .select2-selection__rendered {
padding-left: 0;
line-height: 1.4;
color: #495057;
}
/* placeholder */
.jconfirm-box .select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #adb5bd;
}
/* strzałka po prawej wyrównanie */
.jconfirm-box .select2-container--default .select2-selection--single .select2-selection__arrow {
height: 100%;
right: 8px;
}
/* efekt hover/focus jak na form-control */
.jconfirm-box .select2-container--default.select2-container--focus .select2-selection--single,
.jconfirm-box .select2-container--default .select2-selection--single:hover {
border-color: #80bdff;
box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, .25);
outline: 0;
}
/* dropdown (lista kategorii) */
.jconfirm-box .select2-container .select2-dropdown {
border-color: #ced4da;
border-radius: 0 0 3px 3px;
font-size: 14px;
}
/* pole wyszukiwania w dropdownie */
.jconfirm-box .select2-container .select2-search--dropdown .select2-search__field {
padding: 6px 10px;
border-radius: 3px;
border: 1px solid #ced4da;
font-size: 14px;
}
/* podświetlenie zaznaczonej pozycji */
.jconfirm-box .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #007bff;
color: #fff;
}