نام (NAME)

rofi-theme - پرونده‌های قالب و پوسته rofi

شروع کار با پوسته‌گذاری (Getting started with theming)

ساده‌ترین روش برای شروع پوسته‌گذاری rofi، ویرایش پوسته موجود شما است.

پوسته‌ها را می‌توان با افزودن عناصر پوسته‌گذاری به انتهای پرونده پیکربندی

تغییر داد یا دستکاری کرد. محل پیش‌فرض این پرونده ~/.config/rofi/config.rasi است؛ اگر این پرونده وجود ندارد، می‌توانید آن را ایجاد کنید.

یک پیکربندی پایه:

configuration {
  modes: [ combi ];
  combi-modes: [ window, drun, run ];
}
@theme "gruvbox-light"
/* Insert theme modifications after this */

برای نمونه، اگر بخواهیم متن Type to filter را در جعبه ورودی تغییر دهیم، موارد زیر را به انتها اضافه می‌کنیم:

entry {
    placeholder: "Type here";
}

در بخش بالا، entry نشان‌دهنده ویجت است، placeholder ویژگی مورد نظری است که می‌خواهیم تغییر دهیم و آن را روی رشته "Type here" تنظیم می‌کنیم. برای یافتن ویجت‌های در دسترس در rofi، بخش «ساختار پایه» را ببینید.

برای تغییر نشانگر ماوس به اشاره‌گر هنگام قرار گرفتن روی عنصر، این مورد را بیفزایید:

entry {
    placeholder: "Type here";
    cursor: pointer;
}

برای تغییر بعدی، می‌خواهیم آیکون را پس از هر عنصر متنی بیفزاییم و اندازه را افزایش دهیم. ابتدا با تغییر ویجت element شروع می‌کنیم:

element {
  orientation: horizontal;
  children: [ element-text, element-icon ];
  spacing: 5px;
}

که به چیدمان زیر منجر می‌شود:

┌─────────────────────────────────────────────────────────────────────┐
│ element                                                             │
│ ┌─────────────────────────────────────────────┐ ┌─────────────────┐ │
│ │element─text                                 │ │ element─icon    │ │
│ └─────────────────────────────────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────────────────────────────┘

ویجت نگه‌دارنده element هر ورودی را در listview نگه می‌دارد؛ ما دو فرزند از پیش تعریف‌شده را به ترتیبی که می‌خواهیم نمایش داده شوند اضافه می‌کنیم. همچنین جهت چیدمان (orientation) و فاصله بین فرزندان (spacing) را مشخص می‌کنیم. فاصله بین دو فرزند را بر حسب پیکسل مطلق (px) تعیین می‌کنیم.

برای افزایش اندازه آیکون، باید ویجت element-icon را ویرایش کنیم.

element-icon {
    size: 2.5em;
}

┌─────────────────────────────────────────────────────────────────────┐
│ element                                                             │
│ ┌─────────────────────────────────────────────┐ ┌─────────────────┐ │
│ │element─text                                 │ │    element      │ │
│ │                                             │ │       ─         │ │
│ │                                             │ │     icon        │ │
│ └─────────────────────────────────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────────────────────────────┘

در این مثال، اندازه را بر حسب واحد em مشخص می‌کنیم.

حال بیایید رنگ متن هر دو ویجت entry و element-text را به قرمز و پس‌زمینه را به آبی تغییر دهیم.

entry, element-text {
  text-color: red;
  background-color: rgb(0,0,255);
}

در اینجا از دو روش متفاوت برای نوشتن رنگ استفاده می‌کنیم؛ برای text-color از یک رنگ دارای نام و برای background-color از مقدار rgb استفاده کرده‌ایم. همچنین این ویژگی را با ارسال فهرستی از نام‌های ویجت‌ها که با کاما از هم جدا شده‌اند، برای چندین ویجت تعیین می‌کنیم.

اگر بخواهید متن را نسبت به آیکون وسط‌چین کنید، می‌توان این را تنظیم کرد:

element-text {
    vertical-align: 0.5;
}

┌─────────────────────────────────────────────────────────────────────┐
│ element                                                             │
│ ┌─────────────────────────────────────────────┐ ┌─────────────────┐ │
│ │                                             │ │    element      │ │
│ │element-text                                 │ │       ─         │ │
│ │                                             │ │     icon        │ │
│ └─────────────────────────────────────────────┘ └─────────────────┘ │
└─────────────────────────────────────────────────────────────────────┘

همچنین می‌توان رنگ مکان‌نما، عرض آن و مخفی کردن آن را هنگام خالی بودن کادر ورودی شخصی‌سازی کرد. برای مثال، می‌توانید یک مکان‌نمای بلوکی زرشکی بسازید که تنها هنگام ورود متن ظاهر شود:

entry {
  cursor-color: rgb(220,20,60);
  cursor-width: 8px;
  hide-cursor-on-empty: true;
}

به‌طور پیش‌فرض، مقدار cursor-color مشابه text-color خواهد بود. مقدار cursor-width همیشه به‌طور پیش‌فرض ۲ پیکسل بوده و hide-cursor-on-empty روی false تنظیم است.

اگر می‌خواهید پوسته کامل را همراه با تغییرات مشاهده کنید، می‌توانید این دستور را اجرا نمایید:

rofi -dump-theme

بارگذاری پوسته پیش‌فرض (Default theme loading)

به‌طور پیش‌فرض، rofi پوسته پیش‌فرض را بارگذاری می‌کند. این پوسته همیشه بارگذاری می‌شود. پیکربندی پیش‌فرض شامل موارد زیر است:

@theme "default"

برای لغو بارگذاری پوسته پیش‌فرض و بارگذاری پوسته‌ای دیگر، عبارت @theme را به پرونده config.rasi خود بیفزایید.

اگر پوسته‌ای از طریق @theme بارگذاری کرده‌اید یا از پوسته پیش‌فرض استفاده می‌کنید، می‌توانید با افزودن عناصر بازنویسی‌کننده در انتهای پرونده config.rasi آن را سفارشی‌سازی کنید.

برای اطلاع از تفاوت میان @import و @theme بخش مدیریت چند پرونده (Multiple file handling) را در این صفحه راهنما ببینید.

برای مشاهده پوسته پیش‌فرض، دستور زیر را اجرا کنید:

rofi -no-config -dump-theme

توضیحات (DESCRIPTION)

انگیزه نیاز به قالب پوسته جدید از این حقیقت ناشی شد که نحوه مدیریت ویجت‌ها در rofi تغییر یافت؛ از یک ترسیم کاملاً ایستا از خطوط و متن به شکلی ساختاریافته و مناسب از بسته‌بندی ویجت‌ها. این دگرگونی، ارائه یک چارچوب منعطف‌تر برای پوسته را ممکن ساخت. قالب پوسته و پرونده پیکربندی قدیمی به اندازه کافی برای ارائه این گزینه‌ها به شیوه‌ای کاربرپسند منعطف نبودند. بنابراین، قالب پرونده جدیدی ایجاد شد که جایگزین نسخه قدیمی گردیده است.

مشخصات قالب (Format specification)

کدگذاری (Encoding)

کدگذاری این پرونده UTF-8 است. هر دو قالب خط جدید یونیکس (\n) و ویندوز (\r\n) پشتیبانی می‌شوند، اما یونیکس ترجیح داده می‌شود.

توضیحات درون کد (Comments)

توضیحات درون‌کدی سبک C و ++C پشتیبانی می‌شوند.

•: هر چیزی پس از // و پیش از خط جدید، یک توضیح درون‌کدی در نظر گرفته می‌شود.
•: هر چیزی میان /* و */ یک توضیح است و این توضیح می‌تواند چندین خط را در بر بگیرد.

توضیحات می‌توانند تودرتو باشند و توضیحات سبک C می‌توانند به صورت درون‌خطی قرار گیرند.

نمونه زیر معتبر است:

// Magic comment.
property: /* comment */ value;

اما این نمونه معتبر نیست:

prop/*comment*/erty: value;

فاصله‌های خالی (White space)

فاصله‌های خالی و خطوط جدید، همانند توضیحات درون‌کدی، توسط تجزیه‌کننده نادیده گرفته می‌شوند.

این مورد:

property: name;

دقیقاً مشابه مورد زیر است:

     property             :
