You are here

Home » API reference » Formatter Suite 8

formatter_suite.fieldformatter.css in Formatter Suite 8

Style settings forms for the Formatter Suite's field formatters.

File

css/formatter_suite.fieldformatter.css
View source 
  1. /**

  2.  * @file

  3.  * Style settings forms for the Formatter Suite's field formatters.

  4.  */

  5. 

  6. /*-----------------------------------------------------------------------

  7.  *

  8.  * General.

  9.  *

  10.  *-----------------------------------------------------------------------*/

  11. /* Wrapper around each of the module's settings for Field UI & View UI. */

  12. .formatter_suite-field-formatter-settings {

  13.   padding: 0.5em 0.5em 0 0.5em;

  14.   max-width: 30em;

  15. }

  16. 

  17. .formatter_suite-field-formatter-settings .formatter_suite-field-formatter-settings-description {

  18.   padding-left: 0;

  19.   padding-bottom: 0.25em;

  20.   margin-bottom: 0.25em;

  21.   margin-top: -0.25em;

  22. }

  23. .formatter_suite-field-formatter-settings .formatter_suite-field-formatter-settings-description p {

  24.   margin: 0 0 1em 0;

  25. }

  26. 

  27. .formatter_suite-field-formatter-settings .formatter_suite-field-formatter-settings-warning {

  28.   /*

  29.    * For formatters that are not fully configured, highlight a warning.

  30.    */

  31.   font-style: italic;

  32.   color: #834343;

  33.   padding-left: 0;

  34.   padding-bottom: 0.5em;

  35. }

  36. 

  37. .formatter_suite-field-formatter-settings .form-item {

  38.   padding-left: 0;

  39.   padding-right: 0 !important;

  40.   padding-bottom: 0.25em !important;

  41.   padding-top: 0 !important;

  42.   margin: 0 !important;

  43.   display: flex;

  44.   flex-direction: row;

  45.   flex-wrap: wrap;

  46.   justify-content: flex-start;

  47.   align-items: baseline;

  48. }

  49. .formatter_suite-field-formatter-settings .form-item.form-disabled {

  50.   /*

  51.    * When form items are disabled, dim them into the background.

  52.    */

  53.   opacity: 0.5;

  54. }

  55. .formatter_suite-field-formatter-settings .form-item label:not(option) {

  56.   /*

  57.    * Insure form items have their label beside the input. Give them a

  58.    * preferred width so that they line up.

  59.    */

  60.   display: inline-block;

  61.   color: #000;

  62.   font-weight: 500;

  63.   min-width: 9em;

  64. }

  65. .formatter_suite-field-formatter-settings .form-item label.option {

  66.   order: 2;

  67.   flex-grow: 1;

  68.   align-self: baseline;

  69. }

  70. .formatter_suite-field-formatter-settings .form-item label:not(option) {

  71.   order: 0;

  72.   flex-grow: 0;

  73.   align-self: baseline;

  74. }

  75. .formatter_suite-field-formatter-settings .form-item select,

  76. .formatter_suite-field-formatter-settings .form-item input[type=color],

  77. .formatter_suite-field-formatter-settings .form-item input[type=number],

  78. .formatter_suite-field-formatter-settings .form-item input[type=text],

  79. .formatter_suite-field-formatter-settings .form-item input[type=textfield],

  80. .formatter_suite-field-formatter-settings .form-item input[type=textarea] {

  81.   /*

  82.    * Insure form item inputs are beside their labels. Give them a

  83.    * preferred width so all of the inputs line up and look similar.

  84.    */

  85.   display: inline-block;

  86.   order: 1;

  87.   flex-grow: 1;

  88.   align-self: center;

  89.   margin: 0 !important;

  90. }

  91. .formatter_suite-field-formatter-settings .form-item select {

  92.   overflow: hidden;

  93.   text-overflow: ellipsis;

  94.   white-space: nowrap;

  95. }

  96. .formatter_suite-field-formatter-settings .form-item input[type=checkbox] {

  97.   order: 0;

  98.   flex-grow: 0;

  99. }

  100. .formatter_suite-field-formatter-settings .form-item input[type=number] {

  101.   min-width: 5em;

  102.   width: 5em;

  103. }

  104. .formatter_suite-field-formatter-settings .form-item.formatter_suite-list-separator {

  105.   padding-left: 15px;

  106. }

  107. .formatter_suite-field-formatter-settings .form-item.formatter_suite-list-separator label {

  108.   min-width: calc(9em - 15px - 2px);

  109. }

  110. .formatter_suite-field-formatter-settings .form-item input[type=checkbox] {

  111.   width: 1em;

  112. }

  113. .formatter_suite-field-formatter-settings .form-item .description {

  114.   padding-left: 9em;

  115. }

  116. .formatter_suite-field-formatter-settings .form-type-checkbox .description {

  117.   padding-left: 1em;

  118.   margin-left: 0;

  119. }

  120. 

  121. .formatter_suite-field-formatter-settings .formatter_suite-section-break {

  122.   padding-bottom: 0.25em;

  123.   margin-bottom: 0.25em;

  124. }

  125. 

  126. .formatter_suite-deprecated {

  127.   color: #8b0000;

  128.   font-style: italic;

  129. }

  130. 

  131. .formatter_suite-field-formatter-settings .formatter_suite-settings-description {

  132.   font-weight: 900;

  133.   border-bottom: 1px solid #aaa;

  134. }

  135. .formatter_suite-field-formatter-settings .form-item .description {

  136.   order: 2;

  137.   flex-grow: 0;

  138.   font-size: 100%;

  139.   font-style: italic;

  140.   font-weight: normal;

  141. }

  142. .formatter_suite-field-formatter-settings .formatter_suite-section-break {

  143.   border-bottom: 1px solid #aaa;

  144. }

  145. 

  146. /*-----------------------------------------------------------------------

  147.  *

  148.  * DateTimeCustomListFormatter.

  149.  * DateTimeListFormatter.

  150.  * DateTimeTimeAgoListFormatter.

  151.  * EntityReferenceRenderListFormatter.

  152.  * ImageEmbedDataFormatter.

  153.  * NumberWithBytesFormatter.

  154.  * TextWithExpandCollapseButtonsFormatter.

  155.  * TimestampListFormatter.

  156.  * TimestampTimeAgoListFormatter

  157.  *

  158.  *-----------------------------------------------------------------------*/

  159. /* None */

  160. 

  161. /*-----------------------------------------------------------------------

  162.  *

  163.  * GeneralEmailFormatter.

  164.  *

  165.  *-----------------------------------------------------------------------*/

  166. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-email-title-custom-text,

  167. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-email-list-separator {

  168.   padding-left: 15px;

  169. }

  170. 

  171. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-email-title-custom-text label,

  172. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-email-list-separator label {

  173.   min-width: calc(9em - 15px - 2px);

  174. }

  175. 

  176. /*-----------------------------------------------------------------------

  177.  *

  178.  * GeneralEntityReferenceFormatter.

  179.  *

  180.  *-----------------------------------------------------------------------*/

  181. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-entity-reference-title-custom-text,

  182. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-entity-reference-list-separator,

  183. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-entity-reference-open-link-in,

  184. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-entity-reference-link-topic {

  185.   padding-left: 15px;

  186. }

  187. 

  188. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-entity-reference-title-custom-text label,

  189. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-entity-reference-list-separator label,

  190. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-entity-reference-open-link-in label,

  191. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-entity-reference-link-topic label {

  192.   min-width: calc(9em - 15px - 2px);

  193. }

  194. 

  195. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-entity-reference-title-custom-text .description {

  196.   padding-left: 0;

  197.   margin-left: -15px;

  198. }

  199. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-entity-reference-title-custom-text .description .token-tree {

  200.   margin-left: 0;

  201. }

  202. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-entity-reference-title-custom-text .description .token-tree tbody tr.odd td,

  203. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-entity-reference-title-custom-text .description .token-tree tbody tr.even td {

  204.   padding-top: 0;

  205.   padding-bottom: 0;

  206. }

  207. 

  208. /*-----------------------------------------------------------------------

  209.  *

  210.  * GeneralFileLinkFormatter.

  211.  *

  212.  *-----------------------------------------------------------------------*/

  213. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-file-link-title-custom-text,

  214. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-file-link-list-separator,

  215. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-file-link-open-link-in,

  216. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-file-link-noreferrer,

  217. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-file-link-noopener,

  218. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-file-link-nofollow,

  219. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-file-link-link-topic {

  220.   padding-left: 15px;

  221. }

  222. 

  223. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-file-link-title-custom-text label,

  224. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-file-link-list-separator label,

  225. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-file-link-open-link-in label,

  226. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-file-link-link-topic label {

  227.   min-width: calc(9em - 15px - 2px);

  228. }

  229. 

  230. /*-----------------------------------------------------------------------

  231.  *

  232.  * GeneralImageFormatter.

  233.  *

  234.  *-----------------------------------------------------------------------*/

  235. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-image-caption-include-title,

  236. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-image-caption-include-filename,

  237. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-image-caption-include-size,

  238. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-image-caption-include-dimensions,

  239. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-image-caption-include-mime,

  240. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-image-open-link-in {

  241.   padding-left: 15px;

  242. }

  243. 

  244. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-image-caption-include-title label,

  245. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-image-caption-include-filename label,

  246. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-image-caption-include-size label,

  247. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-image-caption-include-dimensions label,

  248. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-image-caption-include-mime label,

  249. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-image-open-link-in label {

  250.   min-width: calc(9em - 15px - 2px);

  251. }

  252. 

  253. /*-----------------------------------------------------------------------

  254.  *

  255.  * GeneralLinkFormatter.

  256.  *

  257.  *-----------------------------------------------------------------------*/

  258. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-link-title-custom-text,

  259. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-link-list-separator,

  260. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-link-open-link-in,

  261. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-link-noreferrer,

  262. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-link-noopener,

  263. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-link-nofollow,

  264. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-link-link-topic {

  265.   padding-left: 15px;

  266. }

  267. 

  268. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-link-title-custom-text label,

  269. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-link-list-separator label,

  270. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-link-open-link-in label,

  271. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-link-link-topic label {

  272.   min-width: calc(9em - 15px - 2px);

  273. }

  274. 

  275. /*-----------------------------------------------------------------------

  276.  *

  277.  * GeneralNumberFormatter.

  278.  *

  279.  *-----------------------------------------------------------------------*/

  280. /*

  281.  * Add border and spacing before the first setting of each section.

  282.  */

  283. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-decimal-digits,

  284. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-use-thousands-separator,

  285. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-positive-style,

  286. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-use-zero-padding,

  287. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-use-prefix-and-suffix {

  288.   border-top: 1px solid #aaa;

  289.   padding-top: 0.25em;

  290.   margin-top: 0.25em;

  291. }

  292. 

  293. /*

  294.  * Indent secondary settings and reduce their label widths

  295.  */

  296. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-number-base,

  297. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-exponent-style,

  298. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-padding-width,

  299. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-decimal-separator,

  300. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-thousands-separator {

  301.   padding-left: 1em;

  302. }

  303. 

  304. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-number-base label,

  305. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-exponent-style label,

  306. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-padding-width label,

  307. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-decimal-separator label,

  308. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-thousands-separator label {

  309.   min-width: 8em;

  310. }

  311. 

  312. /*

  313.  * Bring related items closer together.

  314.  */

  315. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-positive-style,

  316. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-use-thousands-separator,

  317. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-decimal-digits {

  318.   padding-bottom: 0;

  319. }

  320. 

  321. /*

  322.  * Try to make specific menu items red. This does not work on all browsers.

  323.  */

  324. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-negative-style select option[value="red"],

  325. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-negative-style select option[value="redparenthesis"] {

  326.   color: red;

  327. }

  328. 

  329. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-list-separator {

  330.   padding-left: 1em;

  331. }

  332. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-list-separator label {

  333.   min-width: 8em;

  334. }

  335. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-list-separator input[type=text] {

  336.   min-width: 5em;

  337.   width: 5em;

  338. }

  339. 

  340. /*-----------------------------------------------------------------------

  341.  *

  342.  * GeneralNumberWithBarIndicatorFormatter.

  343.  *

  344.  *-----------------------------------------------------------------------*/

  345. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-with-bar-indicator-bar-color input[type=text],

  346. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-with-bar-indicator-background-color input[type=text] {

  347.   min-width: 5em;

  348.   width: 5em;

  349. }

  350. 

  351. /*-----------------------------------------------------------------------

  352.  *

  353.  * GeneralNumberWithMinMaxFormatter.

  354.  *

  355.  *-----------------------------------------------------------------------*/

  356. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-with-minmax-custom-format {

  357.   padding-left: 15px;

  358. }

  359. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-with-minmax-custom-format .description {

  360.   padding-left: calc(9em - 15px - 2px);

  361. }

  362. 

  363. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-with-minmax-custom-format label {

  364.   min-width: calc(9em - 15px - 2px);

  365. }

  366. 

  367. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-number-with-minmax-common-format {

  368.   padding-bottom: 0;

  369. }

  370. 

  371. /*-----------------------------------------------------------------------

  372.  *

  373.  * GeneralUserReferenceFormatter.

  374.  *

  375.  *-----------------------------------------------------------------------*/

  376. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-user-reference-title-custom-text,

  377. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-user-reference-list-separator,

  378. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-user-reference-open-link-in,

  379. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-user-reference-link-topic {

  380.   padding-left: 15px;

  381. }

  382. 

  383. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-user-reference-title-custom-text label,

  384. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-user-reference-list-separator label,

  385. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-user-reference-open-link-in label,

  386. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-user-reference-link-topic label {

  387.   min-width: calc(9em - 15px - 2px);

  388. }

  389. 

  390. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-user-reference-title-custom-text .description {

  391.   padding-left: 0;

  392.   margin-left: -15px;

  393. }

  394. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-user-reference-title-custom-text .description .token-tree {

  395.   margin-left: 0;

  396. }

  397. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-user-reference-title-custom-text .description .token-tree tbody tr.odd td,

  398. .formatter_suite-field-formatter-settings .form-item.formatter_suite-general-user-reference-title-custom-text .description .token-tree tbody tr.even td {

  399.   padding-top: 0;

  400.   padding-bottom: 0;

  401. }