/* The colors of the forum's glyphs (Font Awesome 4.3, https://fontawesome.com/v4/icons/). The templates print the glyphs as , see emps_glyph() and emps_shd_glyph() in index.template.php. Every glyph has one color wherever it shows up (helpdesk, profile, the buttons of posts, menus), so you see at a glance what a link does; the text next to it keeps its own color. To change a color: change the glyph's line below, or a color of the palette for every glyph that uses it. A glyph without a line takes the color of the text around it. ------------------------------------------------------- */ :root { --glyph-blue: #6aaee8; /* edit, reply, new things */ --glyph-purple: #b592ec; /* the user, mail, notifications */ --glyph-green: #62c46f; /* done, resolved, status, online */ --glyph-amber: #f0b443; /* staff, urgency, permissions, reopen */ --glyph-teal: #3fc6c6; /* assigning, groups of people */ --glyph-red: #e85a46; /* delete, deny, remove */ --glyph-lime: #a6cf55; /* restore */ --glyph-pink: #ec8fca; /* move, relations */ --glyph-tan: #e3965a; /* tickets, boards, departments */ --glyph-sky: #8fb4d8; /* time, logs, settings, statistics */ --glyph-gold: #c5b398; /* neutral: quotes, attachments, lists, help */ --glyph-dim: #7d705c; /* off, read, inactive */ } #forum_content .emps_hue { color: var(--hue, inherit); } /* glyph color used for */ .emps_hue.fa-pencil { --hue: var(--glyph-blue); } /* edit, modify */ .emps_hue.fa-reply { --hue: var(--glyph-blue); } /* reply, last reply, new reply (log) */ .emps_hue.fa-inbox { --hue: var(--glyph-blue); } /* new tickets */ .emps_hue.fa-comments { --hue: var(--glyph-blue); } /* replies, posts, popular boards */ .emps_hue.fa-comment { --hue: var(--glyph-blue); } /* a post */ .emps_hue.fa-comment-o { --hue: var(--glyph-blue); } /* canned replies, pre-defined reply */ .emps_hue.fa-eye { --hue: var(--glyph-blue); } /* monitor, view */ .emps_hue.fa-star { --hue: var(--glyph-blue); } /* new posts */ .emps_hue.fa-user { --hue: var(--glyph-purple); } /* the user, profile, started by */ .emps_hue.fa-envelope { --hue: var(--glyph-purple); } /* mail, unread, notifications */ .emps_hue.fa-envelope-o { --hue: var(--glyph-dim); } /* read */ .emps_hue.fa-bell { --hue: var(--glyph-purple); } /* notify */ .emps_hue.fa-paper-plane { --hue: var(--glyph-purple); } /* send a message */ .emps_hue.fa-check { --hue: var(--glyph-green); } /* resolve, granted, approve */ .emps_hue.fa-check-circle { --hue: var(--glyph-green); } /* closed tickets, always notify */ .emps_hue.fa-flag { --hue: var(--glyph-green); } /* status */ .emps_hue.fa-circle { --hue: var(--glyph-green); } /* online */ .emps_hue.fa-circle-o { --hue: var(--glyph-dim); } /* offline, older package installed */ .emps_hue.fa-repeat { --hue: var(--glyph-amber); } /* reopen */ .emps_hue.fa-life-ring { --hue: var(--glyph-amber); } /* staff's turn, the helpdesk, recovery tool */ .emps_hue.fa-exclamation-triangle { --hue: var(--glyph-amber); } /* urgency, warnings */ .emps_hue.fa-key { --hue: var(--glyph-amber); } /* permissions */ .emps_hue.fa-shield { --hue: var(--glyph-amber); } /* staff, admin, security */ .emps_hue.fa-lock { --hue: var(--glyph-amber); } /* private, locked */ .emps_hue.fa-unlock { --hue: var(--glyph-dim); } /* not private */ .emps_hue.fa-user-plus { --hue: var(--glyph-teal); } /* assign, proxy ticket, registration */ .emps_hue.fa-user-times { --hue: var(--glyph-teal); } /* unassign */ .emps_hue.fa-user-secret { --hue: var(--glyph-teal); } /* assigned to */ .emps_hue.fa-thumb-tack { --hue: var(--glyph-teal); } /* assigned to me, sticky */ .emps_hue.fa-users { --hue: var(--glyph-teal); } /* roles, members, buddies */ .emps_hue.fa-trash-o { --hue: var(--glyph-red); } /* delete */ .emps_hue.fa-trash { --hue: var(--glyph-red); } /* recycle bin */ .emps_hue.fa-times { --hue: var(--glyph-red); } /* delete permanently, remove */ .emps_hue.fa-ban { --hue: var(--glyph-red); } /* deny, ban, never notify */ .emps_hue.fa-bell-slash { --hue: var(--glyph-red); } /* ignore, silent update */ .emps_hue.fa-arrow-down { --hue: var(--glyph-red); } /* urgency lowered */ .emps_hue.fa-chain-broken { --hue: var(--glyph-red); } /* relation removed */ .emps_hue.fa-sign-in { --hue: var(--glyph-purple); } /* login */ .emps_hue.fa-undo { --hue: var(--glyph-lime); } /* restore */ .emps_hue.fa-arrow-up { --hue: var(--glyph-lime); } /* urgency raised, back to the top */ .emps_hue.fa-exchange { --hue: var(--glyph-pink); } /* move department, move topic */ .emps_hue.fa-link { --hue: var(--glyph-pink); } /* related tickets */ .emps_hue.fa-level-up { --hue: var(--glyph-pink); } /* parent ticket */ .emps_hue.fa-level-down { --hue: var(--glyph-pink); } /* child ticket */ .emps_hue.fa-files-o { --hue: var(--glyph-pink); } /* duplicate ticket */ .emps_hue.fa-scissors { --hue: var(--glyph-pink); } /* split topic */ .emps_hue.fa-birthday-cake { --hue: var(--glyph-pink); } /* birthday */ .emps_hue.fa-heart { --hue: var(--glyph-pink); } /* credits */ .emps_hue.fa-code-fork { --hue: var(--glyph-pink); } /* merge topics, versions */ .emps_hue.fa-arrow-right { --hue: var(--glyph-pink); } /* split topic: select a post */ .emps_hue.fa-arrow-left { --hue: var(--glyph-pink); } /* split topic: deselect a post */ .emps_hue.fa-ticket { --hue: var(--glyph-tan); } /* a ticket */ .emps_hue.fa-share-square-o { --hue: var(--glyph-tan); } /* move ticket to topic */ .emps_hue.fa-folder-open-o { --hue: var(--glyph-tan); } /* departments */ .emps_hue.fa-th-list { --hue: var(--glyph-tan); } /* boards */ .emps_hue.fa-clock-o { --hue: var(--glyph-sky); } /* updated, date, activity by time */ .emps_hue.fa-history { --hue: var(--glyph-sky); } /* action log */ .emps_hue.fa-globe { --hue: var(--glyph-sky); } /* ip address, website */ .emps_hue.fa-cog { --hue: var(--glyph-sky); } /* preferences */ .emps_hue.fa-cogs { --hue: var(--glyph-sky); } /* administration */ .emps_hue.fa-bolt { --hue: var(--glyph-sky); } /* action */ .emps_hue.fa-calendar { --hue: var(--glyph-sky); } /* calendar, posted */ .emps_hue.fa-bar-chart { --hue: var(--glyph-sky); } /* statistics */ .emps_hue.fa-sort-amount-desc { --hue: var(--glyph-sky); } /* ordering */ .emps_hue.fa-search { --hue: var(--glyph-sky); } /* search */ .emps_hue.fa-wrench { --hue: var(--glyph-sky); } /* maintenance */ .emps_hue.fa-info-circle { --hue: var(--glyph-sky); } /* ticket details */ .emps_hue.fa-rocket { --hue: var(--glyph-sky); } /* go advanced (reply box) */ .emps_hue.fa-compress { --hue: var(--glyph-sky); } /* back to the simple reply box */ .emps_hue.fa-quote-left { --hue: var(--glyph-gold); } /* quote */ .emps_hue.fa-paperclip { --hue: var(--glyph-gold); } /* attachments */ .emps_hue.fa-file-o { --hue: var(--glyph-gold); } /* attachment: any other file */ .emps_hue.fa-file-image-o { --hue: var(--glyph-sky); } /* attachment: picture */ .emps_hue.fa-file-archive-o { --hue: var(--glyph-tan); } /* attachment: archive */ .emps_hue.fa-file-audio-o { --hue: var(--glyph-purple); } /* attachment: sound */ .emps_hue.fa-file-video-o { --hue: var(--glyph-purple); } /* attachment: video */ .emps_hue.fa-file-pdf-o { --hue: var(--glyph-red); } /* attachment: pdf */ .emps_hue.fa-file-word-o { --hue: var(--glyph-blue); } /* attachment: document */ .emps_hue.fa-file-excel-o { --hue: var(--glyph-green); } /* attachment: spreadsheet */ .emps_hue.fa-file-powerpoint-o { --hue: var(--glyph-amber); } /* attachment: slides */ .emps_hue.fa-file-code-o { --hue: var(--glyph-teal); } /* attachment: code */ .emps_hue.fa-list-alt { --hue: var(--glyph-gold); } /* additional details */ .emps_hue.fa-list { --hue: var(--glyph-gold); } /* full log */ .emps_hue.fa-tag { --hue: var(--glyph-gold); } /* id, custom fields */ .emps_hue.fa-question-circle { --hue: var(--glyph-gold); } /* help */ .emps_hue.fa-file-text-o { --hue: var(--glyph-gold); } /* logs, notices */ .emps_hue.fa-bars { --hue: var(--glyph-gold); } /* switch the menu between dropdown and sidebar */ /* the admin area (see emps_admin_glyphs() in index.template.php) */ .emps_hue.fa-filter { --hue: var(--glyph-sky); } /* error log: filter */ .emps_hue.fa-recycle { --hue: var(--glyph-red); } /* recycle board */ .emps_hue.fa-folder-o { --hue: var(--glyph-tan); } /* packages: folders */ .emps_hue.fa-crosshairs { --hue: var(--glyph-pink); } /* move a board or smiley here */ .emps_hue.fa-sliders { --hue: var(--glyph-sky); } /* features and options */ .emps_hue.fa-archive { --hue: var(--glyph-tan); } /* packages */ .emps_hue.fa-smile-o { --hue: var(--glyph-amber); } /* smileys and message icons */ .emps_hue.fa-paint-brush { --hue: var(--glyph-pink); } /* themes and layout */ .emps_hue.fa-thumbs-up { --hue: var(--glyph-green); } /* karma */ .emps_hue.fa-check-square-o { --hue: var(--glyph-green); } /* post moderation */ .emps_hue.fa-credit-card { --hue: var(--glyph-green); } /* paid subscriptions */ .emps_hue.fa-bug { --hue: var(--glyph-lime); } /* search engine spiders */ .emps_hue.fa-puzzle-piece { --hue: var(--glyph-pink); } /* modifications, helpdesk plugins */ /* the kinds of the helpdesk's custom fields (moving a ticket to a topic) */ .emps_hue:is(.fa-font, .fa-align-left, .fa-sort-numeric-asc, .fa-caret-square-o-down, .fa-dot-circle-o, .fa-list-ul) { --hue: var(--glyph-gold); } /* the icons an admin can give a helpdesk custom field (images/simpledesk/cf, see emps_shd_image_glyph()) */ .emps_hue.fa-leaf { --hue: var(--glyph-green); } /* beans */ .emps_hue.fa-camera { --hue: var(--glyph-purple); } /* camera */ .emps_hue.fa-desktop { --hue: var(--glyph-sky); } /* computer (old computer login) */ .emps_hue.fa-certificate { --hue: var(--glyph-tan); } /* cookie (e-mail) */ .emps_hue.fa-coffee { --hue: var(--glyph-tan); } /* cup */ .emps_hue.fa-gamepad { --hue: var(--glyph-green); } /* game (username) */ .emps_hue.fa-music { --hue: var(--glyph-pink); } /* guitar */ .emps_hue.fa-magnet { --hue: var(--glyph-red); } /* magnet */ .emps_hue.fa-tachometer { --hue: var(--glyph-amber); } /* traffic light */ .emps_hue.fa-magic { --hue: var(--glyph-purple); } /* wand and hat (payment details) */ /* the buttons under posts (reply, quote, ...) and the entries of a post's "Post Actions" menu draw their glyph with ::before, see emps.css; the like entry changes its class while liking (loading, success, error) */ #forum_content :is(ul.quickbuttons, ul.dropdown-menu) li:is(.reply_button, .reply_all_button) > a::before { content: "\f112"; color: var(--glyph-blue); } /* reply */ #forum_content :is(ul.quickbuttons, ul.dropdown-menu) li.quote_button > a::before { content: "\f10d"; color: var(--glyph-gold); } /* quote */ #forum_content :is(ul.quickbuttons, ul.dropdown-menu) li.notify_button > a::before { content: "\f0f3"; color: var(--glyph-purple); } /* notify */ #forum_content :is(ul.quickbuttons, ul.dropdown-menu) li.modify_button > a::before { content: "\f040"; color: var(--glyph-blue); } /* modify */ #forum_content :is(ul.quickbuttons, ul.dropdown-menu) li.remove_button > a::before { content: "\f014"; color: var(--glyph-red); } /* remove */ #forum_content :is(ul.quickbuttons, ul.dropdown-menu) li.approve_button > a::before { content: "\f00c"; color: var(--glyph-green); } /* approve */ #forum_content :is(ul.quickbuttons, ul.dropdown-menu) li.restore_button > a::before { content: "\f0e2"; color: var(--glyph-lime); } /* restore */ #forum_content :is(ul.quickbuttons, ul.dropdown-menu) li.split_button > a::before { content: "\f0c4"; color: var(--glyph-pink); } /* split topic */ #forum_content ul.dropdown-menu li.thank_you_button > a::before { content: "\f164"; color: var(--glyph-green); } /* like */ #forum_content ul.dropdown-menu li.thank_you_button > a.withdraw_thank_you_button_link::before { content: "\f165"; color: var(--glyph-red); } /* withdraw like */ #forum_content ul.dropdown-menu li.thank_you_loading > a::before { content: "\f110"; color: var(--glyph-sky); } /* liking ... */ #forum_content ul.dropdown-menu li.thank_you_success > a::before { content: "\f00c"; color: var(--glyph-green); } /* liked */ #forum_content ul.dropdown-menu li.thank_you_error > a::before { content: "\f00d"; color: var(--glyph-red); } /* liking failed */ /* the glyphs of topics (board pages, unread and recent posts, the legend under them), see emps_topic_glyph() */ .topic_glyph.fa-file-text-o { color: var(--glyph-gold); } /* normal topic */ .topic_glyph.topic_glyph_hot { color: var(--glyph-tan); } /* hot topic */ .topic_glyph.topic_glyph_veryhot { color: var(--glyph-red); } /* very hot topic */ .topic_glyph.fa-lock { color: var(--glyph-amber); } /* locked topic */ .topic_glyph.fa-thumb-tack { color: var(--glyph-teal); } /* sticky topic */ .topic_glyph.fa-bar-chart { color: var(--glyph-sky); } /* poll */ /* the ticket's urgency arrows and assign button (the helpdesk's script swaps their images), see emps.css */ #forum_content #urgency_increase a::before { content: "\f062"; color: var(--glyph-lime); } /* arrow-up */ #forum_content #urgency_decrease a::before { content: "\f063"; color: var(--glyph-red); } /* arrow-down */ #forum_content #assigned_button::before { content: "\f234"; color: var(--glyph-teal); } /* user-plus */ /* images that SMF's scripts swap, drawn as a glyph picked by the image's current src (see emps_swap_glyph()) */ #forum_content .emps_swap:has(> img[src*="/collapse."])::before { content: "\f077"; color: var(--glyph-gold); } /* chevron-up: collapse */ #forum_content .emps_swap:has(> img[src*="/expand."])::before { content: "\f078"; color: var(--glyph-gold); } /* chevron-down: expand */ #forum_content .emps_swap:has(> img[src*="/field_valid."])::before { content: "\f00c"; color: var(--glyph-green); } /* check: field ok */ #forum_content .emps_swap:has(> img[src*="/field_invalid."])::before { content: "\f00d"; color: var(--glyph-red); } /* times: field not ok */ #forum_content .emps_swap:has(> img[src*="/field_check."])::before { content: "\f002"; color: var(--glyph-sky); } /* search: check the name */ #forum_content .emps_swap:has(> img[src*="/upshrink."])::before { content: "\f077"; color: var(--glyph-gold); } /* chevron-up: collapse (packages) */ #forum_content .emps_swap:has(> img[src*="/upshrink2."])::before { content: "\f078"; color: var(--glyph-gold); } /* chevron-down: expand (packages) */ #forum_content .emps_swap:has(> img[src*="/selected."])::before { content: "\f0da"; color: inherit; } /* caret-right: selected, closed (admin) */ #forum_content .emps_swap:has(> img[src*="/sort_down."])::before { content: "\f0d7"; color: inherit; } /* caret-down: open, sorted down (admin) */ #forum_content .emps_swap:has(> img[src*="/sort_up."])::before { content: "\f0d8"; color: inherit; } /* caret-up: sorted up (admin) */ #forum_content .emps_swap:has(> img[src*="/switch_on."])::before { content: "\f205"; color: var(--glyph-green); } /* toggle-on: feature on */ #forum_content .emps_swap:has(> img[src*="/switch_off."])::before { content: "\f204"; color: var(--glyph-dim); } /* toggle-off: feature off */ /* the edit link of a calendar event (instead of modify_small.gif) */ #forum_content a.modify_event::before { content: "\f040"; color: var(--glyph-blue); } /* pencil */ /* the bars of the forum's statistics, in the color of their heading's glyph (and of the member list's posts and polls), see emps.css; a bar without a line is gold */ #forum_content #top_posters { --bar-hue: var(--glyph-teal); } /* top posters (users) */ #forum_content #top_boards { --bar-hue: var(--glyph-tan); } /* top boards (th-list) */ #forum_content #top_topics_replies { --bar-hue: var(--glyph-blue); } /* top topics by replies (comments) */ #forum_content #top_topics_views { --bar-hue: var(--glyph-blue); } /* top topics by views (eye) */ #forum_content #top_topics_starter { --bar-hue: var(--glyph-blue); } /* top topic starters (comments) */ #forum_content #most_online { --bar-hue: var(--glyph-sky); } /* most time online (clock-o) */ #forum_content #most_thanked { --bar-hue: var(--glyph-teal); } /* most liked members (users) */ #forum_content #most_thanked_posts { --bar-hue: var(--glyph-blue); } /* most liked posts (comments) */ #forum_content #mlist .statsbar { --bar-hue: var(--glyph-blue); } /* member list: posts */ #forum_content #poll { --bar-hue: var(--glyph-sky); } /* poll results (bar-chart) */ /* the little pies of the profile's statistics (share of posts per board), see emps.css */ #forum_content .profile_pie { background: conic-gradient(var(--glyph-sky) calc(var(--pie, 0) * 1%), rgba(165, 147, 120, .25) 0); }