File: css/style.css

Recommend this page to a friend!
  Classes of Andras Toth   WDE   css/style.css   Download  
File: css/style.css
Role: Auxiliary data
Content type: text/plain
Description: Auxiliary data
Class: WDE
Web based editor for several programming languages
Author: By
Last change: Version 2.0.0

- Removed ACE source from this repo
- Added PHP, Javascript procedures. This Running once at the first
launch.
It is Download and decompress ACE source from GitHub repo.
- Replaced PNG icons to Icon-Fonts
- Util.js modified
- Some invisible modification
Date: 8 years ago
Size: 7,524 bytes
 

Contents

Class file image Download
@import url(http://fonts.googleapis.com/css?family=Source+Code+Pro|Roboto); body { background: #272822; font: 14px/normal source-code-pro, Roboto, Monaco, Menlo, "Ubuntu Mono", Consolas, monospace; height: 100%; overflow: hidden; position: absolute; top: 0; width: 100% } body pre { border: solid #64665f 1px; border-radius: 3px; height: calc(100% - 92px); margin: 0 1px; position: relative; top: 0 } .header, .footer { background: #2f3129; color: #8f908a; display: inline-block; font-size: 20px; font-weight: 700; height: 32px; line-height: 32px; padding: 7px; position: relative; width: calc(100% - 14px); z-index: 9 } .header h3 { width:60px; position: inherit; top: -2px; display: inline-block; float: left; padding-left: 24px; } .header h3 img{ width: 48px; vertical-align: bottom; } .footer { font-weight: 400; padding: 7px } .tab-holder { display: inline-flex; height: 32px; list-style: none; margin: 7px 20px 0; max-width: calc(100% - 350px) } .tab-holder li { border: solid #484A43 1px; border-bottom: 0; border-radius: 3px 3px 0 0; cursor: default; font-size: 14px; font-weight: 100; margin: 0 0 0 5px; overflow: hidden; padding: 0 25px 0 5px; position: relative; text-overflow: ellipsis; transition: background-color .2s, width .2s linear; width: 100px } .tab-holder li:hover { color: #fff } .tab-holder .selected { background: #272822; border-bottom: solid #272822 1px; color: #fff; height: 31px; white-space: nowrap; width: 150px } .add-new:before, .upload-ok::after, .upload-error::after { position: absolute; } .tab-holder .selected::after { position: absolute; color:darkred; font-size: 12px; top: 10px; } .tab-holder .selected:hover::after { color:red; } .upload-ok::after { color: #90EE90; content: "\f1e2"; margin-left: 10px; position: relative; top: 3px } .upload-error::after { color: red; content: "\f11e"; margin-left: 10px; position: relative; top: 3px } .selected::after { color: red; content: "\f1fe"; right: 5px; top: 6px } .tab-holder .add-new { border-radius: 50%; color: #508000; border-color: transparent !important; overflow: visible; width: 20px; padding: 0; } .tab-holder .add-new::before { content: "\f412"; left: 0; top: 5px } .tab-holder .add-new:hover{ color:#90EE90; } .dialog { background: #2f3129; color: #8f908a; height: 50%; left: 25%; min-height: 150px; min-width: 280px; overflow: hidden; padding: 5px; position: absolute; top: 20%; transition: opacity .2s, visibility .2s linear; width: 50%; z-index: 10 } #sql-window { height: 80%; left: 10%; top: 10%; width: 80% } .login { height: 270px; left: calc(50% - 250px); top: calc(50% - 150px); width: 500px } .login input, .login button, .login select { background: #202020; border: solid 2px #2f3129; color: #fff; outline: 0; padding: 5px 15px } .login button, .login select { cursor:pointer; } .login-message { font-size: 12px; left: 0; position: absolute; text-align: center; width: 100% } .login-link { display: inline-block; font-size: 12px; font-style: oblique; margin-left: 10px; position: absolute; right: 0 } .login-link img { float: right; height: 24px; margin-left: 5px; margin-top: 4px } .header form { display: none; float: right; height: 32px; position: inherit; right: 0 } .header form button { color: transparent; display: inherit; height: 100%; position: inherit } .dialog h3 { color: #8f908a; cursor: move; font-size: 16px; height: 32px; line-height: 32px; margin: 5px; position: relative } .dialog .dialog-content { background: #272822; bottom: 0; left: 0; margin: 5px; overflow: auto; position: absolute; right: 0; top: 45px } .dialog-content ul { list-style: none; width: calc(100% - 10px) } .dialog-content ul li a { cursor: default; display: inline-block; font-size: 16px; padding: 4px; width: 100% } .sh-0 { border: 1px solid #eee } .sh-1 { box-shadow: 2px 2px 10px 2px rgba(0, 0, 0, .16), 2px 2px 5px 2px rgba(0, 0, 0, .26) } .sh-2 { box-shadow: 0 6px 20px 0 rgba(0, 0, 0, .19), 0 8px 17px 0 rgba(0, 0, 0, .2) } .sh-3 { box-shadow: 0 17px 50px 0 rgba(0, 0, 0, .19), 0 12px 15px 0 rgba(0, 0, 0, .24) } .sh-4 { box-shadow: 0 25px 55px 0 rgba(0, 0, 0, .21), 0 16px 28px 0 rgba(0, 0, 0, .22) } .sh-5 { box-shadow: 0 40px 77px 0 rgba(0, 0, 0, .22), 0 27px 24px 0 rgba(0, 0, 0, .2) } .icon { background: none; color: #8f908a; cursor: pointer; float: right; margin-left: 2px; padding: 6px; height: 20px; width: 20px; } .dialog-content ul li a [class^="wde-"]:first-child, .dialog-content ul li a [class*=" wde-"]:first-child { float: left } .dialog-content ul li a [class^="wde-"], .dialog-content ul li a [class*=" wde-"] { margin-right: 5px } .icon:active { background: #272822 } .mergely::before, .adminer::before, .js-beautify::before { display: inline-flex; float: right; position: relative } .adminer::before { top: -3px; content: url(icons/ems.png) } .mergely::before { top: -3px; content: url(icons/mergely.png) } .js-beautify::before { top: -3px; content: url(icons/jsbeautify.png) } #current-path { color: #8f908a; font-size: 14px; font-weight: 400; line-height: 28px; text-decoration: underline } .dialog-upload { background: #2f3129; bottom: 0; color: #fff; display: inline-flex; line-height: 1.9; margin: 10px 35px 75px 10px; padding: 10px; position: absolute; right: 0; transition: all .2s linear; z-index: 9999 } .separator { background: #595a53; float: right; height: 100%; margin-left: 2px; width: 1px } .hidden { opacity: 0; visibility: hidden } .text-center { text-align: center } table.hovertable { border-collapse: collapse; border-color: #999; border-width: 1px; color: #333; font: 11px verdana, arial, sans-serif; margin: 5px auto 5px auto;} table.hovertable th { background: #2f3129; border-color: #8f908a; border-style: solid; border-width: 1px; color: #f5f5f5; font-weight: 700; padding: 8px } table.hovertable tr { background: #262721 } table.hovertable tbody tr:hover { background: #2f3129 } table.hovertable td { border-color: #8f908a; border-style: solid; border-width: 1px; color: #fff; padding: 8px } .grip { border-color: transparent transparent rgba(47, 49, 41, 1); border-style: solid; border-width: 0 0 20px 20px; bottom: 0; cursor: nw-resize; height: 0; position: absolute; right: 0; width: 0 } .no-select{ -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; } svg{ cursor:default; } .dialog-content ul li a:hover, .icon:hover { background: #49483e } ::-webkit-scrollbar { height: 5px; width: 5px } ::-webkit-scrollbar-track { background: #202020 } ::-webkit-scrollbar-thumb { background: #8f908a; border-radius: 0 }