浏览代码

FIxed theme and added custom settings buttons

Eiyeron 10 年之前
父节点
当前提交
6eb273cbb1
共有 1 个文件被更改,包括 215 次插入203 次删除
  1. 215 203
      app/www/data/themes/omnimaga/style.css

+ 215 - 203
app/www/data/themes/omnimaga/style.css

@@ -1,88 +1,84 @@
 html,body{
-        width: 100%;
-        height: 100%;
-        padding: 0;
-        margin: 0;
-        overflow: hidden;
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    margin: 0;
+    overflow: hidden;
 }
 .unselectable{
-        cursor: default;
-        display: block;
-        margin: auto;
-        margin-bottom: 1em;
-        vertical-align: middle;
-        text-align: center;
+    cursor: default;
+    display: block;
+    margin: auto;
+    margin-bottom: 1em;
+    vertical-align: middle;
+    text-align: center;
 }
 .fill{
-        width: 100%;
-        height: 100%;
+    width: 100%;
+    height: 100%;
 }
 .row{
-        display: table-row;
+    display: table-row;
 }
 .cell{
-        display: table-cell;
+    display: table-cell;
 }
 .date_cell{
-        word-wrap: normal;
-        white-space: pre;
-        word-break: keep-all;
+    word-wrap: normal;
+    white-space: pre;
+    word-break: keep-all;
 }
 .unselectable,#tabs-list div.tab{
-        -webkit-touch-callout: none;
-        -webkit-user-select: none;
-        -khtml-user-select: none;
-        -moz-user-select: none;
-        -ms-user-select: none;
-        user-select: none;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
 }
 .close-button{
-        float: right;
-        font-weight: bold;
-        font-size: 24px;
-        margin-top: -5px;
-        font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
-        line-height: 17px;
-        margin-top: 0;
-        display: block;
-        cursor: pointer;
+    float: right;
+    font-weight: bold;
+    font-size: 24px;
+    margin-top: -5px;
+    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
+    line-height: 17px;
+    margin-top: 0;
+    display: block;
+    cursor: pointer;
 }
 .close-button:hover{
-        color: red;
+    color: red;
 }
 #head{
-        right: 0;
-        top: 0;
-        width: 100%;
-        height: 40px;
-        border-bottom-style: solid;
-        background-color: white;
-        transition: height 0.3s;
-        z-index: 10;
+    right: 0;
+    top: 0;
+    width: 100%;
+    height: 40px;
+    border-bottom-style: solid;
+    background-color: white;
+    transition: height 0.3s;
+    z-index: 10;
     font-size: 10px;
     font-family:verdana,sans-serif;
     background-color: #DFEFFF;
 }
 #info{
-        display: table;
-        width: 100%;
+    display: table;
+    width: 100%;
 }
 #title{
-        display: table-cell;
+    display: table-cell;
 }
 #topic{
-        display: table-cell;
-        text-align: right;
-}
-<<<<<<< HEAD
-#content{
-=======
-#content,#console-log{
->>>>>>> 602ebd94f77c751ea4ecdee3da8b46a2f06b66f9
-        width: 100%;
-        height: calc(100% - 61px);
-        top: 41px;
-        left: 0;
+    display: table-cell;
+    text-align: right;
+}
+#console-log, #content{
+    width: 100%;
+    height: calc(100% - 61px);
+    top: 41px;
+    left: 0;
     font-size: 10px;
     font-family:verdana,sans-serif;
     line-height:13px;
@@ -92,240 +88,256 @@ html,body{
     background-color: #cae4ff;
 }
 #content-list a, #content-list a:hover, #content-list a:active , #content-list a:active, #content-list a:link {
-        color:blue;
-        text-decoration: none;
-        border-bottom: 1px solid rgba(0, 0, 255, 0.3);
+    color:blue;
+    text-decoration: none;
+    border-bottom: 1px solid rgba(0, 0, 255, 0.3);
 
 }
 #content-list a:hover {
-        text-decoration: none;
-        text-shadow: 0 0 4px rgba(0, 40, 170, 0.5);
+    text-decoration: none;
+    text-shadow: 0 0 4px rgba(0, 40, 170, 0.5);
 }
 
-<<<<<<< HEAD
-=======
 #console-log{
     font-size: 14px;
-        display: none;
+    display: none;
 }
 #console-log-pre{
-        height: 100%;
-        margin: 0;
-        padding: 2px;
+    height: 100%;
+    margin: 0;
+    padding: 2px;
 }
 #console-log-controls{
-        position: absolute;
-        bottom: 22px;
-        width: 100%;
-        overflow: hidden;
+    position: absolute;
+    bottom: 22px;
+    width: 100%;
+    overflow: hidden;
 }
 
->>>>>>> 602ebd94f77c751ea4ecdee3da8b46a2f06b66f9
 #settings,#users{
