Files
edx-platform/lms/static/sass/course/wiki/_wiki.scss
Ned Batchelder cccd61ebf3 Make remaining dialogs in wiki accessible.
All the dialogs in the wiki are now accessible to screen readers.

Also, the "Switch to selected version" button did the odd thing of
reloading the page with the new version selected, but inside a dialog.
That is now fixed.

The merge dialog has a warning that looks kind of funky still, but you
can read it, unlike the previous code.

LMS-1337
2013-11-25 16:05:05 -05:00

1079 lines
16 KiB
SCSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
section.wiki {
padding-top: 25px;
.pull-left {
float: left;
}
.pull-right {
float: right;
}
.wiki-wrapper {
@include clearfix;
> header {
height: 33px;
padding: 24px 0 26px;
border-bottom: 1px solid #ccc;
border-radius: 3px 3px 0 0;
background-color: $sidebar-color;
}
}
/*-----------------
Breadcrumbs
-----------------*/
.breadcrumb {
list-style: none;
padding-left: 0;
margin: 0 0 0 40px;
li {
float: left;
margin-right: 10px;
font-size: 0.9em;
a {
float: left;
display: block;
overflow: hidden;
height: 30px;
line-height: 31px;
max-width: 200px;
height: 100%;
text-overflow: ellipsis;
white-space: nowrap;
}
&:after {
content: '';
display: inline;
margin-left: 10px;
color: $base-font-color;
height: 30px;
line-height: 31px;
}
}
}
.dropdown-menu {
display: none;
}
/*-----------------
Global Functions
-----------------*/
.global-functions {
display: block;
width: auto;
margin-right: 20px;
}
.add-article-btn {
@include button(simple, #eee);
margin-left: 25px;
padding: 7px 15px !important;
font-size: 0.72em;
font-weight: 600;
&:hover, &:focus {
text-decoration: none;
}
}
.search-wiki {
margin-top: 3px;
input {
width: 180px;
height: 27px;
padding: 0 15px 0 35px;
background: url(../images/search-icon.png) no-repeat 9px center #f6f6f6;
border: 1px solid #c8c8c8;
border-radius: 14px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12) inset;
font-family: $sans-serif;
font-size: 12px;
outline: none;
@include transition(border-color .1s linear 0s);
&:-webkit-input-placholder {
font-style: italic;
}
&:focus {
border-color: $link-color;
}
}
}
/*-----------------
Article
-----------------*/
.article-wrapper {
}
h1 {
font-weight: bold;
letter-spacing: 0;
}
.main-article {
float: left;
width: flex-grid(9);
padding: 40px 0 40px 40px;
color: $base-font-color;
@include box-sizing(border-box);
}
&.view .main-article {
h2 {
padding-bottom: 8px;
margin-bottom: 22px;
border-bottom: 1px solid $light-gray;
font-size: 1.6em;
font-weight: bold;
color: $base-font-color;
text-transform: none;
letter-spacing: 0;
}
h3 {
margin-top: 40px;
margin-bottom: 20px;
font-weight: bold;
font-size: 1.25em;
}
h4 {
margin: 30px 0 10px;
font-size: 1em;
color: #999;
font-weight: bold;
}
h5 {
margin: 20px 0 10px;
font-size: .8em;
font-weight: bold;
text-transform: uppercase;
}
h6 {
margin: 20px 0 10px;
font-size: .8em;
font-weight: bold;
color: #999;
text-transform: uppercase;
}
ul {
font-size: inherit;
line-height: inherit;
color: inherit;
}
li {
margin-bottom: 15px;
line-height: 1.6em;
}
pre {
padding: 10px;
border: 1px solid #ddd;
background: #f8f8f8;
border-radius: 4px;
font-size: 0.9em;
font-family: Monaco, monospace;
}
.toc {
background-color: $sidebar-color;
padding: 9px;
margin: 10px 0;
border-radius: 5px;
ul {
margin: 0;
}
}
}
/*-----------------
Sidebar
-----------------*/
.article-functions {
float: left;
width: flex-grid(3);
padding: 40px 40px;
@include box-sizing(border-box);
.timestamp{
margin-top: 15px;
padding: 15px 0 0 10px;
border-top: 1px solid $light-gray;
.label {
font-size: 0.7em;
color: #aaa;
text-transform: uppercase;
}
.date {
font-size: 0.9em;
}
}
.see-children {
padding: 15px 0 0;
border-top: 1px solid $light-gray;
margin-top: 15px;
a {
display: block;
padding: 2px 4px 2px 10px;
border-radius: 3px;
font-size: 0.9em;
line-height: 25px;
&:hover, &:focus {
background-color: #f6f6f6;
text-decoration: none;
}
}
}
}
.nav-tabs {
list-style: none;
padding: 0;
margin: 0;
li {
&.active {
a {
color: $link-color;
font-weight: bold;
.icon-view,
.icon-home {
background-position: -25px 0;
}
.icon-edit {
background-position: -25px -25px;
}
.icon-changes,
.icon-time {
background-position: -25px -49px;
}
.icon-attachments,
.icon-file {
background-position: -25px -73px;
}
.icon-settings {
background-position: -25px -99px;
}
&:hover, &:focus {
background: none;
}
}
}
}
a {
display: block;
padding: 2px 4px;
border-radius: 3px;
font-size: 0.9em;
line-height: 25px;
color: #8f8f8f;
.icon {
float: left;
display: block;
width: 25px;
height: 25px;
margin-right: 3px;
background: url(../images/wiki-icons.png) no-repeat;
}
.icon-view,
.icon-home {
background-position: 0 0;
}
.icon-edit {
background-position: 0 -25px;
}
.icon-changes,
.icon-time {
background-position: 0 -49px;
}
.icon-attachments,
.icon-file {
background-position: 0 -73px;
}
.icon-settings {
background-position: 0 -99px;
}
&:hover, &:focus {
background-color: #f6f6f6;
text-decoration: none;
}
}
}
/*-----------------
Edit
-----------------*/
label {
font-family: $sans-serif;
font-size: 0.9em;
font-weight: bold;
font-style: normal;
text-transform: uppercase;
color: #aaa;
}
input {
font-family: $sans-serif;
font-style: normal;
font-weight: normal;
}
#id_title,
#id_content {
width: 100%;
}
#id_content,
.CodeMirror {
font-family: $monospace;
font-size: 0.8em;
line-height: 1.4em;
}
#div_id_content {
position: relative;
}
#hint_id_content {
position: absolute;
top: 10px;
right: 0%;
font-size: 12px;
text-align:right;
}
.CodeMirror {
background: #fafafa;
border: 1px solid #c8c8c8;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.6), inset 0 0 3px 0 rgba(0, 0, 0, 0.1);
}
.CodeMirror-scroll {
padding: 7px;
}
.schematic_container {
position: relative;
canvas {
box-shadow: 0 0 1px 1px rgba(0, 0, 0, .1), 0 1px 6px rgba(0, 0, 0, .2);
}
&:before {
content: 'click to edit schematic';
position: absolute;
top: 10px;
left: 7px;
z-index: 9999;
font-family: $sans-serif;
font-size: 0.75em;
color: #aaa;
pointer-events: none;
}
}
.markItUpContainer {
margin-right: 0;
}
.control-group {
margin-bottom: 20px;
}
#hint_id_summary {
display: inline-block;
font-size: 0.9em;
line-height: 32px;
margin-left: 15px;
}
.asteriskField {
display: none;
}
button {
font-family: $sans-serif;
}
.btn {
@include button(simple, #eee);
font-size: 0.8em;
margin-right: 5px;
line-height: 1.2em;
text-transform: none !important;
letter-spacing: 0 !important;
&:hover, &:focus {
color: $base-font-color;
text-decoration: none;
}
&.btn-primary {
@include button;
font-size: 0.8em;
}
&.btn-danger {
@include button(simple, $pink);
font-size: 0.8em;
}
&.btn-info {
@include button(simple, #ccc);
font-size: 0.8em;
}
}
a.btn {
padding: 7px 18px 8px !important;
}
.modal {
width: 960px;
z-index: 9999;
min-height: 500px;
margin-left: -480px;
top: 150px;
&.upload-modal,
&.search-file-modal {
width: 400px;
min-height: 0;
margin-left: -200px;
h4 {
margin-bottom: 20px;
font-weight: bold;
}
.help-block {
font-size: 0.8em;
}
}
&.search-file-modal {
width: 500px;
margin-left: -250px;
p {
font-size: 0.8em;
line-height: 1.4em;
}
.form-search {
margin: 30px 0 15px;
input {
width: 350px;
}
button {
height: 35px;
}
}
}
.modal-header {
border: 1px solid $danger-red;
padding: ($baseline/2) ($baseline/2) 0 ($baseline/2);
margin-bottom: ($baseline/2);
h1, p {
color: $base-font-color;
}
h1 {
margin: 3px 12px 8px;
font-size: 1.1em;
}
p {
font-size: 0.9em;
margin: 5px 12px 20px;
line-height: 1em;
}
}
.modal-body {
padding-bottom: 8px;
}
iframe {
width: 100%;
min-height: 450px;
border: 0;
}
.modal-footer {
margin: 12px;
}
.modal-footer .btn {
margin-right: 10px;
}
}
.modal-inner-wrapper {
background: #fff;
padding: 20px;
}
#previewWindow body {
background: #f00 !important;
}
#cheatsheetLink {
text-align: right;
display: float;
}
#cheatsheetModal {
width: 972px;
.left-column {
margin-right: 10px;
}
.left-column,
.right-column {
float: left;
width: 450px;
}
}
#cheatsheet-body {
background: #fff;
text-align: left;
padding: 20px;
font-size: 14px;
@include clearfix;
h3 {
font-weight: bold;
}
ul {
list-style: circle;
line-height: 1.4;
color: #333;
}
}
#cheatsheet-body section + section {
margin-top: 40px;
}
#cheatsheet-body pre{
color: #000;
text-align: left;
background: #eee;
padding: 10px;
font-size: 12px;
}
/*-----------------
Changes
-----------------*/
&.history {
.accordion {
margin-bottom: 15px;
padding: 15px;
border: 1px solid $light-gray;
background: #f9f9f9;
border-radius: 5px;
a:hover, a:focus {
text-decoration: none;
}
}
}
.accordion small {
font-size: 0.8em;
color: #aaa;
}
.accordion-toggle div {
margin-top: 8px;
}
.collapse {
display: none;
&.in {
display: block;
}
}
.diff-container {
overflow-x: scroll;
table {
min-width: 100%;
}
th {
font-family: $sans-serif;
font-size: 0.7em;
}
td {
font-family: $monospace;
}
.linenumber,
.data {
font-size: 0.75em;
}
}
/*-----------------
Settings
-----------------*/
#settings_form {
.well {
margin-bottom: 15px;
@include clearfix;
}
.control-group {
float: left;
margin-bottom: 0;
clear: both;
}
label {
margin-left: 15px;
}
.controls {
padding-top: 4px;
}
label,
.controls {
float: right;
}
}
/*-----------------
New
-----------------*/
.new-article {
margin: auto;
float: none;
.add-on {
line-height: 34px;
margin-right: 6px;
}
}
#hint_id_slug {
display: inline-block;
font-size: 0.9em;
line-height: 1.3em;
margin-top: 9px;
}
.error {
font-size: 1em;
color: $pink;
.help-block {
margin-top: 10px;
}
input {
border-color: $pink;
}
}
.back {
float: right;
}
/*-----------------
Directory
-----------------*/
.directory-toolbar {
background-color: $sidebar-color;
padding: 9px;
margin: 0 -9px 20px;
border-radius: 5px;
.well-small {
@include clearfix;
a {
@include inline-block;
}
}
+ p {
font-size: 0.9em;
color: #aaa;
}
}
.filter-clear {
margin-right: 10px;
margin-top: 10px;
font-size: .9em;
a {
color: #aaa;
&:hover, &:focus {
color: #777;
}
}
}
.table.table-striped {
width: 100%;
margin-top: 20px;
th, td {
border-bottom: 1px solid $light-gray;
padding: 8px;
overflow: hidden;
}
a.list-children {
margin-left: 3px;
}
tr:nth-child(even) {
background: #F6F6F6;
}
}
/*-----------------
Attachments
-----------------*/
.attachment-options {
height: 40px;
margin: 40px 0 30px;
}
.attachment-list {
ul {
list-style: none;
padding: 0;
}
li {
margin-bottom: 15px;
border: 1px solid #DDD;
background: #F9F9F9;
border-radius: 5px;
}
header,
.attachment-details {
padding: 12px 15px;
}
.attachment-details {
background: #eee;
border-radius: 0 0 5px 5px;
}
h3 {
a {
font-weight: bold;
font-size: 0.9em;
}
.badge {
float: right;
font-size: 0.6em;
line-height: 20px;
color: #aaa;
}
}
.attachment-description {
font-size: 0.8em;
}
table {
width: 100%;
font-size: 0.8em;
}
.attachment-actions {
width: 175px;
}
.attachment-actions .btn {
float: right;
}
}
/*-----------------
Delete
-----------------*/
#div_id_confirm {
position: relative;
height: 30px;
margin: 40px 0;
#id_confirm {
position: absolute;
top: 6px;
}
label {
position: absolute;
left: 25px;
font-size: 1.4em;
}
}
section.delete {
padding: 40px;
}
/*-----------------
Alerts
-----------------*/
.alert {
position: relative;
margin: 24px 40px;
padding: 8px 12px;
border: 1px solid #EBE8BF;
border-radius: 3px;
background: $yellow;
font-size: 0.9em;
.close {
position: absolute;
right: 12px;
font-size: 1.3em;
top: 6px;
color: #999;
text-decoration: none;
}
}
.main-article .alert {
margin: 0 0 24px;
}
.missing {
max-width: 400px;
margin: lh(2) auto;
display: block;
overflow: hidden;
background: $pink;
padding: lh();
box-shadow: inset 0 0 0 1px lighten($pink, 10%);
border: 1px solid darken($pink, 15%);
p {
color: #fff;
a {
display: block;
background: darken($pink, 8%);
margin: lh() (-(lh())) (-(lh()));
padding: lh();
border-top: 1px solid darken($pink, 15%);
color: #fff;
font-weight: bold;
font-size: em(18);
@include transition(none);
text-align: center;
-webkit-font-smoothing: antialiased;
&:hover, &:focus {
background: darken($pink, 12%);
}
}
}
}
}
.modal-backdrop {
position: fixed;
top: 0;
left: 0;
z-index: 999;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, .4);
}
.modal-preview {
min-width: 0;
}
.modal-preview .container {
padding: 50px;
}
.modal-preview .main-article {
width: 100% !important;
margin-left: 0;
}
#circuit_editor_modal.modal {
width: 648px;
z-index: 9999;
margin-left: -325px;
top: 150px;
.modal-header {
h1, p {
color: #fff;
}
h1 {
margin: 3px 12px 8px;
font-size: 1.1em;
}
p {
font-size: 0.9em;
margin: 5px 12px 20px;
line-height: 1em;
}
}
.modal-body {
padding-bottom: 8px;
}
.modal-footer {
margin: 12px;
}
.modal-footer .btn {
@include button(simple, #eee);
font-size: 0.8em;
margin-right: 5px;
line-height: 1.2em;
text-transform: none !important;
letter-spacing: 0 !important;
&:hover, &:focus {
color: $base-font-color;
text-decoration: none;
}
&.btn-primary {
@include button;
font-size: 0.8em;
}
margin-right: 10px;
}
}