Something went wrong. Try again.
add or update alt text on your media forked from psingletary.com/verifier
Something went wrong. Try again.
20 kB · 1025 lines
CSS
at master
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697989910010110210310410510610710810911011111211311411511611711811912012112212312412512612712812913013113213313413513613713813914014114214314414514614714814915015115215315415515615715815916016116216316416516616716816917017117217317417517617717817918018118218318418518618718818919019119219319419519619719819920020120220320420520620720820921021121221321421521621721821922022122222322422522622722822923023123223323423523623723823924024124224324424524624724824925025125225325425525625725825926026126226326426526626726826927027127227327427527627727827928028128228328428528628728828929029129229329429529629729829930030130230330430530630730830931031131231331431531631731831932032132232332432532632732832933033133233333433533633733833934034134234334434534634734834935035135235335435535635735835936036136236336436536636736836937037137237337437537637737837938038138238338438538638738838939039139239339439539639739839940040140240340440540640740840941041141241341441541641741841942042142242342442542642742842943043143243343443543643743843944044144244344444544644744844945045145245345445545645745845946046146246346446546646746846947047147247347447547647747847948048148248348448548648748848949049149249349449549649749849950050150250350450550650750850951051151251351451551651751851952052152252352452552652752852953053153253353453553653753853954054154254354454554654754854955055155255355455555655755855956056156256356456556656756856957057157257357457557657757857958058158258358458558658758858959059159259359459559659759859960060160260360460560660760860961061161261361461561661761861962062162262362462562662762862963063163263363463563663763863964064164264364464564664764864965065165265365465565665765865966066166266366466566666766866967067167267367467567667767867968068168268368468568668768868969069169269369469569669769869970070170270370470570670770870971071171271371471571671771871972072172272372472572672772872973073173273373473573673773873974074174274374474574674774874975075175275375475575675775875976076176276376476576676776876977077177277377477577677777877978078178278378478578678778878979079179279379479579679779879980080180280380480580680780880981081181281381481581681781881982082182282382482582682782882983083183283383483583683783883984084184284384484584684784884985085185285385485585685785885986086186286386486586686786886987087187287387487587687787887988088188288388488588688788888989089189289389489589689789889990090190290390490590690790890991091191291391491591691791891992092192292392492592692792892993093193293393493593693793893994094194294394494594694794894995095195295395495595695795895996096196296396496596696796896997097197297397497597697797897998098198298398498598698798898999099199299399499599699799899910001001100210031004100510061007100810091010101110121013101410151016101710181019102010211022102310241025/* src/components/Admin/AdminPanel.css */.admin-panel { font-family: "articulat-cf", sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; color: var(--text); background-color: var(--background); transition: color 0.3s ease, background-color 0.3s ease; } /* Header */ .admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; padding-bottom: 10px; margin-top: 20px; } .admin-header h1 { margin: 0; color: var(--button-bg); font-size: 1.9em; font-weight: 800; } /* Tab navigation - Updated */ .nav-tabs { display: flex; margin: 0 auto; } .nav-tab { padding: 10px 20px; background-color: var(--navbar-bg); border: 1px solid var(--card-border); border-bottom: 2px solid transparent; cursor: pointer; font-size: 16px; margin: 0 5px; color: var(--text); transition: all 0.3s ease; } .nav-tab:hover { background-color: var(--background); border-color: var(--button-bg); } .nav-tab.active { border-bottom: 2px solid var(--button-bg); color: var(--button-bg); font-weight: bold; } /* Container layout */ .admin-container { display: grid; grid-template-columns: 300px 1fr; gap: 20px; height: 133.0vh; } /* Resources sidebar */ .resources-sidebar { flex-direction: column; height: 93.8%; overflow: scroll; padding: 10px; background: var(--navbar-bg); border: 5px solid var(--card-border); border-radius: 12px; box-shadow: none; } .sidebar-header { display: flex; justify-content: space-between; align-items: center; padding: 15px; background-color: var(--navbar-bg); border-bottom: 1px solid var(--card-border); transition: background-color 0.3s ease, border-color 0.3s ease; } .sidebar-header h2 { margin: 0; font-size: 18px; color: var(--text); } .sidebar-filters { padding: 10px 0px; border-bottom: 1px solid var(--card-border); background-color: var(--navbar-bg); transition: background-color 0.3s ease, border-color 0.3s ease; } .filter-group { margin-bottom: 8px; } .search-input { background-color: var(--navbar-bg); border: 1px solid var(--card-border); color: var(--text); font-size: 14px; padding: 8px; transition: all .3s ease; width: 100%; margin: 0px; display: flex; } .search-input:hover, .search-input:focus { border-color: var(--button-bg); background-color: var(--background); } .status-filter, .completeness-filter { width: 49%; padding: 6px; border: 1px solid var(--card-border); border-radius: 4px; font-size: 13px; margin-right: 2%; background-color: var(--navbar-bg); color: var(--text); transition: all 0.3s ease; } .status-filter:hover, .completeness-filter:hover, .status-filter:focus, .completeness-filter:focus { border-color: var(--button-bg); background-color: var(--background); } .completeness-filter { margin-right: 0; } .resources-list { overflow-y: auto; flex-grow: 1; } .resource-item { display: flex; flex-direction: column; padding: 0; border-bottom: 1px solid var(--card-border); cursor: pointer; transition: background-color 0.2s; position: relative; color: var(--text); } .resource-completeness-indicator { height: 3px; width: 100%; background-color: var(--card-border); } .completeness-bar { height: 100%; background-color: #52c41a; transition: width 0.3s; } .resource-item-content { display: flex; justify-content: space-between; padding: 12px 15px; } .resource-item:hover { background-color: var(--background); } .resource-item.selected { background-color: rgba(59, 154, 248, 0.1); border-left: 3px solid var(--button-bg); } .resource-item.status-draft .completeness-bar { background-color: #faad14; } .resource-item.status-review .completeness-bar { background-color: #1890ff; } .resource-item.status-published .completeness-bar { background-color: #52c41a; } .resource-item-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex-grow: 1; } .resource-item-meta { display: flex; gap: 5px; font-size: 12px; margin-top: 4px; } .status-badge { padding: 2px 6px; border-radius: 10px; font-size: 11px; text-transform: uppercase; font-weight: bold; } .status-badge.status-draft { background-color: rgba(250, 173, 20, 0.2); color: #faad14; border: 1px solid #faad14; } .status-badge.status-review { background-color: rgba(24, 144, 255, 0.2); color: #1890ff; border: 1px solid #1890ff; } .status-badge.status-published { background-color: rgba(82, 196, 26, 0.2); color: #52c41a; border: 1px solid #52c41a; } .featured-badge { background-color: rgba(114, 46, 209, 0.2); color: #722ed1; border: 1px solid #722ed1; padding: 2px 6px; border-radius: 10px; font-size: 11px; text-transform: uppercase; font-weight: bold; } .resource-item-actions { display: flex; gap: 5px; visibility: hidden; } .resource-item:hover .resource-item-actions { visibility: visible; } /* Resource editor */ .resource-editor { color: var(--text); height: 92%; overflow-y: auto; padding: 20px; transition: background-color .3s ease,border-color .3s ease; background: var(--navbar-bg); border: 5px solid var(--card-border); border-radius: 12px; box-shadow: none; } .editor-header { margin-bottom: 20px; } .resource-editor input { margin: 0px; } .editor-header h2 { margin: 0; color: var(--text); } .floating-actions { display: flex; align-items: center; gap: 15px; } .floating-save-button { background-color: var(--button-bg); color: var(--button-text); padding: 8px 16px; border-radius: 4px; font-weight: 700; font-size: 0.9em; transition: background-color 0.3s ease; margin: 0px; } .floating-save-button:hover { background-color: #004F84; } .status-selector { display: flex; align-items: center; gap: 10px; } .status-selector span { font-weight: 500; color: var(--text); } .status-buttons { display: flex; border: 1px solid var(--card-border); border-radius: 4px; overflow: hidden; } .status-button { padding: 6px 10px; background-color: var(--navbar-bg); border: none; border-right: 1px solid var(--card-border); cursor: pointer; font-size: 13px; color: var(--text); transition: all 0.3s ease; } .status-button:last-child { border-right: none; } .status-button.active { background-color: var(--button-bg); color: var(--button-text); } .status-button:hover:not(.active) { background-color: var(--background); } .resource-editor h2 { margin-top: 0; margin-bottom: 20px; color: var(--text); } /* Form styling */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-bottom: 15px; } .form-group { margin-bottom: 15px; } .form-group label { display: block; margin-bottom: 5px; font-weight: 500; color: var(--text); } .form-group input[type="text"], .form-group input[type="url"], .form-group input[type="number"], .form-group textarea { width: 100%; border: 1px solid var(--card-border); border-radius: 4px; font-size: 14px; background-color: var(--navbar-bg); color: var(--text); padding: 8px; transition: all 0.3s ease; } .form-group input[type="text"]:hover, .form-group input[type="url"]:hover, .form-group input[type="number"]:hover, .form-group textarea:hover, .form-group input[type="text"]:focus, .form-group input[type="url"]:focus, .form-group input[type="number"]:focus, .form-group textarea:focus { border-color: var(--button-bg); background-color: var(--background); } .form-group textarea { resize: vertical; min-height: 100px; font-family: articulat-cf; } .checkbox-group { display: flex; align-items: center; gap: 8px; } .checkbox-group input[type="checkbox"] { margin: 0; } .checkbox-group label { margin-bottom: 0; } /* Categories and Tags sections */ .categories-section, .tags-section { background-color: var(--background); border-radius: 6px; padding: 15px; border: 1px solid var(--card-border); transition: background-color 0.3s ease, border-color 0.3s ease; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; } .section-header label { font-weight: 600; margin-bottom: 0; color: var(--text); } .checkbox-list { max-height: 200px; overflow-y: auto; } .checkbox-item { display: flex; align-items: center; margin-bottom: 8px; gap: 8px; } .checkbox-item label { margin-bottom: 0; font-weight: normal; color: var(--text); } /* Form actions */ .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; } /* Buttons */ button { cursor: pointer; border: none; border-radius: 4px; font-size: 14px; transition: background-color 0.2s, opacity 0.2s; } button:disabled { opacity: 0.5; cursor: not-allowed; } .add-new-button { background-color: var(--button-bg); color: var(--button-text); padding: 6px 12px; font-size: 13px; font-weight: 700; } .add-new-button:hover { background-color: #004F84; } .delete-button { background: none; font-size: 16px; opacity: .7; padding: 3px 6px; margin: 0px; margin-left: 10px; margin-bottom: 10px; } .delete-button:hover { opacity: 1; background-color: rgba(244, 67, 54, 0.1); } .add-item-button { background-color: var(--navbar-bg); color: var(--text); padding: 4px 8px; font-size: 12px; border: 1px solid var(--card-border); transition: all 0.3s ease; } .add-item-button:hover { background-color: var(--background); border-color: var(--button-bg); } .save-button { background-color: var(--button-bg); color: var(--button-text); padding: 10px 20px; font-weight: 700; } .save-button:hover { background-color: #004F84; } .cancel-button { background-color: var(--navbar-bg); color: var(--text); padding: 10px 20px; border: 1px solid var(--card-border); transition: all 0.3s ease; } .cancel-button:hover { background-color: var(--background); border-color: var(--button-bg); } .logout-button { background-color: var(--navbar-bg); color: var(--text); padding: 8px 16px; border: 1px solid var(--card-border); transition: all 0.3s ease; margin: 0px; } .logout-button:hover { background-color: var(--background); border-color: var(--button-bg); } /* Alert messages */ .alert { padding: 12px 15px; margin-bottom: 20px; border-radius: 4px; font-weight: 500; } .alert.success { background-color: rgba(82, 196, 26, 0.1); border: 1px solid #52c41a; color: #52c41a; } .alert.error { background-color: rgba(245, 34, 45, 0.1); border: 1px solid #f5222d; color: #f5222d; } /* Loading spinner */ .admin-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; color: var(--text); background-color: var(--background); } .loading-spinner { border: 4px solid var(--card-border); border-top: 4px solid var(--button-bg); border-radius: 50%; width: 40px; height: 40px; animation: spin 1s linear infinite; margin-bottom: 15px; } /* Reorder container - Updated */ .reorder-container { max-width: 1200px; margin: 0 auto; padding: 20px; background: var(--navbar-bg); border: 5px solid var(--card-border); border-radius: 12px; color: var(--text); } .reorder-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .reorder-controls { display: flex; align-items: center; gap: 15px; } .reorder-mode-selector { display: flex; gap: 10px; } .mode-button { padding: 8px 16px; background-color: var(--navbar-bg); border: 1px solid var(--card-border); border-radius: 4px; cursor: pointer; color: var(--text); transition: all 0.3s ease; } .mode-button:hover { background-color: var(--background); border-color: var(--button-bg); } .mode-button.active { background-color: var(--button-bg); color: var(--button-text); border-color: var(--button-bg); } .category-select { padding: 8px; min-width: 200px; border: 1px solid var(--card-border); border-radius: 4px; background-color: var(--navbar-bg); color: var(--text); transition: all 0.3s ease; } .category-select:hover, .category-select:focus { border-color: var(--button-bg); background-color: var(--background); } /* Position input - New */ .position-control { display: flex; align-items: center; gap: 8px; margin-left: 10px; } .position-input { width: 60px; padding: 3px 5px; border: 1px solid var(--card-border); border-radius: 4px; background-color: var(--navbar-bg); color: var(--text); font-size: 13px; transition: all 0.3s ease; } .position-input:hover, .position-input:focus { border-color: var(--button-bg); background-color: var(--background); } /* Sortable resources list */ .sortable-resources { display: flex; flex-direction: column; gap: 10px; } .sortable-resource-item { display: flex; justify-content: space-between; align-items: center; padding: 15px; background-color: var(--background); border: 1px solid var(--card-border); border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,0.1); transition: all 0.3s ease; } .resource-info { flex: 1; } .resource-name { font-weight: bold; margin-bottom: 5px; color: var(--text); } .resource-meta { display: flex; gap: 10px; font-size: 0.9rem; align-items: center; flex-wrap: wrap; } .reorder-actions { display: flex; gap: 5px; } .move-button { width: 32px; height: 32px; background-color: var(--navbar-bg); border: 1px solid var(--card-border); border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 18px; color: var(--text); transition: all 0.3s ease; } .move-button:hover:not(:disabled) { background-color: var(--background); border-color: var(--button-bg); } .no-resources-message, .select-category-message { padding: 20px; text-align: center; color: var(--text); background-color: var(--navbar-bg); border: 1px solid var(--card-border); border-radius: 4px; margin-top: 20px; } .reorder-list h3 { color: var(--text); margin-top: 20px; margin-bottom: 15px; font-size: 18px; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Login form */ .admin-login-container { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: var(--background); transition: background-color 0.3s ease; } .admin-login-card { background-color: var(--navbar-bg); border-radius: 8px; border: 1px solid var(--card-border); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); padding: 30px; width: 100%; max-width: 400px; transition: background-color 0.3s ease, border-color 0.3s ease; } .admin-login-card h2 { margin-top: 0; margin-bottom: 20px; text-align: center; color: var(--text); } .login-button { background-color: var(--button-bg); color: var(--button-text); padding: 10px 0; width: 100%; font-size: 16px; margin-top: 10px; font-weight: 700; } .admin-container form { border: 0px; padding: 0px; } .login-button:hover { background-color: #004F84; } .auth-error { background-color: rgba(245, 34, 45, 0.1); border: 1px solid #f5222d; color: #f5222d; padding: 10px; border-radius: 4px; margin-bottom: 15px; font-size: 14px; } .completeness-badge { background-color: #f0f0f0; color: #333; font-size: 0.8rem; padding: 0.1rem 0.3rem; border-radius: 3px; margin-left: 5px; } .filter-group { margin-bottom: 10px; } .search-container { position: relative; display: flex; align-items: center; } .reset-filters-button { position: absolute; right: 10px; background: none; border: none; cursor: pointer; font-size: 16px; color: #666; } .featured-filter { width: 100%; padding: 8px; border: 1px solid var(--card-border); border-radius: 4px; margin-bottom: 5px; background-color: var(--navbar-bg); color: var(--text); transition: all 0.3s ease; } .featured-filter:hover, .featured-filter:focus { border-color: var(--button-bg); background-color: var(--background); } .reset-filters-button:hover { color: #ff3333; } .resources-summary { margin: 5px 0; font-size: 0.9rem; color: var(--text); opacity: 0.8; padding: 0 10px; } .category-filter, .tag-filter { width: 100%; padding: 8px; border: 1px solid var(--card-border); border-radius: 4px; margin-bottom: 5px; background-color: var(--navbar-bg); color: var(--text); transition: all 0.3s ease; } .category-filter:hover, .category-filter:focus, .tag-filter:hover, .tag-filter:focus { border-color: var(--button-bg); background-color: var(--background); } /* Accessibility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* Responsive design */ @media (max-width: 768px) { .admin-container { grid-template-columns: 1fr; } .floating-actions { align-items: center; display: flex; gap: 15px; justify-content: space-between; flex-direction: column; } .admin-container form { border: 0px; padding: 0px; align-content: center; display: block; } .form-group textarea { min-height: 100px; resize: vertical; font-family: articulat-cf; width: unset; } .admin-container { display: grid; gap: 0px; } .resource-editor { height: 235%; } .resources-sidebar { max-height: 80%; overflow-y: scroll; } .admin-panel { height: 2121.5px; } .form-row { grid-template-columns: 1fr; } .reorder-header { flex-direction: column; align-items: start; gap: 15px; } .reorder-controls { flex-direction: column; align-items: start; width: 100%; } .reorder-mode-selector { width: 100%; } .mode-button { flex: 1; text-align: center; } .category-selector { width: 100%; } .category-select { width: 100%; } .sortable-resource-item { flex-direction: column; align-items: start; gap: 10px; } .resource-meta { flex-direction: column; align-items: start; gap: 5px; } .reorder-actions { align-self: flex-end; } }