/*Theme Name: GeneratePress Child Theme URI: http://seniornetli.org description: SeniorNet at FSL - Schedule & Evaluations Website Theme GeneratePress Child Author: Martin Roche Author URI: Template: generatepress Version: 1.0.0 License: All content reserved Tags: seniornet, fsl Text Domain: generatepress-child */ :root { --fsl-blue: #326295; --fsl-light-blue: #A8C4E2; --fsl-very-light-blue: #DAEBF6; --fsl-menu-blue: #043D7E; --fsl-yellow: #FFD100; --fsl-light-yellow: #F1F1AB ; --fsl-light-green: #D9F4B5 ; --th-bg-color: #eaeffa; --mc-weekday-foreground:#326295; } /* 20201021 - Hide page footer */ .site-info { display: none; } /* 20180512 - Code to remove space at top of center column after titles are removed from webpage */ .entry-content, .entry-summary, .page-content { margin-top: 0; } .has-background { border-radius: 6px; } /* setup font size and color in nav menus. Be careful as settings affect each other. */ main-navigation, .main-navigation li { font-size: 0.800em; background-color:var(--fsl-blue); color:white; } .main-navigation, .main-navigation a { font-size: 1.250em; background-color:var(--fsl-blue); color:white; } #site-navigation .menu-item li a { font-size: 1.250em; background-color:var(--fsl-blue); color:white; } .mobile-menu, mobile-menu ul li a { font-size: 1.500em; } /* current-menu-item colors */ #site-navigation .current-menu-item a { color: var(--main-color); color: white; background-color: #f9d400; /* FSL Yellow */ color: #f9d400; /* FSL Yellow */ background-color: #043D7E; } #site-navigation .current-menu-bar-item a { color: var(--main-color); color: white; background-color: #f9d400; /* FSL Yellow */ } .main-navigation .main-nav ul li a, .main-navigation .menu-toggle, .main-navigation .menu-bar-items { color: #ffffff; } .one-container .site-content { padding: 15px 40px 40px 40px; } .container.grid-container { padding: 0px 40px 40px 40px; max-width: none; } /* 20190905 - Use a Combination of Percent and Em to set font sizes. "The solution that works in all browsers, is to set a default font-size in percent for the element. It shows the same text size in all browsers, and allows all browsers to zoom or resize the text!" Source: https://www.w3schools.com/css/css_font.asp */ body { font-size: 100%; } body.login div#login p#nav { display: none; } input[type=text],input[type=textarea],input[type=search],input[type=label],input[type=email],input[type=time],input[type=number] { border-radius:6px; border: 1px solid lightgray; padding: 5px 5px; height: 28px; margin-top:3px; margin-bottom:3px; background-color:#f9FFFE; /*border-color:var(--fsl-blue);*/ } input[type="search"] { color:var(--fsl-blue); font-weight:bold; } input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; height: 1em; width: 1em; background: url(https://evaluations.seniornetli.org/wp-content/uploads/icons8-delete-64.png) no-repeat 50% 50%; background-size: contain; opacity: 0; pointer-events: none; } input[type="search"]:focus::-webkit-search-cancel-button { opacity: .7; pointer-events: all; } label { color: var(--fsl-blue); font-weight: bold; } textarea { border-radius:6px; background-color: #F9FFFE; border: 1px solid lightgray; padding: 5px 5px; } input[type=checkbox] { border-radius:6px; background-color: var(--fsl-blue); } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; appearance: textfield; } select { border-radius:6px; height: 30px; margin-top:3px; margin-bottom:3px; } input,label { border-radius:16px; } h1 { font-size: 2.00em; font-weight: bold; color:var(--fsl-blue); } h2 { font-size: 2.000em; font-weight: bold; font-family: 'Varela Round',arial; color:var(--fsl-blue); /*background-color:var(--fsl-yellow); background-image: linear-gradient(#FFFFFF,var(--fsl-yellow));*/ } h3 { font-size: 18px; font-weight: bold; color:var(--fsl-blue); } hx4,.h7 { font-size: 1.10em; font-weight: bold; text-align:center; color:var(--fsl-yellow); /* color:var(--fsl-blue); */ background-color:var(--fsl-blue); /*background-color:var(--th-bg-color); */ margin-bottom: 2px; padding-left: 5px; padding-right: 5px; padding-bottom: 2px; border-radius:6px 6px 0px 0px; } h5 { font-size: 1.000em; font-weight: bold; color:var(--fsl-blue); margin-bottom: 0px; } li { font-size: 1.500em; } /* 20190505 sdb - Remove whitespace around logo on homepage. */ .inside-header { padding: 0; } /* 20151227 - For better control of text in paragraghs*/ p { color:black; font-family:"Open Sans","Helvetica Neue",Helvetica; font-size: 15px; } p#xxs{ font-size: xx-small; } p#xs{ font-size: x-small; } p#s{ font-size: small; } p#m{ font-size: medium; } p#l{ font-size: large; } p#xl{ font-size: x-large; } p#xxl{ font-size: xx-large; } li { color:black; font-family:arial; font-size:large; } li#xxs{ font-size: xx-small; } li#xs{ font-size: x-small; } li#s{ font-size: small; } li#m{ font-size: medium; } li#l{ font-size: large; } li#xl{ font-size: x-large; } li#xxl{ font-size: xx-large; } /* For centering images */ img { display: block; margin-left: auto; margin-right: auto; } /* Sticky menu */ #site-navigation { height:60px; z-index:170; border-bottom:1px solid #dadada; /* for when the menu overlaps anything of the same color on the webpage */ margin:0 auto; width:100%; position:fixed; top:50; left:0; right:0; text-align: center; } table, th, td { table-layout: auto; border-top: 1px solid silver; border-BOTTOM: 1px solid silver; border-left: 0px solid white; border-right: 0px solid white; border-collapse: collapse; padding-top: 0px; padding-bottom: 0px; padding-left: 8px; padding-right: 8px; width:auto; } .rounded { border: 1px solid silver; border-radius:6px; border-collapse: unset; } .rounded-top { border: 0px; border-radius:6px 6px 0px 0px; border-collapse: unset; } .th-left-corner { border-radius:6px 0px 0px 0px; } .hov:hover {background-color: aliceblue;} th { color: var(--fsl-blue); /*color: black;*/ background-color: var(--th-bg-color); text-align: center; } tr { hover {background-color: aliceblue;} } .tablenb { table-layout: auto; border: 0px solid white; border-collapse: collapse; padding-top: 0px; padding-bottom: 0px; margin-bottom: 5px; width:auto; } .tablenb tr { border: 0px solid white; } .tablenb td { border: 0px solid white; padding-top: 0px; padding-bottom: 0px; } input[type=button], input[type=submit], input[type=reset], button { background-color: var(--fsl-blue); border: none; color: #f9d400; font-size: 16px; font-weight: bold; /* padding: 10px 24px; */ padding: 6px 12px; text-decoration: none; margin: 4px 2px; cursor: pointer; border-radius:24px; } .tooltip { display: inline; position: relative; text-decoration: none; top: 0px; left: 4px; } .tooltip:hover:after { background: var(--fsl-blue); border-radius: 5px; top: -5px; color: #fff; content: attr(alt); top: 100%; left: 50%; padding: 5px 15px; position: absolute; z-index: 19; width: 210px; } .tooltip:hover:before { border: solid; border-color: transparent var(--fsl-blue); border-width: 6px 6px 6px 0; bottom: 20px; content: ""; top: 100%; left: 50%; position: absolute; z-index: 20; } .snstatus { background-color:ghostwhite; /*background-color:#D1E6D1;*/ /*color: var(--fsl-blue);*/ color: green; font-weight: bold; padding-top: 2px; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; border: 1px solid #ccd0d4; box-shadow: 0 2px 3px #888888; border-radius:6px; } .snwarning { background-color:ghostwhite; color: coral; font-weight: bold; padding-top: 2px; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; border: 1px solid #ccd0d4; box-shadow: 0 2px 3px #888888; border-radius:6px; } .snerror { background-color:whitesmoke; color: crimson; font-weight: bold; padding-top: 2px; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; border: 1px solid #ccd0d4; box-shadow: 0 2px 3px silver; border-radius:6px; width: -moz-fit-content; width: fit-content; } .question { background-color:ghostwhite; background-color:#fbfbfb; /*color: var(--fsl-blue);*/ padding-top: 0px; padding-bottom: 0px; padding-left: 0px; padding-right: 0px; margin-left: 5px; border: 1px solid #ccd0d4; box-shadow: 2px 2px 10px gainsboro; border-radius:6px; margin-bottom: 25px; width: -moz-fit-content; width: fit-content; } .question-in { background-color:ghostwhite; background-color:#fbfbfb; /*color: var(--fsl-blue);*/ padding-top: 5px; padding-bottom: 2px; padding-left: 5px; padding-right: 5px; border: 0px; } /* select box style courtsey Scott Jhel @ https://www.filamentgroup.com/lab/select-css.html */ .select-css { display: block; font-size: 16px; font-family: sans-serif; font-weight: bold; color: var(--fsl-blue); line-height: 1.0; padding: .0em 1.8em .0em .8em; max-width: 100%; box-sizing: border-box; /*margin: 0;*/ border: 1px solid #aaa; box-shadow: 0 1px 0 1px rgba(0,0,0,.04); border-radius: 4px; -moz-appearance: none; -webkit-appearance: none; appearance: none; background-color: #fff; background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23007CB2%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'), linear-gradient(to bottom, #ffffff 0%,#e5e5e5 100%); background-repeat: no-repeat, repeat; background-position: right .7em top 50%, 0 0; background-size: .65em auto, 100%; } .select-css::-ms-expand { display: none; } .select-css:hover { border-color: var(--fsl-blue); } .select-css:focus { border-color: var(--fsl-blue); box-shadow: 0 0 1px 2px var(--fsl-blue); box-shadow: 0 0 0 2px -moz-mac-focusring; color: var(--fsl-blue); outline: none; } .select-css option { font-weight:normal; } /* The Modal (background) */ .modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 100px; /* Location of the box */ left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /* Enable scroll if needed */ background-color: rgb(0,0,0); /* Fallback color */ background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ } /* Modal Content */ .modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 80%; } /* The Close Button */ .close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; } .close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; } /* end select box style */ input#email-button{ background: url('https://evaluations.seniornetli.org/wp-content/uploads/email2.png') no-repeat; background-position: 10% 50%; padding-left: 46px; height: 36px; background-color: var(--fsl-blue); border: none; color: #f9d400; font-size: 16px; font-weight: bold; } input#email-button:hover{ background-color: black; color:white; } input#print-button{ background: url('https://evaluations.seniornetli.org/wp-content/uploads/icons8-print-16.png') no-repeat; background-position: 7% 50%; padding-left: 36px; height: 36px; background-color: var(--fsl-blue); border: none; color: #f9d400; font-size: 16px; font-weight: bold; } input#print-button:hover{ background-color: black; color:white; } input#add-button{ background: url('https://evaluations.seniornetli.org/wp-content/uploads/icons8-test-account-16.png') no-repeat; background-position: 10% 50%; background-size: 20px; padding-left: 36px; height: 36px; background-color: var(--fsl-blue); border: none; color: #f9d400; font-size: 16px; font-weight: bold; } input#add-button:hover{ background-color: black; color:white; } input#attendance-button{ background: url('https://evaluations.seniornetli.org/wp-content/uploads/icons8-attendance-64.png') no-repeat; background-position: 7% 50%; background-size: 22px; padding-left: 36px; height: 36px; background-color: var(--fsl-blue); border: none; color: #f9d400; font-size: 16px; font-weight: bold; } input#attendance-button:hover{ background-color: black; color:white; } .sn-mark { /*background-color: lemonchiffon;*/ background-color: var(--fsl-light-yellow); /*color: maroon;*/ color: var(--fsl-blue); border: 1px solid gold; font-weight: bold; padding: 0px 5px 0px 5px; } .sr-only { position: absolute; top: -30em; } table.sortable td, table.sortable th { /*padding: 0.125em 0.25em;*/ padding-top: 0px; padding-bottom: 0px; padding-left: 8px; padding-right:8px; margin-top: 0px; width:auto; border-top: 0px solid silver; border-BOTTOM: 1px solid silver; border-left: 0px solid white; border-right: 0px solid white; border-collapse: collapse; } table.sortable th { font-weight: bold; border-bottom: thin solid #888; position: relative; } table.sortable th.no-sort { padding-top: 0.35em; } /*table.sortable th:nth-child(5) { width: 10em; }*/ table.sortable th button { /*position: absolute;*/ padding: 4px; margin: 1px; font-size: 100%; font-weight: bold; background: transparent; color: var(--fsl-blue); text-decoration: underline; border: none; display: inline; right: 0; left: 0; top: 0; bottom: 0; /*width: 100%; */ text-align: left; outline: none; cursor: pointer; } table.sortable th button span { position: absolute; right: 4px; } table.sortable th[aria-sort="descending"] span::after { content: "▼"; color: currentColor; font-size: 100%; top: 0; } table.sortable th[aria-sort="ascending"] span::after { content: "▲"; color: currentColor; font-size: 100%; top: 0; } table.show-unsorted-icon th:not([aria-sort]) button span::after { content: "♢"; color: currentColor; font-size: 100%; position: relative; top: -3px; left: -4px; } table.sortable td.num { text-align: right; } /*table.sortable tbody tr:nth-child(odd) { background-color: #ddd; }*/ /* Focus and hover styling */ table.sortable th button:focus, table.sortable th button:hover { border-radius:6px; /* padding: 2px; */ border: 2px solid currentColor; /* background-color: #e5f4ff;*/ } table.sortable th button:focus span, table.sortable th button:hover span { right: 2px; } table.sortable th:not([aria-sort]) button:focus span::after, table.sortable th:not([aria-sort]) button:hover span::after { content: "▲";; color: currentColor; font-size: 100%; top: 0; } .draggable-table { .draggable-table__drag { font-size: 1.5em; font-weight: bold; color:blue; text-transform: capitalize; position: absolute; width: 100%; text-indent: 50px; border: 1px solid #f1f1f1; z-index: 10; cursor: grabbing; opacity: 1; } thead { th { height: 25px; font-weight: bold; text-transform: capitalize; padding: 10px; user-select: none; } } tbody { tr { cursor: grabbing; td { font-size: .95em; font-weight: lighter; text-transform: capitalize; text-indent: 50px; padding: 10px; user-select: none; border-top: 1px solid whitesmoke; } } tr:nth-child(even) { background-color: #f7f7f7; } tr:nth-child(odd) { background-color: #ffffff; } tr.is-dragging { background: green; td { color: #ffe683; } } } } .popup-container { position: relative; display: inline-block; } .popup-text { visibility: hidden; width: 200px; background-color: var(--fsl-light-blue); color: black; text-align: left; font-weight: bold; padding: 10px; border-radius: 5px; position: absolute; z-index: 1; bottom: 125%; left: 50%; margin-left: -100px; opacity: 0; transition: opacity 0.3s; } .popup-container:hover .popup-text { visibility: visible; opacity: 1; }