Mercurial > dottes
view web/css/dottes.css @ 936:037724386f8a build-default-342
And dial back on the exclamation marks.
author | Jim Hague <jim.hague@acm.org> |
---|---|
date | Sun, 04 Aug 2019 15:10:53 +0100 (2019-08-04) |
parents | be87f9a027f1 |
children | a774b3b3cad7 |
line wrap: on
line source
html { font-size: 100%; } body { background-color: #9900cc; background-image: url('../img/purple-fabric-background.jpg'); color: #000000; height: auto; font-family: 'Open Sans', sans-serif; } h1 { background: white; text-align: center; font-weight: bold; } p { background: white; } div.banner, div.dottes-body { background-color: black; -webkit-border-top-left-radius: 5px; -webkit-border-top-right-radius: 5px; -moz-border-radius-topleft: 5px; -moz-border-radius-topright: 5px; border-top-left-radius: 5px; border-top-right-radius: 5px; -webkit-border-bottom-left-radius: 5px; -webkit-border-bottom-right-radius: 5px; -moz-border-radius-bottomleft: 5px; -moz-border-radius-bottomright: 5px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px; padding: 10px; max-width: 1300px; margin-left: auto; margin-right: auto; } div.banner { background-color: black; } div.banner img { width: 100%; max-width: 960; max-height: 136px; display: block; margin-left: auto; margin-right: auto; } div.banner h1 { display: none; text-align: left; font-weight: bold; color: #ffffff; font-family: 'Pirata One', sans-serif; padding: 10px; } div.dottes-body { background-color: white; margin-top: 5px; margin-bottom: 5px; } div.dottes-body h1 { text-align: left; } div.dottes-transpose-container { border: 2px solid grey; } div.dottes-transpose-instrument { display: table; width: 100%; } div.dottes-transpose-instrument-item { display: table-cell; vertical-align: middle; padding: 5px; } div.dottes-transpose-instrument-name { width: 15%; } div.dottes-transpose-instrument-how { width: 55%; text-align: left; } div.dottes-transpose-tune-types { width: 30%; text-align: center; } div.dottes-tune-display { } div.dottes-tune-header { display: table; width: 100%; } div.dottes-tune-header-parts-column { display: table-column; width: 25%; } div.dottes-tune-header-title-column { display: table-column; width: 50%; } div.dottes-tune-header-last-column { display: table-column; width: 25%; } div.dottes-tune-header-row { display: table-row; } div.dottes-tune-header-parts { display: table-cell; vertical-align: middle; } div.dottes-tune-header-parts p { vertical-align: middle; } div.dottes-tune-header-title { display: table-cell; } div.dottes-tune-header-title h1 { font-weight: bold; text-align: center; margin: 0px; } div.dottes-tune-header-title h2 { font-weight: normal; text-align: center; margin: 0px; } div.dottes-tune-header-title h3 { font-style: italic; text-align: center; margin: 0px; } div.dottes-tune-header-composer { display: table-cell; text-align: right; } div.dottes-tune-footer { display: table; width: 100%; } div.dottes-tune-footer-links-column { display: table-column; width: 25%; } div.dottes-tune-footer-play-column { display: table-column; width: 50%; } div.dottes-tune-footer-last-column { display: table-column; width: 25%; } div.dottes-tune-footer-row { display: table-row; } div.dottes-tune-footer-links { display: table-cell; vertical-align: middle; } div.dottes-tune-footer-play { display: table-cell; text-align: center; vertical-align: middle; } div.dottes-tune-footer-last { display: table-cell; text-align: right; vertical-align: middle; } div.dottes-tune-footer-prev { display: table-cell; vertical-align: middle; } div.dottes-tune-footer-booke { display: table-cell; text-align: center; vertical-align: middle; } div.dottes-tune-footer-next { display: table-cell; text-align: right; vertical-align: middle; } div.dottes-tune-learner { display: table; width: 100%; } div.dottes-tune-learner-speed-column { display: table-column; width: 25%; } div.dottes-tune-learner-play-column { display: table-column; width: 50%; } div.dottes-tune-learner-download-column { display: table-column; width: 25%; } div.dottes-tune-learner-row { display: table-row; } div.dottes-tune-learner-speed { display: table-cell; } div.dottes-tune-learner-play { display: table-cell; text-align: center; } div.dottes-tune-learner-download { display: table-cell; text-align: right; } div.dottes-tune-footer-learner { display: table; width: 100%; } div.dottes-tune-footer-learner-prev-column { display: table-column; width: 25%; } div.dottes-tune-footer-learner-booke-column { display: table-column; width: 50%; } div.dottes-tune-footer-learner-next-column { display: table-column; width: 25%; } div.dottes-tune-footer-learner-row { display: table-row; } div.dottes-tune-footer-learner-prev { display: table-cell; vertical-align: middle; } div.dottes-tune-footer-learner-booke { display: table-cell; text-align: center; vertical-align: middle; } div.dottes-tune-footer-learner-next { display: table-cell; text-align: right; vertical-align: middle; } a.dottes-tune-icon-link { text-decoration: none; } a.dottes-tune-icon-link img { vertical-align: middle; } ul.tune-type-list { list-style-type: none; margin: 0; } ul.tune-type-list li { display: inline-block; } img.dottes-png { display: block; width: 100%; /* Make image fill width */ margin-top: 10px; margin-bottom: 10px; } ul.tune-data-list { list-style-type: none; margin: 0px; padding: 0px; } ul.tune-data-list li { display: inline; margin-left: 0; margin-right: 5px; } div.dottes-tune-list { display: table; margin: 10px; } div.dottes-tune-list-item { display: table-row; } div.dottes-tune-list-link-column { display: table-column; width: 20%; } div.dottes-tune-list-learner-link-column { display: table-column; } div.dottes-tune-list-image-column { display: table-column; width: 75%; } div.dottes-tune-list-item-link { display: table-cell; vertical-align: middle; } div.dottes-tune-list-item-learner-link { display: table-cell; vertical-align: middle; padding: 2px; } div.dottes-tune-list-item-learner-link img { max-width: 25px; min-width: 10px; } div.dottes-tune-list-item-image { display: table-cell; vertical-align: middle; } img.dottes-tune-table-image { width: 100%; } div.dottes-notes-no { display: none; } div.dottes-notes-yes { } div.dottes-history-no { display: none; } div.dottes-history-yes { margin-top: 20px } @media only screen and (max-width: 480px) { html { font-size: 62.5%; } div.dottes-transpose-instrument-item { display: table-row; vertical-align: middle; text-align: center; padding: 0px; margin: 0px; } div.dottes-transpose-instrument-item h1, div.dottes-transpose-instrument-item p, div.dottes-transpose-instrument-item ul { text-align: center; margin: 0px; padding: 0px; } div.dottes-tune-footer { } div.dottes-tune-footer-links-column { } div.dottes-tune-footer-play-column { } div.dottes-tune-footer-last-column { } div.dottes-tune-footer-row { display: table; width: 100%; } div.dottes-tune-footer-links { display: table-row; text-align: center; vertical-align: middle; } div.dottes-tune-footer-play { display: table-row; text-align: center; vertical-align: middle; } div.dottes-tune-footer-last { display: table-row; text-align: center; vertical-align: middle; } div.dottes-tune-footer-prev { display: table-row; text-align: center; vertical-align: middle; } div.dottes-tune-footer-booke { display: table-row; text-align: center; vertical-align: middle; } div.dottes-tune-footer-next { display: table-row; text-align: center; vertical-align: middle; } div.dottes-tune-learner { } div.dottes-tune-learner-speed-column { } div.dottes-tune-learner-play-column { } div.dottes-tune-learner-download-column { } div.dottes-tune-learner-row { display: table; width: 100%; } div.dottes-tune-learner-speed { display: table-row; text-align: center; } div.dottes-tune-learner-play { display: table-row; text-align: center; } div.dottes-tune-learner-download { display: table-row; text-align: center; } div.dottes-tune-footer-learner { } div.dottes-tune-footer-learner-prev-column { } div.dottes-tune-footer-learner-booke-column { } div.dottes-tune-footer-learner-next-column { } div.dottes-tune-footer-learner-row { display: table; width: 100%; } div.dottes-tune-footer-learner-prev { display: table-row; text-align: center; vertical-align: middle; } div.dottes-tune-footer-learner-booke { display: table-row; text-align: center; vertical-align: middle; } div.dottes-tune-footer-learner-next { display: table-row; text-align: center; vertical-align: middle; } } /* * Stock Android browser needs this to force reconsideration of max-width * on an orientation change. Still doesn't help Android Chrome. */ @media screen and (orientation: landscape){ .doesnt-exist { background:red; } }