diff options
Diffstat (limited to 'html/assets/css')
| -rw-r--r-- | html/assets/css/admin.css | 86 | ||||
| -rw-r--r-- | html/assets/css/class.css | 348 | ||||
| -rw-r--r-- | html/assets/css/wiki.css | 348 |
3 files changed, 391 insertions, 391 deletions
diff --git a/html/assets/css/admin.css b/html/assets/css/admin.css index 0dd338f..4bd8718 100644 --- a/html/assets/css/admin.css +++ b/html/assets/css/admin.css @@ -1,35 +1,35 @@ :root { - --wiki-btn-blue: #337ab7; - --wiki-btn-cyan: #5bc0de; - --wiki-btn-grey: #c9c9c9; - --wiki-btn-grey-light: #c9c9c999; + --class-btn-blue: #337ab7; + --class-btn-cyan: #5bc0de; + --class-btn-grey: #c9c9c9; + --class-btn-grey-light: #c9c9c999; } -.wiki .manage { +.classroom .manage { width: 100%; max-width: 1600px; margin: 0 auto 2em; } -.wiki .manage.maximized { max-width: 1960px; } -.wiki .manage.minimized { max-width: 960px; } -.wiki .manage.edit-post { max-width: 1420px; } +.classroom .manage.maximized { max-width: 1960px; } +.classroom .manage.minimized { max-width: 960px; } +.classroom .manage.edit-post { max-width: 1420px; } -.wiki .edit-post textarea[name=intro] { height: 12vh; } -.wiki .edit-post textarea[name=body] { +.classroom .edit-post textarea[name=intro] { height: 12vh; } +.classroom .edit-post textarea[name=body] { height: calc(100vh - 492px); min-height:320px; font-family: Consolas, 'Ubuntu Mono','Courier New', Courier, monospace; color: #333; } -.wiki .edit-post .post-media button.over-bar { margin: -26px 0 0 0; } -.wiki .edit-post .post-media ul { +.classroom .edit-post .post-media button.over-bar { margin: -26px 0 0 0; } +.classroom .edit-post .post-media ul { border: 1px solid #ccc; border-radius: 4px; padding: 6px; } -.wiki .edit-post .post-media ul li { +.classroom .edit-post .post-media ul li { border-bottom: 1px solid #ddd; list-style-type: none; padding: 3px 6px; @@ -38,92 +38,92 @@ justify-content: space-between; align-items: center; } -.wiki .edit-post .post-media ul li:last-child { border-bottom: none ;} -.wiki .edit-post .post-media ul li:hover { background: #eee; } +.classroom .edit-post .post-media ul li:last-child { border-bottom: none ;} +.classroom .edit-post .post-media ul li:hover { background: #eee; } -.wiki .manage h2 { +.classroom .manage h2 { font-size: 20px; color: #445; margin: 20px 0; } -.wiki .manage.edit-post textarea { width: 100% !important;} -.wiki .manage.edit-post .select2-selection { min-height: 34px; } +.classroom .manage.edit-post textarea { width: 100% !important;} +.classroom .manage.edit-post .select2-selection { min-height: 34px; } -.wiki .manage.edit-post select#status.published { +.classroom .manage.edit-post select#status.published { background-color: #5cb85c; border-color: #4cae4c; color: #fff; text-align: center; } -.wiki .manage.edit-post select#status option { +.classroom .manage.edit-post select#status option { background: #fff; color: #333; } /* --- optional fields: defaut=hide --- */ -.wiki .edit-post .optional label { +.classroom .edit-post .optional label { margin-bottom: 1em; padding-bottom: .5em; - border-bottom: 1px solid var(--wiki-btn-grey-light) + border-bottom: 1px solid var(--class-btn-grey-light) } -.wiki .edit-post .optional label.show { +.classroom .edit-post .optional label.show { margin-bottom: unset; border: none; } -.wiki .edit-post .optional label:hover { +.classroom .edit-post .optional label:hover { cursor: pointer; - color: var(--wiki-btn-blue); + color: var(--class-btn-blue); } -.wiki .edit-post .optional label::after { float: right; content: "+"; } -.wiki .edit-post .optional label.show::after { content: "–"; } -.wiki .edit-post .optional label + div { display: none; } -.wiki .edit-post .optional label.show + div { display: block; } +.classroom .edit-post .optional label::after { float: right; content: "+"; } +.classroom .edit-post .optional label.show::after { content: "–"; } +.classroom .edit-post .optional label + div { display: none; } +.classroom .edit-post .optional label.show + div { display: block; } .alert.alert-info.title-bar { min-height: 52px; margin-top: 20px; } .alert.alert-info.title-bar button { margin-left: 8px; } -.wiki .title-bar { +.classroom .title-bar { display: flex; justify-content: space-between; align-items: center; padding: 8px 8px 8px 16px; } -.wiki .action-btn button { float: right; } +.classroom .action-btn button { float: right; } -.wiki .top-bar { padding: 4px 0; } +.classroom .top-bar { padding: 4px 0; } -.wiki .top-bar .breadcrumb .btn { +.classroom .top-bar .breadcrumb .btn { margin-left: 0; margin-right: 8px; border-radius: 3px; - color: var(--wiki-btn-blue); + color: var(--class-btn-blue); } -.wiki .top-bar .btn:hover { - background-color: var(--wiki-btn-grey-light); +.classroom .top-bar .btn:hover { + background-color: var(--class-btn-grey-light); } -.wiki .top-bar .btn.selected { +.classroom .top-bar .btn.selected { color: #fff; - background-color: var(--wiki-btn-blue); + background-color: var(--class-btn-blue); } /* --- dataTables --- */ -.wiki .manage .dataTable tbody tr:hover { background: #f8f8f8; } -.wiki .manage .dataTable .dt-actions { width: 48px; text-align: right } +.classroom .manage .dataTable tbody tr:hover { background: #f8f8f8; } +.classroom .manage .dataTable .dt-actions { width: 48px; text-align: right } /* --- unpublished posts -- */ -.wiki .manage .dataTable .fa-eye-slash { color: #999; } +.classroom .manage .dataTable .fa-eye-slash { color: #999; } -.wiki .js-copy:hover::after { +.classroom .js-copy:hover::after { opacity: 0; pointer-events: none; background: #ddd7; @@ -137,7 +137,7 @@ transform: translate(-50%, 0); } -.wiki .js-copy.copied:hover::after { +.classroom .js-copy.copied:hover::after { content: "Αντιγράφηκε"; opacity: 1; margin-top: -22px; diff --git a/html/assets/css/class.css b/html/assets/css/class.css new file mode 100644 index 0000000..6acb49e --- /dev/null +++ b/html/assets/css/class.css @@ -0,0 +1,348 @@ +/** Classroom sections + * (main layout css-classes) + * ----------------------------------------------------------------------------- + * .classroom { + * .top-bar { + * .breadcrumb + * .admin + * } + * .side-bar { + * .search + * .categories + * } + * .content + * } + * ----------------------------------------------------------------------------- + */ + + +/* Variables + * ---------------------------------------------------------------------------- + */ + +:root { + --class-blue: #337ab7; + --class-blue-opaque: #337ab799; + --class-blue-dark: #082e44; + --class-orange: #f47920; + --class-orange-opaque: #f4792099; + --class-grey-background: #eeedeb; + --class-red: #d13; +} + + + +/* main layout classes + * ---------------------------------------------------------------------------- + */ + +.classroom .top-bar { + display: flex; + justify-content: space-between; + align-items: center; + padding: 10px 14px; +} + +.classroom .top-bar .breadcrumb { margin: 0; padding: 0; background: none; } + + +.classroom .top-bar .admin .dropdown-menu .fas { + width: 32px; + text-align: center; +} + + + +/* category list menu + * ----------------------------------------------------------------------------- + */ + + .classroom .side-bar { padding-top: 20px; } + .classroom .side-bar h3 { + font-weight: 600; font-size: 1.4em; + color: var(--class-blue); +} + + /* --- ul > li > a --- */ + +.classroom .side-bar ul { list-style: none; padding: 0; } +.classroom .side-bar ul li { margin: 0.5em 0; } +.classroom .side-bar ul li a { + display: flex; + padding: .2em; + background: #4442; + border-radius: 6px; + transition: background 0.3s; +} +.classroom .side-bar ul li a:hover, +.classroom .side-bar ul li a:active { + background: #cde; + text-decoration: none; +} + +/* --- li > a > span --- */ + +.classroom .side-bar ul li a span { + display: block; + align-self: center; + padding: .3em; +} +.classroom .side-bar ul li a .label { + font-size: 13px; + color: var(--class-blue-dark); + flex-grow: 1; + text-align: left; + padding-left: 1em; + border-radius: 6px; + white-space: normal; + font-weight: 400; +} + +/* --- inner --- */ + +.classroom .side-bar ul .inner { + padding-left: 1em; + overflow: hidden; + display: none; +} +.classroom .side-bar ul .inner.show { display: block; } + +/* --- has-childs | toggler --- */ + +.classroom .side-bar ul li a.has-childs { background: #9bf4; } +.classroom .side-bar ul li a.has-childs:hover { background: #cde;} + +.classroom .side-bar ul li a.has-childs .label { + font-weight: 600; + border-radius: 6px 0 0 6px; + width: calc(100% - 36px); +} + +.classroom .side-bar ul li a.has-childs .toggler { + text-align: center; + width: 32px; + font-size: 15px; + border-radius: 4px; + background: #7774; + font-weight: 700; +} +.classroom .side-bar ul li a.has-childs .toggler:hover { + background: var(--class-blue); + color: #fff; +} +.classroom .side-bar ul li a.selected { + background: var(--class-orange-opaque); +} +.classroom .side-bar ul li a:hover, +.classroom .side-bar ul li a:active, +.classroom .side-bar ul li a:focus, +.classroom .side-bar ul li a:visited, +.classroom .side-bar ul li a:link, +.classroom .side-bar ul li a span:hover, +.classroom .side-bar ul li a span:active, +.classroom .side-bar ul li a span:focus, +.classroom .side-bar ul li a span:visited, +.classroom .side-bar ul li a span:link, +.classroom .side-bar ul li a span:target { text-decoration: none !important; } + + + +.classroom .post img { max-width: 100%; } + + + +/** breadcrumb + * ----------------------------------------------------------------------------- + */ + +.classroom .breadcrumb { counter-reset: var(--class-blue); } +.classroom .breadcrumb i.fas { padding: 0 6px; } + + + + +/** content + * ----------------------------------------------------------------------------- + */ + +.classroom .content--wrapper { + max-width: 1024px; + width: 100%; + margin: 1em auto; + padding: 0 2em 2em 2em; +} +.classroom .content h2 { + font-weight: 700; + font-size: 24px; + padding: 8px 3em 1em 0; /* 1em 3em 1em 0; */ + color: var(--class-blue-dark); +} +.classroom .content h3 { + font-weight: 600; font-size: 1.4em; + padding: 1em 3em 1em 0; + color: var(--class-blue); + border-bottom: 1px dashed var(--class-blue-opaque); +} +.classroom .content h3 span { font-weight: 400; color: #444; } +.classroom .content p { + line-height: 150%; + padding: 5px 0; +} + +/* --- post: medias -- */ + +.classroom .content--wrapper .medias { + padding: 2em 0 1em; + border-top: 1px solid var(--class-grey-background); +} +.classroom .content--wrapper .medias ol li { + margin-left: -12px; + padding: 2px 8px; +} +.classroom .content--wrapper .medias ol li::marker { + font-size: 12px; + color: #999; +} + +/* --- post: tags --- */ + +.classroom .content--wrapper .tags { + padding: 2em 0 1em; + border-top: 1px solid var(--class-grey-background); +} +.classroom .content--wrapper .tags a { + color: #444; + background-color: var(--class-grey-background); + padding: 6px 12px; + margin: 6px; + border-radius: 3px; +} + + + + +/** sub-categories on category page + * ----------------------------------------------------------------------------- + */ + +.classroom .category-childs { margin: 1em; padding: 1em; } + +.classroom .category-childs a { + display: inline-block; + margin: .5em; + padding: .2em 2em; + border-radius: 2em; + border: 1px solid var(--class-blue); + line-height: 2em; + font-weight: 600; + transition: background 0.3s; +} + +.classroom .category-childs a:hover { + background-color: var(--class-blue); + color: #fffe; + text-decoration: none; +} + + + + + +/** articles-list + * ----------------------------------------------------------------------------- + * 22 | Title of artivle + * July | path / of / categories + * 2023 | * some intro of article + * ----------------------------------------------------------------------------- + */ +.classroom .post-card { + padding: .5em; + margin: 1em; + border-bottom: 1px solid #7773; + display: flex; +} +.classroom .post-card .post-card--content { + flex-grow: 1; + width: calc(100% - 90px); +} +.classroom .post-card h3 { padding: 0; margin: 0; border: none; } +.classroom .post-card h3 a { display: block; } +.classroom .post-card h3 a:hover { color: #f47920; } +.classroom .post-card .category { color: #566; } +.classroom .post-card .intro { + font-style: italic; + font-size: 16px; +} +/* --- date block --- */ +.classroom .date { + display: flex; + flex-direction: column; + width: 90px; +} +.classroom .date p { + padding: 0; margin: 0; + line-height: 115%; + text-align: center; +} +.classroom .date .day { font-size: 24px; color: var(--class-blue-opaque); } +.classroom .date .month { font-size: 16px; color: #555; } +.classroom .date .year { font-size: 12px; color: #666; } + + + + + +/** post (article) + * ----------------------------------------------------------------------------- + */ + + + +.classroom .post h2 { padding-bottom: 0; } + +.classroom .post h2 span { float:right; margin-right: -3em;} + +.classroom .post .intro { + font-style: italic; + font-size: 18px; + color: var(--class-blue-dark); + padding-bottom: 1em; +} + +.classroom .post .post--date { + padding: 0; + color: var(--class-blue); +} + +.classroom .article-body img { + display: block; + max-width: 100%; + margin: 1em auto; +} +/* +.classroom .article-body a.modal-toggler { + padding: 0 16px; + background: #def; + color: #334; + border-radius: 3px; + text-decoration: none; + border: 1px solid var(--class-blue-opaque); +} +.classroom .article-body a.modal-toggler:hover { background: var(--class-blue); color: #fff; } +*/ +.classroom .article-body table { + margin: 20px auto; + min-width: 67%; + border-spacing: 6px 0; + border-collapse: separate; +} +.classroom .article-body table tr { margin: 4px; } +.classroom .article-body table thead th { + color: var(--class-btn-blue); + border-bottom: 3px solid var(--class-blue); + padding: 0 8px; +} +.classroom .article-body table tbody td { + padding: 6px 8px; + border-bottom: 1px solid var(--class-grey-background); +}
\ No newline at end of file diff --git a/html/assets/css/wiki.css b/html/assets/css/wiki.css deleted file mode 100644 index 7599de9..0000000 --- a/html/assets/css/wiki.css +++ /dev/null @@ -1,348 +0,0 @@ -/** Wiki sections - * (main layout css-classes) - * ----------------------------------------------------------------------------- - * .wiki { - * .top-bar { - * .breadcrumb - * .admin - * } - * .side-bar { - * .search - * .categories - * } - * .content - * } - * ----------------------------------------------------------------------------- - */ - - -/* Variables - * ---------------------------------------------------------------------------- - */ - -:root { - --wiki-blue: #337ab7; - --wiki-blue-opaque: #337ab799; - --wiki-blue-dark: #082e44; - --wiki-orange: #f47920; - --wiki-orange-opaque: #f4792099; - --wiki-grey-background: #eeedeb; - --wiki-red: #d13; -} - - - -/* main layout classes - * ---------------------------------------------------------------------------- - */ - -.wiki .top-bar { - display: flex; - justify-content: space-between; - align-items: center; - padding: 10px 14px; -} - -.wiki .top-bar .breadcrumb { margin: 0; padding: 0; background: none; } - - -.wiki .top-bar .admin .dropdown-menu .fas { - width: 32px; - text-align: center; -} - - - -/* category list menu - * ----------------------------------------------------------------------------- - */ - - .wiki .side-bar { padding-top: 20px; } - .wiki .side-bar h3 { - font-weight: 600; font-size: 1.4em; - color: var(--wiki-blue); -} - - /* --- ul > li > a --- */ - -.wiki .side-bar ul { list-style: none; padding: 0; } -.wiki .side-bar ul li { margin: 0.5em 0; } -.wiki .side-bar ul li a { - display: flex; - padding: .2em; - background: #4442; - border-radius: 6px; - transition: background 0.3s; -} -.wiki .side-bar ul li a:hover, -.wiki .side-bar ul li a:active { - background: #cde; - text-decoration: none; -} - -/* --- li > a > span --- */ - -.wiki .side-bar ul li a span { - display: block; - align-self: center; - padding: .3em; -} -.wiki .side-bar ul li a .label { - font-size: 13px; - color: var(--wiki-blue-dark); - flex-grow: 1; - text-align: left; - padding-left: 1em; - border-radius: 6px; - white-space: normal; - font-weight: 400; -} - -/* --- inner --- */ - -.wiki .side-bar ul .inner { - padding-left: 1em; - overflow: hidden; - display: none; -} -.wiki .side-bar ul .inner.show { display: block; } - -/* --- has-childs | toggler --- */ - -.wiki .side-bar ul li a.has-childs { background: #9bf4; } -.wiki .side-bar ul li a.has-childs:hover { background: #cde;} - -.wiki .side-bar ul li a.has-childs .label { - font-weight: 600; - border-radius: 6px 0 0 6px; - width: calc(100% - 36px); -} - -.wiki .side-bar ul li a.has-childs .toggler { - text-align: center; - width: 32px; - font-size: 15px; - border-radius: 4px; - background: #7774; - font-weight: 700; -} -.wiki .side-bar ul li a.has-childs .toggler:hover { - background: var(--wiki-blue); - color: #fff; -} -.wiki .side-bar ul li a.selected { - background: var(--wiki-orange-opaque); -} -.wiki .side-bar ul li a:hover, -.wiki .side-bar ul li a:active, -.wiki .side-bar ul li a:focus, -.wiki .side-bar ul li a:visited, -.wiki .side-bar ul li a:link, -.wiki .side-bar ul li a span:hover, -.wiki .side-bar ul li a span:active, -.wiki .side-bar ul li a span:focus, -.wiki .side-bar ul li a span:visited, -.wiki .side-bar ul li a span:link, -.wiki .side-bar ul li a span:target { text-decoration: none !important; } - - - -.wiki .post img { max-width: 100%; } - - - -/** breadcrumb - * ----------------------------------------------------------------------------- - */ - -.wiki .breadcrumb { counter-reset: var(--wiki-blue); } -.wiki .breadcrumb i.fas { padding: 0 6px; } - - - - -/** content - * ----------------------------------------------------------------------------- - */ - -.wiki .content--wrapper { - max-width: 1024px; - width: 100%; - margin: 1em auto; - padding: 0 2em 2em 2em; -} -.wiki .content h2 { - font-weight: 700; - font-size: 24px; - padding: 8px 3em 1em 0; /* 1em 3em 1em 0; */ - color: var(--wiki-blue-dark); -} -.wiki .content h3 { - font-weight: 600; font-size: 1.4em; - padding: 1em 3em 1em 0; - color: var(--wiki-blue); - border-bottom: 1px dashed var(--wiki-blue-opaque); -} -.wiki .content h3 span { font-weight: 400; color: #444; } -.wiki .content p { - line-height: 150%; - padding: 5px 0; -} - -/* --- post: medias -- */ - -.wiki .content--wrapper .medias { - padding: 2em 0 1em; - border-top: 1px solid var(--wiki-grey-background); -} -.wiki .content--wrapper .medias ol li { - margin-left: -12px; - padding: 2px 8px; -} -.wiki .content--wrapper .medias ol li::marker { - font-size: 12px; - color: #999; -} - -/* --- post: tags --- */ - -.wiki .content--wrapper .tags { - padding: 2em 0 1em; - border-top: 1px solid var(--wiki-grey-background); -} -.wiki .content--wrapper .tags a { - color: #444; - background-color: var(--wiki-grey-background); - padding: 6px 12px; - margin: 6px; - border-radius: 3px; -} - - - - -/** sub-categories on category page - * ----------------------------------------------------------------------------- - */ - -.wiki .category-childs { margin: 1em; padding: 1em; } - -.wiki .category-childs a { - display: inline-block; - margin: .5em; - padding: .2em 2em; - border-radius: 2em; - border: 1px solid var(--wiki-blue); - line-height: 2em; - font-weight: 600; - transition: background 0.3s; -} - -.wiki .category-childs a:hover { - background-color: var(--wiki-blue); - color: #fffe; - text-decoration: none; -} - - - - - -/** articles-list - * ----------------------------------------------------------------------------- - * 22 | Title of artivle - * July | path / of / categories - * 2023 | * some intro of article - * ----------------------------------------------------------------------------- - */ -.wiki .post-card { - padding: .5em; - margin: 1em; - border-bottom: 1px solid #7773; - display: flex; -} -.wiki .post-card .post-card--content { - flex-grow: 1; - width: calc(100% - 90px); -} -.wiki .post-card h3 { padding: 0; margin: 0; border: none; } -.wiki .post-card h3 a { display: block; } -.wiki .post-card h3 a:hover { color: #f47920; } -.wiki .post-card .category { color: #566; } -.wiki .post-card .intro { - font-style: italic; - font-size: 16px; -} -/* --- date block --- */ -.wiki .date { - display: flex; - flex-direction: column; - width: 90px; -} -.wiki .date p { - padding: 0; margin: 0; - line-height: 115%; - text-align: center; -} -.wiki .date .day { font-size: 24px; color: var(--wiki-blue-opaque); } -.wiki .date .month { font-size: 16px; color: #555; } -.wiki .date .year { font-size: 12px; color: #666; } - - - - - -/** post (article) - * ----------------------------------------------------------------------------- - */ - - - -.wiki .post h2 { padding-bottom: 0; } - -.wiki .post h2 span { float:right; margin-right: -3em;} - -.wiki .post .intro { - font-style: italic; - font-size: 18px; - color: var(--wiki-blue-dark); - padding-bottom: 1em; -} - -.wiki .post .post--date { - padding: 0; - color: var(--wiki-blue); -} - -.wiki .article-body img { - display: block; - max-width: 100%; - margin: 1em auto; -} -/* -.wiki .article-body a.modal-toggler { - padding: 0 16px; - background: #def; - color: #334; - border-radius: 3px; - text-decoration: none; - border: 1px solid var(--wiki-blue-opaque); -} -.wiki .article-body a.modal-toggler:hover { background: var(--wiki-blue); color: #fff; } -*/ -.wiki .article-body table { - margin: 20px auto; - min-width: 67%; - border-spacing: 6px 0; - border-collapse: separate; -} -.wiki .article-body table tr { margin: 4px; } -.wiki .article-body table thead th { - color: var(--wiki-btn-blue); - border-bottom: 3px solid var(--wiki-blue); - padding: 0 8px; -} -.wiki .article-body table tbody td { - padding: 6px 8px; - border-bottom: 1px solid var(--wiki-grey-background); -}
\ No newline at end of file |
