Difference between revisions of "Common.css"
From DelDOT CADD Wiki
Line 110: | Line 110: | ||
color: white; | color: white; | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
Line 123: | Line 123: | ||
color: white; | color: white; | ||
font-weight: bold; | font-weight: bold; | ||
} | } | ||
Line 133: | Line 133: | ||
left: auto; | left: auto; | ||
padding: 0; | padding: 0; | ||
z-index: auto; | |||
} | } | ||
Line 142: | Line 143: | ||
left: auto; | left: auto; | ||
padding: 0; | padding: 0; | ||
z-index: auto; | |||
} | } | ||
Latest revision as of 14:28, 4 April 2024
/* Adding hook to Font Awesome --------------------------------------------------------------------*/ @import "https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"; /*---------------DCK Edits 11/15/2021---------------*/ /* Table of Contents modifications ---------------------------------------------------------------*/ #toc{ margin: 0; } .toctogglecheckbox:checked ~ ul { display: none; } @media print { .toctogglecheckbox:checked + .toctitle { display: none; } } @media screen { :not(:checked) > .toctogglecheckbox { display: inline !important; position: absolute; opacity: 0; z-index: -1; } .toctogglespan { font-size: 94%; } :not(:checked) > .toctogglespan:before { content: " ["; } :not(:checked) > .toctogglespan:after { content: "]"; } .toctogglelabel { cursor: pointer; color: #0645ad; } .toctogglelabel:hover { text-decoration: underline; } .toctogglecheckbox:focus + .toctitle .toctogglelabel { text-decoration: underline; outline: dotted 1px; outline: auto -webkit-focus-ring-color; } .toctogglecheckbox:checked + .toctitle .toctogglelabel:after { content: "show"; } .toctogglecheckbox:not(:checked) + .toctitle .toctogglelabel:after { content: "hide"; } .toc h2 { display: inline; /*border: 0; padding: 0; font-size: 100%; font-weight: bold;*/ } } .noautonum .tocnumber { display: none; } .cFloat { position: fixed; right: 2em; top: 6em; background-color: #fff; z-index: 1; /*This keeps it above the Circles.*/ max-width: 700px; } .cFloat:not(:hover) { opacity: 0.65; } .cFloat:hover { opacity: 1.0; } @media (min-width:1200px) { .cFloat .toc:not(:hover) { opacity: 0.65; } .cFloat .toc:hover { opacity: 1.0; } } /*This will add scroll bars to the TOC based on the visible height of the window. ----------------*/ /*Figuring out how to get it to only do this when not collapsed was a bear -----------------------*/ @media only screen and (max-height: 800px) { .toctogglecheckbox:not(:checked) ~ ul { display: block; height:70vh; overflow: scroll; } } /*This will create a circle around the item.*/ .justthetip { height: 25px; width: 25px; background-color: #13548e; border-radius: 50%; display: inline-flex; justify-content: center; align-items: center; color: white; font-weight: bold; } .TMI { height: 25px; width: 25px; background-color: #555555; border-radius: 10%; display: inline-flex; justify-content: center; align-items: center; color: white; font-weight: bold; } .tooltip { position: relative; display: inline-block; background: none; width:auto; left: auto; padding: 0; z-index: auto; } .tooltipTMI { position: relative; display: inline-block; background: none; width:auto; left: auto; padding: 0; z-index: auto; } .tooltiptext{ z-index: 1; } .tooltip .tooltiptext { visibility: hidden; width: 300px; /*I don't like that this is static, but I've got bigger fish to fry */ background-color: #13548e; color: #fff; text-align: center; border-radius: 6px; padding: 10px; position: absolute; top: 120%; margin-left: -162px; z-index: 1; } .tooltipTMI .tooltiptext { visibility: hidden; width: 300px; /*I don't like that this is static, but I've got bigger fish to fry */ background-color: #555555; color: #fff; text-align: center; border-radius: 6px; padding: 10px; position: absolute; top: 120%; margin-left: -162px; z-index: 1; } .tooltip .tooltiptext::after { content: ""; position: absolute; bottom: 100%; margin-left: -5px; border-width: 5px 5px 5px 5px; left: 50%; border-style: solid; border-color: transparent transparent #004684 transparent; } /*This is the little triangle */ .tooltipTMI .tooltiptext::after { content: ""; position: absolute; bottom: 100%; margin-left: -5px; border-width: 5px 5px 5px 5px; left: 50%; border-style: solid; border-color: transparent transparent #555555 transparent; } .tooltip:hover .tooltiptext { visibility: visible; /*This causes the tooltip window to be on top of everything else, since it temporary.*/ z-index: 1; } .tooltipTMI:hover .tooltiptext { visibility: visible; /*This causes the tooltip window to be on top of everything else, since it temporary.*/ z-index: 1; } /*---------------DCK Edits 11/15/2021---------------*/ /* CSS placed here will be applied to all skins --------------------------------------------------*/ /* Color values used on this site. ---------------------------------------------------------------*/ /* Black = #000 White = #fff Red = #ff0000 Blue = #2d5296 Orange = #fa6c34 Light Grey = #ededed (Table Background Color) */ /* Sets the width of the content on the Foreground Skin ------------------------------------------*/ .row { max-width: 80%; } /* Navigation Container Settings -----------------------------------------------------------------*/ nav.top-bar, .top-bar.expanded .title-area { background: #2d5296; } #navwrapper { background: #2d5296; } #top-bar-left li, #top-bar-left li a { background: #2d5296; border: 1px solid #2d5296; } #top-bar-right li, #top-bar-right li a { background: #2d5296; } #top-bar-left li:hover, #top-bar-left li a:hover, #top-bar-right li:hover:not(.has-form), #top-bar-right li a:hover { background: #fa6c34; color: #fff; } .page-Main_Page #firstHeading { display: none; } #tagline { display: none; } #editform, #toolbar, #wpTextbox1 { width: 100%; } .top-bar-section .has-dropdown > a:hover:after { border-color: #fa6c34 transparent transparent transparent; } .top-bar-section .has-dropdown > a:hover:after { border-color: #fff transparent transparent transparent; } /* Back to Top Button Settings ------------------------------------------------------------------*/ .noprint { font-family: "Open Sans", sans-serif; font-size: 1.0em; color: #2d5296; background-color: #fff; position: fixed; bottom: 2.0%; left: 0.5%; padding: 0; margin: 0%; } /* Change the body font-family for entire site. -------------------------------------------------*/ body { font-family: "Open Sans", sans-serif; font-size: 1.0em; color: #000; } p { font-family: "Open Sans", sans-serif; font-size: 1.0em; color: #000; margin: 0 0 1.0em 0; line-height: 1.5em; } #p_white { font-family: "Open Sans", sans-serif; font-size: 1.0em; color: #fff; margin: 0 0 1.0em 0; line-height: 1.5em; } .note_black { font-family: "Open Sans", sans-serif; font-size: 1.0em; color: #000; background-color: #E8E8E8; border: 2px solid #000; padding: 1em } .note_green { font-family: "Open Sans", sans-serif; font-size: 1.0em; color: green; background-color: #E8E8E8; border: 2px solid #000; padding: 1em } .note_red { font-family: "Open Sans", sans-serif; font-size: 1.0em; color: red; background-color: #E8E8E8; border: 2px solid #000; padding: 1em } .image_center{ margin: 0; padding: 0; color: #ff0000; text-align: center; } #engineering_scale { width: 45%; float:left; box-sizing: border-box; } #architectural_scale { width: 45%; float:right; box-sizing: border-box; clear: right; } .clear_float { clear: both; } .main_page { border: 1px solid #2d5296; } #welcome_main { color: #ffffff; background-color: #fa6c34; border-left: 20px solid #2d5296; padding: 10px; text-transform: uppercase; } /* Hiding categories at the bottom of each page. -------------------------------------------------*/ .catlinks { display: none; } /* Headers - For Use Inside of MediaWiki Table of Contents ---------------------------------------*/ #firstHeading.title { font-family: "Open Sans", sans-serif; font-size: 2.3em; color: #fff; background-color: #fa6c34; line-height: 1.60em; border-left: 20px solid #2d5296; padding-left: 10px; text-transform: uppercase; } h1 { font-family: "Open Sans", sans-serif; font-size: 2.0em; color: #2d5296; } h2 { font-family: "Open Sans", sans-serif; font-size: 1.8em; color: #2d5296; margin-top: 1.8em; border-bottom: 1px solid #2d5296; } h2.first_on_page { font-family: "Open Sans", sans-serif; font-size: 1.8em; color: #2d5296; margin-top: 1.0em; border-bottom: 1px solid #2d5296; } h3 { font-family: "Open Sans", sans-serif; font-size: 1.2em; color: #2d5296; margin-top: 1.2em; font-weight: bold; /*text-decoration: underline;*/ } h4 { font-family: "Open Sans", sans-serif; font-size: 1.1em; color: #2d5296; } h5 { font-family: "Open Sans", sans-serif; font-size: 1.0em; color: #2d5296; } h6 { font-family: "Open Sans", sans-serif; font-size: 0.9em; color: #2d5296; } /* Header - For use Outside of MediaWiki Table of Contents ---------------------------------------*/ .h1_outtoc { font-family: "Open Sans", sans-serif; font-size: 2.0em; color: #2d5296; } .h2_outtoc { font-family: "Open Sans", sans-serif; font-size: 1.8em; color: #2d5296; margin-top: 1.8em; border-bottom: 1px solid #2d5296; } h2.outtoc_first_on_page { font-family: "Open Sans", sans-serif; font-size: 1.8em; color: #2d5296; margin-top: 1.0em; border-bottom: 1px solid #2d5296; } .h3_outtoc { font-family: "Open Sans", sans-serif; /*font-size: 1.6em;*/ font-size: 1.2em; color: #2d5296; /*border-bottom: 1px solid #2d5296; */ } .h4_outtoc { font-family: "Open Sans", sans-serif; /*font-size: 1.4em;*/ font-size: 1.1em; color: #2d5296; } .h5_outtoc { font-family: "Open Sans", sans-serif; /*font-size: 1.2em;*/ font-size: 1.0em; color: #2d5296; } .h6_outtoc { font-family: "Open Sans", sans-serif; /*font-size: 1.0em;*/ font-size: 0.9em; color: #2d5296; } /* Headers - For Use With Manual Type Wiki Pages -------------------------------------------------*/ h2.manual { font-family: "Open Sans", sans-serif; font-size: 1.8em; color: #2d5296; margin-top: 3.6em; border-bottom: 1px solid #2d5296; } h3.manual { font-family: "Open Sans", sans-serif; font-size: 1.2em; color: #2d5296; margin-top: 2.0em; font-weight: bold; text-decoration: underline; } /* Alerts or Warnings text settings---------------------------------------------------------------*/ .warning_red{ color: #ff0000; font-size: 20px; text-decoration: underline; } /* Class for adding margin-bottom to tags requiring addition bottom offsets, such as <li> --------*/ li.page_content { margin-bottom: 1.25em; } li.page_content_1-1 { margin-bottom: 1.0em; } ul.ul_proper_spacing { margin: 0 0 0 2.0em; } /* CSS for Links ---------------------------------------------------------------------------------*/ /* A link that has not been visited */ a:link { color: blue; } /* A link that has been visited */ a:visited { color: blue; } /* A link that is hovered on */ a:hover { color: red; } /* A link that is selected */ a:active { color: green; } /* Indentation Settings -------------------------------------------------------------------------*/ .tab { margin-left: 25px; } .tab0 { margin-left: 0px; } .tab1 { margin-left: 25px; } .tab2 { margin-left:25px; } .tab3 { margin-left: 25px; } .tab4 { margin-left: 25px; } /* Style the button that is used to open and close the collapsible content -----------------------*/ .collapsible { background-color: #fa6c34; color: #fff; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; } /* Add a background color to the button if it is clicked on --------------------------------------*/ /* Add the .active class with JS, and when you move the mouse over it (hover) --------------------*/ .active, .collapsible:hover { background-color: #ccc; } /* Style the collapsible content. Note: hidden by default */ .content { padding: 0 18px; display: none; overflow: hidden; background-color: #f1f1f1; } /* DelDOT Table Settings -------------------------------------------------------------------------*/ .deldot_table { color: #000; background-color: #ededed; margin: 1em 0; border: 1px solid #2d5296; border-collapse: collapse; } table.deldot_table > * > tr > th, table.deldot_table > * > tr > td { border: 1px solid #2d5296; } table.deldot_table > * > tr > th { color: #fff; background-color: #2d5296; text-align: center; } table.deldot_table * ul { padding: 0; margin: 0; } table.deldot_table * li { padding: 5px 0 ; margin: 0; } table.deldot_table * th, table.deldot_table * td { padding: 10px; } table.deldot_table * ul, table.deldot_table * ol { margin: 0 0 0 30px; }