-        font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
-        font-size: 12px;
-        bottom: 0;
-        height: 19px;
-        background-color: white;
-        border-left-style: solid;
-        border-top-style: solid;
-        margin-top: -1px;
-        transition: width 0.5s, height 0.5s, right 0.5s;
+    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
+    font-size: 12px;
+    bottom: 0;
+    height: 19px;
+    background-color: white;
+    border-left-style: solid;
+    border-top-style: solid;
+    margin-top: -1px;
+    transition: width 0.5s, height 0.5s, right 0.5s;
 }
 #settings span,#users span{
-        cursor: pointer;
+    cursor: pointer;
 }
-<<<<<<< HEAD
-=======
 #settings.open span,#users.open.span{
-        cursor: default;
+    cursor: default;
 }
 #settings.open span.close-button,#users.open span.close-button{
-        cursor: pointer;
+    cursor: pointer;
 }
->>>>>>> 602ebd94f77c751ea4ecdee3da8b46a2f06b66f9
 #users{
-        right: 0;
-        width: 36px;
-        z-index: 1;
-        background-color: #cae4ff;
+    right: 0;
+    width: 36px;
+    z-index: 1;
+    background-color: #cae4ff;
 }
 #settings{
-        width: 50px;
+    width: 50px;
     border-top-color: rgba(102, 153, 255, 0.6);
-        border-right-style: solid;
-        right: 36px;
-        background-color: #cae4ff;
+    border-right-style: solid;
+    right: 36px;
+    background-color: #cae4ff;
 
 }
+#settings .cell {
+    vertical-align: middle;
+}
 #settings.hovered,#users.hovered{
-        height: 21px;
+    height: 21px;
 }
 #settings.open,#users.open{
-        width: 150px;
-        height: 100%;
-        right: 0;
-        z-index: 20;
+    width: 150px;
+    height: 100%;
+    right: 0;
+    z-index: 20;
 }
 #settings.open{
-        width: 300px;
+    width: 300px;
 }
 
 #settings input, #settings select {
-        background-color: #DFEFFF;
-        border-radius: 2px;
-        border: solid 1px rgba(102, 153, 255, 0.9);
+    background-color: #DFEFFF;
+    border-radius: 2px;
+    border: solid 1px rgba(102, 153, 255, 0.9);
+}
+
+#settings button {
+    -webkit-appearance:none;
+    appearance:none;
+    background-color: #cae4ff;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 15px 10px -12px rgba(255,255,255,0.1);
+    border-radius: 2px;
+    border: solid 1px rgba(102, 153, 255, 0.9);
+}
 
+#settings input[type="checkbox"] {
+    -webkit-appearance:none;
+    appearance:none;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 15px 10px -12px rgba(255,255,255,0.1);
+    border-color: rgba(102, 153, 255, 0.6);
+    border-right-style: solid;
+    background-color: #DFEFFF;
 }
+#settings input[type="checkbox"]:checked {
+    content: '\2714';
+    box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 15px 10px -12px rgba(255,255,255,0.1);
+    background-color: #cae4ff;
+}
+#settings input[type="checkbox"]:after {
+    content: '\2714';
+    font-size: 14px;
+    color: rgba(0,0,0,0);
+}
+#settings input[type="checkbox"]:checked:after {
+    color: #99a1a7;
+}
+
 #entry{
-        width: 100%;
-        border-top-style: solid;
-        height: 19px;
-        bottom: 0;
+    width: 100%;
+    border-top-style: solid;
+    height: 19px;
+    bottom: 0;
 
 }
 #input{
-        width: calc(100% - 126px);
-        height: 17px;
-        margin: 0;
-        padding: 1px;
-        border-style: none;
-        clear: none;
-        bottom: 0;
-        left: 0;
-        background-color: #cae4ff;
+    width: calc(100% - 126px);
+    height: 17px;
+    margin: 0;
+    padding: 1px;
+    border-style: none;
+    clear: none;
+    bottom: 0;
+    left: 0;
+    background-color: #cae4ff;
 }
 #send{
 
-        clear: none;
-        bottom: 0;
-        right: 88px;
-        width: 48px;
-        padding: 0;
-        padding-bottom: 4px;
-        margin: 0;
-        height: 19px;
-        border-style: none;
-        border-left: 1px solid;
-        background-color: #cae4ff;
-        transition: background-color 0.2s;
-        font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
-        font-size: 12px;
-        vertical-align: top;
-        text-align: center;
+    clear: none;
+    bottom: 0;
+    right: 88px;
+    width: 48px;
+    padding: 0;
+    padding-bottom: 4px;
+    margin: 0;
+    height: 19px;
+    border-style: none;
+    border-left: 1px solid;
+    background-color: #cae4ff;
+    transition: background-color 0.2s;
+    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
+    font-size: 12px;
+    vertical-align: top;
+    text-align: center;
 }
 #send:hover{
-        background-color: #DFEFFF;
+    background-color: #DFEFFF;
 }
 #send.clicked{
