search_ui/components/entity/components/EntityHeader.vue
2025-02-11 10:39:05 +03:30

1011 lines
35 KiB
Vue
Raw Permalink 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.

<template>
<section>
<div class="selected-tab-details py-2" ref="selectedTabDetails">
<div class="container-fluid">
<div class="row">
<div class="col-12" :key="renderMain">
<!-- #region top_main هدر باتوجه به مقدار داشتن -->
<template v-if="activeEntityViewSchemaGetter?.header?.top_main">
<div class="row">
<div
v-for="(item, key) in activeEntityViewSchemaGetter.header
.top_main"
:key="item.id"
:class="[
(item.col ? item.col : 'col-auto') + ' text-truncate',
]"
>
<!-- style="max-width: 80em; width: 100%" -->
<div v-if="key == 0" class="text-truncate mb-1">
<span class="text-label">{{ item?.title }}</span>
<span class="text-title me-2">
{{ getDataValue(item.key) }}
</span>
</div>
<div v-else>
<span class="text-label">{{ item?.title }}</span>
<a
class="me-2 a-text-title"
@click.prevent="showMultiText(entity._id, 'branch')"
@auxclick.prevent.stop="
showMultiText(entity._id, 'branch')
"
href=""
v-if="item.islink"
>
{{ getDataValue(item.key) }}</a
>
<span v-else class="text-title me-2">
{{ getDataValue(item.key) }}
</span>
</div>
</div>
</div>
</template>
<!-- #endregion -->
<!-- #region top_mirror هدر باتوجه به مقدار داشتن -->
<div class="row align-items-center justify-content-between">
<template v-if="activeEntityViewSchemaGetter?.header?.top_mirror">
<div
class="d-none d-md-flex"
v-for="(item, index) in activeEntityViewSchemaGetter.header
.top_mirror"
:key="index"
:id="item?.key"
:class="[item.col + ' text-truncate']"
>
<span class="text-label">{{ item?.title }}</span>
<span class="me-2 text-title" :class="item.key">
{{ getDataValue(item.key, item.type) }}
</span>
</div>
</template>
<div
v-if="activeTabGetter?.key == 'content'"
class="col-12 col-md-4"
>
<template
v-if="
activeEntityViewSchemaGetter?.header?.tools?.showCompare
"
>
<div v-if="isCompareState" class="d-flex justify-content-end">
<div class="switch-component">
<switch-component
@change-mode="changeCompare($event)"
class="compare-switch"
texts1="copmareSideBySide"
texts2="compareLineByLine"
></switch-component>
</div>
<div class="ms-3">
<button
class="btn btn-back-text"
@click="$emit('close-compare')"
>
بازگشت به متن
</button>
</div>
</div>
<!-- <div class="ms-3" v-else>
<button
class="btn p-1"
title="'مقایسه با متن دیگر'"
@click="$emit('showCompareModal')"
>
<svg class="icon tavasi-most-repeat">
<use xlink:href="#tavasi-most-repeat"></use>
</svg>
</button>
</div> -->
</template>
<div
v-if="!isCompareState"
class="header-icons d-flex me-auto align-items-center justify-content-end"
>
<div
v-if="
!isMajlesBuild &&
activeEntityViewSchemaGetter?.header?.tools?.showChanges
"
class="col-lg-auto me-lg-auto mt-lg-0"
>
<!-- <div class="row align-items-center d-flex">
<label
v-tooltip="
'برای تعیین نحوه نمایش تغییرات هر بخش متن که بدلیل اصلاحات در طول زمان ایجاد شده است'
"
class="mb-0 col col-sm-auto d-none d-lg-inline-block"
>نمایش :</label
>
<div class="col-auto">
<select
class="form-control"
@change="onChangeDiffType"
v-model="diffType"
id="search-type"
>
<option value="noChange"> متن نهایی</option>
<option selected value="mergeChange">
ادغام تغییرات
</option>
<option value="diffChars">مقایسه حرفی</option>
<option value="diffWords">مقایسه کلمه ای</option>
</select>
</div>
</div> -->
</div>
<!-- <div v-if="showReadingMode" class="switch-component">
<switch-component
name="switch-view-mode"
@change-mode="changeReadingMode($event)"
class="compare-switch"
texts1="ReadingMode"
texts2="Normal"
:value="isReadingModeGetter"
></switch-component>
</div> -->
<template>
<div>
<!-- Dropdown -->
<div class="dropdown">
<button
class="btn dropdown-toggle"
type="button"
id="exportDropdown"
data-bs-toggle="dropdown"
aria-expanded="false"
v-tooltip="'تنظیمات'"
>
<svg class="icon icon-Gear--Streamline">
<use xlink:href="#icon-Gear--Streamline"></use>
</svg>
</button>
<ul
class="dropdown-menu"
aria-labelledby="exportDropdown"
>
<!-- Dynamic Dropdown Items -->
<li
v-for="(item, index) in settings"
:key="index"
class="dropdown-item d-flex align-items-center form-check"
:class="{ 'has-sub-items': item.link }"
>
<template v-if="item.key == 'switch-component'">
<switch-component
name="switch-view-mode"
@change-mode="changeReadingMode($event)"
class="compare-switch"
texts1="ReadingMode"
texts2="Normal"
:value="isReadingModeGetter"
></switch-component>
</template>
<template v-if="item.link">
<span class="nav-item-name">
<svg
v-if="item.icon"
:class="'icon icon-' + item.icon"
>
<use :xlink:href="'#icon-' + item.icon"></use>
</svg>
{{ item.name }}
</span>
<ul
class="sidebar-sub-level-items border rounded p-1"
:id="item?.link"
>
<li
v-for="(item2, index) in exportQanon"
:key="index"
class="dropdown-item d-flex align-items-center"
@click="exportFile(item2)"
>
<svg
class="ms-1"
:class="'icon icon-' + item2.icon"
>
<use
:xlink:href="'#icon-' + item2.icon"
></use>
</svg>
{{ item2.name }}
</li>
</ul>
</template>
<button
@click="onRadioChange(item)"
class="btn pe-0"
v-if="item.type == 'button'"
>
<svg :class="'icon icon-' + item.icon">
<use :xlink:href="'#icon-' + item.icon"></use>
</svg>
{{ item.name }}
</button>
</li>
</ul>
</div>
</div>
</template>
<!-- <template>
<div>
<div class="dropdown">
<button
class="btn dropdown-toggle"
type="button"
id="exportDropdown"
data-bs-toggle="dropdown"
aria-expanded="false"
v-tooltip="'دانلود فایل قانون'"
>
<svg class="icon icon-download">
<use xlink:href="#icon-download"></use>
</svg>
</button>
<ul
class="dropdown-menu"
aria-labelledby="exportDropdown"
>
<li
v-for="(item, index) in exportQanon"
:key="index"
class="dropdown-item d-flex align-items-center"
@click="exportFile(item)"
>
<svg class="ms-1" :class="'icon icon-' + item.icon">
<use :xlink:href="'#icon-' + item.icon"></use>
</svg>
{{ item.name }}
</li>
</ul>
</div>
</div>
</template> -->
<!-- <button
class="btn"
@click="$root.$emit('show-settings-modal', 4)"
v-tooltip="'تنظیمات'"
>
<svg class="icon icon-Gear--Streamline">
<use xlink:href="#icon-Gear--Streamline"></use>
</svg>
</button> -->
<div
class=""
v-if="
activeEntityViewSchemaGetter?.header?.tools?.showCompare
"
>
<button
class="btn p-1"
v-tooltip="'مقایسه با متن دیگر'"
@click="$emit('show-compare-modal')"
>
<svg class="icon icon-copy-3">
<use xlink:href="#icon-copy-3"></use>
</svg>
</button>
</div>
<template v-if="activeTabGetter?.key == 'content'">
<div
class=""
v-if="
activeEntityViewSchemaGetter?.header?.tools?.showHeading
"
>
<button
class="btn p-1"
v-tooltip="'نمایش درختواره متن'"
@click="showListHeadline(false, true)"
>
<svg class="icon icon-Component-68--1">
<use xlink:href="#icon-Component-68--1"></use>
</svg>
</button>
</div>
<div
v-if="
activeEntityViewSchemaGetter?.header?.tools?.showSearch
"
class=""
>
<button
class="btn p-1"
v-tooltip="'جستجو در کل متن'"
@click.prevent="showListHeadline(true, false)"
>
<svg class="icon icon-majles-5">
<use xlink:href="#icon-majles-5"></use>
</svg>
</button>
</div>
</template>
</div>
</div>
<template v-if="activeTabGetter?.key == 'graph'">
<div class="col-3 me-auto d-flex justify-content-end">
<switch-with-icon
@change-mode="switchView($event)"
texts1="نمایش گرافی رابطه"
texts2="نمایش گرافی رابطه"
firstKey="show"
secondKey="hidden"
value="show"
>
<template #firstIcon>
<svg class="icon icon-Graph-Light">
<use xlink:href="#icon-Graph-Light"></use>
</svg>
</template>
>
<template #secondIcon>
<svg class="icon icon-Component-68--1">
<use xlink:href="#icon-Component-68--1"></use>
</svg>
</template>
</switch-with-icon>
<!-- <div class="switcher-container">
<button-component
@click="switchView('show')"
:class="{ active: viewMode === 'show' }"
classes="btn d-inline-flex px-2 "
buttonText=""
title="نمایش گرافی رابطه "
v-tooltip="'نمایش گرافی رابطه'"
>
<svg class="icon icon-Graph-Light">
<use xlink:href="#icon-Graph-Light"></use>
</svg>
</button-component>
<button-component
@click="switchView('hidden')"
:class="{ active: viewMode === 'hidden' }"
classes="btn d-inline-flex px-2 "
buttonText=""
title=" نمایش لیستی رابطه "
v-tooltip="' نمایش لیستی رابطه '"
>
<svg class="icon icon-Component-68--1">
<use xlink:href="#icon-Component-68--1"></use>
</svg>
</button-component>
</div> -->
</div>
</template>
<template v-if="activeTabGetter?.key == 'gantt'">
<div class="col-3 me-auto d-flex justify-content-end">
<switch-with-icon
@change-mode="switchView($event)"
texts1="جدولی"
texts2="نموداری"
firstKey="show"
secondKey="hidden"
value="show"
>
<template #firstIcon>
<svg class="icon icon-table-view">
<use xlink:href="#icon-table-view"></use>
</svg>
</template>
>
<template #secondIcon>
<svg class="icon icon-Graph-Light">
<use xlink:href="#icon-Graph-Light"></use>
</svg>
</template>
</switch-with-icon>
</div>
</template>
</div>
<!-- #endregion -->
<!-- #region هدر در غیر موارد بالا -->
<!-- <template v-if="mainComponentName !== 'EntityQaSection'">
tavasi-most-repeat
<div class="d-flex justify-content-end">
<button class="btn" @click="showListHeadline">
<svg class="icon icon-Component-68--1">
<use xlink:href="#icon-Component-68--1"></use>
</svg>
</button>
</div>
</template> -->
<!-- #endregion -->
</div>
</div>
</div>
</div>
</section>
</template>
<script>
import { mapActions, mapState } from "pinia";
import { useEntityStore } from "@search/stores/entityStore";
import entityApi from "@apis/entityApi";
/**
* @vue-data {String} [httpService=undefined] - محل قرارگیری آدرس URL سرویس HTTP.
* @vue-data {Boolean} [showchange=true] - وضعیت نمایش تغییرات.
* @vue-data {Boolean} [showBoxMenu=false] - وضعیت نمایش منوی باکس.
* @vue-data {Boolean} [EditComponent=false] - وضعیت ویرایش کامپوننت.
* @vue-data {Boolean} [NewComponent=false] - وضعیت نمایش کامپوننت جدید.
* @vue-data {Boolean} [showCompareModal=false] - نمایش مدال مقایسه.
* @vue-data {Object} [params={}] - پارامترهای مسیر.
* @vue-data {String} [boxWidth=""] - عرض باکس.
* @vue-data {String} [bedtimeText=""] - متن زمان خواب.
* @vue-data {String} [selectedItem=""] - آیتم انتخاب شده.
* @vue-data {String} [diffType="mergeChange"] - نوع تفاوت.
* @vue-computed {undefined} mapState.selectedItemEntityGetter - مقدار موجودیتی که کاربر انتخاب کرده است را بازمی‌گرداند.
* @vue-computed {Object} mapState.activeEntityViewSchemaGetter - ساختار انتخاب شده برای صفحه.
* @vue-computed {undefined} mapState.activeTabGetter - تب فعال را نمایش می دهد
* @vue-computed {undefined} mapState.diffTypeGetter - نوع تفاوت متن را نمایش میدهد .
* @vue-computed {undefined} isEnableNextPrev - ؟ .
* @vue-computed {undefined} hideShowChanges - ؟.
*/
export default {
props: {
isCompareState: {
default: false,
},
},
beforeMount() {
this.httpService = useNuxtApp()["$http"];
},
mounted() {
this.entity = this.selectedItemEntityGetter;
if (!this.isDevelopMode) {
this.exportQanon = [
{ name: "دانلود فایل word", key: "word", icon: "docx-file" },
];
}
// if (!this.diffTypeGetter) this.diffTypeSetter(this.diffType);
},
watch: {
selectedItemEntityGetter(newVal) {
this.entity = newVal;
this.renderMain++;
},
},
data() {
return {
entity: {},
renderMain: 1,
httpService: undefined,
showchange: true,
showBoxMenu: false,
EditComponent: false,
NewComponent: false,
showCompareModal: false,
params: this.$route.params,
boxWidth: "",
bedtimeText: "",
selectedItem: "",
diffType: "mergeChange",
isSearchMode: false,
isHeadingMode: false,
viewMode: "show",
radioButtonValue: "normal",
exportQanon: [
{ name: "دانلود فایل word", key: "word", icon: "docx-file" },
{ name: "دانلود فایل excel", key: "excel", icon: "excel-file-2" },
{ name: "دانلود فایل pdf", key: "pdf", icon: "pdf-file" },
],
settings: [
{ key: "switch-component", type: "switch-component" },
{
name: "خروجی فایل",
key: "export",
type: "dropdown",
link: "export-file",
icon: "download",
},
{
name: "سایر تنظیمات...",
key: "other_settings",
type: "button",
icon: "Gear--Streamline",
},
],
};
},
computed: {
...mapState(useEntityStore, [
"selectedItemEntityGetter",
"activeEntityViewSchemaGetter",
"activeTabGetter",
"isReadingModeGetter",
]),
showReadingMode() {
return (
this.$route.params.key == "qasection" ||
this.$route.params.key == "rgsection"
);
},
isEnableNextPrev() {
if (this.activeEntityViewSchemaGetter?.header?.top_jump?.title)
return true;
return false;
},
hideShowChanges() {
return buildName() == "majles";
},
},
methods: {
...mapActions(useEntityStore, [
"SET_ITEM_ENTITY",
"SET_LIST_ENTITY",
"SET_FONT",
"SET_TEXT_STEPS",
"SET_SHOW_SIDEBAR",
"diffTypeSetter",
"isReadingModeSetter",
]),
showMultiText(id, _listkey) {
let _name = "navigation";
const routeData = this.$router.resolve({
name: _name,
params: {
id: id,
key: "sanad",
},
query: {
listkey: _listkey,
},
});
window.open(routeData.href, "_blank");
},
switchView(viewMode) {
this.viewMode = viewMode;
this.$emit("switch-view", viewMode);
},
changeReadingMode(newState) {
this.isReadingModeSetter(newState);
this.$emit("toggle-reading-mode", this.isReadingModeGetter);
},
/**
* نمایش لیست عنوان‌ها.
* @description این متد برای نمایش لیست عنوان‌ها استفاده می‌شود.
*/
showListHeadline(isSearchMode, isHeadingMode) {
// if (this.isSearchMode == isSearchMode) this.isSearchMode = !isSearchMode;
// else
this.isSearchMode = isSearchMode;
// if (this.isHeadingMode == isHeadingMode) this.isHeadingMode = !isHeadingMode;
// else
this.isHeadingMode = isHeadingMode;
this.$emit("showListHeadline", {
isSearchMode: this.isSearchMode,
isHeadingMode: this.isHeadingMode,
});
},
/**
* تغییر نوع تفاوت‌ها.
* @description این متد نوع تفاوت‌ها را بر اساس رویداد ورودی تغییر می‌دهد.
* @param {Event} evt - رویداد تغییر.
*/
// onChangeDiffType(evt) {
// this.$emit('diff-type-changed',evt.target.value)
// this.diffTypeSetter(evt.target.value);
// },
/**
* باز کردن کامپوننت ویرایش.
* @description این متد برای باز کردن کامپوننت ویرایش و بستن کامپوننت جدید استفاده می‌شود.
*/
openEditComponent() {
this.EditComponent = true;
this.NewComponent = false;
this.$emit("groupEditComponent", {
EditComponent: this.EditComponent,
NewComponent: this.NewComponent,
});
// this.$emit("NewComponent", this.NewComponent);
},
/**
* باز کردن کامپوننت جدید.
* @description این متد برای باز کردن کامپوننت جدید و بستن کامپوننت ویرایش استفاده می‌شود.
*/
openNewComponent() {
this.NewComponent = true;
this.EditComponent = false;
this.$emit("groupEditComponent", {
EditComponent: this.EditComponent,
NewComponent: this.NewComponent,
});
// this.$emit("NewComponent", this.NewComponent);
// this.$emit("EditComponent", this.EditComponent);
},
/**
* تنظیم آیتم انتخاب شده.
* @description این متد آیتم انتخاب شده را تنظیم می‌کند و درخواست HTTP برای دریافت داده‌ها ارسال می‌کند.
* @param {Object} item - آیتم انتخاب شده.
*/
setItem(item) {
this.selectedItem = item;
this.$emit("selectedItem", this.selectedItem);
let url = repoUrl() + entityApi.level.item;
url = url.replace("{{sanad}}", this.params.key);
url = url.replace("{{entity_id}}", this.params.id);
url = url.replace("{{title}}", item.title);
// console.log(url);
this.httpService.getRequest(url).then((res) => {
// console.log(res);
this.SET_TEXT_STEPS(res.hits.hits);
});
},
/**
* دریافت مقدار داده.
* @description این متد مقدار داده را بر اساس کلید ورودی دریافت می‌کند.
* @param {String} key - کلید داده.
* @param {String} [type=""] - نوع داده.
* @param {Number} [maxWordLen=30] - حداکثر طول کلمات.
* @returns {String} - مقدار داده.
*/
getDataValue(key, type = "", maxWordLen = 30) {
let res = "";
if (!this.entity) return res;
let _source = this.entity._source ?? this.entity;
let keys = key.split("/");
keys.forEach((k) => {
let kv = k.split(".");
let value = "";
//مثل other_info.full_path
if (kv.length == 2) {
if (_source[kv[0]][kv[1]]) value = _source[kv[0]][kv[1]];
} else if (_source[k]) value = _source[k];
if (value) {
if (res != "") res += " / ";
res += value;
if (type == "date") res = this.dateTofarsi(res);
}
});
// if (res.split(" ").length > maxWordLen)
// return res.split(" ").slice(0, maxWordLen).join(" ") + "...";
// else return res;
return res.length ? res : "--";
},
/**
* تبدیل تاریخ به فارسی.
* @description این متد تاریخ ورودی را به فرمت فارسی تبدیل می‌کند.
* @param {String} item - تاریخ ورودی.
* @returns {String} - تاریخ به فرمت فارسی.
*/
dateTofarsi(item) {
var m = item;
var d = new Date(m).toLocaleDateString("fa-IR");
return d;
},
/**
* پرش به موجودیت بر اساس رویداد ورودی.
* @description این متد به موجودیت مشخص شده بر اساس رویداد ورودی پرش می‌کند.
* @param {Event} event - رویداد ورودی.
*/
jumpToEntity(event) {
var number = event.target._value;
let key = this.$route.params?.key;
let url =
repoUrl() +
`monir/${key}/item/&f_au=${this.entity?.author}&f_br=${this.entity?.branch}&f_mn=${number}`;
this.httpService.getRequest(url).then((res) => {
// let text = res.hits.hits[0]._source;
let text = "";
if (res.hits.hits.length) {
// let text = res.hits.hits[0]._source;
text = { ...res.hits.hits[0], ...res.hits.hits[0]._source };
this.SET_ITEM_ENTITY(text);
// this.mySwalToast({
// title: "جلسه وارد شده وجود دارد",
// html: res.message,
// });
} else if (res.hits.hits.length == 0) {
// text = this.entity.content;
this.mySwalToast({
title: "جلسه ای نیست ",
html: res.message,
});
text = this.entity;
}
// this.controlText();
this.SET_ITEM_ENTITY(text);
localStorage.setItem("myItem", JSON.stringify(text));
});
},
/**
* رفتن به موجودیت بعدی.
* @description این متد به موجودیت بعدی بر اساس پارامترهای مسیر می‌رود.
*/
goToNextEntity() {
let key = this.$route.params?.key;
let url =
repoUrl() +
`monir/${key}/item/&f_au=${this.entity?.author}&f_br=${
this.entity?.branch
}&f_mn=${this.entity?.meet_no + 1}`;
this.httpService.getRequest(url).then((res) => {
// this.mySwalToast({
// title: "جلسه بعدی",
// html: res.message,
// });
let text = "";
if (res.hits.hits.length) {
// let text = res.hits.hits[0]._source;
text = { ...res.hits.hits[0], ...res.hits.hits[0]._source };
// this.SET_ITEM_ENTITY(text);
// this.mySwalToast({
// title: "جلسه بعدی",
// html: res.message,
// });
} else {
// text = this.entity.content;
this.mySwalToast({
title: "جلسه ای نیست",
icon: "error",
});
// const myItem = localStorage.getItem("myItem");
// text = JSON.parse(myItem);
text = this.entity;
}
this.SET_ITEM_ENTITY(text);
localStorage.setItem("myItem", JSON.stringify(text));
});
//
//
},
/**
* رفتن به موجودیت قبلی.
* @description این متد به موجودیت قبلی بر اساس پارامترهای مسیر می‌رود.
*/
goToPrevEntity() {
let key = this.$route.params?.key;
let url =
repoUrl() +
`monir/${key}/item/&f_au=${this.entity?.author}&f_br=${
this.entity?.branch
}&f_mn=${this.entity?.meet_no - 1}`;
this.httpService.getRequest(url).then((res) => {
// let text = res.hits.hits[0]._source;
let text = "";
if (res.hits.hits.length) {
// let text = res.hits.hits[0]._source;
text = { ...res.hits.hits[0], ...res.hits.hits[0]._source };
// this.SET_ITEM_ENTITY(text);
// this.mySwalToast({
// title: "جلسه قبلی",
// html: res.message,
// });
} else {
// text = this.entity.content;
this.mySwalToast({
title: "جلسه ای نیست",
icon: "error",
});
// const myItem = localStorage.getItem("myItem");
// text = JSON.parse(myItem);
text = this.entity;
}
this.SET_ITEM_ENTITY(text);
localStorage.setItem("myItem", JSON.stringify(text));
});
//
},
/**
* تغییر مقایسه.
* @description این متد مقایسه را بر اساس آیتم ورودی تغییر می‌دهد.
* @param {Object} item - آیتم مقایسه.
*/
changeCompare(item) {
this.$emit("change-compare", item);
},
/**
* حل آدرس URL.
* @description این متد آدرس URL را بر اساس والد و کلید ورودی حل می‌کند.
* @param {String} _parent - والد.
* @param {String} key - کلید.
* @returns {String} - آدرس URL حل شده.
*/
urlResolver(_parent, key) {
if (key == "") key = key;
const routeData = this.$router.resolve({
name: "navigationView",
params: {
id: _parent,
key: key,
},
query: {},
});
return routeData.href;
},
exportFile(file) {
this.$emit("export-file", file);
},
onRadioChange(item) {
if (item.key == "normal") {
this.changeReadingMode(false);
this.radioButtonValue = "normal";
} else if (item.key == "readding") {
this.changeReadingMode(true);
this.radioButtonValue = "readding";
} else if (item.key == "other_settings") {
this.$root.$emit("show-settings-modal", 4);
}
},
},
};
</script>
<style lang="scss" scoped>
.has-sub-items {
&:hover {
.sidebar-sub-level-items {
visibility: visible !important;
opacity: 1 !important;
}
}
}
.sidebar-sub-level-items {
min-width: 10.5em;
margin-top: 0.2em;
list-style: none;
position: fixed;
margin-right: 0;
margin-top: 0;
padding-left: 0;
padding-right: 0;
padding-bottom: 0.25rem;
padding-top: 0;
background-color: #fff;
visibility: hidden;
opacity: 0;
left: 12.9em;
}
.rotate-y-180 {
transform: rotateY(180deg);
}
.text_break {
display: -webkit-box !important;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.text-label {
color: var(--primary-color);
a:hover {
color: var(--blue-color);
}
}
.text-title-QSection1 {
color: #00abff !important;
&:hover {
// color: blue !important;
text-decoration: underline !important;
}
// &::after {
// content: "";
// padding-left: 0.5rem;
// padding-right: 0.5rem;
// --tw-text-opacity: 1;
// color: rgb(71 85 105 / var(--tw-text-opacity));
// cursor: unset;
// }
}
.text-title-QSection2 {
color: #00abff !important;
&:hover {
// color: blue !important;
text-decoration: underline !important;
}
}
.text-title {
// color: var(--text-primary);
color: rgb(65, 64, 66);
font-family: sahel-light;
}
.a-text-title {
color: rgb(65, 64, 66);
&:hover {
color: rgb(59, 130, 246) !important;
}
}
.selected-tab-details {
margin-top: 1.5em;
margin-bottom: 1.5em;
border-radius: 0.75rem;
background-color: rgb(243, 244, 246);
padding: 1.25rem;
}
.compare-switch {
margin-bottom: unset !important;
margin-left: 1em;
}
.switch-component {
display: flex;
align-items: center;
}
.btn-back-text {
color: #fff;
background-color: rgb(2, 153, 153);
border-color: rgb(2, 153, 153);
}
.header-icons {
.btn {
&:hover {
color: var(--primary-color);
}
}
}
// .form-control {
// border: 0;
// border-right: 1px solid #eee;
// border-left: 1px solid #eee;
// height: 3em;
// margin-right: 400px;
// width: 180px;
// }
// .switcher-container {
// border: 1px solid #bac4ce;
// // border-radius: 0.7em;
// width: 6em;
// button {
// // border-radius: 0.7em;
// border: 0;
// svg {
// width: 1.8em;
// height: 1.4em;
// margin-right: 2px;
// }
// &.active {
// background-color: var(--primary-color);
// .tavasi {
// color: #fff;
// &::before {
// color: #fff;
// }
// }
// }
// }
// }
.dropdown-item {
cursor: pointer;
}
.dropdown-toggle::after {
display: none !important; /* مخفی کردن فلش */
}
.nav-item-name{
cursor: default !important;
}
</style>