ফায়ারফক্স ৯৭: প্রোটন ইউআই রিভার্ট করার কুইক সিএসএস ফিক্স

আমি ফায়ারফক্সই আমার প্রাইমারি ব্রাউজার হিসেবে ব্যবহার করি। সত্য। আমি এটি তখন পর্যন্ত ব্যবহার করব যখন পর্যন্ত আমরা দুজনের মধ্যে যেকোনো একজন থাকে। সত্য। কিন্তু আমি নতুন ইউআই স্টাইলটিকে নিরর্থক মনে করি। সেটিকে প্রোটন বলা হয়, এবং এটি কিছু ماه আগে ফায়ারফক্সে আসে। এক동안 আপনি একটি টগল দিয়ে এটি ডিজেবল করতে পারতেন, কিন্তু এখন, আর কোনো টগল নেই।

একটি সুন্দর, প্রোডাক্টিভ ইউআই লেআউট ফিরে পाने के लिए আমি ম্যানুয়ালি সিএসএস ফাইল পরিবর্তন করে ফায়ারফক্সে হাত দিয়েছিলাম। এই সুন্দর যাত্রাটি আমার প্রোটন ডিজেবল করার গাইডগুলোতে বিস্তারিত আছে। আমি ট্যাবগুলো আরও দৃশ্যমান করিয়েছিলাম, কন্টেইনার ট্যাবে রঙ যোগ করেছিলাম, ইউআরএল বার ঠিক করেছিলাম, এবং আরও কিছু। সব ঠিকঠাক চলছিল, কিন্তু তারপর, সম্প্রতি রিলিজ হওয়া ভার্সন ৯৭-এ, আমি দেখলাম আমার কন্টেইনার ট্যাবগুলো একটু গোলমাল হয়ে গেছে। সিএসএস রুলগুলো আগের মতো ভালো কাজ করছে না। এই আর্টিকেলে আমার মডিফাইড ইন্টারফেসকে আবার কুল লুক দিতে אות ছোট ছোট ফিক্সগুলো দেখানো হয়েছে। আপনি যদি ইতিমধ্যে আমার অ্যান্টি-প্রোটন টвиকগুলো ব্যবহার করছেন, তবে এটি আপনার কাজে আসবে।

সমস্যার বিস্তারিত

ফায়ারফক্স ৯৭-এ যা হয় সেটা হলো: দুটি ইস্যু। একটি এক্টিভ কন্টেইনার ট্যাবে, টপ-বর্ডার হাইলাইট আংশিকভাবে আচ্ছন্ন থাকে, যা এক্টিভ ট্যাবটি দেখতে কঠিন করে তোলে। ট্যাব ব্যাকগ্রাউন্ড কলার এরিয়াও ট্যাব বারের কিছুটা উপরে চাপা থাকে। দ্বিতীয় ইস্যু হলো, ইনएक্টিভ ট্যাবের জন্য, ব্যাকগ্রাউন্ড এরিয়া khá বেশি আউট হয়ে থাকে, যা খারাপ দেখায়।

আমি সম্পূর্ণ জানে যে এটি একটি স্ব-নির্মিত সমস্যা, কারণ আমি ফায়ারফক্সে কিছু ফিক্স করার চেষ্টা করেছিলাম, যা আমি করলাম, কিন্তু এখন তার ফলে কিছু আর্টিফ্যাক্ট তৈরি হয়েছে। কিন্তু এটা ঠিক আছে, কারণ নরমাল ইউআই, ভালো কনট্রাস্ট এবং ট্যাবের সহজ পৃথকীকরণ পाने के लिए আমি যে দামটি দিতে রাজি। আমি আর আমার প্রোটন র্যান্টে যাবো না।

সমাধান

এখন আমার কন্টেইনার ট্যাবের জন্য সিএসএস নিচের মতো:

এখন ফিক্সগুলো নিচের মতো:

