มีเดียวิกิ:Perbook/French.css

/* Notes:
 * * Since this is JavaScript-only, only add styles here that would be difficult to add inline, or which only apply to JavaScript content.
 * * Add container styles to {{French/Box style}} and text styles to {{French/Style}}.
 */

/* tables */
table.french-table > tbody > tr > td {
   border: solid rgb(237, 235, 232) thin;
   padding-left: 5px;
   padding-right: 5px;
}

table.french-table > tbody > tr > th {
   background-color: rgb(247, 245, 242);
   text-align: center;
   font-weight: bold;
}

table.french-table > tbody > tr > td:first-child,
table.french-table > tbody > tr > th {
   padding-left: 7px;
}

table.french-table > tbody > tr > td:last-child,
table.french-table > tbody > tr > th {
   padding-right: 7px;
}

table.french-table > tbody > tr > td:empty,
table.french-table > tbody > tr > th:empty {
   padding: 0;
   border: 0;
}
/* /tables */


/* translations tables */
table.french-table.french-translations:not(.french-dialogue) > tbody > tr > td:first-child /* French */,
table.french-table.french-translations > tbody > tr > td:nth-of-type(5) /* French sample sentence */ {
   background-color: rgb(247, 245, 242);
}

table.french-table.french-translations:not(.french-dialogue) > tbody > tr > td:nth-of-type(2) /* IPA */,
table.french-table.french-translations > tbody > tr > td:nth-of-type(4) /* usage notes */ {
   color: rgb(100, 100, 100);
}

table.french-table.french-translations > tbody > tr > td:nth-of-type(1):not(:empty) /* French */,
table.french-table.french-translations > tbody > tr > td:nth-of-type(2):not(:empty) /* IPA */,
table.french-table.french-translations > tbody > tr > td:nth-of-type(3):not(:empty) /* English */ {
   min-width: 100px;
}

table.french-table.french-translations > tbody > tr > td:nth-of-type(5) /* French sample sentence */,
table.french-table.french-translations > tbody > tr > td:nth-of-type(6) /* English sentence */ {
   color: rgb(50, 50, 50);
   font-style: italic;
}

table.french-table.french-translations > tbody > tr > td:nth-of-type(4):not(:empty)::before /* usage notes */ {
   content: "(";
}

table.french-table.french-translations > tbody > tr > td:nth-of-type(4):not(:empty)::after /* usage notes */ {
   content: ")";
}

table.french-table.french-translations > tbody > tr:hover td:not(.french-english-visibility-toggle-cell) {
   background-color: rgb(237, 235, 222);
}
/* /translations tables */


/* dialogues */
table.french-table.french-dialogue:not(.french-translations) > tbody > tr > td:first-child /* either speaker's name, if table does not include translations */,
table.french-table.french-dialogue.french-translations > tbody > tr:nth-of-type(even):not(:last-child) > td:first-child /* either speaker's name, if table includes translations */ {
   text-align: right;
   min-width: 70px;
   background-color: rgb(247, 245, 242);
}

table.french-table.french-dialogue:not(.french-translations) > tbody > tr > td:first-child::after /* either speaker's name, if table does not include translations */,
table.french-table.french-dialogue.french-translations > tbody > tr:nth-of-type(even):not(:last-child) > td:first-child::after /* either speaker's name, if table includes translations */ {
   content: " : ";
}

table.french-table.french-dialogue > tbody > tr:not(:first-child):not(:last-child) > td:nth-of-type(2) /* either speaker's French line */,
table.french-table.french-dialogue:not(.french-translations) > tbody > tr:not(:first-child):last-child > td:nth-of-type(2) /* either speaker's French line */,
table.french-table.french-dialogue.french-translations > tbody > tr:nth-of-type(odd):not(:first-child):not(:last-child) > td:nth-of-type(1) /* either speaker's English line */ {
   font-style: italic;
}

table.french-table.french-dialogue:not(.french-translations) > tbody > tr:nth-of-type(odd) > td:nth-of-type(2) /* second speaker's line, if table does not include translations */,
table.french-table.french-dialogue.french-translations > tbody > tr:nth-of-type(odd) > td:nth-of-type(1) /* either speaker's English line, if table includes translations */,
table.french-table.french-dialogue.french-translations.french-hidden-english > tbody > tr:nth-of-type(4n+4) > td:nth-of-type(2) /* second speaker's line, if table includes translations and they are hidden */ {
   color: rgb(100, 100, 100);
}

table.french-table.french-dialogue > tbody > tr:hover td:not(.french-english-visibility-toggle-cell),
table.french-table.french-dialogue.french-translations > tbody > tr:nth-of-type(even):hover + tr:nth-of-type(odd) {
   background-color: rgb(237, 235, 222) ! important;
}
/* /dialogues */


/* hidden sections */
table.french-table.french-translations > tbody > tr > td.french-english-visibility-toggle-cell {
   text-align: right;
   color: rgb(100, 100, 100);
   font-weight: normal;
   font-size: smaller;
   line-height: 110%;
   background-color: rgb(247, 245, 242);
}

table.french-table.french-translations > tbody > tr > td.french-english-visibility-toggle-cell span.french-toggle,
span.french-hidden-section-toggle-container span.french-hidden-section-toggle {
   color: #0645AD;
}

table.french-table.french-translations > tbody > tr > td.french-english-visibility-toggle-cell span.french-toggle:hover,
span.french-hidden-section-toggle-container span.french-hidden-section-toggle:hover {
   text-decoration: underline;
   cursor: pointer;
}

span.french-hidden-section-toggle-container {
   color: rgb(100, 100, 100);
   font-size: small;
   font-weight: normal;
}

table.french-table.french-translations.french-hidden-english > tbody > tr > td:nth-of-type(3) /* English */,
table.french-table.french-translations.french-hidden-english > tbody > tr > td:nth-of-type(4) /* usage notes */,
table.french-table.french-translations.french-hidden-english > tbody > tr > td:nth-of-type(6) /* English sentence */,
table.french-table.french-dialogue.french-translations.french-hidden-english > tbody > tr:nth-of-type(odd) > td:nth-of-type(1) /* either speaker's English line, if table includes translations */,
div.french-section.french-hidden {
   display: none;
}
/* /hidden sections */


/* exercises */
table.french-table.french-exercise-list tr.french-exercise-list-row td.french-answer::before {
   content: "→";
   color: rgb(200, 200, 200);
   margin-right: 6px;
}

table.french-table.french-exercise-list tr.french-exercise-list-row td.french-question {
   border-right: 0;
}

table.french-table.french-exercise-list tr.french-exercise-list-row td.french-answer {
   border-left: 0;
   background-color: White;
   color: rgb(240, 240, 240);
}

table.french-table.french-exercise-list tr.french-exercise-list-row:hover td.french-answer {
   color: Black; 
}
/* /exercises */