name
;

پسوند پرونده (File extension)

پسوند پیشنهادی برای قالب جدید پوسته، rasi است. این واژه مخفف عبارت rofi advanced style information می‌باشد. اگر یک پرونده پوسته به چندین پرونده تقسیم شده باشد، پرونده‌های ضمیمه‌شده می‌توانند پسوند rasinc داشته باشند.

ساختار پایه (Basic Structure)

هر عنصر دارای یک بخش با ویژگی‌های تعریف‌شده است. ویژگی‌های سراسری را می‌توان در بخش * { } تعریف کرد. نام‌های زیربخش‌ها با یک نماد هش اختیاری # آغاز می‌شوند.

پیشنهاد می‌شود بخش ویژگی‌های سراسری در بالای پرونده تعریف شود تا ارث‌بری ویژگی‌ها واضح‌تر گردد.

/* Global properties section */
* {
    // list of properties
}
/* Element theme section. */
{element path} {
    // list of properties
}
{elements... } {
    // list of properties
}

اگر چندین بخش با نام یکسان وجود داشته باشند، ادغام خواهند شد. ویژگی‌های تکراری بازنویسی شده و آخرین مقدار پردازش‌شده حفظ می‌شود.

بخش ویژگی‌های سراسری (Global properties section)

یک پوسته می‌تواند یک یا چند بخش ویژگی‌های سراسری داشته باشد. اگر بیش از یکی وجود داشته باشد، ادغام خواهند شد.

بخش ویژگی‌های سراسری نشان‌دهنده مقادیر پیش‌فرض برای هر عنصر است. به هر ویژگی در این بخش می‌توان با @{identifier} ارجاع داد (بخش ویژگی‌ها را ببینید).

بخش ویژگی‌های سراسری با کاراکتر * به عنوان مسیر عنصر مشخص می‌شود.

بخش پوسته عنصر (Element theme section)

یک پوسته می‌تواند چندین بخش پوسته عنصر داشته باشد.

مسیر عنصر می‌تواند از چندین نام تشکیل شود که با فاصله خالی یا نقطه از هم جدا شده‌اند. هر عنصر می‌تواند شامل هر تعداد حرف، عدد و خط پیوند - باشد. نخستین عنصر در مسیر عنصر می‌تواند به دلایل تاریخی به صورت اختیاری با یک # شروع شود. عناصر متعدد را می‌توان با یک , مشخص کرد.

این یک نام عنصر معتبر است:

element normal.normal {
    background-color: blue;
}
button {
    background-color: blue;
}

و با مورد زیر کاملاً یکسان است:

element normal normal, button {
    background-color: blue;
}

هر بخش ویژگی‌های سراسری را به ارث می‌برد. ویژگی‌ها را می‌توان به طور صریح از والد خود با استفاده از کلیدواژه inherit به ارث برد. در مثال زیر:

window {
 a: 1;
 b: 2;
 children: [ mainbox ];
}
mainbox {
    a: inherit;
    b: 4;
    c: 8;
}

عنصر mainbox مجموعه ویژگی‌های زیر را خواهد داشت (اگر mainbox فرزند window باشد):

a: 1;
b: 4;
c: 8;

اگر چندین بخش با نام یکسان تعریف شوند، توسط تجزیه‌کننده ادغام می‌گردند. اگر چندین ویژگی با نام یکسان در یک بخش تعریف شوند، آخرین ویژگی دیده‌شده اعمال خواهد شد.

قالب ویژگی‌ها (Properties Format)

ویژگی‌ها در یک بخش به صورت زیر هستند:

{identifier}: {value};

هر دو فیلد برای یک ویژگی الزامی هستند.

شناسه identifier نام ویژگی مشخص‌شده را تعیین می‌کند. شناسه‌ها می‌توانند از هر ترکیبی از اعداد، حروف و `-` تشکیل شوند. شناسه نباید شامل هیچ‌گونه فاصله خالی باشد. ساختار مقدار value نوع ویژگی را تعیین می‌کند. تجزیه‌کننده فعلی نوع خاصی را برای یک identifier معین اجبار نمی‌کند. در هنگام استفاده، مقادیری که نوع نادرست داشته و قابل تبدیل نباشند نادیده گرفته می‌شوند.

قالب فعلی پوسته از انواع مختلفی پشتیبانی می‌کند:

•: رشته (string)
•: عدد صحیح (integer)
•: عدد اعشاری (fractional)
•: مقدار بولی (boolean)
•: رنگ (color)
•: تصویر (image)
•: سبک متن (text style)
•: سبک خط (line style)
•: فاصله (distance)
•: فاصله درونی (padding)
•: حاشیه (border)
•: موقعیت (position)
•: ارجاع (reference)
•: جهت‌گیری (orientation)
•: مکان‌نما (cursor)
•: فهرستی از کلیدواژه‌ها (list of keywords)
•: آرایه‌ای از مقادیر (array of values)
•: متغیر محیطی (environment variable)
•: ارث‌بری (Inherit)

برخی از این انواع ترکیبی از انواع دیگر هستند.

رشته (String)

