a
/
gosora
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
gosora/public/trumbowyg/ui/trumbowyg.custom.css

550 lines
14 KiB
CSS
Raw Normal View History

More work on Cosora, we have a screenshot of it up now, although it's super experimental at the moment. This commit might be a little broken, another is coming to fix things up! The topics list is now paginated. Refactored the error handling system. Added the Trumboyg WYSIWYG editor for Cosora. Moved Delete() out of the TopicStore and into *Topic You can now bulk delete and bulk lock topics on Cosora. h1s are now formatted properly on Firefox. Added more ARIA Labels. SuperModOnly is now a piece of middleware for the Control Panel routes. Refactored and extended the router generator. Improved the SEO for the paginators. Added bits of Microdata to improve SEO further. Wrote benchmarks for users.Get() and users.BypassGet() More errors are caught now. You can now attach pcss files to posts. Improved the error logging for JavaScript. Topic list avatars now link to the associated profiles. Added last poster avatars to the forum list.
2017-10-30 09:57:08 +00:00
/**
* Trumbowyg v2.8.1 - A lightweight WYSIWYG editor
* Default stylesheet for Trumbowyg editor. Modified by Azareal.
* ------------------------
adjust path
2022-02-21 03:53:13 +00:00
* @link http://alex-d.github.io/Trumbowyg & https://git.tuxpa.in/a/gosora
More work on Cosora, we have a screenshot of it up now, although it's super experimental at the moment. This commit might be a little broken, another is coming to fix things up! The topics list is now paginated. Refactored the error handling system. Added the Trumboyg WYSIWYG editor for Cosora. Moved Delete() out of the TopicStore and into *Topic You can now bulk delete and bulk lock topics on Cosora. h1s are now formatted properly on Firefox. Added more ARIA Labels. SuperModOnly is now a piece of middleware for the Control Panel routes. Refactored and extended the router generator. Improved the SEO for the paginators. Added bits of Microdata to improve SEO further. Wrote benchmarks for users.Get() and users.BypassGet() More errors are caught now. You can now attach pcss files to posts. Improved the error logging for JavaScript. Topic list avatars now link to the associated profiles. Added last poster avatars to the forum list.
2017-10-30 09:57:08 +00:00
* @license MIT
* @author Alexandre Demode (Alex-D)
* @author Azareal
*/
#trumbowyg-icons {
overflow: hidden;
visibility: hidden;
height: 0;
width: 0;
}
#trumbowyg-icons svg {
height: 0;
width: 0;
}
.trumbowyg-box *, .trumbowyg-box *::before, .trumbowyg-box *::after {
box-sizing: border-box;
}
.trumbowyg-box svg {
width: 17px;
height: 100%;
fill: #222222;
color: #222222;
opacity: 0.5;
}
.trumbowyg-box svg:hover {
width: 17px;
height: 100%;
fill: #222222;
color: #222222;
opacity: 0.75;
}
.trumbowyg-box, .trumbowyg-editor {
display: block;
position: relative;
width: 100%;
min-height: 150px;
margin: 0;
}
.trumbowyg-box.trumbowyg-fullscreen {
background: #FEFEFE;
border: none !important;
}
.trumbowyg-editor, .trumbowyg-textarea {
position: relative;
box-sizing: border-box;
padding: 20px;
min-height: 150px;
width: 100%;
border-style: none;
resize: none;
outline: none;
border: 1px solid #DDD;
overflow: hidden;
word-wrap: break-word;
overflow-wrap: break-word;
}
.trumbowyg-editor.trumbowyg-autogrow-on-enter, .trumbowyg-textarea.trumbowyg-autogrow-on-enter {
transition: height 150ms ease-out;
}
.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-box-blur .trumbowyg-editor::before {
color: transparent !important;
text-shadow: 0 0 7px #333; }
@media screen and (min-width: 0 \0) {
.trumbowyg-box-blur .trumbowyg-editor *, .trumbowyg-box-blur .trumbowyg-editor::before {
color: rgba(200, 200, 200, 0.6) !important;
}
}
.trumbowyg-box-blur .trumbowyg-editor img, .trumbowyg-box-blur .trumbowyg-editor hr {
opacity: 0.2;
}
.trumbowyg-textarea {
position: relative;
display: block;
overflow: auto;
border: none;
white-space: normal;
font-size: 14px;
font-family: "Inconsolata", "Consolas", "Courier", "Courier New", sans-serif;
line-height: 18px;
}
.trumbowyg-box.trumbowyg-editor-visible .trumbowyg-textarea {
height: 1px !important;
width: 25%;
min-height: 0 !important;
padding: 0 !important;
background: none;
opacity: 0 !important;
}
.trumbowyg-box.trumbowyg-editor-hidden .trumbowyg-textarea {
display: block;
}
.trumbowyg-box.trumbowyg-editor-hidden .trumbowyg-editor {
display: none;
}
.trumbowyg-box.trumbowyg-disabled .trumbowyg-textarea {
opacity: 0.8;
background: none;
}
.trumbowyg-editor[contenteditable=true]:empty:not(:focus)::before {
content: attr(placeholder);
color: #999;
pointer-events: none;
}
.trumbowyg-button-pane {
min-height: 36px;
margin: 0;
padding: 0px 5px;
position: relative;
list-style-type: none;
line-height: 10px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
z-index: 11;
display: flex;
}
.trumbowyg-button-pane::after {
content: " ";
display: block;
position: absolute;
top: 36px;
left: 0;
right: 0;
width: 100%;
height: 1px;
background: #d7e0e2;
}
.trumbowyg-button-pane .trumbowyg-button-group {
display: inline-block;
}
.trumbowyg-button-pane .trumbowyg-button-group:first-child {
margin-left: 10px;
}
.trumbowyg-button-pane .trumbowyg-button-group:last-child {
margin-right: auto;
}
.trumbowyg-button-pane .trumbowyg-button-group .trumbowyg-fullscreen-button svg {
color: transparent;
}
.trumbowyg-button-pane .trumbowyg-button-group:after {
content: "";
display: inline-block;
width: 1px;
margin: 0 5px;
height: 20px;
vertical-align: top;
border-right: 1px solid #d7e0e2;
margin-top: 8px;
}
.trumbowyg-button-pane .trumbowyg-button-group:first-child:before {
content: "";
display: inline-block;
width: 1px;
margin: 0 5px;
margin-right: 5px;
margin-bottom: 0px;
margin-left: 5px;
height: 20px;
vertical-align: top;
border-right: 1px solid #d7e0e2;
margin-top: 8px;
}
.trumbowyg-button-pane button {
display: inline-block;
position: relative;
width: 35px;
height: 35px;
padding: 1px 6px !important;
margin-bottom: 1px;
overflow: hidden;
border: none;
cursor: pointer;
background: none;
vertical-align: middle;
transition: background-color 150ms, opacity 150ms;
}
.trumbowyg-button-pane button.trumbowyg-textual-button {
width: auto;
line-height: 35px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.trumbowyg-button-pane.trumbowyg-disable button:not(.trumbowyg-not-disable):not(.trumbowyg-active), .trumbowyg-disabled .trumbowyg-button-pane button:not(.trumbowyg-not-disable):not(.trumbowyg-viewHTML-button) {
opacity: 0.2;
cursor: default;
}
.trumbowyg-button-pane.trumbowyg-disable .trumbowyg-button-group::before, .trumbowyg-disabled .trumbowyg-button-pane .trumbowyg-button-group::before {
background: #e3e9eb;
}
.trumbowyg-button-pane button:not(.trumbowyg-disable):hover, .trumbowyg-button-pane button:not(.trumbowyg-disable):focus, .trumbowyg-button-pane button.trumbowyg-active {
background-color: #FFFFFF;
outline: none;
}
.trumbowyg-button-pane .trumbowyg-open-dropdown::after {
display: block;
content: " ";
position: absolute;
top: 25px;
right: 3px;
height: 0;
width: 0;
border: 3px solid transparent;
border-top-color: #555555;
}
.trumbowyg-button-pane .trumbowyg-open-dropdown.trumbowyg-textual-button {
padding-left: 10px !important;
padding-right: 18px !important;
}
.trumbowyg-button-pane .trumbowyg-open-dropdown.trumbowyg-textual-button::after {
top: 17px;
right: 7px;
}
.trumbowyg-button-pane .trumbowyg-right {
float: right;
}
.trumbowyg-button-pane .trumbowyg-right::before {
display: none !important;
}
.trumbowyg-dropdown {
width: 200px;
border: 1px solid #ecf0f1;
padding: 5px 0;
border-top: none;
background: #FFF;
margin-left: -1px;
box-shadow: rgba(0, 0, 0, 0.1) 0 2px 3px;
z-index: 11;
}
.trumbowyg-dropdown button {
display: block;
width: 100%;
height: 35px;
line-height: 35px;
text-decoration: none;
background: #FFF;
padding: 0 10px;
color: #333 !important;
border: none;
cursor: pointer;
text-align: left;
font-size: 15px;
transition: all 150ms;
}
.trumbowyg-dropdown button:hover, .trumbowyg-dropdown button:focus {
background: #ecf0f1;
}
.trumbowyg-dropdown button svg {
float: left;
margin-right: 14px;
}
/* Modal box */
.trumbowyg-modal {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
max-width: 520px;
width: 100%;
height: 350px;
z-index: 11;
overflow: hidden;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.trumbowyg-modal-box {
position: absolute;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
max-width: 500px;
width: calc(100% - 20px);
padding-bottom: 45px;
z-index: 1;
background-color: #FFF;
text-align: center;
font-size: 14px;
box-shadow: rgba(0, 0, 0, 0.2) 0 2px 3px;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.trumbowyg-modal-box .trumbowyg-modal-title {
font-size: 24px;
font-weight: bold;
margin: 0 0 20px;
padding: 15px 0 13px;
display: block;
border-bottom: 1px solid #EEE;
color: #333;
background: #fbfcfc;
}
.trumbowyg-modal-box .trumbowyg-progress {
width: 100%;
height: 3px;
position: absolute;
top: 58px;
}
.trumbowyg-modal-box .trumbowyg-progress .trumbowyg-progress-bar {
background: #2BC06A;
width: 0;
height: 100%;
transition: width 150ms linear;
}
.trumbowyg-modal-box label {
display: block;
position: relative;
margin: 15px 12px;
height: 29px;
line-height: 29px;
overflow: hidden;
}
.trumbowyg-modal-box label .trumbowyg-input-infos {
display: block;
text-align: left;
height: 25px;
line-height: 25px;
transition: all 150ms;
}
.trumbowyg-modal-box label .trumbowyg-input-infos span {
display: block;
color: #69878f;
background-color: #fbfcfc;
border: 1px solid #DEDEDE;
padding: 0 7px;
width: 150px;
}
.trumbowyg-modal-box label .trumbowyg-input-infos span.trumbowyg-msg-error {
color: #e74c3c;
}
.trumbowyg-modal-box label.trumbowyg-input-error input, .trumbowyg-modal-box label.trumbowyg-input-error textarea {
border: 1px solid #e74c3c;
}
.trumbowyg-modal-box label.trumbowyg-input-error .trumbowyg-input-infos {
margin-top: -27px;
}
.trumbowyg-modal-box label input {
position: absolute;
top: 0;
right: 0;
height: 27px;
line-height: 27px;
border: 1px solid #DEDEDE;
background: #fff;
font-size: 14px;
max-width: 330px;
width: 70%;
padding: 0 7px;
transition: all 150ms;
}
.trumbowyg-modal-box label input:hover, .trumbowyg-modal-box label input:focus {
outline: none;
border: 1px solid #95a5a6;
}
.trumbowyg-modal-box label input:focus {
background: #fbfcfc;
}
.trumbowyg-modal-box .error {
margin-top: 25px;
display: block;
color: red;
}
.trumbowyg-modal-box .trumbowyg-modal-button {
position: absolute;
bottom: 10px;
right: 0;
text-decoration: none;
color: #FFF;
display: block;
width: 100px;
height: 35px;
line-height: 33px;
margin: 0 10px;
background-color: #333;
border: none;
cursor: pointer;
font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif;
font-size: 16px;
transition: all 150ms;
}
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit {
right: 110px;
background: #2bc06a;
}
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:hover, .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:focus {
background: #40d47e;
outline: none;
}
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-submit:active {
background: #25a25a;
}
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset {
color: #555;
background: #e6e6e6;
}
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:hover, .trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:focus {
background: #fbfbfb;
outline: none;
}
.trumbowyg-modal-box .trumbowyg-modal-button.trumbowyg-modal-reset:active {
background: #d5d5d5;
}
.trumbowyg-overlay {
position: absolute;
background-color: rgba(255, 255, 255, 0.5);
height: 100%;
width: 100%;
left: 0;
display: none;
top: 0;
z-index: 10; }
/**
* Fullscreen
*/
body.trumbowyg-body-fullscreen {
overflow: hidden; }
.trumbowyg-fullscreen {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
z-index: 99999;
}
.trumbowyg-fullscreen.trumbowyg-box, .trumbowyg-fullscreen .trumbowyg-editor {
border: none;
}
.trumbowyg-fullscreen .trumbowyg-editor, .trumbowyg-fullscreen .trumbowyg-textarea {
height: calc(100% - 37px) !important;
overflow: auto;
}
.trumbowyg-fullscreen .trumbowyg-overlay {
height: 100% !important;
}
.trumbowyg-fullscreen .trumbowyg-button-group .trumbowyg-fullscreen-button svg {
color: #222;
fill: transparent;
}
.trumbowyg-editor object, .trumbowyg-editor embed, .trumbowyg-editor video, .trumbowyg-editor img {
max-width: 100%;
}
.trumbowyg-editor video, .trumbowyg-editor img {
height: auto;
}
.trumbowyg-editor img {
cursor: move;
}
.trumbowyg-editor.trumbowyg-reset-css {
background: #FEFEFE !important;
font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif !important;
font-size: 14px !important;
line-height: 1.45em !important;
white-space: normal !important;
color: #333;
}
.trumbowyg-editor.trumbowyg-reset-css a {
color: #15c !important;
text-decoration: underline !important;
}
.trumbowyg-editor.trumbowyg-reset-css div, .trumbowyg-editor.trumbowyg-reset-css p, .trumbowyg-editor.trumbowyg-reset-css ul, .trumbowyg-editor.trumbowyg-reset-css ol, .trumbowyg-editor.trumbowyg-reset-css blockquote {
box-shadow: none !important;
background: none !important;
margin: 0 !important;
margin-bottom: 15px !important;
line-height: 1.4em !important;
font-family: "Trebuchet MS", Helvetica, Verdana, sans-serif !important;
font-size: 14px !important;
border: none;
}
.trumbowyg-editor.trumbowyg-reset-css iframe, .trumbowyg-editor.trumbowyg-reset-css object, .trumbowyg-editor.trumbowyg-reset-css hr {
margin-bottom: 15px !important;
}
.trumbowyg-editor.trumbowyg-reset-css blockquote {
margin-left: 32px !important;
font-style: italic !important;
color: #555;
}
.trumbowyg-editor.trumbowyg-reset-css ul, .trumbowyg-editor.trumbowyg-reset-css ol {
padding-left: 20px !important;
}
.trumbowyg-editor.trumbowyg-reset-css ul ul, .trumbowyg-editor.trumbowyg-reset-css ol ol, .trumbowyg-editor.trumbowyg-reset-css ul ol, .trumbowyg-editor.trumbowyg-reset-css ol ul {
border: none;
margin: 2px !important;
padding: 0 !important;
padding-left: 24px !important;
}
.trumbowyg-editor.trumbowyg-reset-css hr {
display: block;
height: 1px;
border: none;
border-top: 1px solid #CCC;
}
.trumbowyg-editor.trumbowyg-reset-css h1, .trumbowyg-editor.trumbowyg-reset-css h2, .trumbowyg-editor.trumbowyg-reset-css h3, .trumbowyg-editor.trumbowyg-reset-css h4 {
color: #111;
background: none;
margin: 0 !important;
padding: 0 !important;
font-weight: bold;
}
.trumbowyg-editor.trumbowyg-reset-css h1 {
font-size: 32px !important;
line-height: 38px !important;
margin-bottom: 20px !important;
}
.trumbowyg-editor.trumbowyg-reset-css h2 {
font-size: 26px !important;
line-height: 34px !important;
margin-bottom: 15px !important;
}
.trumbowyg-editor.trumbowyg-reset-css h3 {
font-size: 22px !important;
line-height: 28px !important;
margin-bottom: 7px !important;
}
.trumbowyg-editor.trumbowyg-reset-css h4 {
font-size: 16px !important;
line-height: 22px !important;
margin-bottom: 7px !important;
}