.tabbrowser-tab[usercontextid] .tab-background {
background: var(--identity-tab-color) !important;
border-left: 1px solid rgba(130, 130, 130, 0.5) !important;
border-right: 1px solid rgba(130, 130, 130, 0.5) !important;
border-bottom: var(--identity-tab-color) !important;
opacity: 0.8 !important;
}

.tabbrowser-tab[usercontextid] .tab-background {
  border-top: 3px solid red !important;
  padding-top: 3px !important;
}

.tabbrowser-tab[usercontextid]:not([selected="true"]) .tab-background {
border-top: 1px solid rgba(130, 130, 130, 0.5) !important;
  padding-top: 3px !important;
}

প্রথমে, আমি কোডকে একাধিক ব্লকে ভাগ করলাম, কারণ এক্টিভ এবং ইনएक্টিভ কন্টেইনার ট্যাবের টপ বর্ডারের জন্য আলাদা টвиক দরকার। এক্টিভ ট্যাবের ভদ্র না দেখানো প্যাডিং সরাতে আমাদের শুধু ৩পিক্সেল প্যাডিং যোগ করতে হবে।

ইনएक্টিভ ট্যাবের জন্য, যা চিনható:

.tabbrowser-tab[usercontextid]:not([selected="true"]) .tab-background {

আমাদের টপ বর্ডারটি সাধারণ ট্যাবের মতোই করতে হবে (আমার আগের দুটি গাইড দেখুন) কিন্তু প্যাডিং ডিক্লেরেশনও যোগ করতে হবে। এতে ট্যাব ব্যাকগ্রাউন্ড "ছোট" হবে, অর্থাৎ ট্যাব বারের উপরে চাপা থাকবে না, এবং বর্ডার সব অন্যান্য ট্যাবের সাথে মিলে যাবে, একটি সুন্দর ইউনিফর্ম লুক দেবে।

ফায়ারফক্স ৯৭: প্রোটন ইউআই রিভার্ট করার কুইক সিএসএস ফিক্স

এটাই সব!

উপসংহার

আমি বুঝি যে আমার টвиকগুলিতে কনসিস্টেন্সি এবং মেইনটেনেন্স খরচের সমস্যা আছে। আমি ফায়ারফক্স ইউআই-এর প্রতি ছোট পরিবর্তন সব অ্যাকাউন্ট করে রাখতে পারি না, এবং ছোট ছোট গ্লিচ 시간 সময়ে হতে পারে। কিন্তু সেগুলো মাইনর হবে, এবং আমার সেগুলোর কুইক ফিক্স থাকবে, 반면 সবসময় সাব-অপ্টিমাল লুকসহ ব্রাউজার ব্যবহার করা নো-গো। এটি মজার পরিস্থিতি না, কিন্তু তবুও, ফায়ারফক্স এখনও সেরা ব্রাউজার, এবং আপনাকে এটি ব্যবহার করা উচিত, প্র্যাক্টিক্যাল ও ফিলোসফিক্যাল কারণ দুটোই, হিপস্টারোলজি যে যাক।

অনেকই, আপনি যদি নার্ড হন, কারণ সত্যি বলতে অন্যথায় আপনি এখানে থাকতেন না, এবং আপনি আপনার জিনিসগুলো নিট, ক্লিন, লেজিবল, ארগোনমিক, এবং ইফিশিয়েন্ট চান, তবে আপনি ফায়ারফক্স ইউআই লুকসকে ভার্সন ৯১ এবং তার পর থেকে পরিবর্তন করেছেন। আপনি হয়তো আমার টвиকগুলোর কিছু ব্যবহার করছেন। যদি তেমন হয়, তবে ফায়ারফক্স ৯৭-এ কিছু ছোট নিগল্স দেখলে আপনার কাছে একটি নতুন পলিশ রাউন্ড আছে। তো এটো। খেয়াল রাখবেন, শীঘ্রই দেখা হবে।

চিয়ার্স।