/* Do not underline links until hover.
Looks a bit less noisy, AsciiDoctor CSS also does this. */
a {
text-decoration: none;
}
a:hover,
a:focus {
text-decoration: underline;
}
/* No underline in buttons, even on hover/focus -- buttons already show hover/focus */
a.btn:hover,
a.btn:focus,
/* No underline in navbars, it already has styling */
.navbar a:hover,
.navbar a:focus {
text-decoration: none !important;
}
/* Space from navbar to content,
except on main page (no space between navbar and banner). */
.navbar {
margin-bottom: 1em;
}
.navbar.castle-navbar-main-page {
margin-bottom: 0;
}
/* Non-zero margin from h1/etc. to the content above.
Reboot used in Bootstrap 5 sets this to zero, and relies on other things
having bottom margin to distance themselves from h1/etc.
but it's not nice for us, reasons:
- we want space between .book-header, see .../navigation
- we want space between h1/etc. sections and image/video above,
see .../physics, .../viewport_3d
- we want space between h1/etc. sections and tables above,
see https://castle-engine.io/apidoc/html/CastleControl.TCastleControl.html
*/
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
margin-top: .5rem;
}
/* all images, movies responsive */
.media-responsive, img, iframe {
max-width: 100%;
}
/* scale to max-width preserving proportions, even if intrinsic image sizes (width/height on ![]()
) are given.
Note: *Do not* do this for iframe, it would break the height for some reason.
Testcase: https://castle-engine.io/sprite_sheets , with height:auto it would have very small height.
*/
.media-responsive, img {
height: auto;
}
.features-page h1,
.features-page h2,
.features-page h3 {
/* text-align: center; */
border-bottom: thin solid #DDD;
margin-top: 1em;
margin-bottom: 1em;
}
pre {
/* Our must break, otherwise our right sidebar is shifted and looks bad */
white-space: pre-wrap;
/* border makes code blocks stand out better */
border: 1px solid #ccc;
border-radius: 4px;
padding: 0.5em;
}
a.kscript_func_docs {
text-decoration: underline;
}
/* Inline code (that we use often, for API links) clearly stands out --
background with some padding. */
code {
background-color: #f0f0f0;
padding: .1875rem .375rem;
}
/* Exception to above:
do not customize code in AsciiDoctor multi-line code blocks (.highlight). */
.highlight code {
background-color: transparent;
/* no padding, testcase: "RoadScene" on .../viewport_and_scenes_from_code */
padding: 0;
}
/* Fix excessive space after last paragraph in castle-x3d-intro-block */
.castle-x3d-intro-block p:last-child {
margin-bottom: 0;
}
/* Adapted from my pasdoc.css */
table.thin_borders { border-collapse: collapse; }
table.thin_borders td { border: 1pt solid #d3d3d3; padding: 0.3em; }
table.thin_borders th { border: 1pt solid #d3d3d3; padding: 0.3em; }
/* Commented out: we don't depend on AsciiDoctor generated tables right now.
Maybe restore in the future. */
/* AsciiDoctor sets grid-all, treat it just like our thin_borders */
/* table.grid-all { border-collapse: collapse; }
table.grid-all td { border: 1pt solid #d3d3d3; padding: 0.3em; }
table.grid-all th { border: 1pt solid #d3d3d3; padding: 0.3em; } */
/* Makes cells look good, see skin.adoc */
/* p.tableblock { margin: 0; } */
dl.command_line_options_list > dt {
font-family: monospace;
font-weight: bold;
}
/* Leave default font-family for dt, and default font-weight.
Use span with command_line_option class inside dt. */
dl.command_line_options_list_custom > dt {
font-weight: normal;
}
span.command_line_option {
font-family: monospace;
font-weight: bold;
}
/* div.latest_update_description {
margin-left: 3em;
border: 1px solid gray;
padding: 0.5em;
} */
dt { font-weight: bold; }
.castle-page-footer {
font-size: smaller;
}
span.version_number { font-size: small }
.cge-gallery-link {
/* background: #e8d59a; */
/* background: #efdfae; */
border-width: thin;
border-style: solid;
border-radius: 4px;
border-color: #dcdcdc;
text-align: center;
padding: 0.5em;
width: 100%;
margin: 20px 0;
}
.cge-gallery-link img {
border: none;
max-width: 100%; /* force scaling down on narrow window width, for 3-column layout of all_programs.php */
height: auto; /* scale to max-width preserving proportions, even if intrinsic image sizes (width/height on ![]()
) are given */
}
@media only screen and (min-width : 768px) {
.cge-gallery-link {
min-height: 450px;
}
}
/* Small devices (tablets, 768px and up), see http://getbootstrap.com/css/ */
/* @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { */
/* @media (min-width: 768px) and (max-width: 992px) { */
/* .cge-gallery-link { */
/* min-height: 0 !important; */
/* } */
/* } */
.cge-gallery-link-title { font-size: larger; }
a.screenshot img { border: 2pt solid #EEE; }
a.screenshot:hover img { border: 2pt solid #888; }
.table_of_contents a { text-decoration: none; border-bottom: 1px dotted; }
.table_of_contents a:hover { text-decoration: none; border-bottom: 1px solid;
background: #FF8;
}
/*.table_of_contents {
border-top: dotted 1px black;
border-left: dotted 1px black;
border-right: solid 2px black;
border-bottom: solid 2px black;
background: rgb(240,220,170);
padding: 0 0.12in;
margin: 0.5in;
}
*/
.main-subtitle {
font-size: medium;
color: #444;
line-height: 1.5; /* default line-height from , to make this look like */
margin-top: 0;
}
.main-page-thumbnail {
width: 100%;
/* This way image height is also adjusted, to follow image aspect ratio.
And we can still specify img intrinsic size in ![]()
element. */
height: auto;
margin-bottom: 1rem;
}
.main-page-action {
display: inline-block;
width: 100%;
vertical-align: middle;
line-height: 6em;
margin-top: 0.5em;
margin-bottom: 0.5em;
}
.main-page-action.castle-button-middle-actions {
line-height: 2em; /* override height to be smaller */
}
.banner-container {
width: 100%;
margin-bottom: 3em !important;
}
.preview-warning {
margin-left: 2rem;
margin-right: 2rem;
}
a.download_code {
text-decoration: underline;
}
.message_404 {
font-size: large;
text-align: center;
}
.message_404 p {
margin-top: 2em;
margin-bottom: 2em;
}
.docs_improve_hint {
font-style: italic;
}
/* Make long words, like MultiGeneratedTextureCoordinate or MovieTexture.flipVertically,
broken -- good for mobile usability.
See https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Text/Wrapping_Text */
h1, h2, code {
/* word-break makes the "TVector3.PerfectlyEquals(FFoo" in
http://localhost:8777/coding_conventions
broken into 2 lines, to not cause horizontal scroll on mobile */
word-break: break-word;
/* breaking h1 useful for "Chapter 1. Overview of VRML" in
vrml_engine_internals/output/xsl/html-nochunks/vrml_engine.html */
overflow-wrap: break-word;
}
/* main page stuff ----------------------------------------------------------- */
.centered-download-wrapper {
text-align: center;
margin-top: 1em;
}
.centered-download-wrapper .download {
display: inline-block;
}
.centered-download-wrapper .main-cge-download .btn-primary {
padding-left: 1em;
padding-right: 1em;
min-width: 10em; /* makes all icons equal width now */
}
div.main-cge-download {
padding-left: 2em !important;
padding-right: 2em !important;
max-width: 100%; /* otherwise it could want to be wider than viewport on mobile */
}
/* news on main page --------------------------------------------------------- */
.news-row-wrapper {
text-align: center;
margin-top: 1em;
margin-bottom: 1em;
}
.news-row-wrapper .col-sm-3 {
padding-left: 10px;
padding-right: 10px;
}
@media only screen and (max-width : 767px) {
.news-row-wrapper .col-sm-3 {
padding-bottom: 1em;
}
}
.main-page-header {
clear: both;
border-top: thin solid #dcdcdc;
margin-bottom: 2em;
padding-left: 15px;
padding-top: 0.5em;
font-size: larger;
font-weight: bold;
text-align: center;
}
.news-row-wrapper .row {
text-align: left;
}
.news-row-wrapper img.wp-post-image {
display: block;
width: 100%;
height: auto; /* otherwise, the HTML contains an explicit height in pixels of the original image */
}
.news-row-wrapper a {
display: block;
color: black;
border-width: thin;
border-style: solid;
/* border-radius: 4px; */
border-color: #dcdcdc;
/* http://www.cssmatic.com/box-shadow */
-webkit-box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.25);
-moz-box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.25);
box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.25);
}
.news-row-wrapper a:hover,
.news-row-wrapper a:focus {
/* background: #efe; */
text-decoration: none;
-webkit-box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.5);
-moz-box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.5);
box-shadow: 0px 4px 5px 1px rgba(0,0,0,0.5);
}
.news-row-wrapper span.news_title {
color: #337ab7;
font-weight: bold;
text-decoration: none;
}
.news-row-wrapper a:hover span.news_title,
.news-row-wrapper a:focus span.news_title {
color: #409ae7;
}
.news-row-wrapper .news_title_wrapper,
.news-row-wrapper .news_date_wrapper {
padding: 0.25em 0.75em;
}
@media only screen and (min-width : 768px) {
.news-row-wrapper .news_title_wrapper {
/* in usual cases, it will make columns equal height */
min-height: 4em;
}
}
/*
from
https://scotch.io/bar-talk/different-tricks-on-how-to-make-bootstrap-columns-all-the-same-height
@media only screen and (min-width : 768px) {
.news-row-wrapper .row {
display: table;
}
.news-row-wrapper .row [class*="col-"] {
float: none;
display: table-cell;
vertical-align: top;
}
}
*/
/* x3d specification-like table ---------------------------------------------- */
/* Table like X3D specification, used for multi-texturing clarifications
on x3d_implementation_texturing.php */
table.specification { border-collapse:collapse; }
table.specification th {
border-style:groove;
font-weight:bold;
border-width:medium;
padding:8px;
/* white-space:nowrap; */
}
table.specification td {
border-style:groove;
font-weight:normal;
border-width:medium;
padding:8px;
/* white-space:nowrap; */
}
div.sidebar_title {
font-size: medium; font-weight: bold;
margin-bottom: 0.1em;
}
table.nist_test_suite { border-collapse:collapse; border: thin solid #999; }
table.nist_test_suite td { border: thin solid #999; }
table.nist_test_suite th { border: thin solid #999; }
td.pass { background-color:rgb(50%,100%,50%); }
td.fail { background-color:rgb(100%,50%,50%); }
td.invalid { background-color:rgb(75%,75%,75%); }
td.testnr { white-space: nowrap; }
/* index page stuff */
div.main_list_item {
font-family: serif;
font-weight: bolder;
font-size: large;
background: #ddddd0;
padding: 0.1em;
}
dd { margin-left: 2em; }
/* news --------------------------------------------------------------------- */
span.old_news_date { font-weight: bold; }
div.old_news_item { border-bottom: medium groove #555; }
span.news_title { font-weight: bold; text-decoration: underline; }
span.news_date {
color: #767676;
font-size: 1.0rem;
padding-bottom: 0.25em;
}
/* commented, size of this is set by "h2" class */
/* span.news_title { font-size: larger; } */
/* normal underline, with color same as link color
(otherwise, Bootstrap causes a black underline under a blue link) */
span.news_title a { text-decoration: underline; }
/* turn off normal link decoration inside news_title */
span.news_title.only_anchor a {
color: black;
text-decoration: none;
}
span.news_title.only_anchor {
text-decoration: none;
}
/* header ------------------------------------------------------------------- */
.header_breadcrumbs {
color: #222;
padding: 0.4em;
}
.header_breadcrumbs a { color: #5EB2E5; }
.header_breadcrumbs a:hover { color: #39C; }
.patreon-logo {
height: 45px;
margin-top: 5px;
}
/*
Fix paddings when castle-donate-button-form is inside expanded menu,
this happens only for < large screens.
See https://getbootstrap.com/docs/5.0/layout/breakpoints/
*/
@media (max-width: 991.98px) {
.castle-donate-button-form {
padding-left: 0;
padding-bottom: 0.5em;
}
}
/* books (manual and such) ------------------------------------------------- */
.book-header {
width: 100%;
border: thin solid #ffeaa9;
background: #fff4d2;
padding: 0.3em;
}
.book-header .book-previous {
text-align: left;
float: left;
width: 40%;
}
.book-header .book-next {
text-align: right;
float: right;
width: 40%;
}
.book-header .book-title {
margin-left: 40%;
margin-right: 40%;
text-align: center;
font-weight: bold;
}
.footer-table td {
vertical-align: top;
}
/* Others ------------------------------------------------------------------- */
.kscript_func_docs .type { color: blue; }
.xml_highlight_comment { color: #808080; font-style: italic; }
/* div.thumbnails ------------------------------------------------------------ */
div.thumbnails-align-left {
text-align: left;
}
div.thumbnails-align-right {
text-align: right;
}
div.thumbnails-align-center {
text-align: center;
}
div.thumbnails a {
display: inline-block;
}
@media screen and ( min-width: 600px ) {
table.thumbnails {
/* Avoids wide thumbnail column until images load */
max-width: 250px;
}
table.thumbnails-align-right {
/* this is added to work nicely with Flattr images,
that are on some pages (like castle.php) directly above this table
and also aligned to the right. */
clear: right;
float: right;
margin-left: 1rem;
margin-bottom: 1rem;
}
table.thumbnails-align-left {
clear: left;
float: left;
}
}
@media screen and ( max-width: 600px ) {
table.thumbnails {
width: 100%;
margin-bottom: 1rem;
}
table.thumbnails::after {
clear: both;
}
table.thumbnails a.screenshot {
display: block;
margin-left: auto;
margin-right: auto;
width: 210px;
}
table.thumbnails img {
/* images are very small, this looks bad */
/* width: 100%; */
max-width: 100%;
}
}
/* ---------------------------------------------------------------------------
download (but not specific to main page) */
div.download {
display: inline-block;
}
.download_title { font-weight: bold; }
div.download table td { text-align: center;
padding-left: 1em; padding-right: 1em; }
div.download table a { display: block; text-decoration: none; }
div.download table a img { border: 0px none; }
div.download .download_platform {
display: inline-block;
margin: 0.5em;
}
div.download span.download_details { font-size: smaller; }
.centered-download-wrapper .btn-primary {
padding-left: 4em;
padding-right: 4em;
/* margin vertical matters only in case of narrow screen,
when one btn-primary is under another */
margin: 0.1em 0.5em;
}
.download .btn-patreon {
margin-right: auto;
margin-left: auto;
display: block;
/* Use min-width not width, as on narrow mobile it may want to be a big larger */
min-width: 80%;
}
.centered-download-wrapper .btn-primary .download-button-hint {
font-size: x-small;
}
.btn-store-in-downloads {
margin: 0.5em;
}
/* convert stuff ------------------------------------------------------------- */
.single-column-page {
max-width: 60em;
margin-left: auto;
margin-right: auto;
}
.convert-form input[type="file"] {
height: auto !important; /* override Bootstrap */
}
.convert-form label {
font-weight: inherit;
}
.convert-form .output-format-title {
margin-bottom: 0.5em;
}
.convert-form .output-format-radio p {
margin-top: 0;
margin-bottom: 0;
}
.convert-form .output-format-group {
margin-top: 0.5em;
margin-bottom: 0.5em;
padding: 0.5em;
border: 1px solid #DDD;
width: max-content;
margin-left: auto;
margin-right: auto;
}
.convert-form .output-format-group {
margin: 1em 0;
}
.convert-form .convert-patreon,
.convert-form .another {
margin-top: 2em;
}
.convert-form {
margin-bottom: 1em;
}
/* talk page ---------------------------------------------------------------- */
.talk-buttons-row {
text-align: center;
}
.talk-button {
display: inline-block;
width: 300px; /* buttons have hardcoded size, as one of them is Discord iframe, no other way to size it */
height: 300px;
margin-left: 1em;
margin-right: 1em;
margin-bottom: 1em;
margin-top: 1em;
vertical-align: top; /* align iframe with normal buttons vertically OK */
}
.talk-button > p {
margin-top: 75px; /* buttons have hardcoded size, so hardcode margin is OK too */
line-height: 50px;
font-weight: bold;
}
.talk-button > p > img {
width: 100px;
height: 100px;
}
/* features list ------------------------------------------------------------- */
.feature-title {
margin-top: 2em;
font-weight: bold;
text-align: center;
font-size: larger;
}
.feature-image {
width: 100%;
height: auto;
}
/* Mobile view: single column */
@media only screen and (max-width : 767px) {
.feature-row {
border-width: thin;
border-style: solid;
border-radius: 4px;
border-color: #dcdcdc;
-webkit-box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1);
-moz-box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1);
box-shadow: 0px 1px 2px 1px rgba(0,0,0,0.1);
margin-top: 1.5em;
margin-bottom: 1.5em;
}
.feature-title {
margin-top: 0.5em;
}
.feature-description {
padding-bottom: 1em;
padding-left: 1em;
padding-right: 1em;
}
}
/* Desktop view: two columns */
@media only screen and (min-width : 768px) {
.feature-title {
margin-top: 2em;
}
.feature-row {
clear: both;
/* margin-left: 8.33333333%; */ /* like .col-sm-1 in bootstrap */
/* width: 82%; */ /* like 2x .col-sm-5 in bootstrap */
/*
background: #DDD;
display: table-row;
*/
}
.feature-column-image,
.feature-column-text {
width: 50%;
}
.feature-column-text {
padding-right: 2em;
padding-left: 2em;
text-align: center;
}
.feature-row-odd .feature-column-text {
float: left;
}
.feature-row-odd .feature-column-image {
float: right;
}
.feature-row-even .feature-column-text {
float: right;
}
.feature-row-even .feature-column-image {
float: left;
}
}