card 0.0.1 → 1.15.pre

data/mod/03_machines/lib/stylesheets/standard.scss

@@ -0,0 +1,760 @@
+
+/*
+This "standard" CSS provides styles for aspects of wagn sites not usually prioritized by skin designers.
+
+It includes basic styling for:
+
+  1. wagneer interface (sets, settings, rules)
+  2. editor interface (forms, fieldsets, menus, navbox, history)
+  3. views that by definition alter default styling (closed, labeled)
+  4. errors / warnings / notices
+  5. key default content for new installs (home page, sidebar)
+  
+Most colors are greyscale; any that aren't are explained with comments beginning with "NOTGREY"
+
+Note that this CSS is taken from code so that it will be updated automatically with releases.
+If you don't want certain rules, you may (a) override them, or (b) choose not to include this card
+in your skin.  Choosing (b) will mean your CSS will not be affected by automated updates.
+*/
+
+/* -- resets -- */
+
+.card-frame {
+  text-align: left;
+  font-weight: normal;
+  font-style: normal;  
+}
+
+
+/*-------------------- */
+/*- DYNAMIC ELEMENTS - */
+/*-------------------- */
+
+/* -- card menus -- */
+
+.card-menu {
+  font-size: 11px;
+  li {
+    text-align: right;
+    a {
+      color: #333;
+    }
+  }
+  .ui-menu-icon {
+    float: left;
+    margin-right: 5px;
+  }
+}
+.ui-menu .ui-menu-item {
+  padding: 2px 0;
+}
+
+.card-menu-tappable {
+  font-size: 18px;
+  .ui-menu-icon {
+    padding: 7px;
+    display: inline-block;
+    margin-right: 15px;
+    background: #666;
+    border-radius: 3px;
+    -moz-border-radius: 3px;
+    color: #fff;
+    font-size: 10px;
+  }
+  .ui-menu-icon:after {
+    content: '<';
+  }
+}
+ 
+
+/* related view (used by many menu items, such as "referred to by")  */
+
+.related-view > .card-body  {
+ background: #bbb;
+ padding: 5px;
+ > .ALL  {
+   background: #fff;
+   > .card-header {
+     background: #ddd;
+     padding: 5px;
+     color: #000;
+   }
+   > .card-body {
+      padding: 8px 2%;
+   }
+ }
+} 
+
+/* navboxes */
+
+.navbox-item-label {
+  font-size: 10px;
+  width: 50px;
+  padding: 3px 0 3px 5px;
+}
+
+.ui-menu-item {
+  .glyphicon {
+    float: left;
+    font-size: 10px;
+    padding: 3px 0 3px 0px;
+  }
+}
+
+
+
+
+/*-------------------- */
+/*- ONE-LINE VIEWS   - */
+/*-------------------- */
+
+.closed-view {
+  margin: 0;
+  width: 100%;
+}
+.closed-content {
+  table, tbody, tr, th, td, p, h1, h2, h3, h4, h5, h6, ul, li, pre, ol, div, span, a, blockquote, img {
+    font-size: 1em !important;
+    margin: 0 6px 0 0;
+    padding: 0 !important;
+    border:  0 !important;
+  }
+  a {
+    margin: 0;
+  }
+  img {
+    max-height: 1em;
+    width: auto;
+  }
+}
+
+
+.labeled-view {
+  padding: 5px 0;
+  label h1,
+  .pointer-list,
+  .pointer-item,
+  .search-result-list,
+  .search-result-item {
+    font-size: 1em;
+  }
+  > .card-content {
+    padding-left: 10px;
+  }
+}
+
+.labeled-view label,
+a.missing-labeled {
+  display: inline-block;
+  min-width: 30%;
+  text-align: right;
+}
+
+/*-------------------- */
+/*- EDIT INTERFACE   - */
+/*-------------------- */
+
+fieldset {
+  margin: 5px 1px;
+  border: 0;
+  
+  > .button-area {
+    width: 70%;
+    padding: 0 3px;
+    input,
+    button {
+      margin-right: 2%;
+    }
+  }
+    
+  > .editor {
+    width: 70%;
+    padding: 3px;
+    > input {
+      margin-left: 0;
+    }
+  }
+  
+  > legend {
+    text-align:right;
+    width: 25%;
+    padding: 3px;
+    margin: 0;
+    > .instruction {
+      text-align: right;
+      padding: 3px 0;
+    }
+  }
+}
+
+textarea,
+.content-editor > input[type=text],
+.content-editor > input[type=password],
+.name-editor input {
+  width: 97.5%;
+}
+/* width + padding = 99.5%, which leaves 0.5% for the borders.  This is imprecise, but borders can't be specified as a percentage */
+
+textarea {
+  max-height: 500px;
+}
+.name-editor.known-name input {
+  border: 3px solid #c22; /* NOTGREY - red for warning */
+}
+.name-messages {
+  font-style: italic;
+  background: #ffd;  /* NOTGREY - yellow for highlighting */
+}
+
+/* -- template-editor (editing template rule inclusions inline) -- */
+
+.template-editor-main {
+  width: 85%;
+}
+.template-editor-left,
+.template-editor-right {
+  width: 5%;
+  text-align: center;
+  font-size: 3em;
+  line-height: 2em;
+  white-space: nowrap;
+}
+
+
+
+.pointer-list-editor {
+  margin: 0px;
+  padding: 0px;
+  input {
+    margin-right: 10px;
+    width: 65%;
+  }
+  li {
+    list-style: none;
+    white-space: nowrap;
+  }
+  .pointer-item-delete {
+    margin-left: 4px;
+    vertical-align: middle;
+    display: inline-block;
+    position: relative;
+  }
+  
+  .pointer-item-add {
+    margin-top: 10px;
+  }
+  
+  .input-group-addon.handle {
+    padding-left: 1px;
+    padding-right: 1px;
+    
+    .glyphicon-option-vertical.left {
+      margin-right: -7px;
+    }
+    .glyphicon-option-vertical.right {
+      margin-left: -7px;
+    }
+  }
+}
+
+.new-account-link {
+  text-align: center;
+}
+
+/* links to create missing cards */
+
+.missing-view a {
+  color: #999;
+  font-variant: small-caps;
+}
+
+.missing-view a:hover {
+  color: #069;
+  background: #ffc;
+}
+
+/*-------------------- */
+/*- SEARCH & POINTER - */
+/*-------------------- */
+
+.pointer-radio {
+    display: inline-block;
+    width: 100%;
+    .form-control {
+      box-shadow: none;
+    }
+    input {
+        float: left;
+        width: auto;
+        margin: 0;
+    }
+    label {
+        float: left;
+        width: auto;
+        margin: 6px 8px;
+     }
+}
+
+
+div.pointer-list,
+div.search-result-list {
+  list-style: none;
+  padding: 5px 0;
+  margin: 0;
+}
+div.pointer-list .pointer-item,
+div.search-result-list .search-result-item {
+  margin: 0;
+}
+.search-result-item.item-link,
+.pointer-item.item-link,
+.search-result-item.item-name,
+.pointer-item.item-name {
+  text-indent: -15px;
+  padding-left: 15px;
+}
+.radio-option-description,
+.checkbox-option-description {
+  margin-left: 40px;
+}
+
+ul.pointer {
+  margin: 0px;
+  padding: 0px;
+}
+
+/*-------------------- */
+/*- HISTORY          - */
+/*-------------------- */
+
+
+
+$diff-green: #41ad41;
+$diff-red: #ff5050;
+$action-white: #fdfdfd;
+$act-gray:  #b7b7b7;
+$act-background: #f3f3f3;
+
+.history-slot {
+  overflow: hidden;
+  clear: both;
+}
+
+.history-header {
+    padding: 10px 10px 10px 10px;
+}
+.history-legend {
+    text-align: right;
+    float: right;
+}
+.history-header nav.pagination {
+    display: inline;
+    text-align: left;
+}
+
+.act {
+    padding: 10px 10px 10px 10px;
+    background-color: $act-background;
+    margin-bottom: 5px;
+    
+    .head {
+        float: left;
+        margin-right:10px;
+        min-width: 175px;
+    }
+    .nr {
+        float: left;   
+    }
+    .title {
+        float: left;
+        margin-left: 10px;
+    }
+    .actor {
+        float: left;
+    }
+    .time {
+        font-size: 8pt;
+        float:left;
+        clear:left;
+    }
+    
+    .action-container {
+        overflow: hidden;
+    }
+    .action {
+        background-color: $action-white;
+        margin: 5px 5px 2px 2px;
+        padding: 6px 5px 6px 5px;
+        overflow: hidden;
+    }
+    .ampel {
+        margin: 2px 0 0 4px;
+    }
+    .arrow {
+        margin: 0px 10px 0px 10px;
+        color: green;
+    }
+    .toggle {
+        float: right;
+        margin: 12px 10px 0px 10px;
+        width: 20px;
+    }
+
+    .name-diff {
+        border-style: solid;
+        border-width: 1px;
+        border-color: #E4E4E4;
+        padding: 3px 8px 3px 8px;
+        background-color: #EEEEEE;
+        margin-left: 3px;
+    }
+    .type-diff {
+        padding: 1px 0px 1px 3px;
+    }
+    .content-diff {
+        overflow: hidden;
+    }
+
+    .action {
+      .expanded {
+          clear:left;
+          padding: 14px 10px 14px 24px;
+      }
+      .summary {
+          padding: 6px 0px;
+      }
+    }
+    
+    .arrow-down {
+    	width: 0; 
+    	height: 0; 
+    	border-left: 7px solid transparent;
+    	border-right: 7px solid transparent;
+    	border-top: 11px solid $act-gray;
+        display: block;
+    }
+    .arrow-right {
+    	width: 0; 
+    	height: 0; 
+    	border-top: 7px solid transparent;
+    	border-bottom: 7px solid transparent;
+    	border-left: 11px solid $act-gray;
+        display: block;
+    }
+    
+    .info {
+      font-style: italic;
+      color: #888;
+    }
+}
+
+.diff-red {
+  text-decoration: line-through;
+  color: $diff-red;
+}
+.diff-green {
+    color: $diff-green;
+}
+.diff-invisible {
+  color: $action-white;
+}
+
+.diff-green,.diff-invisible{
+  text-decoration: none;
+}
+
+
+
+/*-------------------- */
+/*- ERRORS / NOTICES - */
+/*-------------------- */
+
+/* FIXME - following should be consolidated / simplified */
+
+.exception p {
+  margin: 15px;
+}
+.errors-view {
+  margin: 10px;
+  padding: 10px;
+  border: 3px solid #966;   /* NOTGREY - red for error */
+  background: #ffa;         /* NOTGREY - yellow for highlighting */
+  border-radius: 8px;
+  -moz-border-radius: 8px;
+  border: 1px solid #777;
+  border-bottom: 2px solid #888;
+  border-right: 2px solid #888;
+  color: #333;
+}
+.render-error {
+  background-color: #eaa !important;  /* NOTGREY - red for error */
+  padding: 1px 20px;
+  font-style: italic;
+}
+
+.card-notice {
+  background: #fff;
+  font-weight: bold;
+  font-style: italic;
+  text-align: center;
+  margin: 0 0 4px 0;
+}
+
+
+#credit, /* these are both deprecated */
+.flash-notice {  
+  color: #333;
+  font-size: 1.1em;
+  background: #fff;
+  border: 1px solid #888;
+  margin-bottom: 15px;
+  padding: 5px;
+  text-align: center;
+}
+
+
+.conflict-view {
+  text-align: left;
+  border: 1px solid grey;
+  padding: 10px;
+  margin-top: 12px;
+}
+
+
+/*-------------------------- */
+/*- KEY DEFAULT CONTENT    - */
+/*-------------------------- */
+
+.SELF-home-original.card-content {
+  ul {
+    list-style-type: none;
+    margin: 1em;
+    padding: 0;
+  }
+  li {
+    padding: .8em;
+    margin: 0;
+    background: #eee
+  }
+  li:nth-child(even) {
+    background: #ddd;
+  }
+  h1 {
+    font-size: 1.5em;
+    padding: .6em 0 .3em 0
+  }
+  aside {
+    float: right;
+    border: 1px solid #999;  
+    background: white;
+    width: 33%;
+    padding: 1em;
+    margin: 36px 16px 2px 5px;
+    overflow: auto;
+    border-radius: 18px;
+    -moz-border-radius: 18px;
+    text-align: center;
+    h2 {
+      font-size: .9em;
+    }
+    p {
+      font-size: .8em;
+    }
+  }
+}
+
+
+.SELF-wagneer_menu.card-content {
+  > p {
+    margin-left: 6%;
+    text-indent: -6%;
+  }
+}
+
+
+
+/*-------------------------- */
+/*- SETS, SETTINGS, RULES  - */
+/*-------------------------- */
+
+
+.setting-rules,
+.set-rules {
+  width: 100%;
+}
+.setting-rules th,
+.set-rules th {
+  background: #aaa;
+  color: #eee;
+  padding: 5px 0;
+}
+.setting-rules th,
+.setting-rules td,
+.set-rules th,
+.set-rules td.rule-cell {
+  text-align: left;
+  padding: 2px 5px;
+}
+.set-rules th,
+.set-rules td.rule-cell {
+  border-bottom: 1px solid #eee;
+}
+.setting-klass,
+.rule-setting {
+  font-weight: bold;
+}
+td.rule-setting {
+  width: 30%;
+}
+.rule-set {
+  color: #666;
+  white-space: nowrap;
+}
+.rule-type-field {
+  max-width: 70%;
+  margin-right: 5px;
+}
+.closed-rule {
+  height: 30px;
+  td {
+    vertical-align: middle;
+  }
+  .rule-content {
+    width: 350px;
+  }
+}
+
+.rule-content-container {
+  max-width: 350px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: inherit;
+  background: inherit;
+  white-space: nowrap;
+}
+.rule-content-container {
+  .closed-content,
+  .closed-content .pointer-list,
+  .closed-content .search-list {
+    margin: 0;
+  }
+}
+td.missing-rule {
+  background-color: #eee;
+  border-bottom: 1px solid #fff;
+}
+.rule-setting {
+  padding-top: 4px;
+}
+.open-rule > .rule-setting {
+  width: 28%;
+  float: left;
+}
+.open-rule .card-body {
+  clear: both;
+}
+.open-rule .instruction {
+  float: right;
+  text-align: left;
+  max-width: 68%;
+}
+.edit-rule {
+  .set-editor {
+    ul {
+      list-style-type: none;
+      margin: 0;
+      padding: 0;
+    }
+    .current-set-label {
+      font-weight: bold;
+    }
+  }
+  .edit-button-area {
+    clear: both;
+    padding-top: 5px;
+  }
+}
+.attention {
+  border: 3px solid red;
+}
+.rule-delete-section {
+  float: right;
+}
+.show-rule .rule-set {
+  margin-bottom: 10px;
+}
+.klass-row {
+  background: #eee;
+  border-top: 1px solid #ddd;
+}
+tr.rule-changeover td {
+  border-top: 1px solid #eee;
+  padding-top: 5px;
+}
+td.rule-anchor {
+  padding-left: 30px;
+}
+a.setting-link {
+  font-style: italic;
+  margin-left: 2%;
+  font-weight: normal;
+  color: #000;
+  white-space: nowrap;
+}
+h2.set-label {
+  padding-bottom: 10px;
+}
+
+.TYPE_PLUS_RIGHT-user-Xfollow .tab-pane {
+  margin-top: 15px;
+}
+
+/*------- permissions ------------------*/
+
+.perm-section {
+  margin-bottom: 20px;
+}
+.perm-section h5 {
+  margin: 0 0 10px 0;
+}
+
+/*-------------------------- */
+/*- MISCELLANEOUS          - */
+/*-------------------------- */
+
+.ui-menu-icons .ui-menu-item a {
+	padding-left: 0;
+}
+
+.ui-icon {
+  background-image: url([[/assets/smoothness/ui-icons_454545_256x240.png]])
+}
+
+.instruction {
+  text-align: center;
+  padding: 4px 10px;
+  ol,
+  ul {
+    text-align: left;
+  }
+}
+
+table.show-cache td {
+  padding: 10px;
+  border: 1px solid grey;
+}
+
+/* note said this is o non-ie browsers do better with image floats.  looks over-specified.
+html>body .open-view {
+  width: auto;  
+}
+*/
+
+/* the following classes are here because they're scheduled for deprecation */
+.faint {
+  color: #bbc;
+}
+.VIEW-type {
+  font-style: italic;
+  font-size: .85em;
+}