-        background-color: rgba(102, 153, 255, 0.9);
+    background-color: rgba(102, 153, 255, 0.9);
 }
 #popup-title, #send {
-        font-variant: small-caps;
+    font-variant: small-caps;
 }
 
-<<<<<<< HEAD
-#content,#head,#users,#entry,#input,#send,#settings{
-=======
 #console-log,#content,#head,#users,#entry,#input,#send,#settings{
->>>>>>> 602ebd94f77c751ea4ecdee3da8b46a2f06b66f9
-        border-color: rgba(102, 153, 255, 0.6);
-        border-top-color: rgba(102, 153, 255, 0.9);
-        border-width: 1px;
-        position: absolute;
-        overflow: hidden;
-}
-<<<<<<< HEAD
-#content{
-=======
-#console-log,#content{
->>>>>>> 602ebd94f77c751ea4ecdee3da8b46a2f06b66f9
-        overflow-y: scroll;
+    border-color: rgba(102, 153, 255, 0.6);
+    border-top-color: rgba(102, 153, 255, 0.9);
+    border-width: 1px;
+    position: absolute;
+    overflow: hidden;
+}
+#content, #console-log{
+    overflow-y: scroll;
 }
 #users,#input,#send,#settings{
-        position: fixed;
+    position: fixed;
 }
 #content-list,#user-list,#settings-list,#tabs-list{
-        list-style-type: none;
-        margin: 0;
-        padding: 0;
-        overflow-y: auto;
-        word-wrap: break-word;
-        white-space: pre-wrap;
-        word-break: break-all;
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+    overflow-y: auto;
+    word-wrap: break-word;
+    white-space: pre-wrap;
+    word-break: break-all;
 }
 #content-list,#user-list,#tabs-list{
-        width: 100%;
-        height: 100%;
+    width: 100%;
+    height: 100%;
 }
 #content-list,#settings-list{
-        display: table;
-        table-layout: fixed;
+    display: table;
+    table-layout: fixed;
 }
 #settings-list > li{
-        line-height: 4px;
+    line-height: 4px;
 }
 #user-list{
-        font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
-        font-size: 15px;
+    font-family: Arial,Liberation Sans,DejaVu Sans,sans-serif;
+    font-size: 15px;
 }
-<<<<<<< HEAD
 #user-list li:nth-child(even) {
-=======
-#user-list li:nth-child(even){
->>>>>>> 602ebd94f77c751ea4ecdee3da8b46a2f06b66f9
     background-color: #DFEFFF;
     border: solid 1px #6699ff;
     border-left: 0px;
     border-right: 0px;
 }
 #tabs-list{
-        width: calc(100% - 42px);
-        height: 20px;
-        position: absolute;
-        left: 0;
-        top: 20px;
-        overflow: hidden;
+    width: calc(100% - 42px);
+    height: 20px;
+    position: absolute;
+    left: 0;
+    top: 20px;
+    overflow: hidden;
 }
 #tabs-list div.tab{
-        float: left;
-        max-width: 200px;
-        overflow: hidden;
-        position: relative;
+    float: left;
+    max-width: 200px;
+    overflow: hidden;
+    position: relative;
     height: 18px;
     margin-bottom: -1px;
 }
 #tabs-list div.tab.clicked{
     background-color: #cae4ff;
     border: solid 1px #6699ff;
-        border-bottom-width: 0px;
+    border-bottom-width: 0px;
 }
 #tabs-scroll-left{
-        position: absolute;
-        right: 20px;
-        top: 20px;
-        height: 20px;
-        width: 20px;
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    height: 20px;
+    width: 20px;
 }
 #tabs-scroll-right{
-        position: absolute;
-        right: 0;
-        top: 20px;
-        height: 20px;
-        width: 20px;
+    position: absolute;
+    right: 0;
+    top: 20px;
+    height: 20px;
+    width: 20px;
 }
 #tabs-list div.tab, #tabs-scroll-right,#tabs-scroll-left{
-        border-top-right-radius: 3px;
-        border-top-left-radius: 3px;
+    border-top-right-radius: 3px;
+    border-top-left-radius: 3px;
     border: 1px solid rgba(102, 153, 255, 0.3);
     border-top-color: rgba(102, 153, 255, 0.6);
-        border-width: 1px;
-        border-bottom-width: 0px;
-        padding: 0;
-        margin: 0;
-        background-color: white;
-        cursor: pointer;
-        clear: none;
+    border-width: 1px;
+    border-bottom-width: 0px;
+    padding: 0;
+    margin: 0;
+    background-color: white;
+    cursor: pointer;
+    clear: none;
 
     display: block;
     -webkit-box-align: center;
@@ -347,6 +359,6 @@ html,body{
 #tabs-scroll-left.disabled, #tabs-scroll-right.disabled{
     background-color: #cae4ff;
     border: solid 1px #6699ff;
-        border-bottom-width: 0px;
+    border-bottom-width: 0px;
 
 }