/*************************************************************************************************** * Created by : Jacques Quesnel * * Created on : 2021-07-08 * *************************************************************************************************** * This files contain the overrides to the regular WET4 theme. * * -Change the background colour of unused portion of page. * -Add a blue bottom border to the main-container. * -Unbold form labels. * -Changed the look of kbd. * -Changed the look of labels. * -Reduced top margin on

. * -Made
more prominent. * -Compacted
. * -Compacted form fields. * -Changed and revived
s. * -Override DataTable's stripping colours. * ...and more. * * Notes: * ===== * Decent colour hex converter and picker: * -https://www.w3.org/wiki/CSS/Properties/color/keywords * -https://www.rapidtables.com/convert/color/rgb-to-hex.html * / body { height: 100vh; background: url("/_images/backTextures/freeject/blueWatercolor007.jpg"); -webkit-background-size: 100% 100%; / Ensures compatibility with older WebKit browsers / -moz-background-size: 100% 100%; / For older Firefox / -o-background-size: 100% 100%; / For older Opera / background-size: 100% 100%; / Standard for modern browsers */ background-repeat: no-repeat; background-attachment: fixed; color: black; /*** * Background without above image. Use instead of the above. * * background-image: linear-gradient(to right, #D9EDF7, white, #D9EDF7); * color: black; / } main#wb-cont.container { background-color: rgba(255, 255, 255, 0.90); / Goes with background pattern above. */ /*** * The first value applies to top-left corner, second value applies to top-right corner, third value * applies to bottom-right corner, and fourth value applies to bottom-left corner. */ border-radius: 0px 0px 15px 15px; border-top: 1px solid black; margin-top: 0; margin-bottom: 30px; /*** * If we stop using the image, then uncomment these lines. * * border-bottom: 5px solid #D9EDF7; * padding-bottom: 15px; / } .displayNoShow { display: none; } #highlihtText .label { font-weight: initial; font-size: initial; display: initial; } label / Field label and not warning, danger ... */ { font-weight: 100; margin-bottom: 0px; } .labelSmall { font-weight: initial; padding-bottom: 1px; padding-top: 1px; font-size: 100%; } /*** * For some reason, the grid system seem to be indented on both sides. This class seems to fix the * issue. */ .fixGridIndent { padding: 0 15px; margin: 0 -15px; } caption { background-image: linear-gradient(to bottom, #D9EDF7, white); /*** * First value applies to top-left corner, second value applies to top-right corner, third value * applies to bottom-right corner, and fourth value applies to bottom-left corner. / border-radius: 8px 8px 0px 8px; color: black; margin-bottom: 1px; margin-top: 5px; padding: 1px 1px 1px 5px; text-align: initial; font-size: initial; font-weight: initial; } h1 { margin-top: 5px; } hr { border-top: 1px solid #696969; margin-bottom: 6px; margin-top: 6px; } @media (min-width: 992px) / To better behave on small screens. / { .dl-horizontal dt { border-top: initial; margin: 0px 10px 0px 0px; padding: initial; text-align: right; } .dl-horizontal dd { border-top: initial; margin: initial; margin-left: 170px; padding: initial; } } / The default width is 20ch. To use:
/ .dl-horizontal .wideDt30CH { display: inline-block; width: 30ch; } .dl-horizontal .wideDt40CH { display: inline-block; width: 40ch; } .dl-horizontal .wideDt50CH { display: inline-block; width: 50ch; } .form-control { margin-bottom: 10px; padding: 6px; } input[type="checkbox"] { -moz-appearance: none; / For Firefox / -webkit-appearance: none; / For Chrome, Safari / appearance: none; / For other modern browsers */ border: 2px solid #CCC; height: 20px; margin-top: 0px; width: 20px; } input[type="checkbox"]:checked::after { color: #555; content: '✓'; font-size: 25px; left: 2px; position: absolute; top: -12px; } fieldset { border-radius: 8px; border: 1px solid #696969; padding: 0px 2px 0px 3px; } legend { border-bottom: 0; border-radius: 8px; border: initial; float: initial; font-size: initial; font-weight: bold; margin: 0px 10px 0px 10px; padding-left: 3px; padding-right: 3px; width: initial; } .btn { margin-top: 15px; } kbd { background-color: azure; border: 2px dotted darkblue; box-shadow: initial; color: black; font-size: 90%; padding: 2px 4px; animation: getAttentionAnimation 3s infinite; /*** * For older browsers. / -webkit-box-shadow: initial; -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25); } .defaultEnter { display: inline-flex; align-items: center; } / Dividers */ .div7525Cntr { width: 75%; margin-left: auto; margin-right: auto; } .div7525Rght { width: 75%; margin-left: auto; margin-right: 0; } .div7525Lft { width: 75%; margin-left: 0; margin-right: auto; } /*** * DataTable */ .table-striped>tbody>tr:nth-child(odd)>td, .table-striped>tbody>tr:nth-child(odd)>th { background-color: #EBF6FB; } .table-striped>tbody>tr:nth-child(even)>td, .table-striped>tbody>tr:nth-child(even)>th { background-color: #D9EDF7; } table.dataTable.compact tbody th, table.dataTable.compact tbody td { padding: 0px 4px 0px 4px; } table.dataTable.cell-border tbody th, table.dataTable.cell-border tbody td { border-top: 1px solid #8DC9E7; border-right: 1px solid #8DC9E7; } /*************************************************************************************************** * Animations. */ @keyframes getAttentionAnimation { 50% {border-radius: 12px;} }