•: قالب: (["'])[:print:]+\1

رشته‌ها همواره درون گیومه دوتایی (") یا تکی ('، آپاستروف) قرار می‌گیرند. بین گیومه‌ها هر نویسه قابل چاپی می‌تواند قرار گیرد.

برای نمونه:

font: "Awasome 12";

رشته باید به صورت معتبر با استاندارد UTF-8 باشد؛ نویسه‌های ویژه را می‌توان اسکیپ کرد:

text { content: "Line one\n\tIndented line two 'Quoted text'"; }
text { content: 'Line one\n\tIndented line two "Quoted text"'; }
text { content: "Line one\n\tIndented line two \"Quoted text\""; }

نویسه‌های ویژه زیر را می‌توان اسکیپ کرد: \b، \f، \n، \r، \t، \v، \، " و ' (گیومه دوتایی درون گیومه تکی یا برعکس نیازی به اسکیپ ندارد).

عدد صحیح (Integer)

•: قالب: [-+]?[:digit:]+

یک عدد صحیح می‌تواند شامل هر رقمی باشد.

برای نمونه:

lines: 12;

عدد حقیقی (Real)

•: قالب: [-+]?[:digit:]+(\.[:digit:]+)?

عدد حقیقی یک عدد صحیح همراه با بخش اعشاری اختیاری است.

برای نمونه:

real: 3.4;

موارد زیر نامعتبر هستند: .3، 3. یا نماد علمی: 3.4e-3.

بولی (Boolean)

•: قالب: (true|false)

مقدار بولی یا true یا false است. این مقادیر حساس به حروف کوچک و بزرگ هستند.

برای نمونه:

dynamic: false;

تصویر (Image)

ابزار rofi از مجموعه محدودی از قالب‌های تصویر پس‌زمینه پشتیبانی می‌کند.

•: قالب: url(“path to image”);
•: قالب: url(“path to image”, scale); که در آن مقیاس (scale) یکی از موارد none، both، width، height است.
•: قالب: linear-gradient(stop color,stop1, color, stop2 color, ...);
•: قالب: linear-gradient(to direction, stop color,stop1, color, stop2 color, ...); که در آن جهت (direction) یکی از موارد top، left، right، bottom است.
•: قالب: linear-gradient(angle, stop color,stop1, color, stop2 color, ...); زاویه بر حسب deg، rad، grad (همان‌طور که در رنگ استفاده می‌شود).

در اینجا path یک رشته و رنگ‌های توقف (stop) از نوع رنگ هستند.

رنگ (Color)

ابزار rofi از قالب‌های رنگ مشخص‌شده در استاندارد CSS (نسخه‌های 1، 2، 3 و بخشی از CSS 4) پشتیبانی می‌کند.

•: قالب: #{HEX}{3} (rgb)
•: قالب: #{HEX}{4} (rgba)
•: قالب: #{HEX}{6} (rrggbb)
•: قالب: #{HEX}{8} (rrggbbaa)
•: قالب: rgb[a]({INTEGER},{INTEGER},{INTEGER}[, {PERCENTAGE}])
•: قالب: rgb[a]({INTEGER}%,{INTEGER}%,{INTEGER}%[, {PERCENTAGE}])
•: قالب: hsl[a]( {ANGLE}, {PERCENTAGE}, {PERCENTAGE} [, {PERCENTAGE}])
•: قالب: hwb[a]( {ANGLE}, {PERCENTAGE}, {PERCENTAGE} [, {PERCENTAGE}])
•: قالب: cmyk( {PERCENTAGE}, {PERCENTAGE}, {PERCENTAGE}, {PERCENTAGE} [, {PERCENTAGE} ])
•: قالب: {named-color} [ / {PERCENTAGE} ]

قالب فاصله‌گذاری پیشنهادشده در CSS4 نیز پشتیبانی می‌شود.

مقادیر مختلف عبارتند از:

•: مقدار {HEX} یک عدد هگزادسیمال است (`0-9a-f` غیرحساس به حروف).
•: مقدار {INTEGER} می‌تواند عددی بین 0 تا 255 باشد یا هنگام نمایش درصد بین 0 تا 100 باشد.
•: مقدار {ANGLE} زاویه روی چرخ رنگ است و می‌تواند بر حسب deg، rad، grad یا turn باشد. هنگامی که واحدی مشخص نشود، درجه فرض می‌شود.
•: مقدار {PERCENTAGE} می‌تواند بین 0 تا 1.0 یا %0 تا %100 باشد.
•: مقدار {named-color} یکی از رنگ‌های زیر است:

AliceBlue, AntiqueWhite, Aqua, Aquamarine, Azure, Beige, Bisque, Black, BlanchedAlmond, Blue, BlueViolet, Brown, BurlyWood, CadetBlue, Chartreuse, Chocolate, Coral, CornflowerBlue, Cornsilk, Crimson, Cyan, DarkBlue, DarkCyan, DarkGoldenRod, DarkGray, DarkGrey, DarkGreen, DarkKhaki, DarkMagenta, DarkOliveGreen, DarkOrange, DarkOrchid, DarkRed, DarkSalmon, DarkSeaGreen, DarkSlateBlue, DarkSlateGray, DarkSlateGrey, DarkTurquoise, DarkViolet, DeepPink, DeepSkyBlue, DimGray, DimGrey, DodgerBlue, FireBrick, FloralWhite, ForestGreen, Fuchsia, Gainsboro, GhostWhite, Gold, GoldenRod, Gray, Grey, Green, GreenYellow, HoneyDew, HotPink, IndianRed, Indigo, Ivory, Khaki, Lavender, LavenderBlush, LawnGreen, LemonChiffon, LightBlue, LightCoral, LightCyan, LightGoldenRodYellow, LightGray, LightGrey, LightGreen, LightPink, LightSalmon, LightSeaGreen, LightSkyBlue, LightSlateGray, LightSlateGrey, LightSteelBlue, LightYellow, Lime, LimeGreen, Linen, Magenta, Maroon, MediumAquaMarine, MediumBlue, MediumOrchid, MediumPurple, MediumSeaGreen, MediumSlateBlue, MediumSpringGreen, MediumTurquoise, MediumVioletRed, MidnightBlue, MintCream, MistyRose, Moccasin, NavajoWhite, Navy, OldLace, Olive, OliveDrab, Orange, OrangeRed, Orchid, PaleGoldenRod, PaleGreen, PaleTurquoise, PaleVioletRed, PapayaWhip, PeachPuff, Peru, Pink, Plum, PowderBlue, Purple, RebeccaPurple, Red, RosyBrown, RoyalBlue, SaddleBrown, Salmon, SandyBrown, SeaGreen, SeaShell, Sienna, Silver, SkyBlue, SlateBlue, SlateGray, SlateGrey, Snow, SpringGreen, SteelBlue, Tan, Teal, Thistle, Tomato, Turquoise, Violet, Wheat, White, WhiteSmoke, Yellow, YellowGreen, transparent

برای نمونه:

background-color: #FF0000;
border-color: rgba(0,0,1, 0.5);
text-color: SeaGreen;

یا:

background-color: transparent;
text-color: Black;

سبک متن (Text style)

•: قالب: (bold|italic|underline|strikethrough|none)

سبک متن مشخص می‌کند که متن برجسته‌شده چگونه تأکید شود. مقدار None مشخص می‌کند که هیچ تأکیدی نباید اعمال گردد.

•: bold: متن را نسبت به متن پیرامون ضخیم‌تر می‌کند.
•: italic: متن برجسته‌شده را به صورت خوابیده (ایتالیک) قرار می‌دهد.
•: underline: خطی زیر متن قرار می‌دهد.
•: strikethrough: خطی روی متن می‌کشد (خط‌خورده).

گزینه‌های زیر روی نگارش 1.50.0 یا بالاتر کتابخانه pango در دسترس هستند:

•: uppercase: متن را به حروف بزرگ تبدیل می‌کند.
•: lowercase: متن را به حروف کوچک تبدیل می‌کند.

گزینه زیر غیرفعال شده است زیرا pango در صورت بزرگ‌نمایی خط یا شکست خطوط در این حالت دچار فروپاشی می‌شد. پس از رفع این نقص مجدداً فعال خواهد شد:

•: capitalize: نویسه آغازین واژه‌ها را بزرگ می‌کند.

سبک خط (Line style)

•: قالب: (dash|solid)

نحوه ترسیم یک خط را نشان می‌دهد. در حال حاضر از موارد زیر پشتیبانی می‌کند:

•: dash: خط‌چین، که در آن فاصله به اندازه عرض هر خط‌چین است.
•: solid: خط پیوسته

فاصله (Distance)

•: قالب: {Integer}px
•: قالب: {Real}em
•: قالب: {Real}ch
•: قالب: {Real}%
•: قالب: {Real}mm

یک فاصله را می‌توان در ۳ واحد مختلف تعیین کرد:

•: px: پیکسل‌های صفحه نمایش.
•: em: نسبت به ارتفاع متن.
•: ch: نسبت به عرض یک رقم منفرد.
•: mm: اندازه واقعی بر حسب میلی‌متر (بر پایه dpi).
•: %: درصدی از اندازه نمایشگر (monitor).

فاصله‌های مورد استفاده در راستای افقی از عرض نمایشگر استفاده می‌کنند. فاصله‌های مورد استفاده در راستای عمودی از ارتفاع نمایشگر استفاده می‌کنند. برای نمونه:

padding: 10%;

در یک نمایشگر Full-HD (1920x1080)، این مقدار یک فاصله درونی ۱۹۲ پیکسلی در سمت چپ و راست و ۱۰۸ پیکسلی در بالا و پایین تعیین می‌کند.

محاسبه اندازه‌ها (Calculating sizes)

ابزار Rofi از برخی محاسبات ریاضی در برآورد اندازه‌ها پشتیبانی می‌کند. برای این کار از نحو CSS استفاده می‌کند:

width: calc( 100% - 37px );

width: calc( 20% min 512 );

از عملیات زیر پشتیبانی می‌کند:

•: + : جمع
•: - : تفریق
•: / : تقسیم
•: * : ضرب
•: modulo : باقی‌مانده تقسیم
•: min : مقدار کمینه عملوند چپ یا راست
•: max : مقدار بیشینه عملوند چپ یا راست
•: floor : گرد کردن عملوند چپ به سمت پایین به نزدیک‌ترین مضرب عملوند راست
•: ceil : گرد کردن عملوند چپ به سمت بالا به نزدیک‌ترین مضرب عملوند راست
•: round : گرد کردن عملوند چپ به نزدیک‌ترین مضرب عملوند راست

این محاسبات از ترتیب تقدم عملگرها در زبان C استفاده می‌کنند.

فاصله درونی (Padding)

•: قالب: {Integer}
•: قالب: {Distance}
•: قالب: {Distance} {Distance}
•: قالب: {Distance} {Distance} {Distance}
•: قالب: {Distance} {Distance} {Distance} {Distance}

اگر هیچ واحدی مشخص نشود، پیکسل فرض می‌شود.

تعداد مختلف فیلدها در این قالب‌ها به صورت زیر پردازش می‌شوند:

•: ۱ فیلد: همه جهت‌ها (all)
•: ۲ فیلد: بالا و پایین و چپ و راست
•: ۳ فیلد: بالا، چپ و راست، پایین
•: ۴ فیلد: بالا، راست، پایین، چپ

حاشیه (Border)

•: قالب: {Integer}
•: قالب: {Distance}
•: قالب: {Distance} {Distance}
•: قالب: {Distance} {Distance} {Distance}
•: قالب: {Distance} {Distance} {Distance} {Distance}
•: قالب: {Distance} {Line style}
•: قالب: {Distance} {Line style} {Distance} {Line style}
•: قالب: {Distance} {Line style} {Distance} {Line style} {Distance} {Line style}
•: قالب: {Distance} {Line style} {Distance} {Line style} {Distance} {Line style} {Distance} {Line style}

حاشیه‌ها همانند فاصله درونی هستند، با این تفاوت که هر فیلد فاصله دارای یک ویژگی سبک خط است.

هنگامی که واحدی مشخص نشده باشد، پیکسل در نظر گرفته می‌شود.

موقعیت (Position)

نشان‌دهنده مکانی روی پنجره/نمایشگر است.

┌─────────────┬─────────────┬─────────────┐
│ north west  │    north    │  north east │
├─────────────┼─────────────┼─────────────┤
│   west      │   center    │     east    │
├─────────────┼─────────────┼─────────────┤
│ south west  │    south    │  south east │
└─────────────┴─────────────┴─────────────┘

•

پدیداری (Visibility)

پنهان کردن ویجت‌ها امکان‌پذیر است:

inputbar {
    enabled: false;
}

ارجاع (Reference)

•: قالب: @{PROPERTY NAME}

یک ارجاع می‌تواند به ارجاع دیگری اشاره کند. در حال حاضر حداکثر تعداد تغییر مسیرها ۲۰ است. یک ویژگی همواره به ویژگی دیگری ارجاع می‌دهد؛ نمی‌توان از آن برای بخش فرعی یک ویژگی استفاده کرد. برای نمونه، این حالت نامعتبر است:

highlight: bold @pink;

اما این حالت معتبر است:

* {
    myhigh: bold #FAA;
}
window {
    highlight: @myhigh;
}

•

قالب: var(PROPERTY NAME, DEFAULT)

یک ارجاع می‌تواند به ارجاع دیگری اشاره کند. در حال حاضر حداکثر تعداد تغییر مسیرها ۲۰ است. یک ویژگی همواره به ویژگی دیگری ارجاع می‌دهد؛ نمی‌توان از آن برای بخش فرعی یک ویژگی استفاده کرد.

نمونه:

window {
    width: var( width, 30%);
}

اگر ویژگی width به صورت سراسری (*{}) تنظیم شده باشد، آن مقدار استفاده می‌شود؛ اگر ویژگی width تنظیم نشده باشد، مقدار پیش‌فرض اعمال می‌گردد.

جهت‌گیری (Orientation)

•: قالب: (horizontal|vertical)

جهت‌گیری ویجت را مشخص می‌کند (افقی یا عمودی).

مکان‌نما (Cursor)

•: قالب: (default|pointer|text)

نوع مکان‌نمای ماوس را هنگام شناور شدن اشاره‌گر روی ویجت تعیین می‌کند.

فهرست کلیدواژه‌ها (List of keywords)

•: قالب: [ keyword, keyword ]

یک فهرست با `[` آغاز شده و با `]` پایان می‌یابد. ورودی‌های این فهرست با کاما از یکدیگر جدا می‌شوند. کلیدواژه keyword در این فهرست به نام یک ویجت اشاره دارد.

فهرست مقادیر (List of values)

•: قالب: [ value, value, ... ]

یک فهرست با `[` آغاز شده و با `]` پایان می‌یابد. ورودی‌های فهرست با کاما از یکدیگر جدا می‌شوند.

متغیر محیطی (Environment variable)

•: قالب: ${:alnum:}

این ویژگی متغیر محیطی را به عنوان مقدار ویژگی تجزیه می‌کند (که می‌تواند هر یک از انواع بالا باشد). متغیر محیطی باید یک رشته الفبایی-عددی بدون فاصله خالی باشد.

* {
    background-color: ${BG};
}

•

قالب: env(ENVIRONMENT, default)

این ویژگی متغیر محیطی را به عنوان مقدار ویژگی پردازش می‌کند (که می‌تواند هر یک از انواع بالا باشد). متغیر محیطی باید یک رشته الفبایی-عددی بدون فاصله خالی باشد. اگر متغیر محیطی یافت نشود، مقدار پیش‌فرض استفاده می‌شود.

window {
    width: env(WIDTH, 40%);
}

اگر متغیر محیطی WIDTH تنظیم شده باشد، آن مقدار پردازش می‌شود؛ در غیر این صورت مقدار پیش‌فرض (40%) به کار می‌رود.

ارث‌بری (Inherit)

•: قالب: inherit

ویژگی را از ویجت والد خود به ارث می‌برد.

mainbox {
    border-color: inherit;
}

مسیرهای عناصر (Elements paths)

مسیرهای عنصر از دو بخش تشکیل شده‌اند؛ بخش نخست با نام به خود ویجت اشاره دارد. برخی ویجت‌ها دارای یک وضعیت اضافی نیز هستند.

برای نمونه:

element selected {
}

در اینجا element selected نام ویجت است و selected وضعیت ویجت را مشخص می‌کند.

تفاوت میان نقطه و فاصله صرفاً ظاهری است. تمام موارد زیر یکسان هستند:

element .selected {
element.selected {
}
element selected {
}

مسیرهای پشتیبانی‌شده عنصر (Supported element paths)

ویجت‌های پایه (Base widgets)

ویجت‌های پیش‌فرض موجود در rofi و سلسله‌مراتب پیش‌فرض آن‌ها:

•: window

•: overlay: ویجت روکش
•: mainbox: جعبه اصلی (mainbox)
•: inputbar: جعبه نوار ورودی

•: box: جعبه افقی @box برای بسته‌بندی ویجت‌ها
•: case-indicator: کادر نشان‌گر حالت حروف/مرتب‌سازی @textbox
•: prompt: اعلان ورودی @textbox
•: entry: کادر اصلی ورود متن @textbox
•: num-rows: تعداد کل ردیف‌ها را نشان می‌دهد.
•: num-filtered-rows: تعداد کل ردیف‌ها را پس از فیلتر کردن نشان می‌دهد.
•: textbox-current-entry: متن ورودی انتخاب‌شده فعلی را نمایش می‌دهد.
•: icon-current-entry: آیکون ورودی انتخاب‌شده فعلی را نمایش می‌دهد.

•: listview: نمای فهرستی

•: scrollbar: نوار پیمایش نمای فهرستی
•: element: یک جعبه در نمای فهرستی که ورودی‌ها را نگه می‌دارد

•: element-icon: ویجت در ورودی نمای فهرستی برای نمایش آیکون (اختیاری)
•: element-index: ویجت در ورودی نمای فهرستی برای نمایش شماره میان‌بر کلیدی (1,2,3..0)
•: element-text: ویجت در ورودی نمای فهرستی برای نمایش متن

•: mode-switcher: جعبه افقی اصلی @box که دکمه‌ها را بسته‌بندی می‌کند.

•: button: دکمه‌های @textbox برای هر حالت

•: message: نگه‌دارنده‌ای که کادر متنی را در خود جای می‌دهد.

•: textbox: کادر متنی پیام

توجه داشته باشید که این نام‌های مسیر با پوسته پیش‌فرض مطابقت دارند. پوسته‌هایی که طرح‌بندی سفارشی ارائه می‌دهند، عناصر و ساختار متفاوتی خواهند داشت.

وضعیت (State)

وضعیت: وضعیت ویجت

فلگ(های) اختیاری که وضعیت ویجت را برای اهداف پوسته‌گذاری نشان می‌دهند.

این موارد پس از نام یا کلاس ویجت اضافه می‌شوند.

مثال (Example)

button selected.normal { }
element selected.urgent { }

در حال حاضر تنها کادر ورودی (entrybox) و نوار پیمایش (scrollbar) دارای وضعیت هستند:

کادر ورودی (Entrybox)

{visible modifier}.{state}

که در آن visible modifier می‌تواند یکی از موارد زیر باشد:

•: normal: بدون تغییر
•: selected: ورودی توسط کاربر انتخاب/برجسته شده است
•: alternate: ورودی در یک ردیف متناوب (ردیف فرد) قرار دارد

و در آن state یکی از این موارد است:

•: normal: بدون تغییر
•: urgent: این ورودی به عنوان فوری علامت‌گذاری شده است
•: active: این ورودی به عنوان فعال علامت‌گذاری شده است

این موارد می‌توانند با هم ترکیب شوند.

نمونه:

nametotextbox selected.active {
    background-color: #003642;
    text-color: #008ed4;
}

تمام کادرهای متنی انتخاب‌شده با علامت فعال را به رنگ متن و پس‌زمینه تعیین‌شده تنظیم می‌کند. توجه داشته باشید که وضعیت، عنصر اصلی را ویرایش می‌کند و بنابراین شامل تمام ویژگی‌های آن عنصر است.

نوار پیمایش (Scrollbar)

نوار پیمایش هنگام ترسیم دسته کوچک نوار، از وضعیت handle استفاده می‌کند. این امر اجازه می‌دهد رنگ‌های مورد استفاده برای ترسیم دسته به صورت مستقل تنظیم شوند.

ویژگی‌های ویجت (Widget properties)

ویژگی‌های زیر در حال حاضر پشتیبانی می‌شوند:

همه ویجت‌ها (all widgets)

•: enabled: فعال/غیرفعال کردن رندر ویجت
•: padding: فاصله درونی درون ویجت
•: margin: حاشیه بیرونی ویجت
•: border: کادر حاشیه دور ویجت (میان فاصله درونی و بیرونی)
•: border-radius: شعاع انحنای گوشه‌های کادر حاشیه را تنظیم می‌کند.
•: border-aa: بولی؛ غیرفعال کردن ضدپلگی (aliasing) روی خط حاشیه. غیرفعال کردن آن برخی مشکلات ترسیم ناشی از راه‌حل ترمیمی درایور معیوب انویدیا را رفع می‌کند.
•: border-disable-nvidia-workaround: بولی؛ غیرفعال کردن راه‌حل ترمیمی برای خرابی درایور انویدیا.
•: background-color: رنگ پس‌زمینه
•: background-image: تصویر پس‌زمینه
•: border-color: رنگ کادر حاشیه
•: cursor: نوع مکان‌نمای ماوس هنگام قرار گرفتن نشانگر روی ویجت.

پنجره (window)

•: font: قلم مورد استفاده در پنجره (رشته)
•: transparency: رشته‌ای که نشان می‌دهد آیا شفافیت به کار رود و چه نوعی باشد:

•: real - شفافیت واقعی؛ تنها با یک کامپوزیتور (compositor) کار می‌کند.
•: background - گرفتن عکس از تصویر پس‌زمینه و استفاده از آن.
•: screenshot - گرفتن عکس از صفحه نمایش و استفاده از آن.
•: Path به پرونده png - استفاده از یک تصویر.

•: location: محل لنگرگاه (anchor) روی نمایشگر (موقعیت)
•: anchor: موقعیت لنگرگاه روی پنجره
•: fullscreen: بولی؛ پنجره به صورت تمام‌صفحه باشد.
•: width: عرض پنجره (فاصله)
•: x-offset: فاصله در راستای افقی
•: y-offset: فاصله آفست پنجره نسبت به نقطه لنگرگاه، جهت انتقال پنجره به چپ/راست/بالا/پایین

ویژگی‌های نوار پیمایش (scrollbar Properties)

•: background-color: رنگ پس‌زمینه
•: handle-width: عرض دسته نوار پیمایش (فاصله)
•: handle-color: رنگ دسته نوار پیمایش
•: border-color: رنگ حاشیه
•: handle-rounded-corners: بولی برای گوشه‌های گرد دسته نوار پیمایش

جعبه (box)

•: orientation: جهت بسته‌بندی عناصر (جهت‌گیری)
•: spacing: فاصله بین عناصر بسته‌بندی‌شده (فاصله)

کادر متنی (textbox)

•: background-color: رنگ پس‌زمینه
•: border-color: رنگ مورد استفاده برای کادر حاشیه دور ویجت.
•: font: قلم مورد استفاده توسط این کادر متنی (رشته).
•: str/content: رشته نمایش‌یافته توسط این کادر متنی (رشته).
•: vertical-align: تراز عمودی متن؛ عددی میان 0 (بالا) و 1 (پایین).
•: horizontal-align: تراز افقی متن؛ عددی میان 0 (چپ) و 1 (راست).
•: text-color: رنگ متن مورد استفاده.
•: text-transform: سبک متن {color} برای کل متن.
•: highlight: سبک متن {color}؛ رنگ اختیاری است، سبک‌های برجسته‌سازی چندگانه را می‌توان اضافه کرد مانند: bold underline italic #000000؛ این گزینه تنها روی ویجت element-text در دسترس است.
•: width: بازنویسی عرض مورد نظر برای کادر متنی.
•: content: تنظیم متن نمایشی (رشته).
•: placeholder: تنظیم متن نمایشی پیش‌فرض (رشته) هنگام خالی بودن ورودی.
•: placeholder-markup: در صورت true بودن، متن placeholder از نشانه‌گذاری pango برای استایل‌دهی پشتیبانی می‌کند.
•: placeholder-color: رنگ متن placeholder.
•: blink: فعال/غیرفعال کردن چشمک‌زن روی کادر متنی ورودی (بولی).
•: markup: اجبار فعال‌سازی نشانه‌گذاری؛ توجه داشته باشید که تنها رشته‌های معتبر pango markup نمایش داده می‌شوند.
•: tab-stops: آرایه‌ای از فاصله‌ها؛ تعیین محل توقف‌های تب بر حسب فاصله آن‌ها از آغاز خط. هر فاصله باید بزرگتر از قبلی باشد. متن در سمت راست موقعیت تب ظاهر می‌شود (ترازهای دیگر هنوز پشتیبانی نمی‌شوند).
•: cursor-width: عرض مکان‌نما.
•: cursor-color: رنگ مورد استفاده برای ترسیم مکان‌نما.
•: hide-cursor-on-empty: پنهان کردن مکان‌نما هنگام خالی بودن فیلد جستجو (بولی).
•: cursor-outline: فعال کردن کادر حاشیه (خط دور) پیرامون مکان‌نما (بولی).
•: cursor-outline-width: عرض کادر دور مکان‌نما (اعشاری مضاعف).
•: cursor-outline-color: رنگ مورد استفاده برای کادر دور مکان‌نما (رنگ).
•: text-outline: فعال کردن کادر دور متن (بولی).
•: text-outline-width: عرض کادر دور متن (اعشاری مضاعف).
•: text-outline-color: رنگ مورد استفاده برای کادر دور متن (رنگ).

نمای فهرستی (listview)

•: columns: عدد صحیح؛ تعداد ستون‌ها برای نمایش (حداقل ۱).
•: fixed-height: بولی؛ همیشه تعداد lines ردیف را نمایش دهد، حتی اگر عناصر کمتری موجود باشند.
•: dynamic: بولی؛ در صورت True بودن اندازه با فیلتر شدن فهرست تغییر می‌کند، و در صورت False ارتفاع اولیه را حفظ می‌کند.
•: scrollbar: بولی؛ فعال یا غیرفعال بودن نوار پیمایش.
•: scrollbar-width: عرض نوار پیمایش (فاصله).
•: cycle: بولی؛ هنگام پیمایش به ابتدا/انتها دور بزند (wrap around).
•: spacing: فاصله بین عناصر (هم افقی و هم عمودی).
•: lines: عدد صحیح؛ تعداد ردیف‌ها برای نمایش در نمای فهرستی.
•: layout: جهت‌گیری؛ نشان‌دهنده نحوه چیدمان عناصر روی هم است. حالت افقی (Horizontal) سبک dmenu را پیاده‌سازی می‌کند.
•: reverse: بولی؛ معکوس کردن ترتیب (از بالا به پایین به پایین به بالا).
•: flow: جهت‌گیری؛ ترتیب جریان چیدمان عناصر. مقدار Vertical نمای ستونی اولیه است.
•: fixed-columns: بولی؛ تعداد ستون‌های نمایش داده شده را زمانی که عناصر کافی برای پر کردن همه آن‌ها وجود ندارد کاهش ندهد.
•: require-input: بولی؛ نمای فهرستی برای آشکار شدن نیاز به ورودی کاربر دارد. فهرست همچنان وجود دارد و زدن کلید تأیید ورودی نخست را فعال می‌کند.

ویجت روکش (Overlay widget)

•: timeout: مدت زمانی که ویجت هنگام نمایش یک پیام موقت نمایان است.

ویجت نمای فهرستی (Listview widget)

ویجت نمای فهرستی یک ویجت نگه‌دارنده ویژه است. این ویجت دارای فرزندان ثابت زیر است:

•: ۰ یا چند ویجت element از نوع box.
•: یک ویجت اختیاری scrollbar؛ این ویجت را می‌توان با ویژگی scrollbar فعال ساخت.

این موارد را نمی‌توان با استفاده از ویژگی children تغییر داد.

هر ورودی نمایش‌داده‌شده در listview توسط یک box به نام element نگهداری می‌شود. یک ویجت element می‌تواند شامل ویجت‌های فرزند ویژه زیر باشد:

•: element-icon: یک ویجت آیکون که آیکون مربوط به ورودی را نمایش می‌دهد.
•: element-text: یک ویجت کادر متنی که متن مربوط به ورودی را نمایش می‌دهد.
•: element-index: یک ویجت کادر متنی که شماره میان‌بر کلیدی را نشان می‌دهد.

به‌طور پیش‌فرض ویجت‌های فرزند element-icon و element-text به element افزوده می‌شوند. این مورد را می‌توان با ویژگی children یا گزینه [no]-show-icons ویرایش کرد.

فرزندی که با نام دیگری افزوده شود، مشابه ویجت ویژه تشریح‌شده در بخش طرح‌بندی پیشرفته رفتار خواهد کرد.

برجسته‌سازی متن نمای فهرستی (listview text highlight)

ویجت element-text در listview ویجتی است که برای نمایش متن به کار می‌رود. روی این ویجت ویژگی highlight را تنظیم کنید (تنها جایی که این ویژگی استفاده می‌شود) تا سبک برجسته‌سازی تغییر کند. ویژگی highlight شامل ویژگی text-style و یک رنگ است.

برای غیرفعال کردن برجسته‌سازی:

element-text {
  highlight: None;
}

برای تنظیم به صورت زیرخط قرمز:

element-text {
  highlight: underline red;
}

طرح‌بندی (Layout)

قالب جدید امکان سفارشی‌سازی گسترده طرح‌بندی پنجره rofi را فراهم می‌کند. برای هر ویجت، طراح پوسته می‌تواند فاصله درونی، حاشیه بیرونی، کادر، قلم و موارد دیگر را تعیین کند. این قابلیت حتی به عنوان یک ویژگی پیشرفته اجازه می‌دهد تا ویجت‌ها را در یک ساختار سفارشی بسته‌بندی کنید.

ساختار طرح‌بندی پایه (Basic layout structure)

کل نما از جعبه‌هایی ساخته شده است که جعبه‌ها یا ویجت‌های دیگر را در بر می‌گیرند. این جعبه می‌تواند عمودی یا افقی باشد. این ساختار به طور آزادانه از GTK الهام گرفته شده است.

طرح‌بندی فعلی rofi به صورت زیر ساختار یافته است:

┌────────────────────────────────────────────────────────────────────────────────────┐
│ window {BOX:vertical}                                                              │
│ ┌───────────────────────────────────────────────────────────────────────────────┐  │
│ │ mainbox  {BOX:vertical}                                                       │  │
│ │ ┌───────────────────────────────────────────────────────────────────────────┐ │  │
│ │ │ inputbar {BOX:horizontal}                                                 │ │  │
│ │ │ ┌─────────┐ ┌─┐ ┌───────────────────────────────┐ ┌───┐ ┌───┐ ┌───┐ ┌───┐ │ │  │
│ │ │ │ prompt  │ │:│ │ entry                         │ │#fr│ │ / │ │#ns│ │ci │ │ │  │
│ │ │ └─────────┘ └─┘ └───────────────────────────────┘ └───┘ └───┘ └───┘ └───┘ │ │  │
│ │ └───────────────────────────────────────────────────────────────────────────┘ │  │
│ │                                                                               │  │
│ │ ┌───────────────────────────────────────────────────────────────────────────┐ │  │
│ │ │ message                                                                   │ │  │
│ │ │ ┌───────────────────────────────────────────────────────────────────────┐ │ │  │
│ │ │ │ textbox                                                               │ │ │  │
│ │ │ └───────────────────────────────────────────────────────────────────────┘ │ │  │
│ │ └───────────────────────────────────────────────────────────────────────────┘ │  │
│ │                                                                               │  │
│ │ ┌───────────────────────────────────────────────────────────────────────────┐ │  │
│ │ │ listview                                                                  │ │  │
│ │ │ ┌─────────────────────────────────────────────────────────────────────┐   │ │  │
│ │ │ │ element                                                             │   │ │  │
│ │ │ │ ┌─────────────────┐ ┌─────────────────────────────────────────────┐ │   │ │  │
│ │ │ │ │element─icon     │ │element─text                                 │ │   │ │  │
│ │ │ │ └─────────────────┘ └─────────────────────────────────────────────┘ │   │ │  │
│ │ │ └─────────────────────────────────────────────────────────────────────┘   │ │  │
│ │ └───────────────────────────────────────────────────────────────────────────┘ │  │
│ │                                                                               │  │
│ │ ┌───────────────────────────────────────────────────────────────────────────┐ │  │
│ │ │  mode─switcher {BOX:horizontal}                                           │ │  │
│ │ │ ┌───────────────┐   ┌───────────────┐  ┌──────────────┐ ┌───────────────┐ │ │  │
│ │ │ │ Button        │   │ Button        │  │ Button       │ │ Button        │ │ │  │
│ │ │ └───────────────┘   └───────────────┘  └──────────────┘ └───────────────┘ │ │  │
│ │ └───────────────────────────────────────────────────────────────────────────┘ │  │
│ └───────────────────────────────────────────────────────────────────────────────┘  │
└────────────────────────────────────────────────────────────────────────────────────┘

•: ci همان case-indicator است
•: fr همان num-filtered-rows است
•: ns همان num-rows است

ساختار پیام خطا (Error message structure)

┌──────────────────────────────────────────────────────────────────────────────────┐
│ window {BOX:vertical}                                                            │
│ ┌─────────────────────────────────────────────────────────────────────────────┐  │
│ │ error─message {BOX:vertical}                                                │  │
│ │ ┌────────────────────────────────────────────────────────────────────────┐  │  │
│ │ │ textbox                                                                │  │  │
│ │ └────────────────────────────────────────────────────────────────────────┘  │  │
│ └─────────────────────────────────────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────────────────────────────────────┘

طرح‌بندی پیشرفته (Advanced layout)

طرح‌بندی rofi را می‌توان با بسته‌بندی ویجت‌های «ثابت» در یک ساختار سفارشی بازتنظیم کرد.

ویجت‌های زیر ثابت هستند، چرا که عملکردهای هسته‌ای rofi را فراهم می‌آورند:

•: prompt
•: entry
•: overlay
•: case-indicator
•: message
•: listview
•: mode-switcher
•: num-rows
•: num-filtered-rows

کلیدواژه‌های زیر تعریف شده‌اند و می‌توانند برای بسته‌بندی خودکار زیرمجموعه‌ای از ویجت‌ها استفاده شوند. این موارد در پوسته پیش‌فرض همان‌طور که در شکل بالا نشان داده شد به کار می‌روند:

•: mainbox بسته‌بندی می‌کند: inputbar, message, listview, mode-switcher
•: inputbar بسته‌بندی می‌کند: prompt,entry,case-indicator

هر نام ویجت که با textbox آغاز شود یک ویجت کادر متنی است؛ سایرین ویجت‌های جعبه (box) هستند و می‌توانند ویجت‌های دیگر را بسته‌بندی کنند.

چندین ویجت ویژه وجود دارند که می‌توان با پیشوند زدن نام ویجت از آن‌ها استفاده کرد:

ویجت کادر متنی (Textbox widget)

این یک ویجت کادر متنی فقط‌خواندنی است. رشته نمایشی را می‌توان با content تنظیم کرد.

نمونه:

textbox-custom {
  expand: false;
  content: "My Message";
}

آیکون (Icon)

این یک ویجت آیکون است. آیکون نمایشی را می‌توان با filename و اندازه آن را با size تنظیم کرد. اگر ویژگی action تنظیم شود، به عنوان یک دکمه عمل می‌کند. مقدار action می‌تواند روی نام یک میان‌بر کلیدی تنظیم شود و آن کنش را به انجام برساند (برای مشاهده فهرست، `rofi -show keys` را ببینید).

اگر ویژگی squared روی false تنظیم شود، ارتفاع و عرض ویجت مجبور به برابر بودن نخواهند بود.

نمونه:

icon-paste {
    expand: false;
    filename: "gtk-paste";
    size: 24;
    vertical-align: 0.5;
    action: "kb-primary-paste";
}

دکمه (button)

این یک ویجت کادر متنی است که می‌تواند یک کنش قابل کلیک داشته باشد. مقدار action می‌تواند به صورت زیر تنظیم شود: keybinding: نام یک میان‌بر کلیدی را می‌پذیرد و آن کنش را به پایان می‌رساند (برای فهرست دستورات، `rofi -show keys` را اجرا کنید).

button-paste {
    expand: false;
    content: "My Clickable Message";
    vertical-align: 0.5;
    action: "kb-primary-paste";
}

فرزندان (Children)

برای تعیین فرزندان، ویژگی children را تنظیم کنید (این مورد همواره روی فرزند box رخ می‌دهد، مثال زیر را ببینید):

inputbar {
  children: [prompt,entry,overlay,case-indicator];
}

پوسته باید به‌روزرسانی شود تا با سلسله‌مراتب تعیین‌شده مطابقت یابد.

در زیر مثالی از یک پوسته شبیه‌ساز dmenu آمده است:

* {
    background-color:      Black;
    text-color:            White;
    border-color:          White;
    font:            "Times New Roman 12";
}
window {
    anchor:     north;
    location:   north;
    width:      100%;
    padding:    4px;
    children:   [ horibox ];
}
horibox {
    orientation: horizontal;
    children:   [ prompt, entry, listview ];
}
listview {
    layout:     horizontal;
    spacing:    5px;
    lines:      10;
}
entry {
    expand:     false;
    width:      10em;
}
element {
    padding: 0px 2px;
}
element selected {
    background-color: SteelBlue;
}

فاصله درونی و بیرونی (Padding and margin)

همانند CSS، ابزار rofi از مدل جعبه‌ای (box model) برای هر ویجت استفاده می‌کند.

┌──────────────────────────────────────────────────────────────────┐
│ margin                                                           │
│  ┌────────────────────────────────────────────────────────────┐  │
│  │ border                                                     │  │
│  │ ┌────────────────────────────────────────────────────────┐ │  │
│  │ │ padding                                                │ │  │
│  │ │ ┌────────────────────────────────────────────────────┐ │ │  │
│  │ │ │ content                                            │ │ │  │
│  │ │ └────────────────────────────────────────────────────┘ │ │  │
│  │ └────────────────────────────────────────────────────────┘ │  │
│  └────────────────────────────────────────────────────────────┘  │
└──────────────────────────────────────────────────────────────────┘

توضیح بخش‌های مختلف:

•: محتوا (Content) - محتوای ویجت.
•: فاصله درونی (Padding) - ناحیه‌ای در اطراف محتوای ویجت را پاکسازی می‌کند. فاصله درونی رنگ پس‌زمینه ویجت را نشان می‌دهد.
•: کادر حاشیه (Border) - حاشیه‌ای که دور تا دور فاصله درونی و محتوا کشیده می‌شود. حاشیه از ویژگی border-color ویجت استفاده می‌کند.
•: فاصله بیرونی (Margin) - ناحیه‌ای در بیرون حاشیه را پاکسازی می‌کند. فاصله بیرونی شفاف است.

مدل جعبه‌ای اجازه می‌دهد کادری دور عناصر اضافه کنیم و فاصله بین عناصر را تعیین نماییم.

اندازه هر فاصله بیرونی، کادر حاشیه و فاصله درونی قابل تنظیم است. برای کادر حاشیه، سبک خط و شعاع انحنا نیز می‌تواند تعیین شود.

فاصله‌گذاری (Spacing)

ویجت‌هایی که می‌توانند بیش از یک ویجت فرزند را بسته‌بندی کنند (در حال حاضر box و listview) دارای ویژگی spacing هستند. این ویژگی فاصله بین ویجت‌های بسته‌بندی‌شده را تعیین می‌کند (هم به صورت افقی و هم عمودی).

┌───────────────────────────────────────┐
│ ┌────────┐ s ┌────────┐ s ┌────────┐  │
│ │ child  │ p │ child  │ p │ child  │  │
│ │        │ a │        │ a │        │  │
│ │        │ c │        │ c │        │  │
│ │        │ i │        │ i │        │  │
│ │        │ n │        │ n │        │  │
│ │ └────────┘ g └────────┘ g └────────┘  │
└───────────────────────────────────────┘

بسته‌بندی جعبه‌ای پیشرفته (Advanced box packing)

فاصله‌گذاری پویاتر را می‌توان با افزودن ویجت‌های ساختگی (dummy) به دست آورد، به عنوان نمونه برای وسط‌چین کردن یک ویجت:

┌────────────────────────────────────────────────────┐
│  ┌───────────────┐  ┌────────┐  ┌───────────────┐  │
│  │ dummy         │  │ child  │  │ dummy         │  │
│  │ expand: true; │  │        │  │ expand: true; │  │
│  │               │  │        │  │               │  │
│  │               │  │        │  │               │  │
│  │               │  │        │  │               │  │
│  └───────────────┘  └────────┘  └───────────────┘  │
└────────────────────────────────────────────────────┘

اگر هر دو ویجت ساختگی روی expand تنظیم شوند، ویجت child در مرکز قرار خواهد گرفت. بسته به فلگ expand مربوط به child، فضای باقی‌مانده به طور مساوی بین هر دو ویجت dummy و child تقسیم می‌شود (در صورت فعال بودن expand)، یا فقط میان دو ویجت dummy تقسیم می‌گردد (در صورت غیرفعال بودن expand).

اشکال‌زدایی (Debugging)

برای دریافت اطلاعات اشکال‌زدایی از تجزیه‌کننده، rofi را به این صورت اجرا کنید:

G_MESSAGES_DEBUG=Parser rofi -show run

خطاهای نحوی در یک پنجره بازشو نمایش داده شده و با دستور بالا در خط فرمان چاپ می‌شوند.

برای مشاهده عناصری که در حین اجرا پرس‌وجو می‌شوند، دستور زیر را اجرا کنید:

G_MESSAGES_DEBUG=Theme rofi -show run

برای آزمایش تغییرات جزئی، می‌توان بخشی از پوسته را در خط فرمان ارسال کرد، برای مثال برای تنظیم آن به حالت تمام‌صفحه:

rofi -theme-str 'window { fullscreen:true;}' -show run

نحو دیگری برای تغییر ویژگی‌های پوسته عبارت است از:

rofi -theme+window+fullscreen true -show run

برای چاپ پوسته فعلی، اجرا کنید:

rofi -dump-theme

پشتیبانی از رسانه (Media support)

بخش‌هایی از پوسته را می‌توان به صورت شرطی بارگذاری کرد، مشابه گزینه @media در CSS.

@media ( min-width: 120 ) {
}

از کلیدهای زیر به عنوان محدودیت پشتیبانی می‌کند:

•: min-width: زمانی که عرض بزرگتر یا مساوی مقدار باشد بارگذاری می‌شود.
•: max-width: زمانی که عرض کوچکتر از مقدار باشد بارگذاری می‌شود.
•: min-height: زمانی که ارتفاع بزرگتر یا مساوی مقدار باشد بارگذاری می‌شود.
•: max-height: زمانی که ارتفاع کوچکتر از مقدار باشد بارگذاری می‌شود.
•: min-aspect-ratio: زمانی که نسبت ابعاد بالاتر از مقدار باشد بارگذاری می‌شود.
•: max-aspect-ratio: زمانی که نسبت ابعاد کمتر از مقدار باشد بارگذاری می‌شود.
•: monitor-id: شناسه نمایشگر؛ برای شناسه‌ها `rofi -help` را ببینید.
•: enabled: گزینه بولی برای فعال‌سازی. از متغیر محیطی یا DMENU برای تشخیص اینکه آیا در حالت dmenu است پشتیبانی می‌کند.

دستور @media یک عدد صحیح یا کسر می‌پذیرد؛ برای اعداد صحیح می‌توان px را اضافه کرد.

@media ( min-width: 120 px ) {
}

@media ( enabled: env(DO_LIGHT, false )) {
}

@media ( enabled: DMENU) {
}

محدودیت‌های متناقض (Conflicting constraints)

تعریف محدودیت‌های متناقض در پوسته امکان‌پذیر است. این تضادها به صورت صریح گزارش نمی‌شوند. رایج‌ترین نمونه، تحمیل اندازه خاصی برای پنجره است؛ به عنوان مثال با فعال‌سازی حالت تمام‌صفحه، تنظیم تعداد خطوط در نمای فهرستی، و گسترش نمای فهرستی به فضای در دسترس. آشکارا در میان این ۳ قید تضاد وجود دارد. در این حالت، listview به تعداد خطوط محدود نمی‌شود، بلکه تلاش می‌کند فضای در دسترس را پر کند. اطمینان از مدیریت صحیح این موارد در پوسته، بر عهده طراح پوسته است.

تجزیه قلم (Font Parsing)

ابزار Rofi برای رندر قلم از pango استفاده می‌کند. قلم باید در قالبی تعیین شود که pango متوجه آن شود. این فرمت معمولاً نام قلم و پس از آن اندازه قلم است. برای نمونه:

mono 18

یا:

FontAwesome 22

از صفحه راهنمای pango:

رشته باید فرم زیر را داشته باشد:

\[FAMILY-LIST] \[STYLE-OPTIONS] \[SIZE] \[VARIATIONS]

که در آن FAMILY-LIST فهرستی از خانواده‌های قلم است که با کاما از هم جدا شده و می‌توانند به اختیاری با کاما پایان یابند؛ STYLE_OPTIONS فهرستی از واژگان جداشده با فاصله خالی است که هر واژه یکی از موارد سبک، گونه، وزن، کشیدگی یا گرانش را توصیف می‌کند؛ و SIZE یک عدد ده‌دهی (اندازه بر حسب پوینت) است یا اختیاری با شناسه واحد “px” برای اندازه مطلق همراه می‌شود. مورد VARIATIONS فهرستی از مشخصات دگرگونی قلم است که با کاما جدا شده و به صورت “axis=value” می‌باشد (علامت = اختیاری است).

واژگان زیر به عنوان سبک (styles) شناخته می‌شوند: “Normal”، “Roman”، “Oblique”، “Italic”.

واژگان زیر به عنوان گونه‌ها (variants) شناخته می‌شوند: “Small-Caps”، “All-Small-Caps”، “Petite-Caps”، “All-Petite-Caps”، “Unicase”، “Title-Caps”.

واژگان زیر به عنوان وزن‌ها (weights) شناخته می‌شوند: “Thin”، “Ultra-Light”، “Extra-Light”، “Light”، “Semi-Light”، “Demi-Light”، “Book”، “Regular”، “Medium”، “Semi-Bold”، “Demi-Bold”، “Bold”، “Ultra-Bold”، “Extra-Bold”، “Heavy”، “Black”، “Ultra-Black”، “Extra-Black”.

واژگان زیر به عنوان مقادیر کشیدگی (stretch) شناخته می‌شوند: “Ultra-Condensed”، “Extra-Condensed”، “Condensed”، “Semi-Condensed”، “Semi-Expanded”، “Expanded”، “Extra-Expanded”، “Ultra-Expanded”.

واژگان زیر به عنوان مقادیر گرانش (gravity) شناخته می‌شوند: “Not-Rotated”، “South”، “Upside-Down”، “North”، “Rotated-Left”، “East”، “Rotated-Right”، “West”.

هر یک از این گزینه‌ها می‌تواند غایب باشد. اگر FAMILY-LIST وجود نداشته باشد، فیلد family_name در توصیف قلم حاصل روی NULL مقداردهی خواهد شد. اگر STYLE-OPTIONS غایب باشد، همه گزینه‌های سبک روی مقادیر پیش‌فرض قرار خواهند گرفت. اگر SIZE غایب باشد، اندازه در توصیف قلم حاصل روی 0 تنظیم خواهد شد.

یک نمونه شاخص:

“Cantarell Italic Light 15 `wght`=200”

مدیریت آیکون (Icon Handling)

ابزار Rofi از ۳ روش برای تعیین آیکون پشتیبانی می‌کند:

•: نام پرونده (Filename)
•: نام آیکون (icon-name)؛ این مورد از طریق تم آیکون (icon-theme) جستجو می‌شود.
•: رشته نشانه‌گذاری (Markup String)؛ یک رشته را به عنوان آیکون رندر می‌کند.

برای دو گزینه اول، از GdkPixbuf برای باز کردن و رندر آیکون‌ها استفاده می‌شود. این امر عموماً پشتیبانی از بیشتر قالب‌های تصویری مورد نیاز را فراهم می‌سازد. برای گزینه رشته، از Pango جهت رندر رشته استفاده می‌کند. رشته باید با تگ <span آغاز شود، که به شما اجازه می‌دهد رنگ و قلم را تعیین کنید.

رشته نشانه‌گذاری:

echo -en "testing\0icon\x1f<span color='red'>⏻</span>" | ./rofi -dmenu

دریافت قالب‌های پشتیبانی‌شده آیکون:

G_MESSAGES_DEBUG=Helpers.IconFetcher rofi

این دستور از چارچوب اشکال‌زدایی استفاده کرده و فهرستی از پسوندهای پرونده‌های تصویری پشتیبانی‌شده را چاپ می‌کند.

مدیریت چند پرونده (Multiple file handling)

قالب پرونده rasi دو شیوه برای ضمیمه کردن پرونده‌های دیگر ارائه می‌دهد. این قابلیت می‌تواند برای ویرایش پوسته‌های موجود یا داشتن چندین گونه بر روی یک پوسته استفاده شود.

•: import: وارد کردن و تجزیه یک پرونده دوم.
•: theme: نادیده گرفتن پوسته فعلی و بارگذاری پرونده به عنوان یک پوسته تازه.

نحو:

@import "myfile"
@theme "mytheme"

گزینه خط فرمان -theme به صورت مشابه با @theme مدیریت می‌شود.

پرونده مشخص‌شده می‌تواند از طریق name، filename، full path باشد.

اگر یک نام پرونده داده شود، تلاش می‌کند آن را به ترتیب زیر پیدا کند:

•: اگر مسیر مطلق باشد و پرونده وجود داشته باشد، پرونده را باز می‌کند. این شامل گسترش `~` یا `~user` نیز می‌شود.
•: در یک @import یا @theme به دایرکتوری پرونده‌ای که تلاش کرده آن را ضمیمه کند نگاه می‌کند.
•: ${XDG_CONFIG_HOME}/rofi/themes/
•: ${XDG_CONFIG_HOME}/rofi/
•: ${XDG_DATA_HOME}/rofi/themes/
•: ${INSTALL PREFIX}/share/rofi/themes/

یک نام (اگر پسوند معتبری نداشته باشد) با افزودن پسوند .rasi و .rasinc به عنوان نام پرونده پردازش می‌شود. نخست پرونده‌های دارای .rasi و سپس پرونده‌های دارای .rasinc را جستجو می‌کند.

اگر می‌خواهید یک وارد کردن اختیاری داشته باشید (برای نمونه، در صورت عدم وجود پرونده خطایی داده نشود)، می‌توانید این‌گونه عمل کنید:

?import "myfile"

این دستور در صورت بروز خطای نحوی همچنان خطا صادر می‌کند، اما اگر پرونده وجود نداشته باشد، از ادامه پردازش متوقف نمی‌شود.

مثال‌ها (EXAMPLES)

چندین مثال همراه با rofi نصب شده است. این موارد را می‌توان در {datadir}/rofi/themes/ یافت، که در آن {datadir} مسیر نصب داده‌های rofi است. هنگام نصب با استفاده از یک مدیر بسته، معمولاً این مسیر برابر با /usr/share/ می‌باشد.

همچنین ببینید (SEE ALSO)

rofi(1), rofi-script(5), rofi-theme-selector(1)